Skip to Content

Book: Refactoring UI

  • When starting with a design, start with a feature, not the layout

  • Think of an “app” as a collection of features.

  • Design in Grayscale first. Colour comes later.

    • This way, you’re forced to use spacing, contrast, and size to guide the user
  • Try not to use labels as much as possible.

    • Use emphasis and context to show information without labels
      • Ex: using the structure of email and phone number instead of labeling them
    • Combine labels and values when possible
      • Ex: “In stock: 3” vs “3 in stock”
  • Separate visual hierarchy from semantic hierarchy

    • Semantic hierarchy is about structuring a document hierarchically
      • Ex: Headings, DOM etc
    • Visual hierarchy is about emphasizing entities in relation to each other
  • Heuristic: Use more accentuated icons instead of the default bullet points, checklists, radio buttons, quotes etc

    • Extreme example: Selectable cards vs Radio Buttons
  • Heuristic: Add colored accent borders to give your app a more polished look

  • Heuristic: Change the background to liven up your app. Other ideas include: Gradients, repeated patterns with low contrast etc

  • Heuristic: Prevent empty states. Fill in empty states of your app with an image or call to action.

    • Empty states example: “No messages found”, “No contact found” etc
  • Heuristic: Instead of borders, use spacing, shadows, and colour to separate elements

  • Heuristic: To improve, pay attention to other designs and try to recreate them.

Visual Hierarchy, Colour, Palette, App Design, Typography, Design Personality, Limiting Choices, Design System, Design Emphasis, Design Weight, Design Actions, Design Spacing, Hue Saturation Lightness, Design Heuristic, Neutral Colors, Primary Colors, Accent Colors, Perceived Brightness, Color Temperature, Design Accessibility, Color Contrast, Depth Perception, Elevation System, Design Shadow, Design Image,