Interface Aesthetics Week 8 Signs, pictograms, and icons

Interface Aesthetics 03/16/09

Interface Aesthetics Week 8Signs, pictograms, and icons

- Semiotics- Building symbols- Pictograms- Icons- Logos

OUTLINE

Assignment 5INTERFACE AESTHETICS

Design a new pictogram/logo/icon for:

• I School, or

• Your school or program (non-I School), or

• Your own project

Semiotics:The study of signs

Signifier

The representation of the object, which could be a word, a picture, or a sound.

The understanding that an observer gets from seeing or experiencing either the signified or its signifier.

Signified

The physical thing or idea that the sign stands for.

Warm, hot, burn, bright, dangerous, etc.

Signs- Symbolic - Iconic - Indexical[Charles Sanders Peirce, 1839-1914]

Symbolic signsCode or rule-following conventions required

Symbolic signsLanguage characters, numbers

Orb[Ambient Devices]

AMBIENT MEDIA

[Ambient Devices]

OrbAMBIENT MEDIA

Symbolic signsAbstract visual representations

Iconic signsAn intermediate degree of transparency to the signified object

Iconic signsDrawings and caricatures

Iconic signsMetaphors

[Jeremijenko , 1995]

Indexical signsDirectly connected to the signified.

Jason Courtney http://www.perdador.com/f6update/Oc3.html

Indexical signsNatural signs

Indexical signsSIGNS

Measuring instruments (scale, thermometer, clock)

Indexical signsCountdowns

Symbolic

Language characters, numbers, abstract mapping (e.g. colors of “orb”)

Iconic

Drawings, caricatures, metaphors

Indexical

Measuring instruments

Signs in context of useSIGNS

to represent “cold weather” == Indexical

to represent “snow flake” == Iconic

to represent “Ski Club” == Symbolic

Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)

IconogramIllustrative representation with common points between the signifier and the signified.

PictogramPictorial representation. Represent complex facts through visual carriers of meaning.

CartogramA topological representation with complex functions (e.g. statistics) and iconic facts.

DiagramFunctional representation. A more functional carrier.

IdeogramRepresentation of a concept. Independent of any formal identification.

LogogramA visual, referential linguistic sign that does not take the phonetic dimension into consideration.

TypogramTypographical representation. A sign derived from a written repertoire.

PhonogramPhonic representation. A sign signifies sounds.

IconogramIllustrative representation with common points between the signifier and the signified.

PictogramPictorial representation. Represent complex facts through visual carriers of meaning.

CartogramA topological representation with complex functions (e.g. statistics) and iconic facts.

DiagramFunctional representation. A more functional carrier.

IdeogramRepresentation of a concept. Independent of any formal identification.

LogogramA visual, referential linguistic sign that does not take the phonetic dimension into consideration.

TypogramTypographical representation. A sign derived from a written repertoire.

PhonogramPhonic representation. A sign signifies sounds.

Signs and the surroundingsSIGNS

National Museum of Emerging Science and InnovationTokyo Japan

PragmaticsSIGNS

The manner in which the receiver interprets the sign.

IndicativeA person may smoke here, but he does not have to smoke. Up to the receiver what he does with information.

ImperativeThe intention is to influence the receiver’s behavior. Smoking is prohibited even if the receiver feels like smoking.

SuggestiveRepresents an appeal to stop smoking for reasons of health, regardless of time and place.

The Intention

from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)

Building signsSIGNS

The BearerThe bearer is whatever holds the pictogram.

The landscape format reinforces the direction in which the symbol is going. The circular lamp reinforces the indicative message.

The FormatA free standing pictogram only needs a protective area to separate it from surrounding elements. A pictogram with a background also needs an inner protective area.

The Visual BalanceA vertical bar looks longer than a horizontal bar.A diagonal bar should appear shorter than a vertical or horizontal bars.

Line EndingsUsing open forms means that there are more line endings. The endings could be rounded or squared off.

CornersBoth inner and outer corners may be either rounded or squared off.

StylesThe designs could be faded, sketched, blurred or fragmented. Creates a big visual impact.

StructureShapes could be empty, fully or partially filled.

Line thicknessThinner lines may not have enough visibility.Thick lines could overwhelm the negative space and affects recognizability.

1996 Atlanta

1988 Seoul

1976 Munich

1992 Barcelona

2000 Sydney

Visualizing prohibitionTraffic signs have made us associate round and red with prohibition, even without crossing through the motif of the pictogram.

Crossing outMethod of visualizing a ban.

Red, round, and crossed outA prohibitive sign with an additional line has a heavier and more urgent impact.

ProhibitionDiagonal lines are best suited to indicate prohibition. Horizontal and vertical lines could suggest a division.

Mirror image of the motifCrossing out a pictorial motif can reduce the ability for people to recognize the sign. Recognition could be restored through mirroring image.

Visualization of the diagonalProvided that the prohibition is clear, a thinner diagonal can enhance the motif. A transparent diagonal can help to make the motif stand out.

Complex or multiple messagesEach message should be visualized through its own pictogram. Otherwise there is a risk that individual messages could get lost or be misunderstood.

