Shopify uses a precise illustration style to communicate directly with merchants.
This section will help you understand how we approach illustration, and the best way to work with us.
To create a baseline for quality and remove personal bias, we have a set of principles we collectively align to, and measure our success against. These principles prioritize the quality of the entire body of work over the success of any given instance and have become a primary tool we use during critique.
Illustration should add information. It provides context, adds clarity, or leads users to their next step. Ultimately, any illustration should provide a deeper understanding of the tool or brand.
Being consistent in illustration means considering details of a single illustration, as well as looking at the body of illustration work as a whole. Consistency speaks to quality: of the illustration and of the product it represents.
Illustration is used to connect with merchants on a human level: to join in celebration, or support them during a challenge. It’s important to consider all the possible outcomes or mindsets before inserting your voice into an illustration. Consider the worst possible outcome, and ensure the illustration empathizes with that user as well.
Illustration is most effective when it is precise in choosing a single message to deliver. With every narrative that is built there needs to be a focal point, a hierarchy of elements that contribute to the single, pointed message. With every illustration, we ask ourselves “what are we trying to say?”
When to use illustration
Illustration is a powerful communication tool, but only if you have something to say. When illustration is simply ornamental, it can easily become overwhelming or distracting, and ultimately detracts from the overall experience of using the product.
Common places to use illustration
- Empty states (when a a page has no results, or when something goes wrong)
- On-boarding (introducing a new feature, or explaining how to use your product)
- Progress indicators
Signs that you should use an illustration
- Your users are frustrated, or don’t know what to do next
- A feature is being bypassed, misused, or underused
- There’s too much text or the text is not being read and understood
- You want another way to speak directly to your user
- You want to congratulate or celebrate with your user
Using illustration in your designs
Creating the illustration is only the first step in adding illustration to our product. Implementing the right illustration in the right context should be done with the same care and consideration.
Before you begin
Pair with an illustrator when adding an illustration to your designs if you’re not sure how to implement it
Use an illustration from a previous illustration style
Create final assets using illustrations that were pasted from Adobe Illustrator into Sketch
Unless otherwise stated, each illustration was designed for either the
#230051 background colour, or the
#FFFFFF card colour.
Include the background color initial illustration request constraints
Use the illustration only on the background it was designed for
Change the background color
Use a transparent png/svg on a colored background
Transparency and blending modes
Each illustration was designed with a specific transparency and blending mode.
Use the illustration at 100% opacity; normal blending mode
Change the blending mode of an illustration
Overlay a color overtop of an illustration
The illustration team maintains not just the quality of a single illustration, but the quality of Shopify illustration as a whole. This means, among other things, making sure that they have the same level of detail, they don’t repeat elements too often, and their metaphors are used with the intended meaning.
Use the entire illustration as provided
Remove details from illustrations
Use single element of a larger illustration
Combine elements from two illustrations to create a new illustration
Each illustration was created for a specific screen size. There are elements of the illustrations that do not easily scale, and instead need to be re-drawn to meet Shopify quality standards. Often when a single illustration is required for multiple sizes, it is preferable to create multiple variations with minor variations of the same illustration, rather than resize a single illustration.
Provide all dimensions that you intend to use the illustration in
Request a mock up with the illustration that showcases how it interacts with the other elements on the page
Constrain proportions to the original ratio
Scale vector illustration
Stretch or warp an illustration
As a Shopify Partner, you have the opportunity to deliver an exceptional commerce experience to your users and a seamless setup experience to Shopify merchants.
Your sales channel may occasionally require illustrations. The Shopify illustration team has provided the Shopify default avatars, a series of spot illustrations and four empty states (generic, products, posts, and ads) that you can use to encourage merchants to create content specific to your platform. Avatars are used when a merchant has not uploaded a photo to their profile, spot illustrations are used as larger interactive elements of the interface, and the empty states are used when the merchant has finished setting up the sales channel–but has not published any content.