-Susan Kare

-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 SETSTurbomilk’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

2. List commands requiring icons

2. List commands requiring icons

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