Refactoring UI

Notes on web design.

Starting from scratch

Don’t try to design the app from the get go. Start with a feature and build it, then build another feature,…
- Start building things as soon as possible so your imagination doesn’t have to do all the heavy lifting
- Expect each feature to be hard to build, and design the smallest, most useful version
Try using a sharpie and paper for the first design. This prevents you from focusing on low-level details like typefaces
Design in grayscale so you don’t focus too much on color–you focus on space, contrast, and size.
Fonts: Serifs are elegant and formal, sans-serif is playful
Border radius: Small border radius is more formal, larger is less formal
Color: Blue is neutral, pink is playful, gold is sophisticated
Process of elimination: take a guess at what looks best, then try the option above and below that. This requires you have systems already designed.

Systemize everything

Define systems in advance so you don’t spend tons of time deciding what to use:

Font size
Font weight
Line height
Color
Margin
Padding
Width
Height
Box shadows
Border radius
Border width
Opacity

Heirarchy is eveything

Visual heirarchy is how important the elements in an interface appear in relation to one another. It’s the most effective tool you have to make something look “designed”.