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.

1. Background
2. Blur
3. Borders
4. Colour
5. Gradients
6. Inner shadows
7. Letting the background through
8. Lines
9. Other
10. Rounded corners
11. Shadows
12. Text

Background

Angled Background Transition

Background as content highlight

Background as text highlight

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

Gradient background to highlight content

Grey background for secondary area

Image as background

Lines as background

Pattern as background

Pointed transition

Ribbon Background

Rounded corner background transition

Semi-transparent background as tap target

Shape as background to align icons better

Shapes in background

Split level background transition

Subtle stroke as background divider

Transparent background as field

Zebra striped table rows

Blur

Background blur for text contrast

Blur as glass effect

Blur as text background

Borders

Border as content shape

Border as subtle contrast helper

Dotted outline

Double border

Exaggerated border contrast for classic button effect

Gapped outline as focus state

Gradient border

Gradient outline as bevelled edge

Gradient outline as inward bevelled edge

Label built into border

Outline as contrast against busy backgrounds

Outline as focus state

Outline as form field signifier

Outline as ghost button

Semi-transparent outline 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 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 fade for expandable text

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 an outline

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

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

Blur unfocused elements

Bowed edges

Change shape of indicator

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

Overlaid shape as menu highlighter

Pen outline

Pocket cut-off

Pop-out divider

Repeated shape for depth

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

Patterned solid drop shadow

Reduced size drop shadow

Shadow as background transition

Shadow as contrast helper

Shadow as focus state

Shadow as outline

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

Text area cutout

Text background and foreground

Text Outline

Thick text underline

Typeface switch mid-text

Vertical section title

Wood block text