Skip to content

The Complete Online Video Course

Get Course Notifications

Color

Design Patterns

Typography

Components

And more

Confidently design beautiful
user interfaces for any app or site.

Trusted by thousands of students at…

I’ve been watching Erik Kennedy’s Learn UI Design course to bone up a bit... If you're serious about wanting to get better at design, this is the course for you.”

Chris Coyier

Learn UI Design has made my work here at Google so much better. I even had a coworker ask how I got so much better at design – and now he's enrolled too!”

David East

Learn UI Design is the best money I've ever spent in my (short) career – and I'm not even done with it yet!”

Jagoda Gniadek

Shortly after completing Learn UI Design, I landed my first job as a UX/UI designer. Listening to Erik’s design rationale helped me develop a healthy thought process and explain all of my design decisions with confidence. One of the best investments I’ve ever made!”

Christian Laing

Let me save you some time. Honestly, there's only one reason to read anything on this page, and it's this: you want to learn how to create great-looking user interfaces.

If that’s not you, you can bounce along now. No hard feelings 🙂

If you’re anything like I was, you find UI design to be confusing and open-ended. The advice out there seems vague, contradictory, and theoretical (rather than practical).

When you look at design topics like typography or color, you're overwhelmed.

And when you see beautiful designs, they seem to be some mix of:

These feelings are all too familiar to me.

When I was a developer and PM, I felt this way constantly. I saw tons of great designs. I could even tell you which I liked best. But when it came to recreating something similar for myself, I was hopeless.

I saw UI designers as magical creatures who sprinkle 🌈 mysterious design dust 🦄 over any wireframe and make it shine. It seemed like some art school voodoo that was completely inaccessible to others – myself included.

The Hard Way

When I learned UI design, I had to do it the hard way. Largely self-taught, making progress an inch at a time. In the end, I learned the aesthetics of apps the same way I’ve learned any creative endeavor: cold, hard analysis. And shameless copying of what works. I’ve worked 10 hours on a UI project and billed for 1. The other 9 were the wild flailing of learning.

During that time, I came to have a disdain for the theory-heavy tripe that plagues so much design writing. You know what I’m talking about? Stuff like:

This stuff seems useful, but it failed the only metric that mattered to me: does it help me make a bad design look good?

Let’s fast-forward a few years. Now, I’ve designed interfaces for clients like Amazon, Soylent, Roam Research, and more, and made hundreds of thousands of dollars doing it. I’ve circled the globe freelancing from a dozen countries. From enterprise systems to personal side-projects, I’m confident in my ability to design whatever I need to – and have it look awesome.

“But I don’t know Arial from Helvetica” you cry. How will you ever become confident in design?

I thought you’d never ask.

I’ve been a professional Visual Designer for 5 years and the course still showed me new stuff – both in the basics and advanced stuff. Just get Learn UI Design. It's a no-brainer.”

Oskar Bader

Learn UI Design's straightforward approach, illustrated with real-life examples and tutorials, was extremely helpful and eye-opening. I would highly recommend this course for UX designers wanting to add UI design to their toolkit.”

Sarah Kim

This hands-on course is easily the most effective way I've found to learn UI design”

Aaron Franks

Introducing

Learn UI Design 2.0

The Complete Online Video Course

53 Video-Based Lessons

Over 35 hours of video lessons, filled with strategies and live examples covering all major areas of UI design. Watch me, Erik, as I actually design dozens of examples right in front of you.

Watch from any device

Learn UI Design works on phones and tablets too, so you can watch from your desk or on the go.

Skill-Based exercises

Dozens of assignments tailored to efficiently hone your UI design skills.

Take a shot at them – then post in the student community for feedback from the student mentors.

Learn UI Design PDF cheatsheets

Cheatsheets & Checklists

Old-school? No doubt. But it works.

Get over a dozen printable PDF cheatsheets and checklists with key design reminders and frameworks.

I keep these on my office wall. You’ll want to too.

Student Slack Community Slack icon

Come for the design feedback, stay for the community. Learn alongside other aspiring designers.

(There’s plenty of abrasive, competitive design communities out there — but we’re not one of them 🙂)

Watch Over a Pro's Shoulder

