Erik Kennedy – Learn UI Design
Confidently design beautiful
user interfaces for any app or site.
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.”
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!”
Dev Advocate for Firebase, Google
Learn UI Design is the best money I’ve ever spent in my (short) career – and I’m not even done with it yet!”
Product Designer, Healios
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!”
UX Designer, Home Depot
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:
- Easy to recognize, but difficult to create
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:
- Color theory (in reality, no designers really use it)
- The golden ratio (seems insightful, doesn’t help)
- Grids (less practical than you’d expect, given the airtime they get)
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.”
VIsual Designer, Metafinanz Informationssysteme
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.”
This hands-on course is easily the most effective way I’ve found to learn UI design”
Software Engineer, Reelhouse
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.
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.
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
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
3.5 Fixing Clashing Colors
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?
Inside the Course
Learn UI Design includes access to three things:
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.
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.
IUI 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.
Get immediately download Erik Kennedy – Learn UI Design
I. Introductory Topics
- 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
- 1.2 Introduction to Figma
- A primer on Figma functionality
- How to create and modify text, shapes, backgrounds, and more
- 1.3 Introduction to Sketch
- A primer on Sketch functionality
- How to create and modify text, shapes, backgrounds, and more
- 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)
- 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
- 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
- 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
- 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
- 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 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
- 2.3 Spacing
- The 4 most important rules of spacing
- How to add whitespace in data-heavy apps
- Unique spacing concerns in mobile apps
- 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
- 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
- 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”
- 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
- 3.1 HSB
- An introduction to Hue, Saturation, and Brightness
- Developing an intuitive understanding of the HSB system
- 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 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
- 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
- 3.5 3 Techniques to Fix Clashing Colors
- Major reasons colors appear to clash – or blend together – and how to fix them
- 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
- 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
- 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
- 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
- 4.1 Intro to Typography
- The 2 fundamental skills of UI typography
- The paradox of learning typography
- The most important typographic terminology
- 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
- 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 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
- 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
- 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
- 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)
- 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
- 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
- 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
- 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!)
- 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
- 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 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
- 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
- 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
- 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
- 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
- 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
- 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
- 6.5 Truncating Text
- 9 methods for truncating text
- Pros and cons for each
- 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
- 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
- 6.8 Grids
- When grids shine; when they fail
- Thinking responsive when designing layouts
- The major reason to break a grid
VII. Communicating Design
- 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
- 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
- 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
- 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
- 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
- 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 develop
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:
- Submit (and receive feedback) on every single homework
- Get design reviews on your own personal projects
- Ask questions from the community mentors
- Talk shop with other designers and folks in tech
Slack community mentors
Founder, Learn UI Design
Humble brag, but relevant: I’ve probably seen more beginner UI designs than anyone on earth 🙈. 10,000+ submissions later, I’m still in the Slack channel, answering questions, giving feedback, and working to improve the course.
Lead Product Designer, Meta
Leah took Learn UI Design in late 2018 and was hired by Meta a few months later. Now she’s back, this time as a Community Mentor, doling out wisdom on UI, UX, process, and career.
Lead Designer, Threefold Systems
Coming in hot from County Wexford, Ireland, Shane took Learn UI Design in 2017, and used the lessons from it to get hired as a designer – and promoted to lead – within one year. Look out for Shane’s hard-hitting feedback – delivered in a pleasant Irish lilt.
Senior Designer, Ob’vious
As a self-taught designer (coming from the world of cartography 🗺), Jenny quickly realized there’s a large gap between useless theory and practical design advice. Learn UI Design resonated with her when she took it in 2019, and after getting promoted shortly thereafter, she now returns as a student mentor.
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.
- 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:
Learn UI Design is not right for you if:
- Lifetime access to 53 video lessons, complete with cheatsheets, skill-building homework assignments
- A supportive community of beginning designers, mentored by top alum
- A vault containing dozens of past redesigns of student submission.
Learn UI Design is right for you if:
- You just want to finish a single design – not learn skills to serve you for years
- You believe you can become a better designer by passively watching videos (newsflash: you will have to do the homework assignments if you want to improve)
- You’re not a self-motivated learner (this is an online course, after all. I’m not handing out grades)
- You’re eager to learn and practice UI design
- You’ve tried designing something before – and it didn’t come out so great
- You know learning UI design will add value to your career (thousands of dollars or more)
- You’re self-motivated when it comes to learning – after all, no one’s standing over your shoulder telling you to do your homework
- You’ve got some interest in tech (the more you enjoy geeking out about software, the quicker you’ll learn)
How can we deliver you the course?
- View and complete the download here: "Erik Kennedy – Learn UI Design"
- In some cases, the link is broken for any reason or the product pre-order, our Support Team will contact and update status "Erik Kennedy – Learn UI Design" within a few hours business days.
- If there is any problems about "Erik Kennedy – Learn UI Design" Please don't hesitate to contact us at email: [email protected] or contact us here. we'll be happy to help!
Your patience is appreciated. Thanks :)
One Time Payment of "Erik Kennedy – Learn UI Design" only $219
You will earn 10% Reward Points with "Erik Kennedy – Learn UI Design". This course is available and delivery within one day! 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.
YES! I’m ready for my "Erik Kennedy – Learn UI Design"