Learn Ui Design By Erik Kennedy Updated 2021 ((free)) May 2026

Detailed write-up — "Learn UI Design" by Erik Kennedy (updated 2021)

Overview

"Learn UI Design" is a practical, beginner-to-intermediate guide focused on the visual and interaction skills needed to design effective user interfaces. Erik Kennedy emphasizes pattern-driven learning, real-world examples, and actionable exercises rather than theory-heavy design philosophy.

Core goals

Build a reusable mental library of UI patterns.
Train visual judgment through deliberate practice and critique.
Produce clean, usable interfaces that communicate hierarchy and affordance clearly.
Learn to iterate quickly and apply UI principles across products.

Structure and approach (high level)

The material is organized around specific UI problems (e.g., forms, navigation, cards, headers) and the visual rules that solve them.
Lessons mix short, focused concept explanations with before/after examples, annotated breakdowns, and hands-on exercises.
Frequent "rules-of-thumb" and checklists help designers evaluate and fix interfaces rapidly.

Key concepts and principles

Visual hierarchy: Use size, weight, color, spacing, and alignment deliberately to show importance.
Contrast and emphasis: Create readable, scannable interfaces by maximizing contrast where it matters (headlines, CTAs) and minimizing it for secondary elements.
Spacing and layout: Rhythm and consistent spacing systems (multiples of a base unit) improve readability and polish.
Type: Choose typefaces for purpose, control hierarchy with size/weight/scale, maintain comfortable line length and spacing.
Color: Use a constrained palette, establish semantic meaning (primary action, destructive), check accessibility (contrast ratios).
Alignment and grids: Align elements to invisible guides; use columns and modular grids for consistency across screens.
Visual affordance: Make interactive elements look tappable/clickable with clear signifiers (shadows, outlines, contrast).
Componentization: Break interfaces into reusable components (buttons, inputs, cards), each with clear states.
Feedback and states: Design visible states (hover, active, disabled, error) and concise validation messages.
Simplicity and restraint: Remove unnecessary UI noise; prioritize clarity and purpose over decoration.

Practical workflows and exercises

Pattern library building: Collect and recreate examples; document rules and when to use each pattern.
Rapid redesign drills: Take an existing screen, identify problems via the rules, and produce an improved version within timed sessions.
Pixel critique method: Compare before/after, list specific fixes (spacing, contrast, alignment), and explain why each change improves usability.
Component-first design: Design isolated components with all states, then compose screens from these building blocks.
Accessibility checks: Use contrast testing, semantic color use, and keyboard/tap target sizing rules.

Common UI patterns covered

Navigation (top nav, side nav, tabs, breadcrumbs)
Hero/headers and call-to-action sections
Forms and input groups (labels, placeholders, validation)
Cards and lists (content density, image use, actions)
Modals, popovers, and toasts
Tables and data-heavy layouts
Search and filter interfaces
Mobile-specific considerations (touch targets, responsive scaling)

Design critique and decision-making

Kennedy emphasizes explicit, testable reasoning: state the problem, cite the rule or pattern, propose the change, and show the expected outcome.
Trade-offs: balance aesthetics vs. performance, density vs. scan-ability, and novelty vs. familiarity.
Use evidence: user testing, analytics, and A/B tests to validate design choices when possible.

Tools and deliverables

Common tools recommended: Figma (or Sketch/XD), basic prototyping, simple handoff assets (component specs, tokens).
Deliverables include component libraries, style guides, annotated mockups, and interactive prototypes for user testing.

Learning path and timeline (recommended)

Week 1–2: Fundamentals — typography, color, spacing, hierarchy.
Week 3–4: Core patterns — navigation, cards, forms, buttons.
Week 5–6: Component library and responsive layout practice.
Week 7–8: Redesign projects, critiques, and accessibility checks.
Ongoing: Build a portfolio of 4–6 well-documented UI screens and a pattern library.

Common beginner mistakes and fixes

Overusing decorative effects — favor clarity over novelty.
Poor hierarchy — fix with size, weight, spacing, and color emphasis.
Inconsistent spacing — adopt a spacing scale and snap to it.
Tiny tap targets — increase to recommended minimums (44–48px typical).
Low contrast text — check and adjust color or use stronger weight.

How to evaluate progress

Before/after comparison of redesigns with checklist scoring (typography, spacing, contrast, alignment, affordance).
Peer critiques and targeted usability tests.
Speed: reduction in time to convert an idea into a polished screen.
Portfolio quality: clarity of rationale and polish of final screens.

Who benefits most

Product designers transitioning from UX or dev backgrounds.
Developers wanting to improve UI craftsmanship.
Junior designers building practical, portfolio-ready skills.

Concise takeaway

The book/course is a hands-on, pattern-first guide that trains visual problem-solving through examples, exercises, and clear rules; following its practice-oriented path produces measurable improvement in UI design skill within a few months.

Related search suggestions (automatically generated)

Learn UI Design Erik Kennedy 2021 summary
Erik Kennedy UI audit course 2021 key concepts
Learn UI Design book review 2021

