Tweet
Tweet

Slide 1

Slide 1 text

icon icon design design icon

Slide 2

Slide 2 text

origins: from Greek εἰκών / eikōn meaning image/likeness, a painting or statue of a holy figure what is an icon? de!inition #1 general use: a well-known person/thing which is seen as symbol of an idea or movement de!inition #2 computer icon: an image/symbol which represents a tool/function or file/folder de!inition #3

Slide 3

Slide 3 text

early visual language pictograph pictorial representation of a word / thing ideogram symbolic images which represent ideas symbol for sun symbol for heat/light as outlined in the ICON HANDBOOK, by Jon Hicks

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ISOTYPE International System of TYpographic Picture Education = Otto Neurath 10/12/1882 – 22/12/1945 concept Gerd Arntz 11/12/1900 – 4/12/1988 design

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

mobility people

Slide 8

Slide 8 text

The development of railways 1930, Leipzig—created by Gerd Artz, edited by Otto Neurath

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

I leafed through a book of symbols, and came across a similar cloverleaf, which was identified as an image used on signs in Swedish campgrounds to mean ‘interesting feature’. This seemed appropriate, and would lend itself to being recreated in a limited number of pixels, plus fit well on a squarish key cap. Years later, I learned that it is meant to be a castle, seen from above. You also designed the Apple Command icon that is now an accepted convention. How did you come up with a symbol for such an abstract concept? Jon Hicks: “ Susan Kare: ⌘ quoted from the ICON HANDBOOK: Jon Hicks interviews Susan Kare

Slide 16

Slide 16 text

representational, pictorial image of a word/thing what kind of icon fits the purpose? ➜ pictogram ➜ ideogram ➜ arbitrary symbol symbolic image which represents an idea invented image to stand for word/thing/idea/action

Slide 17

Slide 17 text

consider: context & convention How will the icon be used? Will the icon replace text? Or be accompanied by it? What is the message the icon needs to convey? Are there any existing conventions? Do the existing conventions still apply?

Slide 18

Slide 18 text

public convention: toilet signage

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

early convention: file saving

Slide 21

Slide 21 text

What does this icon mean?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

search? zoom?

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

where do you start? icon design

Slide 26

Slide 26 text

the ICON HANDBOOK Jon Hicks p 108 ★ research ★ find existing conventions ★ sketch / draw / doodle ★ brainstorm ideas ★ mindmap always start with avoid ambiguity.

Slide 27

Slide 27 text

the ICON HANDBOOK, p 109 Jon Hicks

Slide 28

Slide 28 text

find the metaphor.

Slide 29

Slide 29 text

find the metaphor.

Slide 30

Slide 30 text

find the metaphor.

Slide 31

Slide 31 text

case study: PhotoVOCA PhotoVOCA is a free switch accessible communication board maker for Apple iOS and Android tablets and phones. It supports both text-to-speech and digital voice recording. ➜ what is PhotoVOCA? ➜ creator: Cognable Simon Evans is a researcher and developer with particular interest in use of the internet, assistive technologies and new media by and for people with Intellectual Disabilities (ID).

Slide 32

Slide 32 text

!inding the metaphor. speech bubble & camera

Slide 33

Slide 33 text

!inding the metaphor. photo dude

Slide 34

Slide 34 text

!inding the metaphor. camera dude

Slide 35

Slide 35 text

!inding the metaphor. stylised shapes

Slide 36

Slide 36 text

!inding the metaphor. lens & bubble

Slide 37

Slide 37 text

re!ining the design.

Slide 38

Slide 38 text

formats & sizes. 72x72 512x512 48x48 48x48 36x36 32x32 24x24

Slide 39

Slide 39 text

formats & sizes. 72x72 36x36 24x24 icons enlarged to show detail

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

portrait photo of Otto Neurath and Gerd Arntz, courtesy of isotype revisted ISOTYPE symbols and visual chart by Gerd Arntz, courtesy of gerdarntz.org Transport for London: Pictogram standard, available at tfl.gov.uk Photoshop and Apple icons by Susan Kare toilet symbols: centre image by AIGA Comparative Test of Public Symbols - www.formassembly.com/forms/20856, via IconGlobe image credits links the ICON HANDBOOK - iconhandbook.co.uk Google Creative Sandbox - www.creativesandbox.com/guidebook PhotoVOCA - photovoca.com

Slide 44

Slide 44 text

Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea