Illustrations

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.


Principles

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.

Be useful

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.

Be consistent

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.

Be considerate

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.

Be focused

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)
  • Announcements
  • 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

Background color

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

    A green and indigo turtle on a white background

  • Change the background color

  • Use a transparent png/svg on a colored background

    A green and indigo turtle on a purple 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

    A turtle being carried away by a balloon

  • Change the blending mode of an illustration

  • Overlay a color overtop of an illustration

    A turtle being carried away by a balloon blended

Elements

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

    a dog leaning on its owner’s computer

  • Remove details from illustrations

  • Use single element of a larger illustration

  • Combine elements from two illustrations to create a new illustration

    a dog leaning on a turtle

Scaling

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

    turtle illustration centered with body text and a button

  • Scale vector illustration

  • Stretch or warp an illustration

    turtle illustration right aligned with body text and a button left aligned


Partner resources

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.

default avatars and spot illustrations

Empty states

default empty state