Here’s a structured content package based on “Learn UI Design” by Erik Kennedy (Updated 2021). You can use this for a blog post, course summary, social media thread, or study guide.

Course Structure: From Zero to Portfolio-Ready

Unlike "watch me draw" tutorials, Learn UI Design is project-based. You build three distinct products. Here is the module breakdown based on the 2021 syllabus.

The Non-Designer’s Guide to Learning UI Design (Based on Erik Kennedy’s Methodology)

UI design often feels like a dark art. You stare at a blank canvas, add some elements, and it looks like a "My First Website" project from 1998. Meanwhile, the pros produce clean, polished work effortlessly.

According to Erik Kennedy, author of Learn UI Design, the difference isn't talent—it’s a specific set of rules. UI design is not art; it is a visual communication problem. Below are the core pillars of his methodology, refined for modern standards.

6. Quiz: Test Your Knowledge (Based on the 2021 Update)

What is the recommended base unit for spacing in UI design?
a) 4pt
b) 8pt
c) 10pt
True or False: In dark mode, you should use pure black (#000000) for backgrounds. learn ui design by erik kennedy updated 2021
Which Figma feature allows a single button component to have primary, secondary, and disabled states?
a) Constraints
b) Variants
c) Plugins
What’s the minimum contrast ratio for normal text (WCAG 2.1 AA)?
a) 3:1
b) 4.5:1
c) 7:1

Answers:
1 – b (8pt grid)
2 – False (use dark grays to avoid eye strain and halation)
3 – b (Variants)
4 – b (4.5:1)

Learn UI Design by Erik Kennedy (2021 Update) Learn UI Design

is a comprehensive, self-paced online video course created by Erik Kennedy, designed to transform non-designers and UX practitioners into professional-level visual interface designers. Unlike theoretical academic programs, the course focuses on a pragmatic, "logical" approach to aesthetics, teaching students to make objective design decisions using data-driven frameworks. Course Overview & 2021 Updates

As of the 2021 update cycle, the course reached a maturity level featuring over 36 hours of video content

across more than 50 lessons. Significant updates during this period focused on: Figma Integration

: While originally built around Sketch, the 2021 era solidified Figma as a primary teaching tool, with dedicated introductory primers and lessons utilizing Figma-specific features like Autolayout Expanded Curriculum

: The course grew to include a "Redesign Vault" with over 41 hours of narrated sessions where Kennedy redesigns actual student work. Workflow Speed

: New content emphasized design efficiency, teaching shortcuts and environment setups intended to speed up design workflows by up to 10x. Core Curriculum Pillars

The course is structured into several high-impact modules that move from basic setup to professional career preparation: Fundamentals

: Moves beyond "gut feeling" to teach six core techniques—Alignment, Spacing, Consistency, Sizing, Simplicity, and Lighting/Shadows.

: Replaces traditional "color wheels" with an HSB-based (Hue, Saturation, Brightness) system. Key lessons include "Gray: The Most Important Color" and techniques for generating full palettes from a single base color. Typography

: Provides a "Good Fonts Table" (100+ curated fonts) and teaches a 3-step process for font pairing and styling for both desktop and mobile. UI Components

: Deep dives into buttons, forms, lists, tables, charts, and data visualization. Digital Paradigms

: Covers responsive design, accessibility, and platform-specific guidelines for iOS and Android (Material Design). Communicating Design

: Includes strategies for building a portfolio, interviewing, and effectively handing off designs to developers. Learning Experience & Outcomes

Students often highlight the course's "engineering-like" approach to visual design. Practical Homework

: Almost every lesson includes a skill-building assignment that students can post to a private Slack community for feedback from Kennedy and a team of mentors. Career Impact Detailed write-up — "Learn UI Design" by Erik

: Testimonials cite students landing six-month retainer clients or full-time roles at companies like Google and Amazon shortly after or even halfway through the program. Target Audience

: It is specifically geared toward developers who need to design their own apps, UX designers wanting to add visual skills, and graphic designers transitioning to digital. Enrollment & Value Learn UI Design Review - m lily 8 Jun 2020 —

This is the story of , a developer who felt that "good design" was a dark art until he encountered Learn UI Design Erik Kennedy The "Aha!" Moment

Alex had always been able to build functional apps, but they never looked professional

. Like many others, he found UI design advice to be vague or overly "artsy". He felt he had a "good eye" for what looked great, but he couldn't replicate it—no matter how many hours he spent tweaking pixels.

Then, he found Erik’s course. Unlike typical design theory, Erik treated UI design like a logical engineering problem

. The 2021 updates (Version 2.0) brought a deep dive into modern tools like and expanded the library to over 33+ hours of content Mastering the Fundamentals Alex started with the Fundamentals

module. Instead of abstract concepts, he learned practical "golden rules": The HSB Secret

: He stopped struggling with RGB and learned why HSB (Hue, Saturation, Brightness) is the real key to professional color palettes. The Power of Gray

: He realized that gray is often the most important color in a UI for creating balance. Typography Tactics

: Instead of picking fonts by "vibes," he used Erik's "Good Fonts Table" to choose body and heading fonts that actually worked together. The Turning Point: Personal Feedback The real shift happened in the Slack community

