Learn UI Design is closed

Get notified

Open for enrollments soon

Learn UI Design Learn UI Design

The Video Course

Get Course Notifications

Learn UI Design Learn UI Design

The Video Course

  • Typography

    Typography

  • Color

    Color

  • Elements

    Elements

  • Process

    Process

  • And More...

Course Will Open On

September 14 2017

Want to be alerted when Learn UI Design is open for new enrollments? Sign up for the Design Newsletter.

Over 10,000 subscribed. No spam, ever.

Learn UI Design is an incredibly comprehensive course that will set you on a path to becoming a professional UI Designer. The course goes way beyond the surface-level type of stuff that you read in blog posts—this is deep, practical knowledge straight from an industry professional.”

Jeremiah Shoaf

Confidently design beautiful
user interfaces for any app or site.

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.

OK. Still with me?

I'm going to paint a little picture. You can tell if me if this is you or not. You want to learn UI design, but you feel it's confusing and open-ended. You find the advice out there vague, contradictory, and not really that useful.

When you look at design topics like typography, color, or process, you’re thinking: crap, I can’t do this!

And what makes for beautiful design seems like some mix of:

All of this is a view I know all too well.

When I was a developer and PM, this was the boat I was floating in every dang day. I saw all these awesome-looking designs, and could even tell you which ones I liked the 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.

But enough was enough. I decided to learn UI design.

Why UI Design?

Everyone’s reasons for learning user interface design are different. If you’re already a developer, or a PM, or a UX designer, why develop this totally separate skill?

Let’s break it down:

For me, I had left my job to become a freelance UX designer, and my portfolio looked about as good as a Pentagon Powerpoint. Not to mention every one of my clients was asking: “hey, now that you made these wireframes, can you do the designs?” It was clear I could offer more to my clients if my end product wasn’t sketched out boxes and arrows.

So how do you learn UI design in 2017?

Art School Ain't the Answer

One thing’s for sure: paying full tuition for a multi-year degree in Graphic Design or Visual Communication makes zero sense.

Let’s add it up. That’s tens of thousands of dollars for prerequisites, unrelated courses, and barely-applicable theory.

Then, when you graduate, you'd have $20,000+ in debt – and still have to learn a bevy of new technologies, workflows, and skills.

And when you get hired, you'd have to learn just as much on the job as everyone else.

Sadly, for me, there was not a great way to learn UI design. At least, not actual, pragmatic, finish-the-design-in-front-of-you UI skills. Now, a bunch of dev bootcamps are popping up – and there are some for UX designers, with a lesson or two on aesthetics, but paltry pickings for the aspiring UI designer. Rough, right?

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 those hours, I came to have a disdain for the theory-heavy blabbering that plagues so much design writing. You know the type? It’s all about color theory, the golden ratio, grids, etc. – and while it seems useful, it isn’t clear how exactly it makes your design better. There was only one metric that mattered to me: could this knowledge help me improve the design I was working on?

Let’s fast-forward a few years. Now, I’ve designed interfaces for clients like Amazon, Soylent, 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.

Learn UI Design is an incredibly comprehensive course that will set you on a path to becoming a professional UI Designer. The course goes way beyond the surface-level type of stuff that you read in blog posts—this is deep, practical knowledge straight from an industry professional.”

Jeremiah Shoaf

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

Aaron Franks

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

So much web design advice is too obvious, abstract, or shallow. Learn UI Design, on the other hand, is the opposite. Highly practical, concrete, substantial, and very well structured and paced. I'm beyond satisfied.”

Lars Jensen

I'm a left-brained engineer, and Learn UI Design has given me hope that I won't have to rely on someone else to make my interfaces look right. I now see creating beautiful UIs as a fun blend of methodical problem-solving tactics. P.S. One of my favorite bits is the section on how Facebook uses color – it blue my mind!”

Jason Curtis

Introducing

Learn UI Design

The Video Course

35 Video Lessons

Over 18 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.

Downloadable Exercises

Dozens of assignments to hone your design skills. Then get feedback in the community chat.

Printable Cheatsheets

Old-school? No doubt. But it works.

Get access to a series of PDFs with key design tips and tricks. I keep these hanging on my office wall — you’ll want to too.

Community
Chat

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

Get Notified

Go from “I don’t have an eye for design” to being able to confidently design interfaces for any site or app. This course covers enough knowledge for you to go and get hired as a UI designer.

Get a practical foundation in all of the areas you feel like you don’t have a clue:

Note: if you want to hear about design theory, about “rhythm” and the “golden ratio”, etc., you’ll have to go elsewhere. This course is only the industry-tested lessons I’ve learned and used on the job. Think of it more like on-the-job-training or a course taught by an industry professional, rather than ivory tower philosophizing.

I made this course to be the single best way to learn UI design. It’s far more in-depth than a simple video or article, but way cheaper and easier than going to art school (and you don’t have to quit your day job!).

Full of Live Demos

The Learn UI Design course is chocked full of live video demos. Watch as we generate dozens of layouts, elements, color schemes, and more. From blank canvas to finished design, you'll see how the process looks at every step of the way.

