User Interface Guide
Know the Laws
Know Jacob's Law
Know Fitt's Law
Know Miller's Law
Know Hick's Law
Know Postel's Law
Know Tesler's Law
Start with the Big Picture
Think Feature-First
Postpone the Details
Do Not Over-Design
Build a Personality
Limit your Choices
Lay Out Your Grid
Start with too much white space
Establish a spacing and sizing system
You don't have to fill the whole screen
Grids are overrated
Relative sizing doesn't scale
Avoid ambiguous spacing
Establish the Hierarchy
Not all elements are equal
Size isn’t everything
Don’t use grey text on colored backgrounds
Emphasize by de-emphasizing
Labels are a last resort
Separate visual hierarchy from document hierarchy
Balance weight and contrast
Semantics are secondary
Choose Your Colors
Ditch hex for HSL
You need more colors 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
Add Good Typography
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
Create 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
Incorporate Photography
Use good photos
Text needs consistent contrast
Everything has an intended size
Beware user-uploaded content
Add Ornamentation
Geometric Backgrounds
Touches of Calligraphy
Illuminated Borders
Ornate Pills
Put in the Final Touches
Supercharge the defaults
Add color with accent borders
Decorate your backgrounds
Don’t overlook empty states
Use fewer borders
Think outside the box
.webp)