Begin Here — Learn UI Design Intro

Core Thesis

“Beautiful, high-quality interface design, as much as it might feel subjective or arbitrary or magic, is not. It’s actually based in logic and rationale. And very importantly, that logic is learnable.”

Eric notes upfront that he doesn’t love soft intro content like this — but says there’s a point to it, because Learn UI Design has a different and opinionated take on how to teach UI design. And while there are over 5,000 students in the course (from basically every single industry-leading company), the explanations and frameworks differ quite a bit from what he’d call mainstream design curriculum.

Course Structure (7 Units)

The units aren’t arbitrary — each one answers a specific problem left by the previous one:

flowchart TD
    U1["Unit 1 — Introduction<br/>Workspace + Mindset"]
    U2["Unit 2 — Fundamentals<br/>Alignment · Whitespace · Consistency · Sizing<br/>↓ Six Strategies of Simplicity"]
    PROBLEM["⚠️ Problem: designs look clean… but boring<br/>'A great problem to have — but still a problem'"]
    SOLUTION["Solution: translate your brand into the interface<br/>via three levers →"]
    U3["Unit 3 — Color"]
    U4["Unit 4 — Typography"]
    U5["Unit 5 — Imagery & Components"]
    U6["Unit 6 — Digital Platforms & Paradigms<br/>Accessibility · Responsive · iOS/Android"]
    U7["Unit 7 — Communicating Design<br/>Presentations · Handoff · Portfolio · Interviews"]

    U1 --> U2
    U2 --> PROBLEM
    PROBLEM --> SOLUTION
    SOLUTION --> U3
    SOLUTION --> U4
    SOLUTION --> U5
    U5 --> U6
    U6 --> U7

Unit 1 — Introduction

Setting up your workspace and getting your mindset right. Laying the groundwork so you can design confidently and quickly down the road.

Unit 2 — Fundamentals

These are the skills you’re going to use in every single design you ever do, whether it’s something that:

Merely needs to be kind of neat and clean and simple → Eric calls this low-brand
Or something that needs to be visually much more opinionated, outspoken, and full of style → high-brand

flowchart LR
    LB["🔵 Low-brand<br/>neat · clean · simple"]
    HB["🔴 High-brand<br/>opinionated · outspoken · full of style"]
    LB -->|"same fundamentals apply across the whole spectrum"| HB

Fundamental skills: alignment, whitespace, consistency, sizing, etc.

The unit culminates in a lesson called the Six Strategies of Simplicity — it sort of builds on everything you’ve learned in the unit thus far and caps it off with a master algorithm for building clean, simple designs.

After fundamentals, you might run into this problem: your designs look neat, they look modern, they look organized — but they’re kind of boring. “And while that’s a great problem to have, it’s still a problem.”

The Brand Problem → Three Levers

The solution: you need to get good at translating between your brand and your interface.

Brand is a catch-all term for the adjectives or phrases — or however you’d want your viewer to describe your site, business, or application.

When translating brand into an interface, there are three main levers:

flowchart LR
    B["🏷️ Brand<br/>The adjectives you want<br/>your viewer to use about<br/>your site / app / business"]
    C["🎨 Color"]
    T["✍️ Typography"]
    I["🖼️ Imagery"]
    UI["✅ Interface<br/>that feels on-brand"]

    B --> C --> UI
    B --> T --> UI
    B --> I --> UI

“And lo and behold, those are the next three units of Learn UI Design.”

Unit 3 — Color

Color is the easiest of these areas to gain proficiency in — because every single color is comprised of just three numbers. “If something is made of numbers, it can be very easy to see the patterns in it.”

Eric thinks of color as being comprised of several sub-skills that build out on top of each other, like three concentric circles:

flowchart TD
    G["⬜ Zero Colors — Grayscale<br/>Useful on its own. Many brands use only this.<br/>Critical foundation for everything above."]
    O["🔵 One Color — Theme + Variations<br/>Grayscale + variations on one base color.<br/>Extremely common for low-brand sites."]
    M["🌈 Many Colors — Palette<br/>Billions of possibilities → but most fall into<br/>4 categories: the Archetypal Palettes"]
    X["Informs → Gradients · Dark UI<br/>· Fixing clashing colors · etc."]

    G --> O
    O --> M
    O --> X

Unit 4 — Typography

Significantly more complex than color — because unlike color, you can’t boil down a font and how you use it into just a couple of numbers. So a skill-based approach is used instead.

Eric is fond of saying that in UI typography, there are really only two fundamental skills:

flowchart TD
    TY["Typography"]
    CF["1️⃣ Choosing Good Fonts"]
    SF["2️⃣ Styling Fonts Well"]

    TY --> CF
    TY --> SF

    CF --> GFT["Good Fonts Table<br/>100+ free/cheap fonts in Figma<br/>categorized by type, brand,<br/>with features + usage notes"]
    CF --> FS["Higher-brand: understand<br/>that font = shapes = mood<br/>'If you can identify shapes,<br/>you can identify a font's brand'"]

    SF --> TR["Typographic Rules<br/>always follow"]
    SF --> H["Heuristics / Rules of Thumb<br/>bear in mind as you design"]
    SF --> DP["Common Design Patterns<br/>pop up in professional work"]

An aside on the skill/subskill breakdown: “Have you noticed, by the way, that I’m always breaking things down into skills and subskills? I promise, this is not accidental. It’s actually for your benefit.” The idea: if you’re totally overwhelmed by typography, knowing there’s a structure in which everything fits together will be a huge boon — a sigh of relief, because you can chip away at those skills one at a time.

Unit 5 — Imagery & Components

Covers the three main types of imagery that appear in UI:

Photography
Illustrations
Icons

Also covers components that appear in design systems: buttons, text boxes, dropdowns, radio buttons, etc. Not just how to make these elements look great, but also how to make them match the brand you’re trying to achieve.

Unit 6 — Digital Platforms & Paradigms

All the specific concerns that come up doing digital design — from accessibility to responsive design to the idiosyncrasies of iOS and Android design.

Unit 7 — Communicating Design

All the times where you need to present your work to others:

Giving a design presentation and getting feedback
Developer handoff
Creating a design portfolio
Design interviews

Practical Notes

Watch order is flexible — “By and large, you can watch these lessons in any order you prefer.”
Adjust speed — Use 1.5x or 2x for the 35+ hour course.
Lifetime access — “Please don’t feel like this course is a sprint. I want this course to be a lifetime resource.”
One software requirement — a UI design app. Eric recommends Figma, but the course is about underlying principles, not a specific tool.

How to Actually Get Better

“One thing that we’ve seen replicate again and again in the science of education is that the more you grapple with the knowledge you’re trying to learn, the more you try and apply it in different ways and in live practice — even though that can be much more challenging than just sitting back and watching some videos — it will help you learn it better and remember it longer.”

flowchart LR
    W["📺 Watching videos"]
    U["You understand how to fix designs"]
    P["✏️ Actually designing<br/>+ grappling with it"]
    S["You improve at designing"]

    W --> U
    P --> S
    U -. "not enough" .-> S

Ways to do this:

Focused exercises per lesson — practice the specific skill from each lesson in isolation.
Work on your own project alongside the course.

Don’t burn out. Whenever you start to feel stuck, get feedback from a knowledgeable professional. “Getting good feedback just cuts through the noise so well.”

Homework

Do a baseline design — get a sense of where you’re at when beginning the course. At the end, redesign those same screens to measure what you’ve learned.

“So whichever lesson you proceed to next, I just want to say thank you again for enrolling in Learn UI Design, and I wish you all the best on your design journey.”