Mobile Product Illustration For Websites

Mobile First Illustration

Mobile Product Illustrations

There is a new surge in illustrations online. As you browse even the biggest companies online you find a wealth of illustrated material. Companies like, Uber, MailChimp and Slack have all embraced digital illustrated content. So why have these companies suddenly embraced this art form and what’s its purpose.

Introducing, product illustration. With product design illustrations, these are used to engage users by adding a human aspect to the user experience. It’s often used as a method of communicating complex or abstract ideas in a more human and simplified manner. For example, an investment firm may have several financial products that would be otherwise be difficult to understand if it were not for product illustrations defining who, what, where and when. Illustrations can help users cut through to what is important to them and bring approachability to each product. They can help users identify with products and therefore help their understanding of what a product is for. To accomplish this, one method of illustrating these types of abstract products is to think outside the square and use visual metaphors. Visual metaphors can be approached subjectively where the product can share aspects of the metaphors used, such as something growing or filling up could work as a visual metaphor for financial products earning interest and dividends over time. Visually the product can be illustrated to be human and engaging and something that most of the target market could relate to.

Product Vs Editorial Illustration

Product illustrations are not exactly the same as editorial illustrations as they both have different purposes. Product illustrations are intended to help users understand sometimes complex or intangible products while editorial illustrations can be intended to engage users with feature content. Editorial illustrations convey messages or snippets of the copy users are reading and help reinforce the nature of the articles and move the reader on to the next paragraph.

Product Illustration Best Practices

Product illustrations need to be considered carefully. Using them for the sake of making content attractive can be a distraction rather than an engagement. Use product illustration when:

  • The product contains complex or abstract methods or concepts.
  • When users need to know what a product is essentially for.
  • When you’re initially engaging with a new market with a new product.
  • When users have made a conversion on your website and you want to say thank you.
  • Where a user may become confused or abandon the content.

Product illustrations need to be consistent in style, colour, line work and fill types. All the small detail matters here because even the slightest deviation from an established style can convey a lack of consistency with the products and ultimately will result in your target market’s level of trust being diminished. So where a series of illustrations lack in quality and consistency will also state the same for the products. It’s worth spending the money to develop illustrations that are going to engage with market and establish trust in the brand’s products.

Mobile Phone Illustrations

Detailed illustrations can appear engaging however if they are not in a vector format they can appear complex on smaller screens. Even vector illustrations which will scale to any size without any loss of fidelity in the image can appear confusing on small screens. Overall when illustrating for website use, it’s best practice to keep fine details to a minimum allowing plenty of space between elements. It’s important to use flat colour where possible as tonal gradations can get lost on smaller screens where obvious distinctions between light and shade using simple shapes is a more effective practice. With Google announcing recently that their search engine algorithm will be prioritising mobile first content it will be more important then ever to use illustrations that work on small scales.


Product illustration is an excellent tool for engaging users with often complex, intangible and abstract product concepts. It is an art form that is growing at a fast rate and is appearing on even the largest corporate websites. Vector product illustrations saved as .svg files are mobile friendly often being much smaller than jpg or png files to load and can scale to any size resolution on screen and in print. While these types of media won’t solve all of your communication problems they do promise an often better form of communicating product information by engaging users instead of confusing them and can be mobile friendly helping your search engine rankings.

Mobile Product Illustration For Websites

Share This Post