Better UI Design

I believe UI design is made up of seven layers. This website focuses on the "polish" layer and catalogues every technique I've found to add polish to a user interface.

I've roughly grouped these techniques by how you'd apply them in design software. Tap a section to jump to it.

Background

Angled Background Transition
Background as content highlight
Background as text highlight
Background shape to outline container
Background words
Blob background
Blurred background element
Blurred shape as colour background
Brightness change as menu highlighter
Card as content highlight
Change background to contrast content
Checkerboard background
Coloured background shapes for icons
Curved background transition
Darkened background for text contrast
Double background shape
Edge circle background
Grey background for secondary area
Image as background
Incomplete background shape
Lines as background
Pattern as background
Pointed transition
Repeated pattern as background
Ribbon Background
Rounded corner background transition
Semi-transparent background as tap target
Shape as background to align icons better
Shape as button background
Shapes in background
Split level background transition
Subtle stroke as background divider
Tilted background shape
Transparent background as field
Zebra striped table rows

Blur

Background blur for text contrast
Blur as glass effect
Blur as text background
Blur unfocused elements

Borders

Border as content shape
Border as contrast against busy backgrounds
Border as focus state
Border as form field signifier
Border as ghost button
Border as subtle contrast helper
Dotted border
Double border
Exaggerated border contrast for classic button effect
Gapped border as focus state
Gradient border as bevelled edge
Gradient border as inward bevelled edge
Gradient border as metallic bevel
Gradient border
Label built into border
Patterned border
Semi-transparent border as element contrast helper

Colour

Add colour to grey backgrounds
Add colour to grey text
Background brightness to change distance
Colour as menu highlighter
Coloured text against coloured background
Duotone image as background
Use grey for less important text
Use softer colours for heavier elements
Use softer blacks

Gradients

Gradient as background transition
Gradient as concave face
Gradient as convex face
Gradient as element divider
Gradient as inset face
Gradient as metal effect
Gradient as a more interesting background
Gradient as text contrast helper
Gradient background divider
Gradient background to highlight content
Gradient fade for expandable text
Gradient text fill
Gradient using different hues
Radial gradient highlighter

Inner shadows

Inner shadow as depressed button
Inner shadow as field signifier/inset face
Inner shadow as inset text

Letting the background through

Background as a border
Background to colour element backgrounds
Cutting text out of an element

Lines

Divider with arrow
Divider with label
Dotted line divider
Edge connector
Emphasised underline tab signifier
Fading divider with label
Gradient line as background transition
Lines as dividers
Lines before titles
One sided stroke
Rounded corner container stroke
Squiggly line divider
Stepped width stroke
Strikethrough as menu highlighter
Stroke as container brander
Stroke as dark bottom edge
Stroke as light bottom edge
Stroke as menu highlighter
Stroke as row highlighter
Underline as field signifier

Other

Arrow visual link
Bowed edges
Change shape of indicator
Chromatic aberration
Combined button and field
Connecting arrow
Corner tag
Decoration around border
Dented overlap
Dot as indicator
Dot grid flair
Elements ignoring container edges
Elements overlapping background transitions
Faded shape as container
Folded corner
Full height form button
Hand-drawn elements
Overlaid shape as menu highlighter
Pocket cut-off
Pop-out divider
Repeated shape for depth
Uneven shape container
Upward tilting element
Visible Layout

Rounded corners

Rounded corners as stylistic choice
Rounded corners as subtle softeners

Shadows

Cast shadow
Coloured shadow
Content coloured shadow
Drop shadow as light bleeding
Hover shadow
Large soft coloured shadow
Neumorphism
Outline drop shadow
Patterned solid drop shadow
Reduced size drop shadow
Shadow as background transition
Shadow as contrast helper
Shadow as focus state
Shadow as border
Sloped drop shadow
Solid drop shadow as highlighter
Solid lower edge shadow
Standard soft shadow
Text drop shadows

Text

All Capitals for Alignment
Coloured text highlight
Interesting bullet points
Large background list number
Letter spacing on all capitals
Pill text highlight
Shaped text
Split word
Text area cutout
Text background and foreground
Text inline imagery
Text on a path
Text Outline
Thick text underline
Typeface switch mid-text
Vertical section title
Wood block text