Articles can have good information, and slide decks can be illustrative – but live videos combine the best of both worlds and then some. In addition, I've augmented the videos with screenshots of hundreds of the best interfaces for web and mobile. We'll talk about the very best of what's out there. But the focus is on opening up Sketch (or Adobe XD or Figma) and doing it for ourselves.

Think of it this way: I've designed these videos to be like watching over my shoulder, as I share the tricks, tips, and frameworks that have helped me design UI every day for companies around the world.

We're going to dive into and break down every major area of interface design.

Which lesson are you going to do first?

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 tought 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

The Syllabus

Learn UI Design includes access to two things:

Learn UI Design Video Series

The Learn UI Design

Video Series

A web app containing 6 sections of 32 video lessons and exercises. Work through it lesson by lesson, or skip around to what you’re most curious about at the moment. You can view it on any device.

Slack

The Learn UI Design

Slack Channel

Talk with others who are taking the course, ask me questions, and get feedback on your designs and exercises as you journey towards being a UI pro.

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 VI).

I. Introductory Topics
  1. 1.1 Welcome!
    • 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 Sketch
    • A primer on Sketch functionality
    • How to create and modify text, shapes, backgrounds, and more
  3. 1.3 Setting Up Sketch & Asset Files 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)
  4. 1.4 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
  5. 1.5 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
  6. 1.6 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
