-Susan Kare

1. -Susan Kare

2. Mac icons by Susan Kare

3. 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

4. Sydney 2000 Olympic Games

5. 9 anti-patterns for icon design

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

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

8. 9 Anti-patterns for icon design 3. Unnecessary elements

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

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

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

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

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

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

16. Designing icon sets Turbomilk’s process in four steps…

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

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

19. 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.

20. 2. List commands requiring icons

21. 2. List commands requiring icons

22. 2. List commands requiring icons

23. 2. List commands requiring icons Command elements (color-coded): • objects • actions • limiters • qualifiers … become the visual building blocks for icons, a visual grammar

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

25. 3. Brainstorming element visuals Objects:

26. 3. Brainstorming element visuals Actions:

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

28. 3. Brainstorming element visuals Qualifiers:

29. 4. Compose icons Free line commands:

30. 4. Compose icons Invoice commands:

31. 4. Compose icons Invoice line commands:

32. 4. Compose icons Incoming cash records:

34. Postscript: icons+  Win8 tiles