Thomas: How to design logos, symbols and icons

“Immediate identification as well as visual definition…” (p.18)

Thomas defines 10 points to adhere to:

• Visibility: will stand out - quick and memorable
• Application: must withstand numerous technical applications
• Distinctiveness: distinguish itself from competition (maybe not as relevant to icons as it is to logos)
• Simplicity: don’t overwork or underwork drawing. Think about cultural and religious connotations.
• Retention: if too easy to read, viewer feels no sense of discovery. (feel this is not relevant to icons. Icons should be clear to read as efficiency is important in UI)
• Color
• Descriptiveness: reveal to some extent nature of what represents. Not an exact literal translation. (I disagree with this, maybe for logo’s this is better, but Icons need to represent a literal translation where possible)
• Timeliness: current trends have life expectancy.
• Modularity: Adaptable, can be used in conjunction with other graphic and typographic elements without the icon being watered down.
• Equity: age, use and recognition considered.

Three types of mark:

• descriptive: illustrative
• symbolic: symbol representing aspect or object
• typographic

Thomas, G. (2000). How to design logos, symbols and icons. Cincinnati: North Light Books.

Caplin: Icon Design

“Apple takes to opposite approach [to Microsoft]. They recognise that people can legitimately use computers without understanding or caring how they work…This in a nutshell, is the essence of the computer icon. It is a visual simplification of a complex process” (p.7)

GUI conceals “from the user all but the most essential information”

“despite the fact that this visual language is less than two decades old, it has evolved a rich and complex vocabulary”

“Within these tiny confines the icon designer has to define the type of object to which it refers, portray the use to which the application can be put, and make the image distinctive and different to the icons of competing applications”

Icons and symbols “…transcends the boundaries of language and culture” (p.8).

The icons should be simple to avoid confusion but not over simplified as they can become confusing due to their ambiguity.

Metaphors, allegory and visual puns are used to get message across.

History shows that long before the written word, people communicated through images and symbols i.e. cave paintings hieroglyphics.

Caplin, S. (2001). Icon design: graphic icons in computer interface design. Lewes: The Ivy Press Limited.

Nielsen’s F shape reading pattern

This dominant reading pattern looks somewhat like an F and has the following three components:

• Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
• Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
• Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

(Source: useit.com)

Data Visualisation for Human Perception →

Interesting article covering the psychology of elements specifically within data visualisation.

Graphical Integrity - Tufte

” Graphical excellence begins with telling the truth about data.”

“Clear, detailed and thorough labelling should be used to defeat graphical distortion and ambiguity. Write out explanations of the data on the graphic itself”

“The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities represented”

Tufte, E. (1983). The Visual Display of Quantitative Information. Chesire, Connecticut: Graphics Press.

The Magical Seven Plus or Minus Two →

Essential visualization resources →

brndwltr:

Essential visualization resources - http://ping.fm/O516T

Psychology of Shapes →

How do we read words and how should we set them? →

Onion layer model of legibility →