II. Fundamentals
  1. 2.1 Analyzing Aesthetics
    • How the "Design Fundamentals" in this course differ from most courses or articles
    • What lessons from a well-designed room carry over into UI design
    • A case study of alignment, whitespace, and consistency
  2. 2.2 Alignment
    • The importance of alignment
    • The trick to aligning tables and padded elements
    • Centering assymetric 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 3 most important rules of spacing
    • How to add whitespace in data-heavy apps
    • Live examples of how to add whitespace to designs
  4. 2.4 Lighting & Shadows
    • How to use shadows to mimic the real world
    • How – and when – to color your shadows
    • The 2 major types of lights and what they mean for UI design
  5. 2.5 Grids
    • When grids shine; when they fail
    • Thinking responsive when designing layouts
    • The major reason to break a grid
  6. 2.4 Consistency
    • What consistency and inconsistency means to our brains
    • When to break consistency – and how to do it effectively
    • How to draw the line between consistency vs. standing out
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 Adjustment: The Most Important Color Skill
    • How to generate entire interfaces from just 1 or 2 base colors
    • 3 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 Picking Secondary UI Colors
    • 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 Typography Terminology: The Bare Minimum
    • An illustrated guide to the most practical terms in using fonts on a day-to-day basis
  2. 4.2 Choosing Fonts
    • What makes for good body vs. good header font
    • 3 guidelines for picking fonts in any situation
    • An interactive list of high-quality fonts for various uses
  3. 4.3 Styling Text
    • How to style your body text for legibility
    • Why styling paragraph text is different than other UI elements
    • How to get the most out of a single typeface (because you don't always have a choice)
  4. 4.4 Styling Text 2
    • Special text stylings to keep in mind for editorial content – like blogs and articles
    • When to use condensed fonts
    • Tips for creating drop caps
  5. 4.5 Pairing Fonts
    • A framework for making sense of the many font-pairing strategies
    • The 3 simplest heuristics for pairing fonts
    • How pairing fonts differs between clean/simple/neutral sites and heavily-branded sites
  6. 4.6 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
V. User Interface Components
  1. 5.1 Form Controls
    • How to build out a "style guide" from the fewest controls
    • Do all your buttons look boring? 5+ variations to consider
    • The most important considerations when creating form controls
  2. 5.2 Icons 1: Vector Editing
    • An overview of Sketch vector editing functionality, from shapes to scissors
    • Blend modes to give small illustrations a more realistic effect
    • A live example of illustration exercise incorporating the techniques of this lesson
  3. 5.3 Icons 2: Icon Design
    • When to use – and avoid - icon libraries
    • A workflow for designing your own icons
    • Do you need to design icons on a grid?
    • Techniques to make icons match the visual style of your interface
  4. 5.4 Photography in UI
    • How to style photography to suit your brand
    • Places to find great photography – even for free
    • Photography in responsive designs
  5. 5.5 Tables & Lists
    • The most important things to remember when designing lists and tables
    • How lists and tables differ from other UI elements
    • Tables on mobile
VI. Real-World Process
  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 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
  4. 6.4 Finding Clients
    • The best methods for a new freelancer to find clients
    • Best practices for turning 1 job into many
    • The worst places to find new clients
  5. 6.5 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

And you're not in it alone

Erik – that's me!

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:

Get Notified

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 about UI, but tangentially cover UX as well.

Long: UX (“how it works”) and UI (“how it looks”) are sister disciplines. It’s hard to separate them. The aim of this course is to help you make things that look great, but there’s zero point in doing that if usability is zilch.

Therefore: I reference topics and ideas from UX constantly in this course, but Learn UI Design is certainly not about them.

Question:

Can I see some of the course for free?”

Answer:

No.

Why? Because I’ve already given away a lot of similar content for free. If you want to get a feel for the teaching style, types of tactics, and things I talk about, I recommend looking at 7 Rules for Gorgeous UI.

This behemoth of an article clocks in at 5,000 words, and has been read by over a million people, and referenced on basically every major design mailing list. It’s a great place to start, and if you find the article useful, you’ll love this course.

Question:

What app do you use?”

Answer:

Learn UI Design is taught in Sketch.

Why? Sketch has taken the design world by storm, with more designers using it as their primary UI design tool than anything else.

Personally, I used Photoshop for years, but making the switch to Sketch was a no-brainer. When it comes to UI design, Sketch is the only tool made exactly for that job, and using it felt like a breath of fresh air after the Dark Ages of Photoshop.

There's a bonus here: as I'm constantly referencing Sketch techniques and hotkeys, you'll become very proficient if you do use it as well.

There's a catch though: Sketch is only for Mac, and will probably stay that way. If you're wedded to Windows, I'd recommend checking out Adobe XD or Figma instead, which have very similar interfaces and functionality to Sketch.

Question:

Are there any prerequisites?”

Answer:

There are no official prerequisites.

You should, however, own or be willing to invest in a UI design app – ideally Sketch, but Adobe XD and Figma are also great.

You should definitely be interested in technology – if not already in the tech industry – and motivated to learn UI design. If you have serious doubts about this course, I’d hold off on buying for now.

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 30+ lessons, homework assignments, and resources. Not to mention that over time, I'll be adding new lessons and improving existing ones. And who will have access to 100% of the new material? You will, you lucky dog.

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. You can watch any video at any time. That being said, invitation to the Slack channel is manual, and might take up to 24 hours.

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.

Wait, wait – who are you?

Erik – that's me!

Hey! My name is Erik Kennedy, and I’m an independent UX + UI designer in beautiful Seattle, WA.

My clients have ranged from startups to Fortune 100, and have included companies like Soylent, Amazon, and more.

I’ve spoken here and abroad at businesses, meetups, and universities (like UC Berkeley and Yale). In addition, my design writing has been read by over a million people.

But before all that, I was in school for engineering. That’s right – a developer. So when I first tried my hand at design, I thought I was 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.

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

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.


You’ve read this far, so let’s talk money. The simple fact is, companies pay for good UI design. They know they want to “be like [Apple, AirBnB, insert company here]”, but they don’t know how. You can, though. It’s a learnable set of skills, and it’s valuable.

Before being a freelance UX/UI Designer, I was a Program Manager at Microsoft, one of the highest-paying software companies in the nation. Two jobs. Where do you think I made more money?

Know the answer? It ain’t Microsoft.

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 hot commodity.

(By the way, freelancing is not everyone’s dream, but it is nice – and if you choose to do it, you’ll want to really dive into the video on presenting your designs – it’ll be pure gold for anyone who does client work)

This sort of bragging is not something I'd do to anyone I just met, but I'm trying to sell a product, so cut me a bit of slack, eh? We'll keep moving along, but I want to hear you say it to yourself: people pay for good design.

Double Your Learning With Personal Coaching

If you need to learn UI design fast, there’s no better way to do it than with personal advice and one-on-one design feedback.

Some students come into Learn UI Design needing to focus on, say, typography. Others have a more intuitive sense of fonts, but would benefit from honing in on creating clearer hierarchies of content. It’s different for everyone, which is why I’m also offering the Personal coaching Plan.

The Personal Coaching Plan is for students who need to up their skills as quickly and efficiently as possible. While all students will have access to feedback and reviews in the Slack Channel, the Personal Coaching students will also get six hours of one-on-one sessions over Skype, where we’ll screen share designs you’re working on and zoom in on the topics that will personally help you the most.

What do we cover in these sessions? Let me give you some examples, based on past sessions:

So: if it helps you improve your design game, it’s on the table.

This is a premium option that’s not for everyone, but if you want to raise your skill level and could benefit from individual coaching, check it out.

The personal design coaching sessions have:

Do you wish you worked with an experienced designer who you could pepper with questions and get some real, in-depth feedback from? Think of this as your chance.

Get Notified

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

Learning from Erik, I was able to bring a cohesive style to my organization’s enterprise application. Not only does it look WAY better, it's also more usable. I never thought design would be my thing, but I'm 10x more confident with this stuff now. Highly recommended.”

Aaron Marz

This course really helped develop my eye for UI design. I am much more able to identify needed improvements to a design, to communicate why they are important, and to quickly find relevant examples. My UI designs look much more professional than before.”

Diane Rudeen

Learn UI Design is the best UI instruction I've found. Erik's explanations were spot-on, and his encouragement and enthusiasm gave me the confidence I needed to improve my design skills.”

Trish Haynes

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

Be the first to know when Learn UI Design is re-opened

Want to be notified when Learn UI Design is re-opened for enrollments? Sign up for my Design Newsletter (you can unsubscribe at any time – and there are thousands of us here already).