Give Yourself Design Superpowers with Digital Illustrations

Give Yourself Design Superpowers with Digital Illustrations
digital-illustration

Digital illustrations are one of the most popular trends of recent years. Top industry players like Google, Airbnb, and Dropbox have embraced illustration as a distinctive part of their products.

In this article, I explore various illustration styles that modern products use, as well as provide tips on what you need to consider to create a style that will suit your brand. But before that, it’s important to understand why illustrations are so important.

The importance of illustration

Perhaps one of the most important facts you need to understand about illustrations is that illustrations are not just a trend—they’re a tool. By its nature, illustration is a visual interpretation of a particular concept, text, or process. People have used illustrations for thousands of years to communicate and to empathize.

digital-illustration-cave-drawings
Illustrations are one of the oldest forms of communication. The first cave drawings are dated at more than 35,000 years old. Image: sciencemag.

Using illustrations in your design is beneficial because the vast majority of people perceive visual information faster than textual (Words Versus Pictures, PDF).

Illustrations give designers three superpowers:

  • Understanding complex information. For complex information, visuals are better than text. While words can tell you something, illustration can show you something.

  • Better recall of information. Every time we try to remember something, our brain creates an image. It’s much easier to remember an illustration than plain text, because we have a ready-to-use image. Also, images tend to stick better in our long-term memory.

  • Brand identityIdentity is a combination of many different elements that contribute to a lasting impression. Good brand identity is something that makes your brand stand out from the crowd. Brand identity benefits from well thought out and consistent illustrations, and custom illustrations establish a solid foundation of originality.

Boost client conversions with design

From intuitive UX to smart defaults, design psychology impacts sales conversion for Shopify merchants. Learn how design can reduce cognitive load and impact decision making from an ecommerce perspective.

Not a partner yet? Sign up!

View course

The language of illustrations in digital products

There are four main types of illustration that are found in digital products. Below, we look at each of these types and how they are used.

Icons

digital-illustration-google-material-design-icons
Google Material Design Icons.

An icon is a symbol representing a larger idea. It’s a functional element—something we can easily interact with. Although we often don’t notice such small elements, icons are an essential part of the visual language of a product.

In an attempt to use icons in a structured way, many companies create guidelines. For example, Shopify platform uses Polaris for this purpose.

Spot illustrations

digital-illustration-evernote-spot-illustration
Spot illustration on the Evernote landing page.

A spot illustration usually accompanies text. As users, we typically see such illustrations on landing pages or in product updates and announcements. Spot illustrations are used to explain a body of text more succinctly.

Many people confuse spot illustrations with icons (probably because it’s possible to use icons for spot illustrations), but it’s vital to understand that these are not the same thing. Spot illustrations have a different functional purpose: they are not interactive elements.

Scene illustrations

digital-illustration-scene-google-tasks-android
Scene illustration show no tasks in Google Tasks for Android.

Scene illustrations often include an object, action, or character. Scene illustrations use the power of visual storytelling, by relying on metaphors to tell bite-sized stories. Such illustrations are commonly used in onboarding, as well-crafted illustrations help designers tell the story of any given feature, and make it crystal clear for users on how it might fit into their life. Scene illustrations are also useful for error states—situations when it’s vital to describe what just happened in order to get the user back on the path to success.

Hero illustrations

digital-illustration-zurb-foundation-hero
Zurb Foundation framework landing page.

A hero illustration is one of the first (ideally, the first) objects that a visitor sees when they visit a product’s landing page. Such illustrations have a limited number of cases where they can be used without getting in the way. Most often, hero illustrations are used in the introduction to a product, either on a landing page or the welcome screen.

You might also like: 4 Trendy Visual Design Techniques.

Popular illustration styles

In the world of tight competition, it’s vital to stand out. And in an attempt to stand from the crowd, companies try different approaches with their illustrations, which is why illustration styles come in and out of fashion all the time.

