{"id":4891,"date":"2016-12-20T11:47:54","date_gmt":"2016-12-20T11:47:54","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4891"},"modified":"2017-01-10T11:21:45","modified_gmt":"2017-01-10T11:21:45","slug":"product-vs-marketing-illustration","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/product-vs-marketing-illustration\/","title":{"rendered":"The Language of Illustration at Shopify"},"content":{"rendered":"

There\u2019s 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\u200a\u2014\u200aboth sides are basically trying to say \u201cwe think this idea trucking rules, just give us a minute to show you.\u201d<\/em> 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.<\/p>\n

In product, there\u2019s a necessary solemnity. We want to make it fun, and be buds when you\u2019re successful\u200a\u2014\u200amaybe even crack a joke every now and then. But mostly, we just want you to know that we\u2019ve 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 \u201cI always knew you could do it, keep going.\u201d in Morgan Freemans voice as we fade into the background and resume our caretaker role.<\/p>\n

In marketing, there\u2019s a necessary enthusiasm, eagerness and clarity. Shopify marketing is not Morgan Freeman. It\u2019s Aladdin. He\u2019s standing on a magic carpet, reaching out to Jasmine and asking if she trusts him before he shows her the world (shining, shimmering, splendid)<\/em>. We see a brighter future for you. We\u2019re not hopeful, we\u2019re so confident that we\u2019re already proud of what you might do. We\u2019re painting the picture of what we see for you, and handing the brush to you to fill in the blanks.<\/p>\n

Icons: Interact-able<\/h2>\n

\"icons-interact-able\"<\/p>\n

An icon is a symbol<\/em>\u200a\u2014\u200ausually multiples of 16x16px\u200a\u2014\u200arepresenting a larger idea. It\u2019s one of those things that you shouldn\u2019t notice when it\u2019s done really well, but always notice when it\u2019s 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 \u201cwe actually know what we\u2019re doing\u201d feeling that builds trust in a product.<\/p>\n

<\/div>
<\/svg><\/div>

\"It should concisely capture the idea that it represents, and transcend all cultures and languages.\"<\/p><\/span><\/blockquote>\n

Some easy things to check to make sure your icon set feels consistent:<\/h3>\n

- Corner radius
\n- Line treatment (stroke weight; cap treatment; ect)
\n- 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?)
\n- Use of colour
\n- Are they all tilted (or not tilted) at the same angle?
\n- Do they handle connecting pieces similarly (either by leaving spaces or by finding ways to connect multiple objects)?
\n- Do they have either relatively similar silhouettes (eg. all contained in circles) or relatively unique silhouettes?<\/p>\n

In Product:<\/h3>\n

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.<\/p>\n

They should be designed with<\/em> the UI\u200a\u2014\u200asimplified as much as possible, and fused with UI. This is not<\/strong> 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\u200a\u2014\u200aand not for the sake of exciting icons.<\/p>\n

<\/div>
<\/svg><\/div>

\"They should be designed with the UI\u200a\u2014\u200asimplified as much as possible, and fused with UI.\"<\/p><\/span><\/blockquote>\n

In Marketing:<\/h3>\n

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\u2019t suck balls at it and overdo it<\/strong> you can use them as an opportunity to inject some<\/strong> 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.<\/p>\n

<\/div>
<\/svg><\/div>

\"They should be universal, with no expectation for the user to learn the meaning of an icon.\" <\/p><\/span><\/blockquote>\n

Spot Illustrations: Readable<\/h2>\n