Animated GIF of lesson on fixing clashing colors

3.5 Fixing Clashing Colors

Animated GIF of lesson on styling text in editorial designs

4.9 Styling Text III

Animated GIF of lesson on designing icons

5.4 Icon Design

Learn UI Design is packed full of live video demos. Follow along as I create dozens of layouts, color schemes, elements, and more. From blank canvas to finished design, you'll see how the process looks at every step of the way.

Articles can be helpful, slide decks can be illustrative — but live videos combine the best of both worlds. I’ve designed these videos to be like watching over my shoulder as I share the frameworks, tips, and tricks that have helped me design UI for companies of every size.

In total, we’ll cover every major area of interface design.

Which lesson will you do first?

Get Course Notifications

The color videos BLEW MY MIND! This is EXACTLY what I’ve needed to learn for years. I could never name it, but you just showed me. I’ve been paying attention to color for decades, and have NEVER seen this ANYWHERE. Thank you, Erik!”

Kelly Kuran

Fonts have always been a complete mystery to me. But just from watching just the first two typography videos, I am actually capable of pairing fonts – with exquisite results! Learn UI Design's pragmatic approach to design has taught me infinitely more than what reading any design books ever did!”

Anders Nysom

I’m partially red-green colorblind, and I never thought I could ‘get' color. I just watched Secondary UI Colors and had a bunch of ‘aha’ moments. These last two videos hit a serious home run, and lifted the veil. I never realized how easy colors actually were. THANK YOU!”

David Garrison

Inside the Course

Learn UI Design includes access to three things:

There is no other course that covers so extensively the skills you need to design beautiful UI, as well as the skills you need to be a good designer (and it’s more than just pretty pictures– see unit VII).

Let’s take a closer look at each of the 3 parts.

I UI design in 53 lessons: The Video Series

Work through it lesson by lesson, or skip around to what you’re most curious about at the moment. I get it — 35+ hours of video is a lot, even watching at 2x speed. But every minute is something I wish I had known when I started designing UI.

I. Introductory Topics

  1. 1.1 Begin Here
    • How to use this course
    • What makes for an ideal UI project for learning
    • A few of my all-time favorite intro design resources
  2. 1.2 Introduction to Figma
    • A primer on Figma functionality
    • How to create and modify text, shapes, backgrounds, and more
  3. 1.3 Introduction to Sketch
    • A primer on Sketch functionality
    • How to create and modify text, shapes, backgrounds, and more
  4. 1.4 Setting Up Your Workspace for UI Design
    • Other files you should keep on your computer for use in UI design
    • The most common hotkeys for speeding up UI design
    • Top tutorials for learning Sketch (or your UI app of choice)
  5. 1.5 How to Build Your Design Gut Instinct
    • A 2-step process for building your gut instinct
    • What to focus on so you can improve as quickly as possible
    • How to break down and analyze a "good" design
  6. 1.6 Starting a Project: Brand & Goals
    • The 80-20 of branding – the most common brands designers should be able to create for
    • The most powerful questions for helping you determine your brand
    • How knowing your brand and goals can help make a good-but-plain design great
  7. 1.7 Finding & Using Design Inspiration
    • The best places to find inspiration
    • My strategies for finding inspiration
    • Setting up systems to keep inspiration close at hand when you need it
    • How to use design inspiration without copying
  8. 1.8 3 Ways to Design Above Your Level
    • How to move forward when there's a thousand things you could change
    • A strategy for how to iterate on designs efficiently
    • When to say "enough is enough" when you're designing

