Upgrade to Pro — share decks privately, control downloads, hide ads and more …

icon design

icon design

a look back at the origins of the visual language, ISOTYPE and considerations on icon design.

Prisca Schmarsow

November 27, 2012
Tweet

More Decks by Prisca Schmarsow

Other Decks in Education

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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?
  7. the ICON HANDBOOK Jon Hicks p 108 ★ research ★

    find existing conventions ★ sketch / draw / doodle ★ brainstorm ideas ★ mindmap always start with avoid ambiguity.
  8. 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).
  9. 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