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. 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.

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.


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.


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


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

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.


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.”

Google Tag Manager for WordPress plugin.

Setting up tags

GTM includes several built-in tag templates for major analytics and ad platforms. These include Google products, such as Analytics, Ads, Optimize, and Surveys, as well as several third-party platforms, such as AdRoll, Microsoft Advertising, LinkedIn and Quora. If a tracking tag doesn’t have an existing template, you can also use a Custom HTML or Custom Image tag.

To create your first tag, click “Add a new tag” from the Overview screen. 

Install the Chrome extension and navigate to the site. Click the Tag Assistant icon, and select “Enable” for your site.

You should now be able to see what tags are firing on your site, as well as if there are any errors. Click on an individual tag to see more details about errors and any recommendations to fix your implementation.

Start streamlining your tracking

Once you’ve set up your GTM account, take the time to play with setting up tags. A global Google Analytics tag, a Google Ads remarketing tag and a Google Ads conversion tag are good ones to start.

Once all your ad platforms’ tags are represented, you can now make simple adjustments if changes are made to the site (for instance, if Thank You page URLs change) directly through GTM versus having to change hard-coded tags on the site.

When you’re ready to move beyond the basics, you can learn about additional actions you can track. On Nov. 13 at SMX East, I’ll be talking about how to amp up your user engagement with Google Tag Manager, through tracking actions like scroll activity, video views and PDF downloads.

Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.

About The Author


Andrian Valeanu is a web designer and project creator at Designmodo.

10 Useful Steps to Get Started with Material Design for Bootstrap

Material Design for Bootstrap (MDB) is an overlay built for Bootstrap that provides results that are consistent with the standards set by Google’s Material Design. It’s also known as Material Design Bootstrap and can be described as a theme that provides access to Google’s Material Design so as to achieve consistent results.

MDB uses HTML, JavaScript, and CSS to provide developers and designers with unique design patterns, Bootstrap templates, and a grid system they can use. With so many free and paid features, MDB is one of the most popular options for web development and design.

Below is a step-by-step guide that will get you started with Material Design for Bootstrap.

  1. Download the zipped folder

    The first step is to visit the official Material Design for Bootstrap website and download the overlay. There are two versions of MDB available: the free and the pro version. Pick your preferred choice and click the “Direct Download” link to get the zipped folder. Unzip the folder and save it to your preferred location. The folder now contains essential documents, files, and libraries. We will go through each of these in the next steps.

  2. CSS

    The CSS document determines the lookup and style of what developers and web designers choose to build. Files contained in this document include bootstrap.css which contains predefined Bootstrap classes, bootstrap.min.css – a smaller version of bootstrap.css, mdb.css which contains design patterns and predefined classes of MDB, mdb.min.css – the minified version of mdb.css, and style.css which helps with customized styling code as per the project.

  3. js

    The js document contains JavaScript files that help with achieving functionality for various components. You can use it to cut your code short. Files within the js document include bootstrap.js which introduces bootstrap related js into your project, bootstrap.mi.js which is the minified bootstrap.js version, jquery-2.3.3.js which introduces the jquery code that’s compatible to your code, its minified version jquery-2.3.3.min.js, mdb.js which combines all the jquery code and javascript you’ll need, its minified version mdb.min.js, tether.js which allows you to position elements next to each other on a page, and its minified version tether.min.js.

  4. font

    As the name suggests, the font document contains all the fonts that web designers and developers need for their projects. A default font called Roboto is provided with your download. Other basic formats included within the file are .ttf(True Type Font) which is developed by Microsoft and Apple, .otf(Open Type Font) which was built jointly by Microsoft and Adobe, .woff(Web Open Font Format) which resulted from a collaboration by Microsoft, Opera Software, and Mozilla Foundation, .woff2 – a second version of .woff, and .eot(Embedded Open Type) which was built by Microsoft for the web.

  5. img

    The img folder provides a place where developers and web designers can keep the images that they need for their project. They are kept in a well-arranged manner for easy location. The path to this folder that you see in your index file shows the images that you want to appear on the pages you’ve built. The img file is the default folder but, can be changed according to the type of project.

  6. sass

    The sass file contains maintainable and modular versions of CSS that are adaptive and can be shared easily. It improves output by enhancing productivity. Components can be shared in all environments. Web developers can opt for sass if they wish to add more style to their work and carry it out in an advanced manner.

  7. License.pdf

    The License.pdf file contains all the details pertaining to licensing of Material Design for Bootstrap and its usage. The information contained within the document shows all features that users get under the free and pro versions of MDB. The free MDB version comes with 500 basic components; detailed documentation; SASS, CSS, JS, and HTML files; tutorials, 8 basic modules, enhanced Bootstrap modals, and BrandFlow-Bootstrap automation software. The Pro version includes all these plus 5,000 pro components, 9 pro plugins, 50 premium sections, 22 pro modules, JavaScript modularity, 10 pro page templates, professional premium support, and MDB Pro repository as well as GitLab account access.

  8. README.txt

    The README.txt file contains all the important links that may be helpful to developers and web designers. They cover support, templates, FAQs, tutorials, and many more links that may be of importance. Users get access to information that can help them learn, practice, ask questions, and access relevant material from the MDB community.

  9. Start working using MDB

    Once you familiarize yourself with all the folders and files, it’s time to use them in your project. You can start by making a new folder on your workstation. Give it a name like DemoMDB. Cut all the files from the original MDB folder and paste them inside the new folder. The index.html file provides a demo page that you can start with. The most important thing is to maintain the order in which the files are provided. A file that is placed higher means that it has components needed by the files below it. If this order is changed, the console in use may show errors and warnings that might block major functionalities.

  10. Stay updated

    Material Design for Bootstrap comes with a host of features that make it easy for developers to build interactive web pages. To learn more, consider visiting the official MDB website for examples and tutorials. Subscribe to the MDB newsletter to stay updated with the latest updates and news. You can also create a free account that will give you access to technical support, CLI, free project hosting, and prototyping tools.

Material Design for Bootstrap is used by some of the largest organizations and companies to develop and design the best outlays for front-end frameworks. The information provided above is only but a drop in the ocean when it comes to what MDB contains. Developers who are passionate about design are encouraged to explore more as they work on their projects.

Enjoy this post? Give Andrian a like if it’s helpful.


Andrian Valeanu is a web designer and project creator at Designmodo.

Andrian Valeanu is an enthusiast web designer and project creator at Designmodo, who literally live for creating the best tools for web designers and developers. He is focused on websites building systems, bootstrap templates, an…

Discover and read more posts from Andrian

Enjoy this post?

Leave a like and comment for Andrian