II. Fundamentals

  1. 2.1 Introduction: Analyzing Aesthetics
    • How the "Design Fundamentals" in this course differ from most courses or articles
    • The six techniques you'll be using in every single design you ever do
    • How you know these principles aren't just "opinion"
  2. 2.2 Alignment
    • The importance of alignment
    • The trick to aligning tables and padded elements
    • Centering asymmetric elements
    • Vertically aligning text
    • How an element's shape changes how you align it
    • The importance of alignment in an era of responsive design
  3. 2.3 Spacing
    • The 4 most important rules of spacing
    • How to add whitespace in data-heavy apps
    • Unique spacing concerns in mobile apps
  4. 2.4 Consistency
    • A simple trick for all designing with as much consistency as possible
    • When to break consistency – and how to do it effectively
    • How to draw the line between consistency vs. standing out
  5. 2.5 Sizing
    • The only 5 text sizes you'll ever need
    • Sizing elements on mobile vs. desktop
    • The 3 heuristics of proper sizing of UI elements
  6. 2.6 Simplicity
    • The 6 strategies of making a messy design look clean and simple
    • Removing clutter from busy data tables
    • How you know when a design is "clean enough"
  7. 2.7 Lighting & Shadows
    • How to use shadows to mimic real world lighting
    • The 2 major types of lights and what they mean for UI design
    • 6 techniques for making shadows in different situations
    • Advanced lighting effects

III. Color

  1. 3.1 HSB
    • An introduction to Hue, Saturation, and Brightness
    • Developing an intuitive understanding of the HSB system
  2. 3.2 Luminosity
    • Why luminosity is such an important property in color
    • Practical situations in which luminosity can help you find the right color
    • Luminosity's role in accessibility
  3. 3.3 Gray: The Most Important Color
    • Why gray is the most important - and common - color in UI design
    • How to make gray match any other color
    • Specific tactics for using gray on various supporting elements
  4. 3.4 Variations: The Most Important Color Skill
    • How to generate entire interfaces from just 1 or 2 base colors
    • 6 techniques for modifying colors in various circumstances
    • When to adjust different colors to appear the same
    • Why "color palettes" is a misnomer in day-to-day UI design
  5. 3.5 3 Techniques to Fix Clashing Colors
    • Major reasons colors appear to clash – or blend together – and how to fix them
  6. 3.6 Picking a Primary UI Color
    • Why you shouldn't just go with blue for your app
    • Ideas for generating "non-obvious" themes (e.g. green for an environmental app)
    • Why app colors are less subjective than you think
  7. 3.7 Creating a Brand-Based Palette
    • The 2 major types of secondary UI colors
    • 3 strategies for finding brand colors that match
    • Live demos of generating secondary UI colors
  8. 3.8 Dark Interfaces
    • How to use lighting and shadows when the background is dark
    • The best times to use – and avoid – dark background UI
    • How to modify your color scheme for use with dark backgrounds
  9. 3.9 Gradients
    • The 3 main types of gradients
    • The best way to make brilliant multi-stop gradients
    • Common mistakes with gradients and how to avoid them

IV. Typography

  1. 4.1 Intro to Typography
    • The 2 fundamental skills of UI typography
    • The paradox of learning typography
    • The most important typographic terminology
  2. 4.2 The Good Fonts Table
    • Over 100 of the best free or cheap fonts for UI design work
    • A brief analysis of each font, helping you know what brands and apps would be a good fit
  3. 4.3 Choosing Fonts: Overview
    • The 3 primary constraints of fonts in UI design
    • How many fonts you should use in a project
    • A 3-step process for finding good fonts
  4. 4.4 Choosing Body Fonts
    • 4 hacks for finding great body fonts
    • How letterform shape determines legibility
    • How even a "plain" body font can match your project's brand
  5. 4.5 Styling Text I: The Basic Rules
    • How line length relates to line height and font size
    • The ideal paragraph spacing, and the danger of baseline grids
    • How text styling differs on mobile vs. desktop
  6. 4.6 Brand & Letterform
    • How the shape of letterforms relates directly to a font's brand
    • The 5 most common brands you should be evoke with typography
    • Why the "energy" of a font is a useful for UI design
  7. 4.7 Styling Text II: Interactive Apps
    • The 4 most important principles of styling text in data-heavy web/mobile apps
    • Common typographical design patterns
    • 6 strategies for styling "data" (and everything is data)
  8. 4.8 Pairing Fonts
    • A framework for making sense of the many font-pairing strategies
    • The 4 most common font-pairing mistakes
    • How pairing fonts differs between clean/simple/neutral sites and heavily-branded sites
  9. 4.9 Styling Text III: Editorial
    • Special text stylings to keep in mind for text-heavy content – like blogs and articles
    • Using condensed fonts
    • Tips for creating drop caps

