DESIGN RULES: Principles + Practices for Great UI Design
4.6 (5,400 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
20,315 students enrolled

DESIGN RULES: Principles + Practices for Great UI Design

Learn to design powerful user interfaces for apps, sites and systems
4.6 (5,400 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
20,315 students enrolled
Created by Joe Natoli
Last updated 5/2018
English [Auto], Indonesian [Auto], 3 more
  • Italian [Auto]
  • Polish [Auto]
  • Romanian [Auto]
Current price: $64.99 Original price: $99.99 Discount: 35% off
3 minutes left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Be able to create useful, usable and visually compelling UI design for any kind of app, site or system.
  • Understand how to properly balance form and function
  • Understand the critical rules for designing on small screens and mobile devices
  • Know how to effectively organize and economize visual information
  • Understand + apply the principle of Balance to create visual order
  • Understand + apply the principle of Rhythm to establish and reinforce comprehension
  • Understand + apply the principle of Harmony to shape disparate UI elements into a unified, consistent experience
  • Understand + apply the principle of Dominance to direct user focus and enhance UX
  • Understand + apply the principle of Alignment to lead the user's eye and speed task completion
  • Understand + apply the principle of Proximity to signal relationships between screen elements and decrease users' cognitive effort
  • Communicate with color, typography and imagery in the UI
  • Understand how color communicates and influences interaction
  • Know how to choose the right colors for any UI design
  • Know how to apply contrast properly to guide users and call attention to critical UI elements and interactions
  • Know how to determine whether or not color and contrast are appropriate
  • Understand the fundamentals of typography as a design element
  • Know how to choose the right fonts and design appropriately with them
  • Understand + apply 7 crucial rules for great typographic design
  • Understand + apply 5 rules for choosing the right imagery
  • Understand + apply a core set of DOs and DON'Ts when designing with images
  • Know how to create and simplify visual cues that direct user focus and interaction
  • Understand the 3 kinds of data visualizations used in UI design
  • Understand how the context of the data presented determines its visual form
  • Understand + apply 6 rules for great data design
  • Know how to simplify visual information to clarify meaning and improve UX
  • Know how to visually separate content from controls to make interactions easier for users to understand and act on
  • Walk away with a set of "18 UI Design Mantras" that you can apply to anything and everything you ever design!
  • No prior knowledge required; general familiarity with User Interface (UI) Design is helpful, though.

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

Who this course is for:
  • Print and Digital Designers, Web and App Developers and anyone looking to take their UI work to the next level!
Course content
Expand all 50 lectures 05:08:05
+ Ground Rules: What You Need to Know Upfront
8 lectures 01:07:10

A fundamental understanding of what the word design really means — and why most people misinterpret it — is where you need to start.

Preview 16:37

The path to great UI design starts when you stop looking at other people's work.

Preview 07:25

Learn why "form follows function" as a UI design principle is flawed — and false.

Form Doesn't (and Shouldn't) Follow Function

Achieving balance between form and function in the UI means informed decision-making — not order-taking.

Balancing Form and Function: Prescription vs. Description

How to avoid the pitfall of assuming functional considerations should influence visual form.

Why Form Follows Function is NOT a UI Design Prescription!

Understanding what forces really impact visual form is the key to better UI design decisions.

Every Force Evolves Form (So Don't Follow the Prescription)

Understand the very big challenges posed by small screens — and how to solve them through UI design.

Less is More: Small Screens, Big Challenges

Five timeless rules for designing anything well on small, mobile device screens.

Five Rules for Effective UI Design on Small Screens
+ Organizing Visual Information
14 lectures 01:08:48

Learn how the principle of Balance creates visual order — and why doing so is critically important.

Balance: Creating Visual Order

Case studies showing how changes in visual balance significantly improve poorly designed interfaces.

Case Studies: Improving Balance in the User Interface

Learn how rhythm is established in the UI — and why, when intentional, it significantly improves UX.

Rhythm: Establishing and Reinforcing Comprehension

Learn how the principle of Harmony acts as the glue that holds individual UI elements together.

Harmony: Shaping the Parts Into a Whole

Learn how harmony establishes purposeful, intentional visual flow in the UI.

Using Harmony to Create Directional Flow

A case study detailing how changes in visual harmony makes a form faster and easier to scan and complete.

Case Study: Using Harmony for Better Form Design

Learn why and how the principle of Dominance is critical to proper UI form and functionality.

Dominance: Directing (and Maintaining) User Focus

Understand why using the principle of dominance properly decreases a user's mental effort, resulting in positive UX.

Using Dominance to Increase Focus — and Decrease Cognitive Effort

Learn multiple ways to establish dominance, beyond the most obvious method (size).

Creating Dominance with Size, Negative Space and Contrast

Learn to use alignment intentionally, to guide users through every part of the screen.

Alignment: Leading the Eye Across the Screen

Case studies showing how changes in alignment make HUGE differences in the quality of UI design and UX.

Case Studies: The Power of Alignment

Learn how proximity signals (or confuses) relationships between content, data and interactive UI elements.

Proximity: Showing and Communicating Visual Relationships

Use the principle of proximity to speed up recognition and understanding of visual information.

Using Proximity to Make Cognition Faster

Case studies showcase the principle of proximity to design effectively with negative space — and make browsing easier and faster.

Case studies: Using Proximity to Make Browsing Easier
+ Using Color and Contrast Appropriately
11 lectures 54:34

Learn why color can be a powerful emotional tool — and why it should never be an afterthought or an arbitrary choice.

Color: Getting Attention and Communicating Emotion

Understand the key role color plays in users' ability to identify (and act on) opportunities to interact with the UI.

How Color Influences Interaction

Color doesn't have to be difficult. Honest ;-)

A Word on Color Theory — and Using Color Correctly

Learn the common associations most of us have with color — and when they're the right place to start.

How to Choose the Right Colors for your UI: Common Associations

Emotional impact plays a big role in determining color effectiveness and appropriateness.

How to Choose the Right Colors for your UI: Emotional Impact

Everything around you is a potential source for appropriate color choices — the trick is knowing where to look.

How to Choose the Right Colors for your UI: From the World Around You

Color choice can start with branding — but there's more to that than you think.

How to Choose the Right Colors for your UI: From Brand Colors

Why contrast trumps all else when it comes to visual design — and how to use that to your advantage.

The Power of Contrast

Contrast is a powerful tool for guiding and enhancing usability and overall user experience.

Using Contrast to Improve Readability, Attention and Focus

The three critical functions of contrast you must apply properly when designing.

Three Essential Functions of Contrast in UI Design

How do you know when color and contrast is appropriate? The method is simpler than you think.

How to Determine Appropriate Color and Contrast
+ Designing with Typography and Imagery
7 lectures 53:05

A crash course in proper typographic design — which is what separates great designers from merely good ones.

Typography 101: It's About Much More Than Choosing a Font!

The right typeface has massive impact in how visual messaging is seen, perceived and interpreted in the UI.

Creating Emotional Impact with Typography

Choosing the right font means understanding and recognizing its relationship to pattern recognition.

Choosing a Font Isn't Typography: The Importance of Pattern Recognition

Learn these critical keys to speeding up scanning, encouraging reading and increasing comprehension.

The Importance of Proper Alignment, Leading and Kerning

Seven timeless rules to ensure you design appropriately — and effectively — with typography.

Seven Rules for Great Typography

How to choose the right imagery, for the right reasons, for the right situations.

Five Rules for Choosing Imagery

Hard and fast rules for using images of any kind in sites, apps and systems.

Imagery DOs and DON'Ts
+ Creating and Simplifying Visual Cues
9 lectures 58:12

While icons can seem like easy solutions, they don't always work as intended — and aren't always appropriate.

Working with Icons

Knowing these four types of icons is a big step in knowing when (and how) to use them in the UI.

Four Core Types of Icons (and How to Choose the Right Type)

Five rules you can use to tell when (and when not) to use an icon, along with how to judge effectiveness, usefulness and appropriateness.

Five Rules for Effective Icon Design

How to navigate the many UI challenges that come with data-intensive websites and systems.

Dealing with Data

Five ironclad rules to follow when designing data displays of any kind.

Five Rules for Great Data Design

Specific recipes for clearing clutter and simplifying data in the UI.

Simplifying Visual Information Part 01

Part 02 of simplifying visual information.

Simplifying Visual Information Part 02

How to establish clear visual differences (and cues) between things the user needs to see, and things they need to be able to do.

Separating Content from Controls Part 01

Part 2 of separating content from controls.

Separating Content from Controls Part 02
+ Things to Remember
1 lecture 06:16

A quick recap of the 19 UI Design Mantras you'll want to keep at your side during every project.

Recap: UI Design Mantras