1. Starting from scratch (p. 7)
Start with a feature (a piece of actual functionality), not the layout (the shell). Design in grayscale with spacing, contrast and size, in low-fidelity to move fast. You end up with a clearer interface and strong hierarchy.
Start with a feature, not a layout
Detail comes later
Hold the color
Design in grayscale, you're forced to use spacing, contrast and size to do all of the heavy lifting. You'll end up with a clearer interface with strong hierarchy that's easy to enhance with color later.
Don't over-invest
Design in low-fidelity to be able to move fast.
Sketches and wireframes are disposable, users can't do anything with static mockups. Use them to explore your ideas and leave them behind when you've made a decision.
Don't design too much
Work in cycles
Start by designing a simple version of the next feature you want to build.
Be a pessimist
When you're designing a new feature, expect it to be hard to build. Build the simple version first and you'll always have something to fall back on.
Choose a personality
Font choice
- elegant or classic look: serif typeface
- playful look: rounded sans serif
- plainer look: neutral sans serif
Color
- blue is safe & familiar
- gold might say "expensive" & "sophisticated"
- pink is a bit more fun & not so serious
Border radius
- small border radius is pretty neutral
- large border radius feel more playful
- no border radius feels a lot more serious or formal
Language
- using a less personal tone might feel more official or professional
- using friendlier, more cusual language makes feel friedler
Deciding what you actually want
Limit your choices
Limit your choices and start with a smaller set of options.
Define systems in advance
- choose from a set of 8-10 shades of a color
- define a restrictive type scale (12, 14, 16, 18, 20, 24, 32 & 48px)
Designing by process of elimination
If your icon sizes are 12, 16, 24 & 32px, pick the best option, then try the values on either side for comparison. Two of those options will seem bad choices.
Systematize everything
You'll want systems for:
- font size (restrictive type scale)
- font weight
- line height
- color (8-10 shades)
- margin
- padding
- width
- height
- box shadows
- border radius
- border width
- opacity
- anything else...
Design with systems, look for opportunities to introduce new systems.