4. 100,000 YEARS AGO
Icons are the earliest form of written communication
These Argentinean cave paintings are from 100,000 years ago
5. 35 YEARS AGO…
First designed in 1974 for US Department of Transport
http://www.aiga.org/content.cfm/symbol-signs
6. 30 YEARS AGO…
The arrival of the graphical UI (for the Xerox Star)
http://www.digibarn.com/collections/software/xerox-star/
7. 25 YEARS AGO
Now we get to where my interest in icons first started
When I was about 11 our famiily got an Acorn Electron (32k RAM!)
8. This is how icons used to be constructed, with unique numbers
and the VDU statement
9. MANY HOURS SPENT HERE!
I spent many hours planning icons and characters using this grid
Many icon designers started out by creating sprites for games
11. HOW DO
ICONS AID
INTERACTION?
So lets look at how we can use icons for interaction
12. FAVICONS!
The one that everyone here must've created is a .ico favicon
The real test of an icon designer
Favicons are the signposts for your site or app
17. iPhone Favicons
apple-touch-icon.png - 57x57px
This is particularly relevant if you have a web app, an iPhone favicon would be a good idea
Easy to deploy - no link tag needed
18. I'm going to pick on the Songbird site as the first example
Most important icon uses harsh black and white
Green background pushes the content forward
19. MOST IMPORTANT!
I'm going to pick on the Songbird site as the first example
Most important icon uses harsh black and white
Green background pushes the content forward
20. SUMMARISING FEATURES
This is the most common use of icons at the moment
Features are highlighted and summarized
Also works as decoration - breaks up text blocks
25. OVERCOME LANGUAGE BARRIERS
McDonalds commissioned a series of icons for nutrient information
Symbols and colours were usability tested for 109 countries
26. HELP USERS WITH FORMS
Name: G. Moff Tarkin
Email: moffy at death.star
27. HELP USERS WITH FORMS
Name: G. Moff Tarkin
Email: moffy at death.star
Incorrect field highlighted with warning colours
28. HELP USERS WITH FORMS
Name: G. Moff Tarkin
Email: moffy at death.star
Let's see it without colour
Colourblind users might not see the colour the same way
so the meaning is lost
29. AAAARRRRGGHHH!!!
Colourblindness means that I can't tell if these lights are green or red
The smaller the area of colour, the harder it is
This sort of device is hell to me
The classic question I'm often asked is "How do you manage at traffic lights?"
I'm fine, as long as they don't turn them upside down!
Context can help!
30. HELP USERS WITH FORMS
Name: G. Moff Tarkin
Email: moffy at death.star
Using an icon means that there is a unique shape to convey meaning
(This can and should be backed up by explanatory text)
Don't use colour alone to convey meaning
Also note the context - not at the top of the form but attached to the relevant item
31. TOO MUCH!
Name: G. Moff Tarkin
Address 1 The Death Star
Address 2 Orbiting Yavin
Phone THX 1138
Email: moffy at death.star
However, we don't need an icon for every entry
Design becomes noisy
User less likely to discover meaning
Solution may be to use light grey icons, or remove them
32. CLEARER!
Name: G. Moff Tarkin
Address 1 The Death Star
Address 2 Orbiting Yavin
Phone THX 1138
Email: moffy at death.star
Compare it with this version
The error is clearer.
40. TAKE HOMES Use icons to:
Summarise text
Draw attention
Explain actions and
behaviours
Overcome language
barriers
Aid navigation
(… and add interest!)
45. LIFE BEFORE CONVENTIONS…
There are conventions in the online world too
In the old days iconizing RSS feeds was a mish mash
46. First appeared in Firefox 0.9
Created by Stephen Horlander
Now widely adopted, thanks to Microsoft's decision to use it
Already hard to imagine anything else
47. GOOGLE IMAGE SEARCH
So how do you find what the convention is?
First stop is a google search
49. SEARCH or… ZOOM
Sometimes conventions can conflict
In this instance, context is everything
50. +
SEARCH ZOOM
Adding another simple icon makes this clearer
51. NO CONVENTIONS
what about when there are no conventions?
thats where the fun begins!
this is from a local nursery
yet, from a distance, it looks like a child being dragged to nursery
52. Wahh!
NO CONVENTIONS
what about when there are no conventions?
thats where the fun begins!
this is from a local nursery
yet, from a distance, it looks like a child being dragged to nursery
53. Gradients may be shown as a ratio i.e. 20% = 1:5
OLD FAMILIAR OBJECTS
Level crossing Level crossing
without barrier without barrier
or gate ahead
So what do we do if there are no conventions?
We use our best guess!
Sometimes, old familiar objects are more recognisable symbols, even if they aren't relevant
anymore
54. We also keep libraries of icons to get ideas
Great for colour and style inspiration too
CandyBar, Littlesnapper, Evernote or just a folder
55. WORKFLOW #2:
PRODUCTION
So what kinds of Icon are you likely to be involved in?
62. COOL
PUSH
BACK
NEUTRAL
WARM
PULL
FORWARD
So for icons that don't need to noticed instantly, use neutral or cool colours
For attention or status, use warmer colours
63. OFF STOP, DANGER
DISABLED WARNING
OK, READY NETWORK ISSUES
Be warned that cultural differences mean different meanings too.
64. GLOBAL COLOUR
If you're using Illustrator - make use of the Global Colour feature to keep colour consistency.
65. Whatever app you use, watch your pixels!
Reducing and enlarging artwork means sub-pixels
Sub pixels mean fuzzy artwork
Fireworks feels best at pixel sharpness, but not perfect
66. BLACK OFTEN TOO HARSH
Try to avoid solid black, as it's too harsh
In this document icon example, 50% grey is better
67. HIGHLIGHTING EDGES
This is a style choice as much as anything, but it does have a purpose.
The edges appear crisper, more defined.
74. FORMATS
‣ old school
‣ no alpha
transparency
‣ widely supported
GIF
Lack of alpha transparency is main problem
But widely supported
Good for pixel icons
75. FORMATS
‣ alpha
transparency
‣ widely supported
‣ hacks to work in
PNG IE 6
This is the main one
Worth using hacks for IE6 for transparency
76. GIF GIF PNG
PNG allows for much more flexibility
Especially if you need to change theme
to high contrast
77. FORMATS
‣ It moves!
‣ supported in
Opera and Firefox
‣ One to watch out
for
APNG
‣ animatedpng.com
Opera uses some animated png's in it's interface
.png extension
Animation doesn't have to mean irritation
For example - spinners/throbbers/loading icons
Drawing attention to changes like the yellow fade
78. FORMATS
‣ supported in
Opera and Firefox
‣ Vectors not
bitmaps
SVG ‣ scalable
Good for Linux desktop icons
Good for vimeo style icons with flat colour
Resolution Independence - might be useful?
80. <link rel="icon"
type="image/vnd.microsoft.icon"
href="/somepath/image.ico" />
<link rel="icon"
type="image/gif"
href="/somepath/image.gif" />
<link rel="icon"
type="image/png"
href="/somepath/image.png" />
Adding favicons using the correct image type
81. <img src="/images/icon_covered_rv.png"
alt="Covered RV & Boat Parking"
title="Covered RV & Boat Parking" />
If text is vital to understanding, use title and/or alt attribute
82. <img> tag method
PROS CONS
Alt & Title Higher initial page
attributes to give load
meaning
Easy to deploy
83. 32x6402 pixels (52k)
Mobile Me make use of sprites to cut down on initial http requests
To the extent that it's one image, 6402 px high
Very high development overhead
but worth it for the optimisation benefits
Beware space and zoom issues
84. 32x6402 pixels (52k)
Mobile Me make use of sprites to cut down on initial http requests
To the extent that it's one image, 6402 px high
Very high development overhead
but worth it for the optimisation benefits
Beware space and zoom issues
85. CSS sprites method
PROS CONS
Faster initial load Longer
development time
Easier to position
Loss of alt
Fits with attribute
'designing in
company' Potential issues
with text resizing
86. Isn't pretty with images off, but still makes sense.
CSS Sprites makes little sense here
87. FAMFAMFAM.COM
If you don't want to create your own icons, there are great free resources, like Mark James's
famfamfam.
88. TAKE HOMES Keep it simple and
memorable
If there is a convention
- use it
Don't be abstract,
or too detailed
Reduce the number
of colours and icons
Be consistent - don't
design icons in isolation