Really nice simple project by Neal Fletcher allowing the user to create their own type out of set elements on a board. Works across digital and web as well as an actual product.

Perhaps my idea needs simplifying and limiting. As pointed out if there’s too much functionality, will people ask for customised designs? Also this can give the opportunity for the user to fully interact with the surface of the graph as opposed to entering stats and figures, which too closely replicates an excel spreadsheet with prettier graphics at the end.

(Source: nealfletcher.co.uk)

Nice tour video

nice icons an tour  video.

10 mistakes in icon design →

vizualize:

Copernicus Science Centre identity and wayfinding system by Mamastudio - Warsaw, Poland

via identitydesigned.com

(via typocom)

Beautiful Ui and minimal infographics by Stayclean.

Really like the simplicity of what seems like a complex system. The tool is designed for marketing managers to keep track of projects.

http://www.behance.net/gallery/Welovroi/3437555

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.

Jacques Bertin: Semiology of Graphics

Relevant notes taken from throughout Bertin’s book covering all areas of information visualisation.

-

“…graphics is one of the major “languages” applicable to information processing” (p.2)

-

A monosemic system: when the meaning of each sign is known prior to observation. Bertin describes graphics as monosmic.
A polysemic system: when the meaning of the individual signs are “deduced from consideration of the collection of signs” (pg.2)

-

Stages in creating graphic diagrams (p.192)

• Order first into diagram network or map
• No. of neccessary visual variables; on tow three or more than three.
• Order the components: highlight, group or sequence
• (diagrams only) define length of components
• (networks and maps only) types of representation: point, line, area

Bertin, J. (2011). Semiology of graphics: diagrams, networks, maps. Redlands; Esri Press.

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)