Designing effective interfaces

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