icon design

opening slide: colour spectrum

The evolution of the icon: from early pictograms to today's digital icon design.

opening slide: icon design
what is an icon? ~ image/likeness - well-known preson/thing - computer icon
early visual language: pctogrphs and ideograms
ISOTYPE icon: figure from hip up, holding up frame showing 3 figures
creators: Otto Neurath + Gerd Arntz
black/white ISOTYPE icons
ISOTYPE icons for people and mobility
early data visualisation of the development of railways (1930)
TFL: Pictogram standard, front cover
TFL visuals for transport modes
TFL visuals for facilities
illustration of various visuals intersected, screen, cogs, eye, arrows, atering can pouring out swirls to show an often difficult start to icon design
Photoshop v1 - icons by Susan Kare
Phosothop UI icons, Susan Kare
the mac command key icon, quoted from 'icon handbook', Jon Hicks
what kind of icon fits the prupose? ~ pictogram / ideogram / arbitrary symbol
consider context and convention
study showing recognition of toilet signage favouring the most standard and simple ivons of others
early convention for file saving: floppy disk icon
magnifying glass + question: what does this icon mean?
magnifying glass with added plus
magnifying glass x2 (with / without the plus) + questions: search? zoom?
example of poor use of magnifying icon: youtube promotion for fesival as paper pop-up book
icon design: where do you start?
always start with
						research, find existing conventions, sketch / draw / doodle, brainstorm ideas, mindmap and 
						avoid ambiguity.
examples of ambiguity, quoted from 'icon handbook', Jon Hicks
find the metaphor - research via image searches
find the metaphor - research via image searches on icon finder and the like
find the metaphor - research via noun project
case study: photovoca - PhotoVOCA is a free switch accessible communication board maker
photovoca icon design process: speech bubble + camera
photovoca icon design process: photo dude
photovoca icon design process: camera dude
photovoca icon design process: stylised shapes
photovoca icon design process: lens and speech bubble
photovoca icon design process: refining selected design
photovoca icon design process: file formats and sizes
photovoca icon design process: close-up of sizes
photovoca icon design completed, screenshot of final icon in app store
photovoca - website homepage
icon handbook cover, Jon Hicks
closing slide

download slides PDF, 3MB (optimised) PDF, 12.8MB (original)