Opattern | Illustrations

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

Objects

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.

Concepts

Use real-world things to point to abstract ideas. For example, a sun or moon can allude to time.

People

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.

Visual guidelines

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)

##Size formats

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.

Large format

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

Small format

Minimum size of 60px / 60pt
Reduced to essential details
Understandable at a glance
Elements do not extend outside of the circle

Placement

Our illustrations are designed to live on one of two background colors – $white or $lightest-gray.

`$white`
`#FFF`

`$lightest-gray`
`#F1F1F1`

Illustration color reference

Variable	Hex	CMYK
`$illustration-dark-gray`	`#666666`	0/0/0/70
`$illustration-medium-gray`	`#C1C1C1`	0/0/0/40
`$illustration-light-gray`	`#E1E1E1`	0/0/0/20
`$illustration-white`	`#F1F1F1`	0/0/0/0
`$illustration-highlight`	`#8DC63F`	50/0/100/0