There’s no hard or fast rule here. You can find an illustration style that maps to both the voice of your core product, as well as your marketing voice. Particularly as a small startup — both sides are basically trying to say “we think this idea trucking rules, just give us a minute to show you.” At Shopify, however, because we are such a large company, and because there is a gravity that comes with asking people to trust us with their livelihood, our product and marketing voices are at odds.
In product, there’s a necessary solemnity. We want to make it fun, and be buds when you’re successful — maybe even crack a joke every now and then. But mostly, we just want you to know that we’ve got your back when shit hits the fan. No, wait, we want you to know that we are actively building new ways to arm your fan against said shit. We want to be trustworthy, optimistic, and confident. We want to say “I always knew you could do it, keep going.” in Morgan Freemans voice as we fade into the background and resume our caretaker role.
In marketing, there’s a necessary enthusiasm, eagerness and clarity. Shopify marketing is not Morgan Freeman. It’s Aladdin. He’s standing on a magic carpet, reaching out to Jasmine and asking if she trusts him before he shows her the world (shining, shimmering, splendid). We see a brighter future for you. We’re not hopeful, we’re so confident that we’re already proud of what you might do. We’re painting the picture of what we see for you, and handing the brush to you to fill in the blanks.
Icons: Interact-able
An icon is a symbol — usually multiples of 16x16px — representing a larger idea. It’s one of those things that you shouldn’t notice when it’s done really well, but always notice when it’s done poorly (which is a lot of the time). Above all else, an icon should be something you can easily interact with. It should be intuitive. It should concisely capture the idea that it represents, and transcend all cultures and languages. It needs to be clear that it is clickable, and what is going to happen when you interact with it. Consistency in an icon set goes a long way in creating the polished, finished “we actually know what we’re doing” feeling that builds trust in a product.
"It should concisely capture the idea that it represents, and transcend all cultures and languages."
Some easy things to check to make sure your icon set feels consistent:
- Corner radius
- Line treatment (stroke weight; cap treatment; ect)
- Overall weight (ie. if each pixel was a drop of paint, would they all make more or less the same tone when you mix them together?)
- Use of colour
- Are they all tilted (or not tilted) at the same angle?
- Do they handle connecting pieces similarly (either by leaving spaces or by finding ways to connect multiple objects)?
- Do they have either relatively similar silhouettes (eg. all contained in circles) or relatively unique silhouettes?
In Product:
Icons are a heavily relied on resource in product. They showcase the power and available features of a given tool in a readable and quickly digestible way. They can be used to compress a tool set, like in powerful tools such as Adobe Illustrator or Photoshop, or on a much smaller scale, like the type options in a word processor or email. They can be product-specific, a unique symbol with the expectation for the user to learn what the symbol means, or rely on more universally understood symbols.
They should be designed with the UI — simplified as much as possible, and fused with UI. This is not an opportunity to inject personality. They can still be unique, or objectively beautiful or different, but only as a result of a UI that calls for it — and not for the sake of exciting icons.
"They should be designed with the UI — simplified as much as possible, and fused with UI."
In Marketing:
Icons are scarce in marketing. They can be used for navigation through the brochure page, particularly in a complex product. They can be larger, and slightly more ornate than the product icons. If you don’t suck balls at it and overdo it you can use them as an opportunity to inject some brand personality. They should be universal, with no expectation for the user to learn the meaning of an icon. Designed instead for someone with zero prior knowledge of your product to navigate easily from page to page.
"They should be universal, with no expectation for the user to learn the meaning of an icon."
Spot Illustrations: Readable
Spot illustrations are meant to be read. They are not up for interpretation, or calling on personal backgrounds or stories. They say “hey look at this thing” and just straight up show you the thing. (I know the term spot illustrations is used differently in tangental industries. Lay off, I’m telling you how I use it in my industry). People often confuse spot illustrations and icons, probably because you can use an illustration as simple as an icon to call out a feature. Where I see the difference is the functionality. If it’s not part of the UI, if you’re not meant to do something with it, it’s not an icon. There is no such thing as “overly complex icons” — homie, you just made a bunch of spots.
"If it’s not part of the UI, if you’re not meant to do something with it, it’s not an icon."
In Product:
Updates, announcements, walk-throughs — “hey, listen to me for a second, I know you just want to start already but seriously you’re not going to know how to use my thing” are great places for spot illustrations. They can also be used to illustrate a small selection of options quickly — say, credit card, vs paypal, vs whatever-Americans-are-using-that-Canadians-don’t-have-access-to-lately. They can be illustrated UI, simple objects or simple actions. They tend to “float” rather than be grounded in a space. They don’t need to be cold, but they shouldn’t be particularly attention grabbing — aiming to still fall back into second place. In the same way that the icons should feel like they are part of the UI, the spot illustration should feel like it’s part of the copy.
In Marketing:
Instead of “hey listen to me for a second” marketing illustrations say “holy butts did you know about this tho??”. We don’t want to convince you to read about it — we’re pretty sure you already want to know. They’re used for feature call outs, or to explain a body of text more succinctly. They can be simple objects or actions. They tend to be more emphatic than spot illustrations within the product — a security illustration within the product might be a simple lock, where the marketing counterpart might showcase all the things that are secure. Taking the opportunity to explain not only what it is, but why you should be excited about it and simultaneously sharing in that excitement.
Scene Illustrations: Interpretable
In Product:
Scene illustrations are becoming more and more crucial in product illustration. As everything moves to the cloud (if it hasn’t already) metaphor is quickly becoming the most compelling tool in finding a way to articulate what is happening in an easily digestible and relatable way. It’s used in empty and zero states, to take ownership of the failure, explain quickly what happened, and guide the user back to a positive experience. It’s used in on-boarding, telling the story of any given feature, and how it might fit into the users life.
In Marketing:
Mirroring the need for metaphor in product, marketing is often trying to take complicated processes, and not only capture what is happening in a way that is easily understood, but also explain why it is relevant and exciting to any given user. They’re used for “How it works” or to showcase a given use-case of the product. When used correctly, they should eliminate the need to repeat the message as often as we presently do. They tend to lean on characters to demonstrate a particular feeling that is evoked by using the product.
Editorial Illustrations: Relatable
Editorial illustrations are for — you guessed it — editorials. They get their own section because they have different goals. Where other types of illustrations are largely functional, serving to augment the content, editorial illustrations complement the content. They are not giving you any new information, but instead capture the tone of the illustration, and set the mood before the user consumes the content. They don’t need to necessarily match the rest of the illustration style in the product so strictly, but instead can be a tapestry of complementary to the general art direction. Think The New Yorker — they get different artists to contribute to the same article all the time, but they still feel like The New Yorker. Same art direction as everyone else, the rules are just a little bendy-er.
In Product:
I honestly can’t think of anywhere I’ve seen editorial illustration in a product. Maybe Medium or Dropbox Paper could pull something off there because they’re so close to it already, but I don’t see why they’d want to.
In Marketing:
The obvious one is blogs. A company blog can deviate from the core product and still feel like it’s captured under the same brand. Overall the blog should feel cohesive, but can explore tangental styles from article to article. You might also see an editorial approach to newsletters, emails and social media outlets. Portraits and scenes with more traditional mediums and hand rendered effects are more typical for these types of illustrations. Portrait illustrations in particular are a time and cost effective means of establishing a distinctive style of representing specific people, and showcasing a single persons story. More promising, unique and memorable than an over-reliance on photography.
Hero Illustrations: Inspirational
Hero illustrations go all in. They’re full width, full colour, full bodied (wait, that doesn’t sound right. Wine. It’s wine that’s full bodied, not illustrations, nvm). They’re full what-ever-you-feel-like-being-full-of. They can be whimsical, beautiful, or straight to the point. They make you want to be a part of something. They illustrate the impossible, while making you believe you can still reach higher.
In Product:
For the most part, hero illustrations have no place in product. A product should be functional. It’s not about “making you want to come back every day” it’s about being so seamless to use that you look up and you’ve been using it every day for a year. Hero illustrations can get in the way of that. There are a few notable exceptions. A welcome screen should be pretty damn happy to see you, so I s’pose — go nuts. In larger products you might also find them on an up-sell page, which is basically a brochure page contained within the product, soooooo see: Marketing.
In Marketing:
Yeah I mean you knew where this was going. Hero illustrations are a marketing tool. The marketing hero illustration must be a captivating introduction. A massive point needs to be made. You need to be left both understanding what is happening, and wanting to know more.
"You need to be left both understanding what is happening, and wanting to know more."
What’s next
Offline Marketing
Once you’ve defined how you are going to use an illustration style that can smoothly transition between product and marketing, and reflect their needs, you can take the style offline. Beyond the brochure, a hero illustration fits the bill for an advertisement or trade-show booth that none of the other illustration classifications do in size or intent.
Brand Assets and illustrative elements
I hate condoning illustration that doesn’t have a specific one-to-one problem-solution thing happening, but as your illustration style gets more robust, and solidified, it’s obviously going to start working more closely with brand. Finding repeated elements that you can lend to brand, and begin to build recognition through illustration is a really cool next step.
Mobile
Creating a seamless transition between desktop and mobile is hella important. Don’t be lazy. Don’t just copy and paste your product solutions over to mobile: identify what makes it different, how it relates to how you handled illustration, and adapt the illustration style for the new constraints.
This post was originally published on Meg's Medium profile.
