Better UI Design

Techniques you can use to improve your visual design.

Background

Angled Background Transition
Background as content highlight
Background as text highlight
Background overlay as lightbox effect
Background shape to outline container
Background spread across containers
Background words
Blob background
Blob element 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
Squiggle as element background
Stepped background transition
Subtle button background
Subtle stroke as background divider
Tilted background shape
Transparent background as field
Zebra striped table rows

Blur

Background blur for text contrast
Blur as button background
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
Fading border
Gapped border as focus state
Gradient as pulsing border
Gradient border as bevelled edge
Gradient border as inward bevelled edge
Gradient border
Hand drawn borders
Label built into border
Patterned border
Semi-transparent border as element contrast helper
Transparent border for contrast

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
Low contrast colour as subtle background
Use grey for less important text
Use softer colours for heavier elements
Use softer blacks

Gradients

Gradient as 3D face
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 link underline
Gradient text fill
Gradient using different hues
Radial gradient as light simulation
Radial gradient highlighter

Inner shadows

Inner shadow as depressed button
Inner shadow as field signifier/inset face
Inner shadow as inset text
Inner shadows for soft 3D shapes

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
Graphical divider
Lines as 3D effect
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

Abstract visuals
Angled shape as 3D edge
Arrow visual link
Bowed edges
Change shape of indicator
Chromatic aberration
Combined button and field
Connecting arrow
Container edge decoration
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
Noise
Offset border and background
Overlaid shape as menu highlighter
Pocket cut-off
Pop-out divider
Repeated shape for depth
Split element
Underglow
Uneven shape container
Unusual shape button
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
Layered drop shadows
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
Alternative glyphs
Change in width and weight
Changing text size
Characters replaced with imagery
Coloured text highlight
Interesting bullet points
Large background list number
Letter spacing on all capitals
Pill text highlight
Shaped text
Split word
Stacked titles
Text area cutout
Text background and foreground
Text inline imagery
Text on a path
Text Outline
Tilted text
Thick text underline
Transparent text with solid outline
Typeface switch mid-text
Vertical section title
Wood block text