A brief history of Health bar

BLOG•20 Sep 2026

Text

Copy (The words that fill your design)
Micro-copy (The short pieces of text throughout your interface)
Truncation (You can cut off text, often with an ellipsis, so that it fits in the space given for it)

Illustration (Abstract imagery you use to reinforce a message)
Photography (Literal imagery you use to reinforce a message)
The medium has meaning (How imagery is made carries meaning outside of its subject matter)
When to use more literal or abstract imagery (e.g. photos are literal/professional, illustrations are abstract/approachable)
Tangible vs intangible concepts (some concepts are easy to show a photo or screenshot of, and some concepts are fuzzier and need an illustration that points at the concept)
Cropping images (Images can be cropped so that they fit in the space given for them)
Image masks (Graphics can be masked so they take on a shape)
Edit images to suit context (e.g. Give an image a warmer temperature to match colour palette)
Support, persuade, explain for photographs (Photography should support the context, explain something useful, or persuade the viewer)
Uses of imagery (Imagery should identify, express, or communicate something)
Photos should start a video in viewers’ heads (A good photograph should cause a video or scene to play in the viewer’s head when they look at it)
How images affect attention (e.g. our eyes are drawn to faces)
Background-less photos (Remove the background around an object in a photo so it fits the design more)
Inline imagery (Imagery that sits inline with text)
Content vs. flavour (Some imagery is content and some imagery is just there for “flavour”)

Symbols (Small abstract imagery with a specific meaning)
What symbols can represent (Feeling, object, action, concept)
Icon bounding box (Icons often sit in the middle of a fixed size space, regardless of the shape of the icon)
Bigger symbols can have more detail (The smaller a symbol is, the less detail it should have, and vice versa)