Illustration by Lin Zagorski. Characters from SnapChat, TimeHop, Hopper, Google Hangouts, Headspace and Groupon

Illustration & Software: A Delightful Revolution

How and why you should use illustration in software

Illustration was once relied on by advertisers, publishers, and many other industries as their primary source of visual storytelling, but its dominance faded in favor of the newest technological sensation: photography. But photography didn’t kill illustration, it just changed the way it is used. While photography captures an arrangement or composition what already exists, illustration creates an image from nothing but the imagination.

Jump to the 21st century and it’s no surprise that illustration has found itself at home in software designs. Technology introduces a new playground for illustrators to flex their creative muscles, allowing them to connect with their audiences on a deeper and more personal level by crafting interactions and entire experiences for users. There’s no shortage of illustration in games or apps for kids, but the problem-solving power of illustration goes far beyond those expected uses. Let’s look at why they are so effective.

The Benefits of Illustration

Illustration facilitates understanding.

Many people are visual learners and can understand complex concepts more quickly through viewing an illustration over reading a lengthy explanation (e.g. IKEA instructions). Because illustrations don’t usually involve text, they become universal, making them understandable by a larger audience, of many ages, cultures, and languages. This can be really useful in the software space, where many users fly through instructions and onboarding experiences.

Illustration is Relatable

From Scott McCloud’s book Understanding Comics, this diagram shows the progression of realism to abstraction. Illustration lies somewhere in between allowing interpretations and self-identification from viewers.

Photographs are often too specific, capturing reality, but leaving little room for viewers to imagine themselves in place of the models. Illustrations, however, ask for interpretation and input from their audience. Not only do illustrations simplify the image and allow viewers self-reflection, they also provide space for viewers to make their own intuitive leaps to understand complex ideas. User relatability makes software experiences memorable.

Illustration differentiates you from competitors.

Illustration in software occupies a smaller share of the market, and often companies who employ illustration stand out over their competitors. Illustration can be utilized as a distinguisher especially among companies that lean heavily on stock photography, typography, or more graphic elements in their software experiences. It’s also a way to establish your brand. Take for example, Dropbox, who in addition to making sure their product was simple and easy to use, also leveraged illustration to attract consumer loyalty amongst a sea of bland enterprise cloud storage solutions.

Illustration introduces delight.

In an industry where delight is highly sought after, well-crafted illustrations are a gift to users. Frank Chimero devotes an entire chapter expanding upon the concept in his book, The Shape of Design. Even if “delight” has become an overused buzzword, there is still a movement to create software that provides value beyond its functionality, and adding illustration is a simple, authentic way to promote those positive feelings. Illustrations are delightful because they don’t just promote brand aesthetics, they introduce whimsy, friendliness and fun into software and can liven up the unsexiest of utilities.


Examples of Illustration in Software

Flat, simple illustration styles that complement the design aesthetics of Material Design and iOS 8 are the most popular in today’s software space. Even examples that are created to resemble hand-drawn media use vector-based brushes in Illustrator to achieve the flatter look. Illustrations are often animated to come alive with motion when a user physically interacts with them.

The four key places illustration can be found in the software industry are a brand’s onboarding experiences, iconography, promotions, and identity.

Onboarding

Onboarding is the first interaction a user has with a piece of software, and is critical to new user adoption. When done successfully, onboarding experiences engage users, inform them of the purpose and function of the app, and guide them through any setup processes in a simple and thoughtful manner. The apps below show how playful animations can make the onboarding process an entertaining and informative experience.

Hopper, an app that helps you find the best prices on airline tickets, uses illustrations of a chubby rabbit to help explain the function of their app to new users.
Marvel, a prototyping app, uses illustrations of what can only be described as the happiest manila folder you will ever see in their onboarding process.
When the beta of Mailbox for Mac was released, accepting an invitation was an opportunity to make testing out piece of beta software fun, which may make all the difference in keeping users loyal through knowingly buggy software.

Onboarding can either be the experience that creates loyal and happy users or leaves them feeling confused and frustrated, which could lead to the unfortunate deletion of an app. The clarifying and delightful aspects of illustration make onboarding experiences as painless and enjoyable as possible.

Iconography

These recycling icons demonstrate that the same concept can be understood even with differences in style.¹

