0%

Book Description

Beauty is only one factor when it comes to designing “good” interfaces. More importantly, a good UI has to achieve the user’s goals and the goals of the business. These short lessons tell you how to help and persuade the user to do the most effective thing.

What you'll learn—and how you can apply it

Visual design principles help you direct the user’s attention to the right place by using color, alignment, contrast and patterns. When you combine those principles into full layouts, you must understand how a user’s eyes move around a page, and use that information to help them scan the page for important content.

This lesson is for you because…

  • Users will think your layout is more beautiful and more enjoyable if you take the time to design it more effectively. And every good designer wants that.

Prerequisites

  • No experience necessary
  • Interest in designing products



Materials or downloads needed

  • None

This Lesson is taken from UX for Beginners by Joel Marsh.

Table of Contents

  1. I. Visual Design Principles
  2. 1. Visual Weight (Contrast and Size)
    1. Contrast
    2. Depth and Size
  3. 2. Color
    1. Meaning
    2. Recede or Advance
    3. Keep Wireframes Simple
    4. Combine Visual Principles
  4. 3. Repetition and Pattern-Breaking
    1. Breaking a Pattern
    2. Combine Your Principles
  5. 4. Line Tension and Edge Tension
    1. Line Tension
    2. Edge Tension
    3. Combine Your Principles
  6. 5. Alignment and Proximity
    1. Alignment
    2. Proximity
  7. 6. Using Motion for UX
    1. If Motion Makes People Wait, It’s Bad
    2. Motion Is Noticed First
      1. Straight lines point in a direction
      2. Curved lines make people follow the curve
  8. II. Wireframes and Prototypes
  9. 7. Z-Pattern, F-Pattern, Visual Hierarchy
    1. The Z-Pattern
    2. F-Pattern
      1. Why Is This Important?
    3. Create a Visual Hierarchy
  10. 8. Layout: Page Framework
    1. Footers
    2. Navigation
    3. Huge Submenus Are Never a Good Idea
    4. tl;dr
  11. 9. Layout: The Fold, Images, and Headlines
    1. The Fold
    2. Images
    3. Headlines
    4. tl;dr
  12. 10. Layout: The Axis of Interaction
    1. Find the Edges
  13. 11. Forms
    1. One Long Page or a Few Short Pages?
    2. Input Types
    3. Labels and Instructions
    4. Preventing and Handling Mistakes
    5. Speed versus Mistakes
  14. 12. Primary and Secondary Buttons
    1. Primary Buttons
    2. Secondary Buttons
    3. Importance Is a BIG Exception
    4. Special Buttons
18.216.233.58