How to get started in Product Illustration

November 15, 2019 • product, Started

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.

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.

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.

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.

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.

Your brand needs a social media design system—here’s how to create one.
Career change inspiration: From graphic design to illustration
10 ways to develop your illustration style

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.

Get started with sound design in just 3 steps

November 7, 2019 • Sound, Started

Understanding how audio serves to further amplify your motion design

I am a motion designer, not a sound engineer so why do I need to understand sound design?

This is a fair point.

Having at least a surface-level knowledge of sound design will help you

Gain a deeper appreciation for sound design
Have a better idea how long to allocate for sound design in a motion design project
Collaborate more effectively with sound designers and engineers
Have fun experimenting with adding sound to your motion designs

The latter the main reason why I am exploring this area.

I have never thought of myself as an audio expert yet have always been drawn to the power of aural stimuli and how it can enhance the visual.

Here are three steps to get started.

When starting something new I like to remind myself of a quote by Arthur Ashe

Start where you are. Use what you have. Do what you can.

There will always be an obstacles in your way when trying to do something.

Yet there will also be a path around the obstacle.

You can choose to focus on the obstacle or focus your energy on find the path.

The choice is yours.

Ok, there are four basic items we need to get started.

(i) Laptop

First up is, of course, a laptop.

It doesn’t need to be a laptop specifically but can be a desktop or some kind of workstation where you can access audio files and your motion design files.

(ii) Sound card

Ok, I will admit that when I first heard this one that I had no clue what it was.

So I had t consult Mr. Google for further clarification.

Without getting too technical, a sound card is an expansion card or IC for producing sound on a computer so that the audio can be heard through speakers or headphones.

Most often they are included on every machine in one form or the other, either in an expansion slot or built into the motherboard.

If you can hear sound through your headphones or speakers when they are connected to your computer then you don’t need to worry.

You have everything you need to begin.

(iii) Headphones

When it comes to headphones you can go high end and splurge for a pair of Beats by Dr. Dre or go budget and use the same earphones you use with your phone.

As long as you can hear the audio clearly enough to mix and balance the sound you are good to go.

(iii) Recorder

Similar to headphones, you can go high end and acquire an Akai Professional MPC X, or you can take Arthur Ashe’s advice and simply

Use what you have.

Generally, most smartphones have a recording function or there are free apps you can download and use such as the following

And also ones you can buy such as

RecForge Pro — Audio Recorder

Please note that I am in no way affiliated with any of the above links. I am just sharing the knowledge and mainly use my phone to record audio from my surroundings.

Having a recorder in your pocket can make life more interesting.

As a creative, you may be used to capturing the world around you through sketches or photography.

Capturing the sounds that surround us each day, creates an additional dimension to add a richness to the everyday. Yet documenting the sounds that fill our world can add another dimension to your daily life and make it an interesting adventure.

In my previous article about the five basic elements of sound design, I recommended Adobe Audition CC as a starting point. Most motion designers will probably use Adobe After Effects and therefore also have a Creative Cloud subscription.

This is a good place to start especially if you have a small scale project or are just beginning to dabble in sound design.

However, if you are a bit more advanced and will be working on largescale projects or ina studio setting something like Cubase may be more suitable.

Again it depends on your budget, what kind of project you are working on and what kind of investment you wish to make into sound design. But Cubase can be used as a free trial but as with most software does have potential restrictions compared with the full version.

There are many sound libraries to choose from such as

These are just a few, but there are many others.

The right choice for you depends on what kind of set up you have — Mac or PC or what kind of sound you are trying to create.

Alternatively, you could acquire a synthesizer and just go nuts, like this guy.

Awesome synthesizer GIF courtesy of GIPHY

Ok, I am going to out it out in the universe.

I have always had a not so secret obsession with synths.

If anyone can recommend a good go-to place to source one I shall make it my mission to create one of kind music to a piece of motion design.

As always thank you for taking the time to read.

Getting started with Google Tag Manager

September 24, 2019 • Getting, Started

Ever put in a development ticket for what you thought would be a simple tracking code update? And then waited weeks for the task to be completed?

Google Tag Manager (GTM) saves marketers and developers alike by allowing you to set up tracking codes for analytics and ad platforms through one simple interface. In this article, I’ll walk through setting up a GTM account, creating your first tags and triggers, and using the platform to streamline your tracking setup process.

Understanding Google Tag Manager hierarchy

The account is the top level of GTM hierarchy. If you’re managing GTM from an agency login, you’d generally want to create one account per each brand you work with, and a container for each website that brand uses. You can access multiple accounts via the same Google login.

A container includes a unique GTM code, which you should add across the site you want to track.

Within each container, you’ll then set up tags that fire tracking codes on your site. Triggers define when tags will fire. Variables are functions you can use on a more granular level indicate when tags will fire.

Setting up your account

To start setting up your account, go here and click “Start for Free.”

How to get started in Product Illustration

What is product illustration and what is it for?