Illustrations
Working with illustrations
Always be useful
Illustrations add information. They provide context, add clarity, or lead to the next step.
Keep it in the family
Illustrations are all part of the same visual family. Inconsistencies lower the overall quality of the experience, and can distract users or make them feel like they’re in the wrong place.
Be considerate
Illustrations should understand and support the user’s experience. Each illustration needs to feel appropriate for whatever situation it shows up in.
Stay focused
Each illustration conveys one thing. The story is easy to understand, so users intuitively know how to accomplish whatever they came here to do.
Styles
Bold colors
Individual illustrations use more saturated colors and gradients to create a sense of teamwork, adventure, achievement, and optimism.
Here are places where you can find these types of illustrations.
Achievements
Awarded to users as part of the gamification feature for in-product training.
Spot illustrations
Sometimes a unique spot illustrations can be used to achieve a specific goal, like to draw attention to something important on a busy page, or to explain a technical concept. These assets are perfect when you need to pack a punch with limited space. Often they are a slightly more literal representation of a single concept.
Some of these custom illustrations are adapted from a Figma kit created by UI Trend (@uitrend) under a CC BY 4.0 license.
Subtle colors
Individual illustrations use whites, grays, and two or three colors each. Colors are also less saturated than the surrounding UI, so they don’t distract from core interactions.
Here are places where you can find these types of illustrations.
Emails
Empty states
Users sometimes see an empty state illustration the first time they access a part of the system where there is no information to show yet. It introduces what they can do here, and sets expectations for what’s ahead.
Some of these custom illustrations are adapted from a Figma kit created by UI Trend (@uitrend) under a CC BY 4.0 license.
Accessibility
Illustrations are used in conjunction with other components that convey important information that must be made accessible to all users. However, the illustrations themselves are purely decorative and should be hidden from screen readers and other assistive technologies.
For more information, see our accessibility guidelines.