Product Illustration for people who don’t know anything about product illustration
An introduction
Why to product illustration?
The first thing you need to be perfectly clear on, before adding any illustration to your product, is why are you adding illustration to your product? Wait. Shut up for a second. I’ll go: communication (and definitely not decoration) (but you you were going to say that anyway, right? Right). Illustration is the super communicator. Where words can tell you something; illustration can show you something. Illustration captures a feeling, or simplifies a complex idea. It complements the content; builds on it. It amplifies the message you’re delivering to your user.
Let’s say I’m making the worlds best cookie delivery app, finally. Sure, it might be a cool idea to add chocolate chips, just, like all over the home screen or whatever. Get it? ’cause the screen is a cookie now? Good one, Meghan. But I bet you dollars to donuts — or rather— brownie batter to peanut butter crunch, (what do dollars have to do with donuts, anyway?) that screen is going to get real tired, real fast.
Instead, look for places that you can inject your brand with useful information. Join in celebration with your user, when their cookie has finally arrived. Be sincere in apologizing to your user when their search for oatmeal raisin comes up empty (KIDDING no one would be searching for that garbage cookie), then take the opportunity to guide them back to a two bite brownie: perfect.
Common reasons to use illustration
— Empty/zero states (eg. no results; lost connection; something went wrong)
— On-boarding (eg. new feature; welcome screen; how-to’s)
— Announcements (eg. achievements; upgrades; celebration moments)
— Progress indicators (eg. profile completion; delivery status; probably something else)
When to product illustration
When you see illustration as exclusively ornamental, your illustrations are probably going to ruin your product. Like that last pair of laundry day undies: bad is worse than naked. Product illustration without a purpose is overwhelming, distracting and sometimes even kind of annoying. Instead, have something worth saying; then say it beautifully.
Signs that you should use an illustration
— Your users are frustrated, or don’t know what to do next
— A feature is being bypassed, misused or underused
— There is too much text; the text is not being read/understood
— You want another means of speaking directly to your user
— You want to congratulate/celebrate with your user
How to product illustration
Illustration in product does not set out to be beautiful, it sets out do be successful. There are properties which every illustration must accomplish to be measured successful, and which should be accessible to everyone—not just the illustrators. Using these principles creates a baseline of quality. It removes personal bias, and helps align multiple illustrators to a single style (so much harder than you’d think). They prioritize the quality of the entire body of work over the success of any given instance. They’re important principles to keep top of mind throughout the process, from first sketch through to critique, and can act as tools to give feedback for both other illustrators as well as other members of the team.
Be Useful
Illustration should be adding information. It provides context, adds clarity, or leads the user to their next step. Ultimately, any illustration should provide a deeper understanding of your tool or brand. Instead of matching your illustration to a word, match it to an idea. A home screen can serve any number of purposes. It could be a social feed: make sure you never miss a chance to congratulate a friend on another double-stuffed double-downed; a news feed: keep up with the latest bake-throughs; or a diary: track and journal your life through the sugar-coated lens. It’s pretty much whatever you want it to be, all under the blanket term of home. For fudge’s sake, don’t draw a house on your empty state. That tells me that you know how to read the label, and literally zero other things. Oh and by the way did content forget to tell you? We decided to call it dashboard, or wait, no, maybe admin — that cool? No, I don’t mind if you have to redo everything.
Instead, draw the concept. Try a high-five on your social feed; a newspaper on your news feed; a journal on your diary. Be useful. Take the opportunity to give your user some clues as to what’s next, and even better: get them excited about it.
Be Consistent
Being consistent in illustration means considering the smallest details in a single illustration — light source; line weight; colour palette — as well looking at the body of illustration work as a whole. Consistency represents quality; of the illustration, as well as the product it represents. It speaks to your attention to detail. When you take the time to consider the small details, it gives your user confidence in the big ones. When you neglect the details , it erodes trust. It looks like you stopped before you found what you wanted and called it good enough. It says that you and your product are happy with good enough.
There are some easy wins in product illustration consistency. To be clear, they’re not hard/fast rules — I break them all the time — but if y̶o̶u̶ ̶s̶u̶c̶k̶ ̶a̶t̶ you’re new to product illustration, just don’t.
On colour pallet:
Try to keep it to 2–3 colours, max. Scratch that, just two. Not even the shades/tones, if you can help it. There’s going to be things that break your illustration style, just by nature of what they are or what you need to say. Set yourself up to hide it well by just using the same recognizable, own-able colours.
On perspective:
I don’t care which one you use, just pick one and don’t deviate from it. You’re better served to give up one illustration that is awesome in a different perspective, in favour of the less awesome, more consistent version. I’d rather lose ground on the choice of metaphor, while feeling like the whole app wasn’t considered carefully, than capture idea more precisely and look unpolished.
On line quality:
This is a tricky one to give advice on. The internet is covered in hand-drawn illustrations, specifically in products. Shopify is covered in illustrations with a hand drawn line profile, so who am I to say you can’t do it. I can’t say you shouldn’t do it, but also, like, maybe don’t do it. It’s easy to do poorly, and hard to do well. Digital illustration fits naturally into the product world. When your digital product and your digital illustration have family ties back to the same tools, they snap together with limited effort. It’s a square peg; square hole. Round cookie, round ..mouth? Look. They can’t all be winners. Hand drawn illustration done well can serve to make your product feel more human and more approachable. Hand drawn illustration done poorly can make your product feel unfinished; unprofessional; like there are no experts behind the product being built.
If you’re looking for a quick win on line quality, I recommend choosing an illustration style that is proud to made up of simple vector shapes. If you’re looking for a challenge, get out of my beginners guide.
Be Considerate
(you are not as funny as you think you are)
I mean, okay. So. I am the first one to roll my eyes and say get over yourself, my dear jr. designer, no one is really opening your app, seeing your illustration of buddy selling ukuleles, and deciding this software simply cannot be for them, you know, because they actually sell muffins. They didn’t give a chip about what you drew, my darling precious designer, they just want to know what it costs, and if it will fix their problem. That said, empathy in product design is real. Illustration is a great place to show that you care—or (unintentionally, I hope) that you really really don’t. Let’s put making everyone feel like they can sincerely relate to our uke vendor in the nice-to-have category (realistically, if you want something to be that relatable, you should probably use photography, but that’s another conversation), and talk about what empathy through illustration actually looks like.
There is a big difference between a user who is just looking around, and a user who has a job to do. There is an emotional range associated with the different corners of our lives, and the products we use to get things done therein. A product illustration needs to mirror the state of mind of the user, taking into consideration both their emotional state, as well as the gravity of the task they’re trying to accomplish. As a product illustrator, you need to always be considering the worst case scenario: how did your user get here; what are they trying to do; and how are they going to feel when it fails. Illustration is used to connect with users on a human level: to join in celebration; or meet them when they are facing a challenge. Think through all the possible outcomes or mindsets before you start cracking jokes. It’s dark, but critical, to always consider the very worst possible outcome, and then make sure your illustration empathizes with that user, too.
To be empathetic in product design is to understand that more often than not, you are a means to an end. Your product is the bus, and your content is the driver: sure, every now and then they crack you up, but too much and it feels desperate. To be honest, I’d really like to just get where I’m going.
I’m not going to pretend that my cookie delivery app is on par with Freshbooks, Lyft or Airbnb (yet) — where if they screw up, there is a very real possibility that you might lose an invoice, miss your flight, or have no where to sleep — but it is naive to think that people aren’t going to be hella pissed when they ordered thin mints and fig newtons show up instead.
Take pause before you insert yourself, and your sense of humour into your illustrations. Injecting personality into your product is a task worth while, but you can’t do it half-way. Take the time to understand your user, what they are trying to do, and how they will feel in the moments of failure. Illustrate for the worst case scenario, instead of the best; aim at the users who got handed a coconut anything, and chances are you’ll be just as useful to the people with an Oreo in their hands, too.
Okay, that’s enough. If you need me, I’ll be at Beaucoup with a salted chocolate rosemary.
Note: This is the original version of just getting things out of my brain and onto paper for the Polaris design system, because writing guides that only me & my besties can understand is dumb, and writing guides accessible to non-designers is cool. Still not sure why Amy wanted to take out my cookie jokes tho 🙄