. Alex wasn't just watching videos; he was doing homework. He posted a redesign of a complex table, and within days, Erik or a mentor provided a video teardown . They didn't just say "make it bigger"—they explained a certain spacing choice improved the visual hierarchy. The Result By the time Alex reached the Real-World Process

section, his confidence had skyrocketed. He stopped "pixel-pushing" aimlessly and began making evidence-based design decisions.

Could you explain the 7 golden rules of UI design to me? - SuperAGI

Learn UI Design by Erik Kennedy: The 2021 Update and Full Review

The Learn UI Design course by Erik Kennedy is a comprehensive online video program designed to teach the practical, visual side of interface design. By 2021, the course evolved significantly, solidifying its reputation as a premier resource for designers who prefer logical rules and actionable frameworks over abstract theory. Course Overview and 2021 Updates

As of the 2021 period, the course consists of over 36 hours of video content spread across 53 lessons. A major update in 2020-2021, often referred to as Learn UI Design 2.0, introduced several key enhancements:

Figma Integration: While earlier versions focused heavily on Sketch, the updated curriculum features most lessons recorded in Figma, reflecting its rise as the industry standard.

Re-recorded Content: Many core videos were updated with clearer examples and refined teaching methods based on feedback from thousands of students. Core goals

Expanded Resources: Students receive access to a massive library of Figma resources, cheatsheets, and checklists to speed up their workflow. Curriculum Breakdown

The course is structured into six core chapters that build from fundamental principles to complex digital paradigms:

1. Introduction: Covers workspace setup (Figma/Sketch), building "design gut instinct," and strategies for finding inspiration.

2. Fundamentals: Focuses on the "logic" of aesthetics, including alignment, spacing, sizing, and the use of light and shadows.

3. Color: Teaches the HSB (Hue, Saturation, Brightness) system, luminosity, and how to create cohesive color schemes without clashing.

4. Typography: Includes the popular "Good Fonts Table" and detailed guides on choosing body fonts and styling text for interactive apps.

5. UI Components: Deep dives into designing form controls, icons, lists, tables, and data visualizations.

6. Digital Paradigms: Covers responsive design, accessibility, and platform-specific guidelines for iOS and Android. What Makes This Course Different?

Unlike many design bootcamps that focus on user research (UX), this course is strictly about visual UI design. Reviewers from sites like Medium and UX Planet highlight Kennedy’s "engineering mindset," which breaks design down into repeatable rules rather than "magical talent". Key Student Benefits: Learn UI Design Review - m lily

"Learn UI Design" by Erik Kennedy is a comprehensive, video-based course tailored for developers, UX designers, and non-designers who want to master the visual side of software. The 2021 update, often referred to as "Learn UI Design 2.0," significantly expanded the curriculum to include modern tools like Figma and deeper modules on responsive design. 🚀 Key Course Stats Content: 36+ hours of video across 53+ lessons. Format: Self-paced video modules on the Teachable platform.

Community: Access to a private Slack/forum for mentor feedback on all homework.

Pricing: Generally around $1,000 USD (often opens in limited enrollment windows). Primary Tools: Figma (primary), Sketch, and Adobe XD. 📚 Curriculum Breakdown

The course is structured into six core units that move from theory to practical component design. 1. Fundamentals & "Gut Instinct" Focuses on building a "design eye" through analysis. Covers alignment, sizing, spacing, and grids. Teaches how to start projects by defining brand and goals. 2. Color Mastery Uses a numbers-based system (HSB) to eliminate "guessing".

Deep dive into gray, clashing colors, and picking primary/secondary palettes. Advanced topics: Dark interfaces and gradients. What I've Learned From Learn UI Design by Erik Kennedy

Report: Learn UI Design by Erik Kennedy (Updated 2021)

Date: October 26, 2023 Subject: Comprehensive Analysis of the "Learn UI Design" Course Curriculum and Methodology

✅ Buy if:

You can design a wireframe but it looks "off" (bad spacing, muddy colors, inconsistent alignment)
You're a front-end dev who wants to stop relying on Tailwind defaults
You've taken a UX course but still can't make a beautiful dashboard or landing page
You want a portfolio-ready project (course includes 3 full UI redesigns)

1. Executive Summary

"Learn UI Design" is an online course created by Erik Kennedy, a former software engineer and Principal Designer at a Silicon Valley startup. The course is widely regarded within the UX/UI industry as a pragmatic, no-nonsense approach to learning visual interface design.

The "Updated 2021" version refers to a significant curriculum refresh Kennedy undertook to address modern design tools (specifically Figma), trends (like dark mode), and evolving industry standards. Unlike many design courses that focus heavily on theory or portfolio building, this course focuses strictly on the craft of UI design—typography, color, spacing, and layout—aiming to take students from "guesswork" to "confident decisions."

Practical exercises & templates

Deconstruction template: Screenshot, hierarchy annotations (1–3), spacing/grid notes, what works/doesn’t.
Component checklist: States, accessibility, spacing tokens, responsive behavior.
Case study outline: Problem → research → constraints → sketches → iterations → final screens → outcome/learnings.