the icon design process – jon hicks

D E S I G N P R O C E S S

J O N H I C K S @ H I C K S D E S I G N

how I started (Acorn Electron)

B Y J O N HI C K S T HE N O U N P R O J E C T

H AND BOOK

the

How do we use icons?

Menu Ddewislen Izbornik

メニュー Spyskaart

8

7

12

3

There's no emoticon for what I'm feeling!

useiconic.com

Why make your own?

Why make your own? Not the right size Not the right style Too many ‘spare’ icons Not the right icons

Research

Drawing

Deployment

Push Button Receive Bacon Applaud the JellyfishPush Bu!on Receive Bacon

Research Metaphors

|

Iconography RequirementsFile Edit View Insert Format Data Tools Add­ons Help All changes saved in Drive

$ % 123 

Arial   10     

Comments   Share

B1

jon@hicksdesign.co.uk

      Practice­Online Essentials PD Mobile apps (PayDirect, One the Go) General­InteractionsClient Portal2

Research Brief & Icon Audit

‘View’

Research Metaphor

Iconic Symbolic

Research Metaphor

Research Follow Conventions

Research Before Conventions

Research Before Conventions

Research Local Knowledge

detail /close-up

8

7

12

3

Push Button Receive Bacon Applaud the JellyfishApplaud the Jellyfish

Drawing Styles & Grids

Style

“ The quest for the best visual simplification of a bluetooth headset ”

Style

Style Don’t get too fancy!

Style Simple as possible but…

Style …no simpler

20

Secure Login

Go Shopping!

20kg

Whatever you use… Decide Icon size & Style Final Export Format (SVG) Work on all icons together

Grid

Grid

Grid Sizing

Grid Sizing

Grid Sizing

Grid Balance

Grid Alignment

Grid Alignment

Grid Alignment

Grid Alignment

Grid Space

Expand Appearance

Expand Appearance

Strokes to Outlines

Strokes to Outlines

Unify

Reduce Anchor Points

Reduce Anchor Points

Reduce Anchor Points

AddType image/svg+xml svg svgz

AddEncoding gzip svgz

Please hide your potato

Deployment Iconfonts or SVG?

16×16px 32×32px

Why use Iconfonts? Scalable Small files Easily styled with CSS No sprites Supported in IE4+!

Why not? Fiddly process No meaning Only monochrome No font = no joy Rendering Inconsistencies

Jonny loves Facebook and Twitter, but doesn’t have time for either

Jonny ♥s ! and ", but doesn’t have ⏲ for either

No meaning?

😘💩😡😄😜💨😊

😔😌😒😞😝😉😍

📱🔇🚖🙆🙅🚓⛽️

No colour?

💩

Browsers without @font-face: Opera Mini 261 million Nokia XPress 70 million Blackberry 4 & 5 20 million Android 2.1 10 million Windows Phone 7–7.8 10-15 million

Total Estimate: 370 million.

Why not? No meaning Only monochrome No font = no joy Fiddly process Rendering Inconsistencies

Why use SVG? Less steps Support (3 versions back) Avoids Sprites Multiple Colours Still style-able with CSS Animations!

Basic

<img src=“twitter.svg”>

Basic, with (bad) fallback

<img src=“twitter.svg” onerror=“this.src=twitter.png”>

Background Image

Follow us on Twi"er

<a href=“https://twitter.com/foo"> <i class="icon icon-twitter”></i> Follow us on Twitter </a>

Custom Elements

Follow us on Twi"er

<a href=“https://twitter.com/foo"> <icon id=“twitter”> <icon-label for=“twitter”> Follow us on Twitter </icon-label> </a>

svg

data.svg.css

data.png.css

fallback.png.css icons.png

<noscript>

<script>

fallback.png.css icons.png

data.svg.css

data.png.css

.icon-burger { background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%20%5B%0D%0A%09%3C%21ENTITY%20ns_flows%20%22http%3A//ns.adobe.com/Flows/1.0/%22%3E%0D%0A%5D%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20overflow%3D%22visible%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M24.75%2026.75c.512%200%201.023-.

97k

svg.css

15k

.woff

vs

<svg height="0" width="0" style="position:absolute;margin-left: -100%;”>

<path id="heart-icon" d=“M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454c1.011-9.938,14-8.903,14,0.454C30,20.335,16,28.261,16,28.261z"/> </svg>

<svg class="icon" viewBox="0 0 32 32"> <use xlink:href="#heart-icon"></use> </svg>

<svg class="icon is-check" viewBox="0 0 32 32"> <use xlink:href="#heart-icon"></use> </svg>

<svg class="icon is-outlined" viewBox="0 0 32 32"> <use xlink:href="#heart-icon"></use> </svg>

Thank you for listening!

D E S I G N P R O C E S S