DESIGN RULES: Principles + Practices for Great UI Design
- Objectifs pédagogiques
- Sections du cours
- Avis
The principles, practices and real-world techniques I’m going to show you here are the same ones that have informed graphic design for hundreds of years. And while that may sound like blasphemy to some of you, I guarantee you’ll see why and how they apply equally to the world of digital design — especially for mobile devices and their small screens.
I’m going to give you 50 lessons across 5 hours, packed with timeless, ironclad, unchanging rules for good UI design that you can apply to anything and everything you ever work on. You’ll learn how to create and apply hierarchy, color, contrast, typography, and gestalt principles to design appropriate visual cues for your users — and that’s just for starters.
You’ll learn how to make it easier for people to interact with what they see on the screen – whether they know what to tap, swipe or click, and whether what happens meets their expectations and moves them closer to their goals. You’ll learn how to create and apply hierarchy, color, contrast, typography and gestalt principles to design appropriate visual cues so people know where and how to take action.
I’ll show you how to make good visual decisions for even the most challenging applications, from simplifying complex visual information to designing with data. My goal with this course is to give you everything you need to know to make great UI design decisions, no matter what the content, context or product may be.
Trends will come and go, and it won’t matter: your UI will still be useful, usable, appropriate and relevant for its users. From this point forward, you’ll be equipped to make strategic, impactful User Interface designs that communicate, guide, encourage, motivate and educate. Anything else is decoration, and decoration has a very short shelf life.
When it comes to User Interface (UI) design, your job — whether you’re a designer, developer, UXer or a mix of all those things — is to make sure that no aspect of someone’s onscreen interaction happens without explicit intent. The UI design choices we make have to reflect the user’s motivations, expectations, environment and possible actions.
All of those things manifest themselves in the User Interface — so what people see on the screen is usually the sum of their understanding about what this is and how it works.
So what we show them has to do a hell of a job communicating what’s there for them, how it’s organized, how they get to it and what they can do with it once they do.
By the time you finish Design Rules, you’ll be able to do much more than create a more beautiful User Interface. Instead, you’ll be able to design a UI that truly works for the people who use it. One that it allows them to easily figure out where to start and how to get what they need — quickly, efficiently and intuitively.
Of course, it’ll also just happen to be beautiful 😉
-
1Design is Design is Design.Leçon vidéo
-
2Stop Solving Other People's ProblemsLeçon vidéo
-
3Form Doesn't (and Shouldn't) Follow FunctionLeçon vidéo
-
4Balancing Form and Function: Prescription vs. DescriptionLeçon vidéo
-
5Why Form Follows Function is NOT a UI Design Prescription!Leçon vidéo
-
6Every Force Evolves Form (So Don't Follow the Prescription)Leçon vidéo
-
7Less is More: Small Screens, Big ChallengesLeçon vidéo
-
8Five Rules for Effective UI Design on Small ScreensLeçon vidéo
-
9Balance: Creating Visual OrderLeçon vidéo
-
10Case Studies: Improving Balance in the User InterfaceLeçon vidéo
-
11Rhythm: Establishing and Reinforcing ComprehensionLeçon vidéo
-
12Harmony: Shaping the Parts Into a WholeLeçon vidéo
-
13Using Harmony to Create Directional FlowLeçon vidéo
-
14Case Study: Using Harmony for Better Form DesignLeçon vidéo
-
15Dominance: Directing (and Maintaining) User FocusLeçon vidéo
-
16Using Dominance to Increase Focus — and Decrease Cognitive EffortLeçon vidéo
-
17Creating Dominance with Size, Negative Space and ContrastLeçon vidéo
-
18Alignment: Leading the Eye Across the ScreenLeçon vidéo
-
19Case Studies: The Power of AlignmentLeçon vidéo
-
20Proximity: Showing and Communicating Visual RelationshipsLeçon vidéo
-
21Using Proximity to Make Cognition FasterLeçon vidéo
-
22Case studies: Using Proximity to Make Browsing EasierLeçon vidéo
-
23Color: Getting Attention and Communicating EmotionLeçon vidéo
-
24How Color Influences InteractionLeçon vidéo
-
25A Word on Color Theory — and Using Color CorrectlyLeçon vidéo
-
26How to Choose the Right Colors for your UI: Common AssociationsLeçon vidéo
-
27How to Choose the Right Colors for your UI: Emotional ImpactLeçon vidéo
-
28How to Choose the Right Colors for your UI: From the World Around YouLeçon vidéo
-
29How to Choose the Right Colors for your UI: From Brand ColorsLeçon vidéo
-
30The Power of ContrastLeçon vidéo
-
31Using Contrast to Improve Readability, Attention and FocusLeçon vidéo
-
32Three Essential Functions of Contrast in UI DesignLeçon vidéo
-
33How to Determine Appropriate Color and ContrastLeçon vidéo
-
34Typography 101: It's About Much More Than Choosing a Font!Leçon vidéo
-
35Creating Emotional Impact with TypographyLeçon vidéo
-
36Choosing a Font Isn't Typography: The Importance of Pattern RecognitionLeçon vidéo
-
37The Importance of Proper Alignment, Leading and KerningLeçon vidéo
-
38Seven Rules for Great TypographyLeçon vidéo
-
39Imagery DOs and DON'TsLeçon vidéo
-
40Working with IconsLeçon vidéo
-
41Four Core Types of Icons (and How to Choose the Right Type)Leçon vidéo
-
42Five Rules for Effective Icon DesignLeçon vidéo
-
43Dealing with DataLeçon vidéo
-
44Five Rules for Great Data DesignLeçon vidéo
-
45Simplifying Visual Information Part 01Leçon vidéo
-
46Simplifying Visual Information Part 02Leçon vidéo
-
47Separating Content from Controls Part 01Leçon vidéo
-
48Separating Content from Controls Part 02Leçon vidéo