Focusing solely on current trends in this article will make it out outdated, so instead, I want to talk about two fundamental types of digital illustration design in modern products.

Flat hand-drawn illustrations

As the name suggests, each illustration is drawn by hand—the artist either draws on a piece of paper and then makes a digital copy of their work, or draws on a digital pad. Below are some examples of brands that use the flat hand-drawn style.

Dropbox

digital-illustration-brandon-land-dropbox
Illustrating a human brand by Brandon Land. Image: Michael Jeter.

Illustrations have been a part of Dropbox’s product since they started over ten years ago. Dropbox uses these illustrations to bring the product to life.

digital-illustration-dropbox-2017
Dropbox illustrations (2017).

In 2018, the company introduced a new illustration style with loose, witty drawings. Despite their simplicity, this style creates a truly memorable experience for first-time users—a friendly and relaxing atmosphere that users relate to.

digital-illustration-dropbox-2019
Dropbox (2019).

Intercom

digital-illustration-intercom-2017
Intercom (2017).

Intercom produces a messaging platform that allows businesses to communicate with prospective and existing customers within their app, on their website, through social media, or via email. Intercom is an excellent example of a product that uses illustration as a supplement to written content.

digital-illustration-intercom-2019
Intercom (2019).

Recently, the company introduced a new digital illustration style. Instead of anthropomorphic giraffes and walruses, Intercom started to use illustrations of people who use the service. The great thing about this approach is that when users see such illustrations, they start to imagine themselves in this role.

Slack

digital-illustration-slack-2017
Slack (2017). Image: Alice Lee.

Slack is a collaboration tool for business. In 2017, Alice Lee worked on the Slack redesign; her team introduced a new illustration style that was intended to personalize the brand by representing people in illustrations. At that time, it was one of the first companies that followed such an approach.

digital-illustration-slack-2019
Slack (2019). Image: Sergio Membrillas.

The Slack team is continuing to experiment and bring new ideas into their design.

Shopify

digital-illustration-shopify-2019
Shopify (2019).

Shopify uses illustrations to cultivate a more emotional relationship with users. In her article Building a New Illustration Style for Shopify, Meg Robichaud shares a lot of insights on how the team came up with the style the company uses today.

Shopify actively uses metaphors to deliver the key idea. For example, the illustration below makes it clear that the platform is accessible for customers with all abilities.

3D illustration

3D vector illustrations became trendy at the end of 2018. One of the reasons why this trend suddenly became popular is simple—such illustrations better resemble the digital nature of the product.

SPAR!

digital-illustration-spar

SPAR! is a social habit building app that uses 3D illustration to create a more playful image of a product.

Pitch

digital-illustration-pitch

Pitch is an open platform for presentations and content collaboration. The Pitch website uses a similar concept of 3D illustration, but it bakes an element of animation to make it more alive.

Template Icon

Three-step guide for creating your own illustration style

The illustration style you choose to use for a project should map to the voice of the product you’re representing. But how can you figure out your style? In this section, I want to talk about rules that will help you build recognition through illustration.

1. Define

When you just start working on your illustration style, you probably won’t have a clear vision of what your illustrations should look like. You’ll need to spend some time experimenting and trying various approaches. But before you make a first drawing, it’s vital to define your goals, so you know what to aim towards. You need to understand what the value is of adding an illustration to that product.

Decide how you want the brand to be perceived

Start with an understanding of the brand. Here are a few important questions that need to be answered before moving to the design part:

  • What does the brand represent?
  • What are the unique traits of the brand?
  • What do you want to achieve from using illustrations in your product?

If you have brand values or brand guidelines, it’s a perfect moment to check them. The information from these guidelines will help to define the tone of the illustrations and their qualities. Try to articulate where you want your illustration to land:

  • Serious vs. playful
  • Realistic vs. abstract
  • Simple vs. detailed

Learn about your users

