large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/illustrations-when-where-and-why-part-2-47d100ee9b2c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Shir Zalzberg 
This is Part 2 of an article about the advantages of illustrations in web design. If you were looking for part 1, you can <a href="https://medium.com/@shirzalzberg/why-you-should-use-illustrations-part-1-b843b5b7469a">find it here</a>.
<h3>How should I use illustrations?</h3>
In part 1 we talked about the advantages of using illustrations. In this part, we will discuss how and where we can use illustrations across our product.
<h4>Illustrations as the identity of your brand</h4>
The most common method of using illustrations is when they dictate the brand’s identity.
In those cases it’s more likely the illustrations will appear in the site and marketing materials of the product and in more rare times, in the product itself as well. The connection between brand and illustration helps create a more memorable product who stands out against the competitors and offers a better user experience.
Those illustration are not there to “decorate” the brand, but rather to be a part of the experience and help users understand the product and the product’s values. (Remember delight? This is exactly what illustration should help us achieve in this case). We also don’t want our illustration to grab attention from our product, they are their to help, not to seize the user’s attention away from the function or information.
To create that special experience, there must be a unified language between the illustration and the UI. It’s also important to keep all the illustration in the same language, otherwise things can get messy.
One of the more interesting examples is <a href="https://www.hioscar.com/individuals/ny">Oscar</a>.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*j7sFXoWVgVQD7kTN1Xy6Tg.png"><a href="https://www.hioscar.com/individuals/ny">Oscar</a> health insurance
Oscar is a health insurance company, not the most exciting product in the world. But by using illustrations, Oscar were able to set themselves apart from their competitors and be memorable with their fresh take on healthcare.
Oscar are far from being the only company to use illustration. Let’s view more examples of companies who uses illustration as a core element in their brand:
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*jNxWuYzaE7pA29Ycv06RXQ.png"><a href="https://mixpanel.com/">Mixpanel</a> — an analytics tool.
<a href="https://mixpanel.com/">Mixpanel</a> — an analytics tool. They introduced this illustrated redesign about 18 months ago. Many other brands were quickly inspired by it and followed in their footsteps.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*yuKNE5IrueU4eMHH62Xdog.png"><a href="https://www.shopify.com/">Shopify</a> — A platform for online stores.
<a href="https://www.shopify.com/">Shopify</a> — A platform for online stores. Shopify went through a redesign which included their illustrations. In their site you’ll see original and unique illustrations that follow the content and strength it
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*GH5nx57v796t3YrYrfeIRQ.png"><a href="https://slack.com/">Slack</a> — An IM platform
<a href="https://slack.com/">Slack</a> — An IM platform for internal office communication. Their new branding was just released a few weeks ago and it really suits the slack experience. If you ever used slack you probably noticed the light tone of the content and their young vibe. Their new and illustrated website helps communicate those important values.
<h4>An illustrated Mascot</h4>
A good mascot is a symbol we identify with and the face of our brand. The mascot gives life and character to our product, helps our users connect to it and creates a memorable user experience. One of the most known examples is Freddie, the friendly chimp we all know from mailchimp. Freddie appears in different pages, helps us learn how to use the product and even tells a few jokes here and there.
As any other illustration, our mascot should be used thoughtfully and benefits the experience. It should help the user rather than distracting them.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*ZoYQKZ292vualQIj_6NJ-w.png">Mailchimp’s mascot in an earlier version of their site.
<h4>An illustrated Onboarding experience</h4>
As I mentioned before, explaining something with clear visuals makes it easier for our users to understand. <a href="http://changingminds.org/explanations/learning/active_learning.htm">One research </a>found that with written or oral instructions, after just 3 days users only remembered 10%-22% from the information they learned. When we have a product with a dedicated onboarding experience, using visual elements might be a crucial in helping users understand the product. Instead of creating a long tedious experience that will cost us in the loss of many users, we can create a fun and clear experience.
If we were able to create a good process, we won’t only explain the product but we will also showcase our product as approachable and easy to use, and increase our retention while doing so.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*GdDdSxRUkmnCZgO8RBYxPg.png">Slack’s onboarding experience
<h4>Illustrations in Social Media</h4>
When we promote our product on Social Media, whether it’s through adds, posts or tweets, we want obviously want potential users to notice them. Using illustration can increase our chances by A LOT. <a href="http://buzzsumo.com/blog/how-to-massively-boost-your-blog-traffic-with-these-5-awesome-image-stats/">Buzzsumo</a> found that Facebook posts with images get 2.3x more engagement than without an image. A similar behaviour can be found on twitter, <a href="https://blog.bufferapp.com/the-power-of-twitters-new-expanded-images-and-how-to-make-the-most-of-it">buffer</a> found that tweets with images got 150% more retweets than those without an image. Illustration in Social Media provide more artistic approach. The decisions we make here won’t affect the product and don’t have to follow our style guide. This allows you to try out different illustration and styles to see how your target audience responses to them.
<img alt="" src="https://cdn-images-1.medium.com/max/900/1*Ol__HJIpXu5cKYD3cVnflw.png">An illustrated facebook ad for RapidUI
<h3>When illustrations go bad</h3>
Illustrations are awesome. They are powerful tools and cary many advantages that we can incorporate in various ways across our product. Now let’s forget all that and talk about when to NOT use illustrations. Illustration won’t work with every product in the market, they should compliment the experience we want our users to have.
Let’s take a radical example, do you think illustrations will work on a website such as <a href="http://www.savethechildren.org/site/c.8rKLIXMGIpI4E/b.6115947/k.B143/Official_USA_Site.htm">‘save the children’</a>? Do you think illustrations could emphasize the values and message of that site? In that case illustrations might come across as disrespectful or might even harm the image of the site. Illustrations can work very well with serious subjects but they should be used thoughtfully.
After months of researching and creating illustrations, my manager and I stopped to examine the results and we realized this is not going to happen. We weren’t able to create the right illustration to support our idea and emphasize our core values. Although I really wanted to incorporate illustrations, it’s important to know when it doesnt’ work and not to force it.
But don’t worry, I still love unicorn onesies and I hope you too.
This was Part 2, if you are looking for part 1 you can <a href="https://medium.com/@shirzalzberg/why-you-should-use-illustrations-part-1-b843b5b7469a">find it here</a>.
<h4>Thanks for reading! Did you know that every time you clap for a medium design article, an angel gets gradient wings? Start right now! &gt;</h4>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=47d100ee9b2c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/illustrations-when-where-and-why-part-2-47d100ee9b2c">Illustrations! when, where and why (Part 2)</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Illustrations! when, where and why (Part 2)

Illustrations! when, where and why (Part 2)

Top Stories