DESIGN RULES: Fundamental Principles + Practices for Great UI Design

Joe Natoli, Coaching & Training for UX Designers & Developers

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
50 Videos (5h 9m)
    • Design is Design is Design

      16:37
    • Stop Solving Other People's Problems

      7:25
    • Why Form Doesn't Follow Function

      11:16
    • Balancing Form and Function: Prescription vs. Description

      7:06
    • Form Follows Function is NOT a UI Design Prescription!

      7:43
    • Every Force Evolves Form (So Don't Follow the Prescription)

      4:44
    • Less is More: Small Screens, Big Challenges

      6:41
    • Five Rules for Small Screen Design

      5:38
    • Balance: Creating Order

      6:03
    • Case Studies: Improving Balance in UI Design

      6:38
    • Rhythm: Establishing Reinforcing Comprehension

      4:43
    • Harmony: Shaping the Parts Into a Whole

      5:50
    • Using Harmony to Create Directional Flow

      2:49
    • Case Study: Using Harmony for Better Form Design

      4:00
    • Dominance: Directing User Focus

      5:57
    • Using Dominance to Increase Focus and Decrease Cognitive Effort

      5:21
    • Creating Dominance with Size, Negative Space and Contrast

      5:42
    • Alignment: Leading the Eye

      4:22
    • Case Studies: The Power of Alignment

      5:26
    • Proximity: Showing Relationships

      4:36
    • Using Proximity to Make Cognition Faster

      2:46
    • Using Proximity to Make Browsing Easier

      4:35
    • Color: Getting Viewer Attention and Communicating Emotion

      5:02
    • How Color Influences Interaction

      7:57
    • A Word on Color Theory

      4:07
    • Choosing UI Colors from Common Associations

      4:07
    • Choosing UI Colors for Emotional Impact

      6:42
    • Choosing UI Colors from the World Around You

      4:15
    • Choosing UI Colors from Brand Colors

      4:03
    • The Power of Contrast

      2:55
    • Using Contrast to improve readability, attention and focus

      7:41
    • The 3 essential functions of contrast in UI design

      2:54
    • How to Determine Appropriate Color and Contrast

      4:51
    • Typography 101

      2:43
    • Creating Emotional Impact with Typography

      3:52
    • Choosing a Font isn't Typography: The Power of Pattern Recognition

      3:08
    • The Importance of Proper alignment, leading and kerning

      8:44
    • Seven Rules for Great Typography

      14:43
    • Five Rules for Choosing Imagery

      12:13
    • Imagery DOs and DON'Ts

      8:07
    • Working with Icons

      4:35
    • Four Core Types of Icons (and Choosing the right type)

      6:04
    • Five Rules for Effective Icon Design

      6:50
    • Dealing with Data

      8:45
    • Five Rules for Great Data Design

      5:27
    • Simplifying Visual Information Part 01

      4:10
    • Simplifying Visual Information Part 02

      9:13
    • Separating Content from Controls Part 01

      6:53
    • Separating Content from Controls Part 02

      6:15
    • UI Design Mantras Recap

      6:16
69 students are watching this class

About This Class

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.

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 packed with timeless, ironclad, unchanging rules for good UI design that you can apply to anything and everything you ever work on. Trends will come and go, and it won't matter: your UI will still be useful, usable, appropriate and relevant for its users.

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. 

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.

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 ;-)

27 of 27 students recommendSee All

Great design crash course. Although, Joe doesn't really go deep in any chapter but as a intro level it is way better than anything I've seen so far (the course would have to be 30 hours long were he to do that). Furthermore, all the chapters align really well together and thus it gives a viewer a good understanding of what to do and what is wrong with the example designs displayed. Meaning after watching this the viewer should be able to pin-point specific flaws with existing designs which should help him when actually designing something alone.
This was a great class! Loved how you took us through simple, easy to remember guides/tips without being too over the top with your explanation and not just saying the "how" but not the "why".
Very educative

340

Students

--

Projects

Joe Natoli

Coaching & Training for UX Designers & Developers

I've been helping Fortune 500 & 100 organizations train Product Design, Development and UX Teams from the ground up for 26+ years.

I've shown them how to incorporate real-world UX and design best practices into their work, without reinventing or disrupting what they do every day.

I speak at conferences, delivering keynotes, lectures and workshops, all over the world.

I've launched seven successful online courses, with more than 90,000 students (yes, that’s a re...

See full profile