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.

I. The Lessons:

35+ hours of video content, along with cheat sheets, top resources, and skill-building homework assignments.

II. The Community:

Get personal feedback on your designs – homework assignment, personal projects, and more.

III. The Bonus:

Dozens of sample redesign videos I’ve done from student submissions. 36+ hours of narrated design content.

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