Visual design techniques

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

Blurred text 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

Fading background container

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

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

Irregular dashed border

Label built into border

Meaningful container 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

Blending mode gradient

Blob gradient

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 easing

Gradient fade for expandable text

Gradient link underline

Gradient text fill

Gradient using different hues

Radial gradient as light simulation

Radial gradient highlighter

Three hue gradient

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

Connected containers

Connecting arrow

Container edge decoration

Corner tag

Decoration around border

Dented overlap

Dot as indicator

Dot grid flair

Element outline over different background

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

Tilted 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

Unslanted italics

Vertical section title

Wood block text

← anthonyhobday.com