-susan kare

Click here to load reader

Post on 13-Jan-2016




1 download

Embed Size (px)


-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 - PowerPoint PPT Presentation


PowerPoint Presentation

-Susan KareSusan Kare worked at Apple as a Creative Director from 1982 to 1985economy of expression the need for an icon to convey its meaning in a single glance. Her trick? To think of icons more like road signs than illustrations, something Kare has continued in her current work for handheld devices. We were trying to create a set of familiar images so that their meanings could help the nave user, says Kare.http://www.computerarts.co.uk/in_depth/features/design_icon_the_mac_icons1Mac icons by Susan Kare

http://www.kare.com/portfolio/03_apple_macicons.html2PrinciplesImmediacy: impact and memorability through instant recognitionGenerality: ability to represent a class/group (remove specifying details)Cohesiveness: images in system share instantly-perceived visual vocabularyCharacterization: focus on the few distinctive, essential aspects of objectCommunicability: shared context enables correct viewer interpretationCan reduce complexity of the system by allowing perceptual processes to take overKevin Mullet, Darrell Sano, Designing Visual Interfaces (1994)3Sydney 2000 Olympic Games

Immediacy: impact and memorability through instant recognitionGenerality: ability to represent a class/group (remove specifying details)Cohesiveness: images in system share instantly-perceived visual vocabularyCharacterization: focus on the few distinctive, essential aspects of objectCommunicability: shared context enables correct viewer interpretation49 anti-patterns for icon design




9 Anti-patterns for icon design1. Insufficient differentiation between icons



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

Vista. Each icon presents us with a mini-story with an intertwined plot. The problem is that in small size you are unable to work out what is depicted. Even in larger sizes, it is not always that easy to decipher the icons.MaxOSX Guideline: Try to use a single object that captures the icons action or represents the control. Start with a basic shape.Always simplify your objects to their essential forms and shapes. Think what makes your object universal.http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design7

9 Anti-patterns for icon design3. Unnecessary elements

if this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part.BeOS 5 Ticks here are absolutely superfluous. By the way, why are they done in red?http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design89 Anti-patterns for icon design4. Lack of unity of style within a set

The uniting property can be: color scheme, perspective, size, drawing technique or a combination of several such properties.http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design9

9 Anti-patterns for icon design5. Overly original metaphorsMacOSX Guidelines: Use universal imagery that people will easily recognize.

Another problem with choosing a shredder is that there is no one well-known type of shredder out there. The icon appears very much like a printer with an octopus hidden inside. What is more, it is absolutely unclear how a full bin would be displayed according to this metaphor. Why? The shredder is used for deleting files, however unlike a Trash or Recycle Bin icon, the shredder immediately deletes the file and does not store a copy for retrieval later. http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_designhttp://iconlibrary.iconshock.com/tutorials/useful-icon-design-lessons-and-tips109 Anti-patterns for icon design6. Ignore national and cultural differences


Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.


http://www.aiga.org/content.cfm/symbol-signsAIGA appointed a committee of five leading designers of environmental graphics (Massimo Vignelli was one), who evaluated the symbols and made recommendations for adapting or redesigning them. Based on their conclusions, a team of AIGA member designers produced the symbols.A first set of 34 symbols was published in 1974, and received one of the first Presidential Design Awards; 16 more symbols were added in 1979. These copyright-free symbols have become the standard for off-the-shelf symbols in the catalogues of U.S. sign companies.

129 Anti-patterns for icon design7. Images of real interface elements

Mac OSX Guidelines: Important: Do not use a system icon, such as the yellow caution icon, in your toolbar. A system icon provides important information to the user in a specific context, such as in an alert window; using it in a toolbar blurs its meaning and dilutes it effectiveness in the system.13

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

There are tons of icons that successfully use text, but its done in extreme cases and with thoughtful care. use no more than 3 or four characters and play with high contrasted shapes and colorshttp://iconlibrary.iconshock.com/tutorials/useful-icon-design-lessons-and-tips/http://pixelresort.com/blog/iphone-app-icon-design-best-practises14

9 Anti-patterns for icon design9. Ignore platform guidelines

Windows Vista, Android and the Mac OSX perspectives for app, toolbar and utility icons



Designing icon setsTurbomilks process in four stepshttp://turbomilk.com/blog/cookbook/usability/designing_an_iconic_language/

16Preamble: 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.

http://turbomilk.com/blog/cookbook/usability/designing_an_iconic_language/17App: help managers of small companies send invoices for work performedwork is doneinvoice is sentmoney is received1. 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

Revisit your elementary school sentence diagramming exercises202. List commands requiring icons

2. List commands requiring icons

2. List commands requiring iconsCommand elements (color-coded):objectsactionslimitersqualifiers become the visual building blocks for icons, a visual grammarObjects:lineinvoicepayment

Actions:adddeletegroupshowsendLimiters:on serviceon time workedon product soldtied upfreeunsentsentpaidallQualifiers:from invoicecompletelyinto invoiceinto pile3. Brainstorming element visualsObjects:

3. Brainstorming element visualsActions:

3. Brainstorming element visualsLimiters:line statusinvoice statusline type

273. Brainstorming element visualsQualifiers:

Note the parallel design process284. Compose iconsFree line commands:

4. Compose iconsInvoice commands:

4. Compose iconsInvoice line commands:

4. Compose iconsIncoming cash records:

Web illustrations, favicons, Android, and Apple33

Postscript: icons+ Win8 tiles

http://www.weareratio.com/wordpress/?p=2430Windows 8 Live Tiles: Top 10 Dos and Donts