UI Engineering 101 for Designers

New
·

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.

Teams we've worked with

Vercel
Tailwind CSS
PlanetScale
Universe

This course is popular

72 people enrolled last week.

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

35 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

Expand all modules
  • Week 1

    Sep 30—Oct 6

    Week dates are set to instructor's time zone

    Modules

    • Introduction to web development

  • Week 2

    Oct 7—Oct 13

    Week dates are set to instructor's time zone

    Events

    • Oct

      12

      Optional: Mid-course Q&A

      Sat, Oct 12, 5:00 PM - 6:00 PM UTC

    Modules

    • Designing with an implementation mindset

  • Week 3

    Oct 14—Oct 20

    Week dates are set to instructor's time zone

    Modules

    • States and Forms

  • Week 4

    Oct 21—Oct 25

    Week dates are set to instructor's time zone

    Modules

    • Layout in components

What people are saying

        I've learned a lot from Mariana's designs. I'm looking forward to the course.
Shadcn

Shadcn

Creator of shadcn/ui, Design Engineer at Vercel
        This is going to be EPIC! Exactly what the industry needs and the perfect people to learn from.
Ridd

Ridd

Owner: figma.academy - dive.club. Founding designer: maven.com

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 2

$499

Dates

Sep 30—Oct 26, 2024

Payment Deadline

Sep 29, 2024
|

Bulk purchases

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 2

$499

Dates

Sep 30—Oct 26, 2024

Payment Deadline

Sep 29, 2024
|

Bulk purchases

$499

4 Weeks