illustrations

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Illustration principles for Shopify admin

Shopify admin illustrations follow four core principles: (1) Always be useful—illustration adds information, provides context, adds clarity, or leads to the next step; (2) Keep it in the family—all illustrations are part of the same visual family, and inconsistencies lower overall experience quality; (3) Be considerate—illustration should understand and support the merchant's experience and feel appropriate for the situation; (4) Stay focused—each illustration conveys one thing, with an easy-to-understand story so merchants intuitively know how to accomplish their goals.

Illustration color palette rules

Illustrations use a special limited color palette: individual illustrations use whites, grays, and two or three colors each. Colors are less saturated than the surrounding UI to avoid distracting from core interactions.

Illustration shape guidelines

Objects in illustrations have realistic proportions for easy recognition. Simple geometric shapes with rounded corners build clear and approachable images. Representations of people use more organic shapes.

Illustration space and perspective

Illustrations use a flat, two-dimensional perspective so the entire area is of equal importance. Drop shadows provide subtle depth when necessary. An additional side of an object can be added if not easily recognizable from a single side. Each illustration has negative space around it to feel balanced in its location and maintain equal visual weight with other illustrations in the same places.

Illustration line style

All illustrations have smooth lines without texture. Smaller objects have straighter lines, while larger objects can have more detailed, curved lines. Intersecting and continuous lines are a key element of the admin illustration style but aren't forced; they make simple illustrations feel elegant and visually interesting without being distracting.

Illustration detail requirements

Illustrations need some detail to make sense, but too much can be noisy. They have the minimum amount of detail necessary to feel realistic but still simple. Fine details are rarely smaller than 4px in height or width.

Empty state illustrations

Merchants see empty state illustrations the first time they access a new part of the experience, before they've had the chance to do anything there yet. These illustrations introduce what merchants can do in that area and set expectations for what's ahead.

Onboarding illustrations

Onboarding task illustrations frame what each task is for and help new merchants set up their store. By changing in appearance, they reinforce when a task is complete.

Announcement illustrations

Announcements let merchants know about something that might help their business. When the announcement celebrates a major merchant milestone or introduces an important product, illustration helps make it special or noticeable.

Spot illustration usage

Unique spot illustrations can be used in rare instances to achieve specific goals, such as to draw attention to something important on a busy page or to explain a technical concept.

Give your agent this brain