Illustrations are an effective way to build an app’s visual identity and help convey complex ideas in a simple way.
They should be meaningful and reflect the user's context and emotional state.
Use illustrations effectively to:
- Welcome the user to the app, on Sign in or Splash screen
- Introduce and explain a feature or the product itself
- To congratulate and celebrate when the user completes a task
- Provide help when something happens unexpectedly in the application
Scene illustrations are welcoming and positive. They usually come in a pair and are anchored to the bottom edges of a page.
Scene illustrations are sized at 400x348.
Hero illustrations are more metaphorical in nature. They can contain more than one person in a broader scene with larger than life objects.
Hero illustrations are sized at 376x240
Medium illustrations are slightly smaller versions of heroes. They contain a person (or two) doing a single task or representing a single concept.
Medium illustrations are sized at 200x200
Spot illustrations are the simplest and smallest illustration. They contain a single object or a part of the human body, usually a hand. They do not include any people.
Spot illustrations are sized at 80x80
All illustrations have a
size (number) prop that can be used to overwrite the default width.