pattern-img-border

Pattern 4: Use illustration to emphasize messages and emotions

Just as color and typography can create emotion, illustration can communicate complex messages and feelings quickly. Illustration is an important pattern to remember when you’re trying to appeal to specific audiences and emphasize messages through visual design.


Screenshot of illustration at Intercom

Screenshot of illustration at Dropbox

Screenshot of illustration at Shopify

Sources: Intercom, Dropbox, and Shopify. Each has invested heavily into their illustration styles and teams.

Just as color and typography can create emotion, illustration can communicate complex messages and feelings quickly. Illustration is an important pattern to remember when you’re trying to appeal to specific audiences and emphasize messages through visual design.

If you don’t possess much skill in illustration yourself, there are still viable ways to use this design pattern.

Create an emotional connection

Screenshot of illustration at Basecamp

Via Basecamp

Basecamp’s homepage illustration shows a familiar emotion for the company’s core audience: being overwhelmed with notifications, email, and meetings, and feeling lost and overwhelmed because of disorganization and poor communication that happens at work. The illustration builds rapport with potential customers by showing how the company understands their frustrations.

Explain important content & features

Screenshot of illustration at Podia

Via Podia

The custom illustrations at Podia do a great job of explaining the service’s core features. For example, the illustration for digital downloads teaches users the types of file formats they could sell using the service with just a quick glance.

Define brand tone & emotions

Screenshot of illustration at Wealthfront

2nd Screenshot of illustration at Wealthfront

3rd Screenshot of illustration at Wealthfront

4th Screenshot of illustration at Wealthfront

Via Wealthfront

The illustrations on Wealthfront’s site redefine the tone of the brand in a variety of ways. Most financial company brands are structured around building trust with customers, so they tend to be somewhat conservative. Wealthfront does use some conservative, mature themes in its typography and color system, but softens the stuffy feel that is so common in the financial industry with playful, emotional illustration. Illustration is a powerful way of making Wealthfront seem totally different from its competitors, which is important because their approach to investing is different from standard brokerages.

Support key business metrics

Screenshot of illustration at Dropbox supporting business goals

Via Dropbox

Illustration is a powerful way to support business goals at key interactions with users. For example, you could use illustration to try to persuade a customer from cancelling a service, finish purchasing items in a shopping cart, or invite friends to use an app.

In the example above, Dropbox uses 2 illustrations to communicate emotions attached to upgrading your account to a paid plan. The illustrations support an obvious business goal for Dropbox: getting free users to upgrade to paid accounts.

The top illustration connects upgrading to getting an extra scoop of ice cream (which everyone loves!) and is a smart way to make upgrading feel good without being pushy about it. The bottom illustration communicates the idea of losing files inside stacks of paperwork. It positions Dropbox as a solution to a common frustration.

Methods for creating quality, simple illustrations

Even if you couldn’t draw something pretty to save your life, it’s still possible to create simple, beautiful illustrations on your own. Here are a couple of basic methods.

Create Textured Brush Illustrations

Example of a textured brush illustration

Designed by the author, Jarrod Drysdale, for a client.

A simple way to create expressive animations is by drawing basic shapes and applying textured brushes to them in Adobe Illustrator.

Just draw simple shapes on the artboard in Illustrator. (I often draw on top of screenshots of a webpage I’m coding or a png from Photoshop/Sketch.)

Then, to apply a brush to the shape:

Screenshot of how to apply a brush to shapes in Adobe Illustrator CC

  1. Open a Brush Library by opening the menu: Window > Brush Libraries
    • Try: Artistic > Artistic_ChalkCharcoalPencil
    • Try: Vector Packs > Hand Drawn Brushes vector pack
  2. Select the shape you drew
  3. In the new brushes panel that opened, click one of the brush options to apply that brush to your shape’s stroke
  4. Adjust the weight of the stroke to make the brush effect more or less exaggerated

Create Illustrations from an Icon Library

Example of an illustration made by combining icons

Designed by the author, Jarrod Drysdale for Proximity School

Another simple way to create surprisingly nice illustrations is by combining icons. Use a vector icon library (such as Picons, as shown below, or even Font Awesome), and combine several icons into a larger illustration. Here’s an example of what you can do with some clever editing.

Screenshot showing the separate icons that were combined into an illustration

You don’t have to create illustrations yourself

This seems obvious, but we designers tend overlook the option of hiring an illustrator because we want to put every pixel on the screen ourselves.

However, if you aren’t an illustrator yourself, having a network of illustrators you can bring in to collaborate on your projects can be an immense value to your clients.

Illustrators of all styles, experience levels, and fees are available for hire on places like Dribbble and Behance. The perspective and expressiveness they can add to your designs are considerable, so don’t count them out.


Looking for something specific? Email us here to suggest a design pattern.
Written by Jarrod Drysdale.


Share this article:


Objective Creative Design Bootcamp

Learn to succeed as a designer without compromising your creative vision

Objective Creative is a free mini bootcamp to teach you how to get hired as a designer without selling your soul to the devils of commerce.

You'll learn about the hidden factors limiting your success as a designer, how to overcome them, and how to show others the value of your work—without making compromises.

* email required

No spam, ever. Unsubscribe anytime. Privacy Policy.

Or, learn more about the bootcamp