UI Tips and Tricks
- Squircles
- No gray mid-tones in gradients
- Layerings shadows
- Light always come from the top (slight subtle gradient on UI elements)
When you have nested elements with visible radii, use a simple rule:
inner_radius = outer_radius - outer_padding
Visual Alignment
Give every component some edge to align on.
Guide the Eyes
- Guide the users eyes
- by grouping data into useful groups
- by adding visual context
- by showing priority data
Show Interaction
- Show interaction points with
- links (color)
- links (underline)
- tags / chips
Highlight
Highlight important / active elements by changing / muting the surrounding.
