Most of the images we use are rendered as illustrations. Why not use photography or other types of iconography? Well, an illustration-based visual style has a lot of advantages. For example:
- Illustrations are fun and engaging. They’re a great way to add visual interest and also convey meaning to aid interactions, and they add delight at the right moments.
- They’re flexible, scalable, and relatively easy to create. Vector-based images help us avoid issues with resolution—our illustrations are always crisp, never pixelated.
Why we use illustrations
Our illustrations represent a variety of subjects without being overly specific, so they work in different contexts. We use illustrations to:
- Portray objects like appliances, electronics, or other household items
- Show energy-efficient behaviors or outcomes
- Explain a process, action, or “how-to” instruction
- As decoration and set a fun tone
Illustrations hold a lot of potential for animation, too.
Illustrating subject matter
In order to illustrate an object, sometimes it helps to set the scene. When needed, show objects in context. For example, depict a washing machine with a clothes basket.
Use real-world things to point to abstract ideas. For example, a sun or moon can allude to time.
Use details to connote human presence—for example, a finger pointing at a screen or slippers on the floor. Don’t show faces or bodies that imply a given age, gender, or race.
- Simple and modern
- Flat, geometric shapes
- Usually front or side view
- Grayscale, plus one color
- Works on white and 10% gray background
- Avoid using text
- No strokes or outlines
- Not too cute or puffy (use minimal corner radius)
We have two standard sizes for illustrations – small and large. Our 'tip' illustrations are duplicative, so be sure to create both a small and large format of your illustration if you’re designing tips.
- Minimum size of 160px / 160pt
- Compared to small illustrations, these have more detail to help convey different ideas
- Elements can extend outside of the circle
- Nothing extends beyond the constraints of a square
- Minimum size of 60px / 60pt
- Reduced to essential details
- Understandable at a glance
- Elements do not extend outside of the circle
Our illustrations are designed to live on one of two background colors –
Illustration color reference