Notes from reading the book "Refactoring UI"

Refactoring UI.org

Starting from Scratch

Start with a feature, not a layout

• An app is actually a collection of features.
• Instead of starting with the shell, start with a piece of actual functionality.

Detail comes later

• In the earliest stages of designing a new feature, it’s important that you don’t get hung up making low-level decisions about things like typefaces, shadows, icons, etc.
• Try working in a low fidelity environment like designing on paper using a thick Sharpie.
• Resist the temptation to introduce color right away.
• By designing in grayscale, you’re forced to use spacing, contrast, and size to do all of the heavy lifting.

Don’t design too much

• Instead of designing everything up front, work in short cycles. Start by designing a simple version of the next feature you want to build.
• When you’re designing a new feature, expect it to be hard to build.

Choose a personality

• Every design has some sort of personality.
• Font Choice

  elegant or classic look

  a serif typeface

  playful look

  rounded sans serif

  plainer look

  neutral sans serif

• Color
  1. Blue is safe and familiar.
  2. Gold might say expensive and sophisticated.
  3. Pink is a bit more fun.
• Border Radius
  1. Large border radius starts to feel more playful.
  2. No border radius at all feels a lot more serious or formal.
  3. Mixing square corners with rounded corners always looks worse. Stay consistent.
• Language
  1. The words you use in an interface have a massive influence on the overall personality.
  2. Less personal tone might feel more official or professional.
  3. More casual language makes a site feel friendlier.

Limit your choices

• When you’re designing without constraints, decision-making is torture because there’s always going to be more than one right choice.
• Don’t reach for the color picker every time you need to pick a new shade of blue — choose from a set of 8-10 shades picked out ahead of time.
• Don’t tweak a font size one pixel at a time until it looks perfect. Define a restrictive type scale in advance.
• Systematize everything
  1. Font size
  2. Font weight
  3. Line height
  4. C.olor
  5. Margin
  6. Padding
  7. Width
  8. Height
  9. Box shadows
  10. Border radius
  11. Border width
  12. Opacity
• Systemize anything else you run into where it feels like you’re laboring over a low-level design decision.
• You don’t have to define all of this stuff ahead of time, just make sure you’re approaching design with a system-focused mindset.
• Look for opportunities to introduce new systems as you make new decisions, and try to avoid having to make the same minor decision twice.