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 Lessons (5h 9m)
    • 1. Design is Design is Design

      16:37
    • 2. Stop Solving Other People's Problems

      7:25
    • 3. Why Form Doesn't Follow Function

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

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

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

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

      6:41
    • 8. Five Rules for Small Screen Design

      5:38
    • 9. Balance: Creating Order

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

      6:38
    • 11. Rhythm: Establishing Reinforcing Comprehension

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

      5:50
    • 13. Using Harmony to Create Directional Flow

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

      4:00
    • 15. Dominance: Directing User Focus

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

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

      5:42
    • 18. Alignment: Leading the Eye

      4:22
    • 19. Case Studies: The Power of Alignment

      5:26
    • 20. Proximity: Showing Relationships

      4:36
    • 21. Using Proximity to Make Cognition Faster

      2:46
    • 22. Using Proximity to Make Browsing Easier

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

      5:02
    • 24. How Color Influences Interaction

      7:57
    • 25. A Word on Color Theory

      4:07
    • 26. Choosing UI Colors from Common Associations

      4:07
    • 27. Choosing UI Colors for Emotional Impact

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

      4:15
    • 29. Choosing UI Colors from Brand Colors

      4:03
    • 30. The Power of Contrast

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

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

      2:54
    • 33. How to Determine Appropriate Color and Contrast

      4:51
    • 34. Typography 101

      2:43
    • 35. Creating Emotional Impact with Typography

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

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

      8:44
    • 38. Seven Rules for Great Typography

      14:43
    • 39. Five Rules for Choosing Imagery

      12:13
    • 40. Imagery DOs and DON'Ts

      8:07
    • 41. Working with Icons

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

      6:04
    • 43. Five Rules for Effective Icon Design

      6:50
    • 44. Dealing with Data

      8:45
    • 45. Five Rules for Great Data Design

      5:27
    • 46. Simplifying Visual Information Part 01

      4:10
    • 47. Simplifying Visual Information Part 02

      9:13
    • 48. Separating Content from Controls Part 01

      6:53
    • 49. Separating Content from Controls Part 02

      6:15
    • 50. UI Design Mantras Recap

      6:16
78 students are watching this class

Project Description

Simplify visual complexity in a UI design.

Find either (1) a UI you've designed previously, or (2) a UI for an existing product.

Using the principles and practices outlined in this course (specifically the Simplifying Visual Information and Separating Content from Controls lectures), redesign one screen of that UI to accomplish the following:

  • Improve visual hierarchy
  • Communicate relationships between groups of related information
  • Visually separate unrelated information
  • Create clear, immediate visual distinction between content and interactive controls
  • Visually separate Primary Actions from Secondary (and Tertiary) Actions

Post your redesigns here, and ask for constructive critique from your fellow classmates. Help each other by pointing out areas where some of the principles we've covered are misapplied, or need to be applied.

I will do my best to weigh in when I can, on as many of these as I can.

Student Projects