C9cca9bf8595aa5ffc9be1e29b46688c

Art by Frances To

How to get started in Product Illustration

What is product illustration and how is it best used? Today, Product designer and illustrator Frances To breaks down the use of illustration in product design and offers some practical tips for creatives looking to expand their skills into this niche art form.

You’ve seen these illustrations in your favorite digital products—floating bright-colored people greet you as you browse through the web pages of Slack. Whimsical characters rendered in fluid brushstrokes grace the landing pages of MailChimp. Vectorized cars appear on the screen as you book a ride through Uber.

What exactly are these digital illustrations and why are tech companies suddenly embracing this art form? Enter product illustration.

  1. Mobile Dialog
  2. Shop Small
  3. Slack.com redesign — Illustrations 02

Row 1: Tanner Christensen for Atlassian, Joe Montefusco for Mailchimp, Alice Lee.


What is product illustration and what is it for?

In product design, product illustrations are used to add a human element to your user experience, and to communicate complex ideas in a simplified, attractive way.

A good example of how product illustrations are used in digital products is Alice Lee’s illustration work for Wealthfront, an investment service firm. Financial products are generally perceived as serious and harder to understand. Alice’s illustrations, however, changed that perception by bringing approachability and warmth to finance.

To do that, Alice used metaphors to represent financial concepts. For example, plants represent money while groups of plants represent an increase in the customers’ investment. While plants can be watered and grown, similarly, investments can be grown and managed as well.

01 Wealthfront — Patterns

01 Wealthfront — Patterns

by Alice Lee

Here are some patterns that I made for Wealthfront, a financial services / personal investment company. I'm in the process of giving my portfolio a makeover and finally getting to do some fun write-ups for some of my favorite illustration brand projects...

View on Dribbble

How is product illustration different from editorial illustration?

You might be wondering—aren’t product illustrations the same type of illustrations found in magazines and newspapers such as TIME Magazine or The New York Times? Not quite.

Product illustration differs from editorial illustration in terms of intent. Product illustration aims to bring delight to the users’ experience. It is also used to explain the benefits of a product and eventually, persuade people to love the product. Editorial illustration, on the other hand, captures readers’ interest and engages readers in the content. Editorial illustration also breathes life into the stories people are reading.

When to use product illustration

As a rule of thumb, product illustration shouldn’t be used for the sake of ornamentation alone. Otherwise, users will only end up distracted, confused, and maybe even frustrated. Instead, product illustrations need to have a clear intent as to why they’re being used.

Some of the best use cases for product illustration are:

  • When the accompanying text is harder to read and understand
  • When users need to know what to do next
  • When onboarding users
  • When a user has reached a goal and you want to congratulate them
  • When a user is confused or frustrated


Tips for getting started in product illustration


1. Keep styles consistent

The smallest details — colors, line treatment, perspective, and the like — all matter here and can either make or break your illustration. For example, if you made several illustrations with rounded edges and oversized proportions and you decided to have one illustration with sharp edges and slender figures, your work ends up looking inconsistent.

Why is this a problem? One reason is that inconsistency erodes trust. Another reason is that an illustration is reflective of the product and the brand identity it’s tied to. If an illustration lacks in quality and consistency, it also speaks the same for the product.

Bold

Bold

by Diana Stoyanova

Making shapes define your characters is a fun way to practice simplicity and abstraction. ⬛️🔶🔻⚫️ I'll be taking a short break from Dribbble and visiting Barcelona, thus inevitably indulging myself in the -modernismo- experience.

View on Dribbble

2. Keep details minimal when illustrating for smaller screens

While detailed illustrations make a concept more convincing, they can also visually backfire when scaled down to smaller sizes. Illustrations that look great when viewed through a browser may look cluttered when viewed on a mobile phone.

When illustrating for small screen sizes, it’s best to keep details minimal You can do this by taking out details that don’t add much context to the illustration. For example, if you illustrated a cookie with twelve chocolate chips on it, you can reduce the chocolate chips to five when scaled down. After all, you’d still know it’s a cookie even if seven chocolate chips were taken out.

3. Use metaphors to communicate abstract ideas

People use products because of the things they can achieve through them. For instance, people use Shopify because they want to start and grow their online business. People use Asana because they want to be more productive with their work. People use Google Drive because they want to access their files anytime and anywhere.

These ideas tend to be abstract in nature and are harder to convey through illustration. Using metaphors solves this problem because they relate an intangible concept, like being productive, to something tangible, such as having several items ticked off a to-do list.

One of the most effective ways of coming up with metaphors is to relate the abstract to the concrete. Say you’re asked to illustrate the idea of designing your own website from scratch. You can come up with metaphors by completing this sentence: “Customizing my own website is like _____.” One answer to this is the idea of “painting” the screen of a desktop with real paint and paintbrushes. Paint buckets of varying colors can also be drawn to further highlight the concept of customization.

Slack | Design Genome Project

Slack | Design Genome Project

by Jack Daly

What does it take to go from a scrappy startup to a company valued at over 5 billion dollars, in a timeframe most B2B companies would find impossible? If you're interested to find out, head over to the Design Genome – a project I was fortunate enough t...

View on Dribbble

Conclusion

Product illustration is a powerful way to highlight the benefits of a digital product and convince others to use that product. While product illustration shouldn’t be the go-to solution to improve a product, when used appropriately, it can attract users and make a product stand out from the competition.

3a14d7471dd009262e1777476ce708f1

About the author: Frances To is a Product Designer at First Circle by day and a freelance illustrator by night. With a love for technology, lifestyle, and travel, she aims to humanize digital products and inspire people to travel more often. Find her on Instagram or follow her on Medium to stay updated on her articles.


Find more product illustration inspiration by searching the #productillustration tag on Dribbble.

Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Icon shot x light