Icons are images used to represent a person, place, thing or idea. The word “icon” in the context of software design can take on a few different meanings, including the application icon itself. Icons can be broadly grouped into two overarching categories: illustrative and non-illustrative. In non-illustrative icons, the meaning is absolute no matter the style. They include flags, letters, religious symbols, numbers, scientific symbols.² Well known non-illustrative icons are beginning to include symbols associated with tech, like the location pin, ecommerce shopping cart, and search magnifying glass. Some ideas, like the concept of sharing media, have many icons competing for singularly.

Twitter hired the Icon Factory to create a new set of emoji that fit with their brand, but also one that maintains the subtleties that influence inherent meaning of the Apple native emoji. The results are beautiful icons that don’t get lost in translation.

In many cases, icons with fixed meanings are necessary to make applications easier to learn, and there are plenty of cheap, ready-made icon resources for this purpose. Given the availability of icons, custom-made iconography may seem like a small detail to spend a lot of time or money, but icons specifically tailored for a business make it easier to convey unique ideas and reinforce the brand’s aesthetic style.

Illustrative icons meaning are determined both by their content and style. Naturally, the more complex the illustration, the more information and story can be encoded into an image.

Vine uses these colorful, illustrative icons to showcase the playful experience associated with different categories of videos within the app.
Virgin America created a suite of whimsical, illustrated icons for various destinations. They don’t just show New York or San Francisco, they tell a story about the city.

Delight

Send your friend who’s having a bad day illustrated stickers of cats eating pizzas or a sasquatch giving a yeti a noogie using Facebook’s Messenger.

Some of the most successful examples of illustration found in software are the ones that are just downright delightful. These are the ones that are often hidden and surprise you when you least expect it. They make you smile and lean over to show the person next to you what you discovered. These can take many forms, including animations to pull and refresh, empty states and error states.

TimeHop’s mascot, Abe, is a time traveling dinosaur wearing a backpack and goggles. In addition to on boarding illustrations, when you pull to refresh your feed, Abe pops up out of no where and spins the loader animation for you.

Brand experience

While many software companies use illustrations for very specific and limited instances, there are a few that inject illustration in several contexts across their entire program, making the illustrations a part of the overall brand experience.

Google’s appreciation for illustration is apparent in the care they put into their Google Doodles, but other Google products feature illustration as well. From custom, location-based headers in Google Now, onboarding illustrations in Google Photos and Google Calendar, animated emojis for Hangouts, to screens prompting users to login to Google Maps, Google makes sure to connect users with illustration as often as they can.

Even in their earliest days, Dropbox kept their brand lighthearted with sketchy, illustrative doodles. In recent years, they’ve recruited well known illustrators to work in-house to develop a uniquely branded illustrative style. These illustrations are present at nearly every touch point of their experience, even extending into their new products, Carousel and Mailbox.

Get to sketchin’

There are many reasons to include illustration and an infinite number of ways to integrate them. Just be sure to use good judgement, as they may not be appropriate for every experience. Thinking about where illustration could enhance the product early in the process of designing wireframes and UX flows will ensure that they are well-implemented and allow for more time to establish and execute the right illustrative style. After deciding to include illustration, you have a few options to see your vision through to completion.

Do it yourself

If you’re a designer and would like to dust off your own illustration skills, there are many resources for learning and refining illustration techniques, Skillshare is just one of them. They offer memberships for online classes taught by talented, professional illustrators. Their courses cover a wide variety of illustration subjects from mastering inking and illustrating with hand lettering to digital techniques and character concepting.

Resource Illustrations In-House

If the budget for the project is tight and you haven’t picked up a pencil for years, consider recruiting a potential illustrator from within your company or if you have one, the agency assisting with the project. Many companies that have creative or marketing departments may have someone who is eager to make illustration work and would love the opportunity to shine.

Hire an Illustrator

If a project’s timeline is too tight for in-house experimentation, or if nailing the right illustrative style is essential, Dribbble and Behance are excellent services for finding illustrators to contact and hire. While searching for potential illustrators it’s important to keep in mind a style that suits a project’s brand and target audience.

Questions? Comments? Have a great of example of illustration in software that I missed? Please feel free to reach out.

Special thanks to Chloé Yingst, a Visual Designer and freelance Illustrator who helped write, edit, and compile examples for this article.

Sources

  1. From left:
    Recycle icon in Public Domain 
    Recycle by Loren Klein from the Noun Project
    Recycle by Loren Klein from the Noun Project
    Recycle by Loren Klein from the Noun Project
  2. McCloud, Scott. “Vocabulary of Comics.” Understanding Comics:. New York: HarperPerennial, 1994. 26–29. Print.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.