The Icon Design Process – Jon Hicks
110
DESIGN PROCESS JON HICKS @HICKSDESIGN
-
Upload
beyond-tellerrand -
Category
Design
-
view
616 -
download
2
description
Icons are more than just pretty decorative graphics for sites and applications, they are little miracle workers. They summarize and explain actions, provide direction, offer feedback and even break through language barriers. Whether you design icons yourself or just need to be able to work with them, this session will take you through the whole process of designing and deploying resolution independent icons—from the initial brief, to choosing format or method to deploy them. On the way it will cover choosing the right metaphor, achieving visual balance, and using techniques such as icon fonts and SVG for scalable and lightweight distribution. This talk was given at beyond tellerrand // BERLIN 2014, 5 November 2014
Transcript of 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!
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 Addons Help All changes saved in Drive
$ % 123
Arial 10
Comments Share
B1
PracticeOnline Essentials PD Mobile apps (PayDirect, One the Go) GeneralInteractionsClient 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
![arXiv:2004.04059v1 [cs.CR] 8 Apr 2020James Bell, David Butler, Chris Hicks, Jon Crowcroft The Alan Turing Institute fjbell, dbutler, chicksg@turing.ac.uk April 2020 Abstract Contact](https://static.fdocuments.net/doc/165x107/60835efa09b0722a196a4c21/arxiv200404059v1-cscr-8-apr-2020-james-bell-david-butler-chris-hicks-jon.jpg)
