DESIGN RULES: Principles + Practices for Great UI Design

DESIGN RULES: Principles + Practices for Great UI Design

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 5 Hours | 2.43 GB

Learn to design powerful user interfaces for apps, sites and systems

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.

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!
Table of Contents

Ground Rules What You Need to Know Upfront
1 Design is Design is Design.
2 Stop Solving Other People’s Problems
3 Form Doesn’t (and Shouldn’t) Follow Function
4 Balancing Form and Function Prescription vs. Description
5 Why Form Follows Function is NOT a UI Design Prescription!
6 Every Force Evolves Form (So Don’t Follow the Prescription)
7 Less is More Small Screens, Big Challenges
8 Five Rules for Effective UI Design on Small Screens

Organizing Visual Information
9 Balance Creating Visual Order
10 Alignment Leading the Eye Across the Screen
11 Case Studies The Power of Alignment
12 Proximity Showing and Communicating Visual Relationships
13 Using Proximity to Make Cognition Faster
14 Case studies Using Proximity to Make Browsing Easier
15 Case Studies Improving Balance in the User Interface
16 Rhythm Establishing and Reinforcing Comprehension
17 Harmony Shaping the Parts Into a Whole
18 Using Harmony to Create Directional Flow
19 Case Study Using Harmony for Better Form Design
20 Dominance Directing (and Maintaining) User Focus
21 Using Dominance to Increase Focus — and Decrease Cognitive Effort
22 Creating Dominance with Size, Negative Space and Contrast

Using Color and Contrast Appropriately
23 Color Getting Attention and Communicating Emotion
24 Three Essential Functions of Contrast in UI Design
25 How to Determine Appropriate Color and Contrast
26 How Color Influences Interaction
27 A Word on Color Theory — and Using Color Correctly
28 How to Choose the Right Colors for your UI Common Associations
29 How to Choose the Right Colors for your UI Emotional Impact
30 How to Choose the Right Colors for your UI From the World Around You
31 How to Choose the Right Colors for your UI From Brand Colors
32 The Power of Contrast
33 Using Contrast to Improve Readability, Attention and Focus

Designing with Typography and Imagery
34 Typography 101 It’s About Much More Than Choosing a Font!
35 Creating Emotional Impact with Typography
36 Choosing a Font Isn’t Typography The Importance of Pattern Recognition
37 The Importance of Proper Alignment, Leading and Kerning
38 Seven Rules for Great Typography
39 Five Rules for Choosing Imagery
40 Imagery DOs and DON’Ts

Creating and Simplifying Visual Cues
41 Working with Icons
42 Four Core Types of Icons (and How to Choose the Right Type)
43 Five Rules for Effective Icon Design
44 Dealing with Data
45 Five Rules for Great Data Design
46 Simplifying Visual Information Part 01
47 Simplifying Visual Information Part 02
48 Separating Content from Controls Part 01
49 Separating Content from Controls Part 02

Things to Remember
50 Recap UI Design Mantras