V. User Interface Components

  1. 5.1 Component Libraries I: Controls
    • How to match your components to your brand
    • The 4 most important rules of creating a component library
    • A deep dive into button variations
  2. 5.2 Component Libraries II: States
    • The 7 most common states – and which components they apply to
    • How to prototype hover and focus states in Figma
    • Creating an error message in 8 simple decisions (I promise! 🙂)
  3. 5.3 Vector Illustration
    • An overview of vector editing functionality, from nodes to networks
    • When to use blend modes in illustration – and which ones
    • A live example illustration you can follow along with
  4. 5.4 Icon Design
    • The 4 main requirements of good icons
    • The biggest beginner mistakes when designing icons
    • Matching your icon style to your brand
  5. 5.5 Photography & Imagery
    • 5 simple tricks for stunning visuals
    • How to identify top-notch imagery for UI design
    • My favorite sites to find great free photography
    • A practical overview of blend modes
  6. 5.6 Lists & Tables
    • What elements to show in a list/table – and what to remove
    • Strategies for making your huge data tables smaller
    • Two example redesigns – desktop & mobile
  7. 5.7 Charts & Data Visualizations
    • The two most common mistakes in making gorgeous data visualizations
    • How to make a line chart look awesome
    • The best workflows for creating – and coloring – a pie chart in Figma

VI. Digital Platforms & Paradigms

  1. 6.1 Responsive UI Design
    • 4 overarching principles to make responsive design easier
    • Plus 4 patterns to use to make any element responsive
    • Dozens of specific strategies for designing responsive UI
  2. 6.2 Designing Multi-State Screens
    • The 8 states you need to consider designing for every page
    • When to use different controls for waiting/loading states
    • Includes a checklist cheatsheet to reference as you design
  3. 6.3 Accessibility
    • The most common mistakes in creating accessible interfaces – and how to fix them
    • Why creating an accessible design is easier than you might initially think
    • My favorite plugins and tools for creating accessible designs
  4. 6.4 Overlaying Text on Images
    • 7 techniques for placing text on top of images in your UI
    • Pros and cons for each
    • Thinking about text on images in terms of accessbility and responsive design
  5. 6.5 Truncating Text
    • 9 methods for truncating text
    • Pros and cons for each
  6. 6.6 Mobile: iOS
    • How to "think like Apple" when designing an interface
    • 3 reasons to use the default iOS styles
    • The most common UI paradigm that differ between iPhone and other UIs
  7. 6.7 Mobile: Android/Material Design
    • Key differences between Android and iOS design
    • The most common UI controls in Android apps
    • When to use – and not use – a floating action button
  8. 6.8 Grids
    • When grids shine; when they fail
    • Thinking responsive when designing layouts
    • The major reason to break a grid

VII. Communicating Design

  1. 7.1 Creating a Design Portfolio
    • How to get portfolio projects when you don't have paying clients yet
    • Best practices and examples of great portfolios around the web
    • Tips for telling a good story with your project writeups
  2. 7.2 Interviewing for Design Jobs
    • The 5 most common types of interviews – and how to succeed at each
    • How to avoid common design interview pitfalls and red flags
    • How your past work deck differs from your portfolio
  3. 7.3 Finding Clients
    • The best methods for a new freelancer to find clients
    • Best practices for turning one job into many
    • The worst places to find new clients
  4. 7.4 Presenting Your Designs
    • The most common mistake when presenting a design
    • How to get the best possible feedback (and not have a design go straight to hell)
    • A sample presentation with example questions that I answer
  5. 7.5 Click-Through Prototyping
    • How to use Figma's prototyping functionality
    • The 4 main goals of a prototype
    • Workarounds for one of the biggest drawbacks of click-through prototypes
  6. 7.6 Developer Handoff
    • The most important things you can do for a developer when handing off a file
    • How a developer looks at your design file
    • A checklist of things to cover with your developer

II The Community: Student Slack Channel

Learning design is a tough thing to do alone. Wouldn’t it be nice if you had someone to ask questions, get feedback, and bounce ideas off of?

With Learn UI Design, you’ll get full access to a special Slack Channel where you can do all of that:

Slack community mentors

III The Bonus: Live Redesign Vault

