Also known as:
IllustrationHero illustrationSpot illustrationImageryGraphics

Illustration

An illustration communicates and expresses our personality through visuals.

AnchorNeed to know

  • Scene illustrations tell a rich story to set the scene for users and let them know what's possible.
  • Spot illustrations are simple, informational visuals that assist users in their task.

Visuals

UI Kit

To keep in mind

  • Scene illustrations convey a mood while users are navigating through the platform.
  • Spot illustrations give visual context to tasks.
  • Illustrations are generally presentational and use an empty alt="" tag or aria-hidden="true" as appropriate.

When to use and when not to use

When to use
  • Use illustrations to support onboarding or empty states.
  • Use illustrations to celebrate successes.
  • Use illustrations to draw attention to important features.
  • Use illustrations to convey complex ideas that are visual in nature.
  • Use illustrations when people aren't reading or understanding text descriptions.
When not to use
  • Avoid illustrations when words are more effective.
  • Avoid illustrations when performance is an issue.

See also

External Links

Here are some examples of other existing design systems: