-Susan Kare

Mac icons by Susan Kare

Principles Immediacy: impact and memorability through instant recognition Generality: ability to represent a class/group (remove specifying details) Cohesiveness: images in system share instantly- perceived visual vocabulary Characterization: focus on the few distinctive, essential aspects of object Communicability: shared context enables correct viewer interpretation

Sydney 2000 Olympic Games

9 ANTI-PATTERNS FOR ICON DESIGN

9 Anti-patterns for icon design 1. Insufficient differentiation between icons

9 Anti-patterns for icon design 2. Too many elements in one icon

9 Anti-patterns for icon design 3. Unnecessary elements

9 Anti-patterns for icon design 4. Lack of unity of style within a set

9 Anti-patterns for icon design 5. Overly original metaphors MacOSX Guidelines: Use universal imagery that people will easily recognize.

9 Anti-patterns for icon design 6. Ignore national and cultural differences Food ≠

9 Anti-patterns for icon design 7. Images of real interface elements

9 Anti-patterns for icon design 8. Text inside icons (tricky)

9 Anti-patterns for icon design 9. Ignore platform guidelines

DESIGNING ICON SETS Turbomilk’s process in four steps…

Preamble: Two rules (Turbomilk) 1. Before drawing any icon, elaborate its image very carefully (sketch a lot). 2. If you need to draw several icons, think over images for the whole set of icons before proceeding with illustrating activities.

App: help managers of small companies send invoices for work performed work is done invoice is sent money is received

1. Analyze app features: Invoices consist of lines: records on services provided, goods sold or time worked. Lines may be “free” (not connected to an invoice), and available to “pile up”. User can store “free” lines in a pile in the process of performing work for clients and generate invoices based on the finished lines later. Invoices can be paid in several installments.

2. List commands requiring icons

Command elements (color-coded): objects actions limiters qualifiers … become the visual building blocks for icons, a visual grammar

Objects: line invoice payment Actions: add delete group show send Limiters: on service on time worked on product sold tied up free unsent sent paid all Qualifiers:  from invoice  completely  into invoice  into pile

3. Brainstorming element visuals Objects:

3. Brainstorming element visuals Actions:

3. Brainstorming element visuals Limiters: line status invoice status line type

3. Brainstorming element visuals Qualifiers:

4. Compose icons Free line commands:

4. Compose icons Invoice commands:

4. Compose icons Invoice line commands:

4. Compose icons Incoming cash records:

Postscript: icons+  Win8 tiles