ExamplesSIGNS

Deutsche Bahn AGA system for German railway company. The thin white line around the outside help the sign to stand out against the surrounding.

Berlin Transport ServicesA pictogram system created by Meta Design Berlin in 1993. Introduced a five-color system and consistent directional representations.

Düsseldorf AirportAn extended pictogram system created by Meta Design Berlin.

Swiss PostA system designed by Designalltag Zurich.

Cologne/Bonn AirportDesigned by Integral, Paris. Both signs and type incorporated the same structures and basic forms.

Pacific Bell - Yellow PagesVisual guidelines by Michael Renner and Joachim Müller-Lancé, to illustrate the different themes of Yellow Pages.

Zurich Waste DisposalDesigned by Designalltag Zurich

Sto AGA product label system designed by Meta Design for Sto AG, a major manufacturer of building materials and paint. Reduced multilingual instructions.

Natural History Museum BerlinDesigned by Mohn Design, Berlin. A dynamic movement that varies according to the distance at which one is standing.

Illustrative diagramsSIGNS APPLIED

Interface Aesthetics 03/16/09by Aizawa et al (2004)

Amplification through simplification

[McCloud, 1994]

Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)

LinesSIGNS

Wolfgang Köhler (1929) figure from Ramachandran, V.S. & Hubbard, E.M. (2001)

IconsSIGNS

IconsIconographic representations. Represent any kind of object or action, most often in computer context (folder, tools, moods).

PictogramsPictorial representations. Represent complex facts through visual carriers of meaning.

LogosA graphical element (a set of symbols and typeface) for forming a trademark or brand.

- Symbolic- Iconic- Indexical

IconsSIGNS

The free spirits of the sign world. Greater freedom of design.

Pictogram Icon

Interface Aesthetics 03/16/09by Susan Kare (1980’s)from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)

Interface Aesthetics 03/16/09by Meta Design, San Franciscofrom Pictograms, Icons & Signs (Abdullah & Hübner, 2006)

128 48 32 16

LogosSIGNS

Pictographic and ideographic logos

Typograms

LogosSIGNS

PictographicIdeographic

Pictographic logosSigns as pictograms which pinpoint an idea or message, in a graphically reduced form.

from Los Logos (Mischler, Bourquin, & Klanten, 2002)

Ideographic logosAbstract signs that convey a feeling, a form, a movement, an idea. Their content and meaning is not revealed at a glance, but requires a certain “willingness to read.”

TypogramsSIGNS

Type as typePictorial typeType as pictures

Type as typeLettering developed from existing typefaces, consistently avoiding additional graphic elements and other interventions.

Type as type

Pictorial typeTypograms in which additional graphic elements communicate content.

Pictorial type

Type as picturesTypograms that gain their significance from the free approach to characters, the typography broken down to the point of illegibility.

Type as pictures

Interface Aesthetics 03/16/09from Los Logos (Mischler, Bourquin, & Klanten, 2002)

Pictographic and ideographic logos

Typograms

Assignment 5INTERFACE AESTHETICS

Design a new pictogram/logo/icon for:• I School• Your school or program (non-I School)• Your own project

Be clear what type of sign you are designing (e.g., pictogram, ideographic logo, type as picture, etc.) and describe how your sign stands for the signified.

Post your design and description of your design on the web by Saturday 28th. You will present your design at the workshops on March 30th.

Interface Aesthetics Week 8 Signs, pictograms, and icons

Documents

Icons-Land Sport Vector Icons V2€¦ · Icons-Land Vista Sport Vector Icons V2.0

Calligraphy lecture-history. Cave drawing Pictograms

FSB Pictograms

Pictograms Design Guidelines

Pictograms Book

Mars Mysteries: Landform Pictograms

Crop Circles "Pictograms" (2009)

Recurring Pictograms - Jonas Svedin

Pictograms N - Center Parcs

Using Icons (Instant Infographics) – Data Visualisation’s ... · Using Icons (Instant Infographics) – Data Visualisation’s next leap in evolution! Aesthetics, clarity and

(sswp) ground works pictograms ground works pictograms

The Revolutionary's Booklist · Michael Michalko ! DOODLING & DRAWING 1,000 Icons, Symbols, and Pictograms: Visual Communications for Every Language Blackcoffee Design Madden Beyond

WHMIS Pictograms - WCB

Signs and Symbols Roseaami.confedge.com/asset/confEdge/aami/_warehouse/files/Slides_0306… · • Pictograms • Icons ... • Symbols shall comply with graphical ISO 7000 with respect

Bridge Aesthetics SourcebookBridge Aesthetics Sourcebooksp.bridges.transportation.org/Documents/2010 SCOBS presentations… · Bridge Aesthetics SourcebookBridge Aesthetics Sourcebook

FaceSymbol - BSI Group · Biometrics – Cross-jurisdictional & societal aspects of implementation of biometric technologies – Pictograms, icons & symbols: Face, To submit the symbols

Pictograms for Labeling Medications

The Sweet Shop Handling Data Data Questions ? Tables or Graphs Reading Pictograms Worksheet Making Pictograms

Pictograms Intro

Pictograms of the table head