When deciding on a particular style, it's important to take into account the target audience preferences and balance them with business goals.

The information you learn about your users will help you define the qualities of your illustration. Knowing your users is especially important because you want to connect with them on a personal level.

Two essential aspects you need to consider are:

  • Ensuring that the metaphors that you choose to use in your design will be clear to your target audience. Symbols and metaphors do not always cross cultures. If the message isn't clear to your users, this can lead to an incorrect understanding of the idea that your illustrations are trying to convey.

You might also like: Using Humor in Design: Why, When, and How.

2. Explore

The goal of exploration is to articulate the illustration style. Articulated style becomes a shared language that everyone on the team should use when creating illustrations.

Get inspiration

The process of exploration starts with inspiration. The more styles you explore, the better understanding you’ll have. Dribbble and Behance are good places to search for inspiration. You can also check Inspiration Grid or Creative Boom, which are resources dedicated to creative inspiration.

Don’t forget to structure your thoughts and ideas. A tool called a moodboard can help you with that. Put together a moodboard of illustrations that you feel may work for the style you want. If you work with a team of illustrators, ask each one of your team members to find examples they think are relevant to the brand, and put them on the wall.

digital-illustration-shopify-team-moodboard
Shopify’s team moodboard. Image: Meg Robichaud.

Try various styles

While you’re looking at different styles, select a few to test with your brand. Try each of them, and choose the one that works for you and your team (meaning, you and your team have to enjoy drawing in this style).

Tips:

  • Choose a long-lasting style. Make sure the style you choose will evolve with your brand.

  • Ensure that the style you choose to use will work for your primary platform. It’s one thing to design for desktop screens where you have plenty of screen space, and entirely another for mobile screens with tight constraints. If mobile is your primary platform, it’s essential to simplify the style of illustrations. Look for the elements of your illustration that actually set it apart, and get rid of the rest.

You might also like: 15 Myths That Can Ruin Your Mobile UX.

3. Design

Once you’ve decided on a style, it’s time to outline some rules to follow when creating illustrations.

Each illustration should have a purpose

One of the major misconceptions many designers have about digital illustrations is that using them in design is about making a product more beautiful. A digital illustration is a tool that should combine beauty and clear functional purpose. Product illustration without a functional purpose is distracting and overwhelming.

"Product illustration without a functional purpose is distracting and overwhelming."

You need to have a clear purpose for each illustration you want to use in your product. Every illustration should amplify the message you want to deliver to your user. Otherwise, illustration becomes just a cool decoration.

Create all your illustrations in a single style

You’ve probably heard that consistency is one of the most important characteristics of a well-designed product. Being consistent in illustration means considering the smallest details in a single illustration—perspective, light source, line weight, etc. Consistency speaks to your attention to detail and tells your users that you care. That’s why it so important to pick one style, and don’t deviate from it.

The illustrations used in your product should feel like they came from the same source—the same person—even though they were created by different illustrators.

Be deliberate about color

Color plays a critical role in creating illustrations for two reasons:

  • It can influence user mood. Color alone can set the mood before the user consumes the content.

  • Color can represent a brand. If the colors are taken from the brand color scheme, the illustration becomes a part of the brand's identity.

It’s important to consider both points when creating a color palette. Generally, it’s recommended to use a limited number of colors in the palette (2–3 colors, max) and stick with that palette for all your illustrations.

Illustrations are a superpower

Creating a distinct illustration style is not a simple task, but it is definitely worth your time. Well-designed illustrations can enhance your brand experience and help you to create a very personal connection with your users. Such illustrations become an essential part of your product, and both you and your users won’t be able to imagine your brand without them.

How have digital illustrations helped you design products? Let us know in the comments below!

About the Author

Nick Babich is a developer, tech enthusiast, and UX lover. He's spent the last 10 years working in the software industry, with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

Topics:

Grow your business with the Shopify Partner Program

Learn more