UI Engineering 101 for Designers

4.1 (27)

·

4 Weeks

·

Cohort-based Course

Unlock the full potential of your UI design and engineering skillsets. Learn to design and translate polished components into HTML and CSS.

This course is popular

3 people enrolled last week.

Teams we've worked with

Vercel
Tailwind CSS
PlanetScale
Universe

Course overview

From Figma designs to high-fidelity HTML & CSS implementation

Design high-fidelity components in Figma with various design techniques to create high-fidelity web components. Colors, shadows, typography, etc. Everything to take your visuals to the next level.


Master Figma Design Techniques

Elevate your design skills using advanced Figma techniques to create high-fidelity web components, focusing on colors, shadows, typography, and more.


HTML & CSS Implementation

Translate your Figma designs into precise HTML and CSS components, no previous coding experience needed.


CSS Fundamentals and Layouts

Understand the CSS box model, layout properties, and various building techniques to create well-structured and polished web components.


Advanced Styling Techniques

Learn advanced CSS techniques like flexbox, grid layouts, stacked shadows, concentric radii, and elevation highlights to set your designs apart.


Pre-recorded lessons to learn at your pace

All lessons are pre-recorded for you to learn when it's best for your schedule.

Who this course is for

01

Designers wanting to learn the basics of UI Engineering. If you're curious about how to create pixel perfect polished components in code.

02

Engineers wanting to learn styling techniques. If you already know how to code but want to learn how to create better looking components.

03

This course is NOT for people wanting to learn JavaScript-related techniques. This is only for HTML and CSS building and styling techniques.

What you’ll get out of this course

Utilize various Figma design techniques for high-fidelity components.

Colors, shadows, typography, etc. Everything to take your visuals to the next level.

Translate Figma designs into pixel-perfect code.

Translate Figma designs into pixel-perfect HTML and CSS to bring your UI to where it's used. Perfect for designers aiming to bridge the gap between design and development.

Understand the CSS box model and layout properties.

CSS has many different ways to build with. We'll cover beginner, intermediate, and advanced building techniques for not only great structure, but amazing polish detail as well.

Apply advanced CSS techniques for stunning visuals.

Flexbox, concentric radii, stacking shadows, elevation highlights, etc. We'll cover many things to set your designs and implementations apart.

This course includes

1 interactive live session

Lifetime access to course materials

29 in-depth lessons

Direct access to instructor

Projects to apply learnings

Guided feedback & reflection

Private community of peers

Course certificate upon completion

Maven Satisfaction Guarantee

This course is backed by Maven’s guarantee. You can receive a full refund within 14 days after the course ends, provided you meet the completion criteria in our refund policy.

Course syllabus

Week 1

Jan 13—Jan 19

Week 2

Jan 20—Jan 26

    Designing with an implementation mindset

    6 items

Week 3

Jan 27—Feb 2

    States and interactions

    4 items

    Feb

    2

    Optional: Mid-course Q&A

    Sun 2/26:00 PM—7:00 PM (UTC)
    Optional

Week 4

Feb 3—Feb 7

4.1 (27 ratings)

What students are saying

Meet your instructors

Mariana Castilho

Mariana Castilho

Staff Product Designer // Pierre

Now building Pierre, the product engineering tool of the future, Mariana previously led product design in AI and Marketplace projects at Vercel. She specialized in bringing complex user interfaces and animations to life through code.

Derek Briggs

Derek Briggs

Director of Design // Clerk

Over 15 years of brand design, marketing design, product design, and UI engineering experience for top industry companies known for their quality and craft.

A pattern of wavy dots

Join an upcoming cohort

UI Engineering 101 for Designers

Cohort 4

$799

Dates

Jan 13—Feb 8, 2025

Payment Deadline

Jan 13, 2025
Get reimbursed

Course schedule

4-6 hours per week

  • Live Q&A

    Bi-weekly sessions to go over common questions and address specific support needs.

  • Design and build together

    We're not going to learn with existing shared assets, you're going to design and build by following along and creating your own work with us.

  • Projects that go with you

    We'll craft common components you'll take to your own UI.

A pattern of wavy dots

Join an upcoming cohort

UI Engineering 101 for Designers

Cohort 4

$799

Dates

Jan 13—Feb 8, 2025

Payment Deadline

Jan 13, 2025
Get reimbursed

$799

4.1 (27)

·

4 Weeks