(Or sign up for free design tutorials/articles, and leave it at that)
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 practical.
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:
- Subjective
- Arbitrary
- Easy to recognize, but difficult to create
I’m all too familiar with these feelings.
When I was a developer and PM, I felt this way constantly. 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.
Table of Contents
WHY UI DESIGN?
Everyone’s reasons for learning user interface design are different. If you’re already a developer, a PM, a UX designer, etc., why develop this totally separate skill?
Let’s break it down:
- UX Designers. You can present designs as beautiful mockups that your coworkers will rally around. You can work with interfaces from concept to pixel-perfection. Your portfolio stands light-years ahead of your peers.
- Developers. You can cover for design on your team. You can spiff up your side-project’s interface, instead of finding/hiring a designer. You can translate designs to code with minimal hassle, because you understand the aesthetic underpinnings.
- PMs. You can create amazing mockups for pitching new features and flows. You can work alongside your designers, and provide spot-on feedback for excellent product.
- Entrepreneurs. Like it or not, a good presentation for your ideas matters. Your marketing site, your app – even your pitch deck. Eventually, you’ll be in the big leagues and can hire out – but even then, a solid foundation in design will help you communicate and lead.
- Print Designers. More and more design work shifts to digital every day. You’ve got to learn the ropes, figure out this whole “responsive” business, and practically re-build your portfolio to keep working in the field you love.
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 actual 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 2020?
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.
THE COMPLETE ONLINE COURSE
Go from “I don’t have an eye for design” to be 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:
- Picking a color palette (and why that’s a misnomer in practice)
- What fonts to use (and, if you want to dive deeper, why and how to pair them)
- Laying out elements on your page
- How to present your designs (the most critical business skill for any designer)
- How to build your gut instinct for design (it can be done)
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 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?
Learn UI Design included
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).
INTRODUCTORY TOPICS
- 1.1 Begin Here
- 1.2 Introduction to Sketch
- 1.3 Introduction to Figma
- 1.4 Setting Up Your Workspace for UI Design
- 1.5 How to Build Your Design Gut Instinct
- 1.6 Starting a Project: Brand & Goals
- 1.73 Ways to Design Above Your Level
- 1.8 Finding & Using Design Inspiration
II.FUNDAMENTALS
- 2.1 Analyzing Aesthetics
- 2.2 Alignment
- 2.3 Sizing
- 2.4 Spacing
- 2.5 Lighting & Shadows
- 2.6 Grids
- 2.7 Consistency
III.COLOR
- 3.1 HSB
- 3.2Luminosity
- 3.3Gray: The Most Important Color
- 3.4Adjustment: The Most Important Color Skill
- 3.53 Techniques to Fix Clashing Colors
- 3.6Picking a Primary UI Color
- 3.7Picking Secondary UI Colors
- 3.8Dark Interfaces
- 3.9Gradients
IV.TYPOGRAPHY
- 4.1 Typography Terminology: The Bare Minimum
- 4.2 Choosing Fonts
- 4.3 Styling Text
- 4.4Styling Text 2
- 4.5Pairing Fonts
V.USER INTERFACE COMPONENTS
- 5.1Form Controls
- 5.2Icons 1: Vector Editing
- 5.3Icons 2: Icon Design
- 5.4Photography & Imagery
- 5.5Lists & Tables
- 5.6Charts & Data Visualizations
VI.DIGITAL PLATFORMS & PARADIGMS
- 6.1 Responsive UI Design
- 6.2 Designing Multi-State Screens
- 6.3 Accessibility
- 6.4 Overlaying Text on Images
- 6.5 Truncating Text
- 6.6 Mobile: iOS
- 6.7 Mobile: Android/Material Design
VII.COMMUNICATING DESIGN
- 7.1 Click-Through Prototyping
- 7.2 Creating a Design Portfolio
- 7.3 Finding Clients
- 7.4 Presenting Your Designs
- 7.5 Developer Handoff
Sales Page: _https://learnui.design/