Refactoring UI - Principles
What are some core principles when starting from scratch?
Select one or more answers
Startin from scratch
- Start with a feature, not a layout
- Detail comes later
- Don't design too much
- Choose a personality
- Limit your choices
Hierarchy is everything
- Not all elements are equal
- Size isn't everything
- Don't use grey text on coloured backgrounds
- Emphasize by de-emphasizing
- Labels are a last resort
- Separate visual hierarchy from document hierarcy (?)
- Balance weight and contrast
- Semantics are secondary (?)
Layout and spacing
- Start with too much white space
- You don't have to fill the whole screen
- Grids are overrated
- Relative sizing does not scale
- Avoid ambiguous spacing
Design text
- Establish a type scale
- Use good fonts
- Keep your line length in check
- Baseline, not center
- Line-height is proportional
- Not every link needs a color
- Align with readability in mind
- Use letter-spacing effectively
Working with color
- Ditch hex for HSL
- You need more colours than you think
- Define your shades up front
- Don't let lightness kill your saturation
- Greys don't have to be grey
- Accessible doesn't have to mean ugly
- Don't rely on color alone
Creating depth
- Emulate a light source
- Use shadows to convey elevation
- Shadows can have two parts
- Even flat designs can have depth
- Overlap elements to create layers
Working with Images
- Use good photos
- Text needs consistent contrast
- Everything has an intended size
- Beware user-uploaded content
Finishing Touches
- Supercharge the defaults
- Add color with accent borders
- Decorate your backgrounds
- Don't overlook empty states
- Use fewer borders
- Think outside the box
Leveling Up
- Look for decisions you would not have made
- Rebuild your favourite interfaces