Completely separate from the main lessons of the course, the Live Redesign Vault is 36+ hours of video recordings of me, Erik, redesigning student submissions.

The events are live – and all students are invited. But the vault is where they’re cataloged and tagged by color, fonts, overall brand, and platform – so you can reference them for inspiration and best practices.

As with the video lessons, no rush. You have lifetime access.

Live Redesign Vault screenshot

Choose from 38+ redesigns

Cataloged by colors, fonts, and brand used

Fully-narrated rationale for design decisions

Easily see the before/after and more

When it comes to learning how to create beautiful designs, this is the most comprehensive course on earth:

Get Course Notifications

I’ll be the first to admit this course is not for everyone. And while there is a 30-day 100% money-back guarantee, I want to save you the hassle of signing up, unless you’re in a very specific demographic:

Learn UI Design is not right for you if...

Learn UI Design is right for you if...

Frequently Asked Questions

Question:

Is this just UI, or does it cover UX as well?”

Answer:

Short: it’s focused on visual design (UI), but often covers UX-related concepts incidentally.

Long: UX (“how it works”) and UI (“how it looks”) are sister disciplines. It’s impossible to do one well without the other.

Therefore, I reference UX ideas/topics constantly in Learn UI Design, but it’s not about them per se. If you’re more interested in UX (that is: interaction design, usability, user research, etc.), check out Learn UX Design 👍

Question:

Can I see some of the course for free?”

Answer:

No.

Well, actually, I have published one lesson from Learn UI Design on YouTube.

But apart from that, no.

Why? Because I’ve published so much stuff for free already — a design blog, email tutorials, a YouTube channel, tips on twitter, etc.

Learn UI Design is not a different type of design advice than what I put out there for free — it’s simply much more organized and much more thorough.

So if you find my free content useful, you’ll likewise love the course.

Question:

Am I too much of a beginner for this course?”

Answer:

No.

Learn UI Design is created to guide you from zero experience to a professional level of UI design skills. Although many students have entered with formal training in visual design, the majority have none.

Question:

Am I too advanced for this course?”

Answer:

Likely not.

I always tell more advanced prospective students to email me their portfolio, and I’ll let them know if I thought they were too advanced for Learn UI Design.

However, even among students I’ve told not to join who did anyways, they only report loving the course and getting a ton out of it.

Why? I suspect it’s because the curriculum is entirely original. I went to engineering school, not art school — and my take on design shows it. Read my color framework or my step-by-step algorithm for pairing fonts. If this is useful stuff you have not encountered in your own years of experience, you’ll feel similarly about the rest of the course.

Oh — and if you don’t, there’s always a refund policy (see next question).

Question:

Is there a money-back guarantee?”

Answer:

Yes – there's a 30-day 100% money-back guarantee.

30-day 100% Money-Back Guarantee

Try Learn UI Design for 30 days. If you like it, great – you've got lifetime access to the 53 lessons, homework assignments, and resources (including future updates/additions). And if you don't like it? Just email and ask for a refund within 30 days – no conditions, no questions asked.

Question:

What app do you use?”

Answer:

I use Figma.

However, you can use any design app you'd like. Sketch and Adobe XD are the next most popular. However, since they all have such similar interfaces, functionality, and even shortcut keys, it matters less which one you pick and more that you simply have a good reason for picking one. Students have successfully completed the course in these 3 apps and others.

Please note: Learn UI Design is not a course about Figma. It’s a course on the underlying, unchanging principles of visual design.

While I happen to cover Figma functionality — from the basics, all the way through prototyping, animations, interactive variants, and more — that is only incidental to teaching you how to do great design work.

Question:

How can I get my work to pay for Learn UI Design?”

Answer:

First of all, smart thinking!

