Product illustration with a purpose

Datum: 2017-07-11 | Categorie: Apps, Illustration | Tags: , , , ,

Using illustrations on a digital product is a trend that seems to grow every year, and with good reason. Using illustrations in your app, website, e-book etc. could make it easier to understand, more trustworthy, engaging and just make up for an overall pleasant experience, but there’s a catch. Poor execution or being unaware of the techniques you should use and which you should avoid, could have a negative effect instead of a positive one. I’ll talk about what problems we came across and how we’ve tackled them in the past.

Storytelling to fit the goal

What do we want to achieve from the implementation of illustration? It’s easy to add illustrations we looked up online and use them because they look fun. Why are we really adding them? Are the illustrations to fill an empty space? For example an ‘empty state’ in an app that could help with the engagement of the user by telling them what’s going on and what they could do about it. Are they being used in an on-boarding that explains the gist of the product the individual is about to use? Are the illustrations being added to match the product with the target audience? Is it even something you want to fill with an illustration or will a photograph suffice? These are some questions we should ask ourselves before we’re even thinking of using illustrations.
After the goal is clear for you, and the team you’re working with, it’s time to think of your story. Every company has an amazing story they want to share, a product that could really help the user. How do we tell these stories and explain the users that this is what they need. When you’ve thought out what you want the user to know, you can start thinking of how you’re going to tell them in illustrations. Creating short stories in the form of storyboards is a great way to explain a story in a couple of steps.

Iconic Sketching

‘How far can we pull it back’ is a question I ask myself a lot. When you focus on the bare minimum it’s easier to add on to it without ruining the core. Before you’re going to sit behind the computer and draw that first line it’s important to know what you’re drawing. Brainstorming is a great way to be quick in your thoughts and record everything you think of as you go. By writing down everything that comes up in your head, you’ll soon have a bunch of ideas. These ideas can be turned into minimal illustrations, or icons. Making the icons iconic is the start of an illustration that’s clear and easy to understand, which is the primary goal when you’re trying to explain something with a drawing.
Quantity over quality, it’s not something you hear often but your sketch doesn’t have to be pretty just yet. By going for the quality in a sketch you’ll slow yourself down and miss the creative spikes you need so desperately at this point. Instead, go for quantity, try to fill the paper with as many different ways to express your thoughts. This way you’ll be able to change direction when something doesn’t work the way you wanted it to work.

Inspiration

Look at what is already done. Don’t grab something from the internet and run with it. Instead, be inspired by the styles, look up how others illustrate that object you just can’t see picture in your head. It doesn’t even need to be an illustration from another product, you could get inspired by looking at random objects. You’re probably illustrating something that exists, in that case you can use that specific object as a visual aid. Remember, go fast, don’t draw the details just yet. Let your imagination create those details later on. If you’re having trouble not stealing something you’ve seen. Stop collecting your inspiration and forget where you’ve seen it. Let everything simmer in your head and concoct something a week after looking up inspiration. This way you’ll have forgotten the details and hopefully made something that doesn’t look like the illustrations you’ve used as inspiration.

Angle

Be consistent in the angles you use, or break it with a purpose. Limiting your illustrations to a single angle will help to keep it clear and easy to understand. Using a different angle for every illustration will break the consistency and will cause the user to take more time to understand what’s going on. Letting users take a better look at your illustration doesn’t have to be a bad thing. You could also break it on purpose to take advantage of that extra time the user will look at that illustration. We’ve used this technique with the illustrations for our app Scheduled. Every illustration of Scheduled is flat and direct, they’re literally looking right at you. We did something different for the illustration that shows someone receiving the message. This illustration is at an angle, giving the idea of unawareness and hinting to the fact that someone else received this message and was not looking at their screen.

Scheduled, stay connected with your friends

Scheduled, get notified

Scheduled, set a message

The first three illustration that were used to explain the concept at Scheduled

Situational

Illustrations are usually to explain a situation, a way to explain what is going on. Empty states tell you that there is currently nothing there, 404 pages tell you the page doesn’t exist at all and so on. Illustrating these situational moments in a way that’s efficient, fun and recognisable is something Dropbox does an excellent job at. The use of known objects like laptops, document folders and regular paper with a mix of expressions and iconic illustrations, that supports the message that’s given with it, tells you everything you need to know. A piece of paper with a sad face will tell you something is wrong. A piece of paper with multiple people on it will tell you that it has something to do with multiple people, sharing, mentioning and so on. Holding a piece of paper against a laptop with an arrow in between will tell you that you can or even should add a document to Dropbox. The use of these situational illustrations can make it more efficient and recognisable, as you’re using a lot of the same illustrations with an addition to it.

Dropbox illustration

Dropbox illustration

Dropbox illustration

Some of Dropbox’s illustrations used in their product

Consistency

Make it easy to understand by sticking with the same style, colours, measurements. Keep the illustrations in the same style as the product they’re made for as well, this will help with the overall uniformity you’re going for when you’re working on the brand. We’ve noticed we needed additional illustrations almost every release of the app, Scheduled. Creating additional illustrations was easy because we’ve thought out the constraints and we could use a lot of what was already made. The characters had different expressions that we could use in any situation, this way we could create new illustrations even by collecting different elements from the existing illustrations to make a whole new one. It’s important to write down the principles of the illustrations for when you or someone else wants to work on them months after the creation.

Mascot

The use of a fictional brand mascot is a known marketing strategy to personify the brand and increase the engagement of their users. These mascots can come in hand when you’re trying to communicate on a personal level and soften the way the products are sold. It’s important to illustrate these mascots to be unique, excite people and be appealing to the target audience. People will remember the brand better because these mascots are the face of the product that they love. They don’t always have to reflect the brand but can also get into the role of a user, showing the mascot go through the steps that your product has is a great way to explain it in a fun and easy way. Intercom makes their product look a lot more interesting by using funny and awkward looking animals to explain how the product can be used in certain situations.

Intercom illustration

Intercom illustration< Intercom illustration

Intercom’s solution illustrations

Know your tools

When you’re just beginning with illustrations you should use something you’re familiar with, you can always learn the tools you ‘should’ use when you’re ready for it. I used photoshop for pretty much everything. Photo manipulations, logo’s, web design, illustrations and even some school reports. I didn’t care about using the correct tool because it was just another another excuse that held me back from doing what I wanted to do. Even today, I use Sketch as much as I can because it makes me more comfortable when I’m trying something new. Of course there is a limit to this and of course you should learn how to use an illustration application if you’re serious about it. Try riding a bike before flying a rocket ship.

Animation

Animating every single layer of your illustration is a lot of fun, I know. The moment will come when you have to cut back from the gimmicky animations and focus on the ones that support the story by pulling focus on an important part of the story you’re trying to tell. Movement intrigues, even if it’s almost unnoticeable. By moving little parts of an illustration, lets say the main object moves or an expression is moving on the mascot’s face, you can influence where people will look. Using these subtle interactions will make the whole piece a lot less static and more alive.

I hope this was useful and fun to read. I’d love to chat if you’ve got questions or pointers. Any feedback is greatly appreciated.
For more illustrations and other design work, check out my dribbble and the team’s dribbble.

Feedback

Mis je iets? Heb je vragen?
Stuur ons dan een berichtje.