Here's a guide for your employer that goes over common questions for businesses enrolling their employees in Learn UI Design, including:

  • Benefits to the employee
  • Group discounts (they're surprisingly large)
  • Invoices, certificates, and more

Question:

Are there enterprise discounts?”

Answer:

Yes.

Groups of 5+ seats get a 30% discount. Groups of 10+ seats get a 40% discount. Groups of 20+ seats get a 50% discount. If you are enrolling 5+ people, please contact me today (even if enrollent is not officially open).

Question:

Do I get immediate access to all videos?”

Answer:

Yes.

As soon as you sign up, you will get immediate access to the entire video series (including resources, homework assignments, and cheatsheets), as well as an automated invitation to the student community.

Question:

Do I have lifetime access to the course?”

Answer:

Yes, all students have lifetime access to the course.

As long as this course exists, you will be able to watch any video, complete any homework assignment, and see any resource. You can start the course the minute you buy it, or a year later – it's up to you.

Question:

Will Learn UI Design help me get a job?”

Answer:

Yes.

Not only is it everything I wish I had known when I first started designing, it’s also packed with specific advice taking you from zero to hired:

  • How to create a design portfolio (even when you don’t have any projects yet)
  • How to find clients
  • How to ace a design interview

If you’re self-motivated enough to watch the videos, build your skills, and create a portfolio, there’s no better way to find a design job.

Wait, wait – who are you?

Erik – that's me!

Hey, my name is Erik Kennedy. I’m the creator of Learn UI Design and Learn UX Design.

I’m also a freelance UX/UI designer based in 🌧️ Seattle, WA.

My clients have ranged from Y-Combinator startups to Fortune 100, including folks like the below:

I’ve also spoken in the US and abroad at businesses, meetups, and universities (like UC Berkeley, Yale, and UW). And my design writing has been read by over a million people.

So my design career has been an amazing ride.

But before all that, I was on a different path: engineering school. That’s right… a developer 🤓. When I first tried my hand at design, I felt doomed.

It looked awful.

Of course, I had my excuses. I didn’t go to art school. I didn’t know crap about aesthetics.

I majored in engineering – it’s almost a badge of pride to build something that looks awful.

But the passion for design stuck. And I ended up teaching myself UI design the same way I’ve learned anything: cold, hard analysis.

To cut it as a designer, I had to come up with tricks & tactics I could apply to whatever app I was working on in the moment. I mixed those strategies with the best of what I could find scattered across a myriad of books and blog posts.

And it worked. Here I am.

Still kickin’. Still designing.

In the interim, I quit a nice, cushy job at Microsoft, made the jump to freelance, and:

On top of that, my wife and I spent a year literally circling the globe on a trip we’ll never forget. It was an amazing opportunity, but it was only possible because UI design is a valuable skill that businesses are willing to pay top dollar for.

Whatever reason you have for learning UI design — whether it’s getting a job, freelancing, launching a side project, or just upping your skills — I think you’ll find Learn UI Design is the very best way to do it.

Join thousands of happy students — it’s time to master UI design.

Learn UI Design is great! Tons of ACTIONABLE tips and hours of practical advice on all important design topics – positioning, alignment, spacing, typography, colour… What I found to be the best part is when Erik fires up Sketch to show you how to apply the theory on real UI designs. I feel much more confident when approaching a new design project after going through the course!”

Dražen Lučanin

I've gone to art school and done a lot of online courses, but this is the first design course that just gets to the meat of what I need to learn to level up. There's no fluff. Every lesson is packed with useful content and exercises.”

Evonne Okoye

Hey Erik, I’ve got a success story – I landed a dream job in a world-class design agency. Learn UI Design helped make it happen. Thanks again for the valuable course – I return to the videos often.”

Bill Barham

Of all the money I’ve spent learning this is hands down the best investment (MUCH more valuable than the bootcamp that cost 10x as much)”

Shane Williams

This is one hell of a well-planned course. It's like learning how to fly a plane by actually sitting in the cockpit with the pilot – Erik is constantly designing/redesigning real-world examples right in front of you, explaining why X is good or bad, and how to go about making it even better.”

Mudassir Ali

Learn UI Design is the ONLY course I’ve found that provides the reasoning *why* this design choice is better than another… I feel like I owe you a personal thank you for taking the time to provide me with the *why* behind the design decisions… The course is worth every single penny.”

Laura Strader

Learn UI Design 2.0

The Complete Online Video Course

Want to be notified when Learn UI Design opens for enrollment? Sign up for Design Hacks – which also features original design tips, and already has over 50,000 people on it. Can’t be that bad, right? 😎