Interface Aesthetics Week 8 Signs, Pictograms, and Icons

Interface Aesthetics Week 8 Signs, pictograms, and icons

Interface Aesthetics 03/16/09 OUTLINE - Semiotics - Building symbols - Pictograms - Icons - Logos

Interface Aesthetics 03/16/09 INTERFACE AESTHETICS Assignment 5 Design a new pictogram/ logo/icon for: • I School, or • Your school or program (non-I School), or • Your own project

Interface Aesthetics 03/16/09 Semiotics: The study of signs

Interface Aesthetics 03/16/09 SIGNS

Signified Signifier Sense The physical thing or The representation of The understanding idea that the sign the object, which that an observer gets stands for. could be a word, a from seeing or picture, or a sound. experiencing either the signified or its signifier.

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

Interface Aesthetics 03/16/09 Signs - Symbolic - Iconic - Indexical [Charles Sanders Peirce, 1839-1914]

Interface Aesthetics 03/16/09 SIGNS Symbolic signs Code or rule-following conventions required

Interface Aesthetics 03/16/09 SIGNS Symbolic signs Language characters, numbers

Interface Aesthetics 03/16/09 AMBIENT MEDIA Orb [Ambient Devices]

Interface Aesthetics 03/16/09 SIGNS Symbolic signs Abstract visual representations

Interface Aesthetics 03/16/09 SIGNS Iconic signs An intermediate degree of transparency to the signiﬁed object

Interface Aesthetics 03/16/09 SIGNS Iconic signs Drawings and caricatures

Interface Aesthetics 03/16/09 SIGNS Iconic signs Metaphors

[Jeremijenko , 1995] Interface Aesthetics 03/16/09 SIGNS Indexical signs Directly connected to the signiﬁed.

Interface Aesthetics 03/16/09 Indexical signs Natural signs

16 Jason Courtney http://www.perdador.com/f6update/Oc3.html SIGNS Indexical signs Measuring instruments (scale, thermometer, clock)

Interface Aesthetics 03/16/09 Indexical signs Countdowns

18 SIGNS Symbolic Iconic Indexical Language Drawings, Measuring characters, caricatures, instruments numbers, metaphors abstract mapping (e.g. colors of “orb”)

Interface Aesthetics 03/16/09 SIGNS Signs in context of use

to represent “snow ﬂake” == Iconic

to represent “cold weather” == Indexical

to represent “Ski Club” == Symbolic

Interface Aesthetics 03/16/09 from Pictograms, Icons & Signs (AbdullahInterface Aesthetics& Hübner, 03/16/09 2006) Iconogram Ideogram Illustrative representation with Representation of a concept. common points between the Independent of any formal signifier and the signified. identification.

Pictogram Logogram Pictorial representation. A visual, referential linguistic Represent complex facts sign that does not take the through visual carriers of phonetic dimension into meaning. 4 consideration.

Cartogram Typogram A topological representation Typographical representation. with complex functions (e.g. A sign derived from a written statistics) and iconic facts. repertoire.

Diagram Phonogram Functional representation. Phonic representation. A sign A more functional carrier. signiﬁes sounds.

Interface Aesthetics 03/16/09 Iconogram Ideogram Illustrative representation with Representation of a concept. common points between the Independent of any formal signifier and the signified. identification.

Cartogram Typogram A topological representation Typographical representation. with complex functions (e.g. A sign derived from a written statistics) and iconic facts. repertoire.

Diagram Phonogram Functional representation. Phonic representation. A sign A more functional carrier. signiﬁes sounds.

Interface Aesthetics 03/16/09 SIGNS Signs and the surroundings

Interface Aesthetics 03/16/09 from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) Interface Aesthetics 03/16/09 National Museum of Emerging Science and Innovation Tokyo Japan Interface Aesthetics 03/16/09 SIGNS Pragmatics The manner in which the receiver interprets the sign.

Interface Aesthetics 03/16/09 The Intention

Indicative Imperative Suggestive A person may smoke here, but The intention is to inﬂuence Represents an appeal to stop he does not have to smoke. the receiver’s behavior. smoking for reasons of health, Up to the receiver what he Smoking is prohibited even if regardless of time and place. does with information. the receiver feels like smoking.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) SIGNS Building signs

Interface Aesthetics 03/16/09 The Bearer The 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.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) The Format A 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.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) The Visual Balance A vertical bar looks longer than a horizontal bar. A diagonal bar should appear shorter than a vertical or horizontal bars.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) Line Endings Using open forms means that there are more line endings. The endings could be rounded or squared off.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) Corners Both inner and outer corners may be either rounded or squared off.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) Styles The designs could be faded, sketched, blurred or fragmented. Creates a big visual impact.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) Structure Shapes could be empty, fully or partially ﬁlled.

from Pictograms, Icons & SignsInterface (Abdullah Aesthetics & Hübner, 03/16/09 2006) Line thickness Thinner lines may not have enough visibility. Thick lines could overwhelm the negative space and affects recognizability.

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

1988 Seoul

1976 Munich

1992 Barcelona

2000 Sydney

Interface Aesthetics 03/16/09 Visualizing prohibition Trafﬁc signs have made us associate round and red with prohibition, even without crossing through the motif of the pictogram.

from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) Crossing out Method of visualizing a ban.

from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) Red, round, and crossed out A prohibitive sign with an additional line has a heavier and more urgent impact.

from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) Prohibition Diagonal lines are best suited to indicate prohibition. Horizontal and vertical lines could suggest a division.

Interface Aesthetics 03/16/09 from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) Mirror image of the motif Crossing out a pictorial motif can reduce the ability for people to recognize the sign. Recognition could be restored through mirroring image.

from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) Visualization of the diagonal Provided that the prohibition is clear, a thinner diagonal can enhance the motif. A transparent diagonal can help to make the motif stand out.

from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) Complex or multiple messages Each message should be visualized through its own pictogram. Otherwise there is a risk that individual messages could get lost or be misunderstood.

from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) SIGNS Examples

Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Deutsche Bahn AG A system for German railway company. The thin white line around the outside help the sign to stand out against the surrounding. Interface Aesthetics 03/16/09 Berlin Transport Services A pictogram system created by Meta Design Berlin in 1993. Introduced a ﬁve-color system and consistent directional representations.

Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Düsseldorf Airport An extended pictogram system created by Meta Design Berlin.

Interface Aesthetics 03/16/09 Swiss Post A system designed by Designalltag Zurich.

Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Cologne/Bonn Airport Designed by Integral, Paris. Both signs and type incorporated the same structures and basic forms.

Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Paciﬁc Bell - Yellow Pages Visual guidelines by Michael Renner and Joachim Müller-Lancé, to illustrate the different themes of Yellow Pages.

Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Zurich Waste Disposal Designed by Designalltag Zurich

Interface Aesthetics 03/16/09 Sto AG A product label system designed by Meta Design for Sto AG, a major manufacturer of building materials and paint. Reduced multilingual instructions.

Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Natural History Museum Berlin Designed by Mohn Design, Berlin. A dynamic movement that varies according to the distance at which one is standing.

Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 SIGNS APPLIED Illustrative diagrams

Interface Aesthetics 03/16/09 byInterface Aizawa Aesthetics et al (2004) 03/16/09 byInterface Aizawa Aesthetics et al (2004) 03/16/09 Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 Interface Aesthetics 03/16/09 SIGNS Ampliﬁcation through simpliﬁcation [McCloud, 1994]

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

Interface Aesthetics 03/16/09 from Understanding ComicsInterface (McCloud, Aesthetics 03/16/09 1994) from Understanding ComicsInterface (McCloud, Aesthetics 03/16/09 1994) Wolfgang Köhler (1929) ﬁgure from Ramachandran, V.S. & Hubbard,Interface Aesthetics E.M. (2001) 03/16/09 from Understanding ComicsInterface (McCloud, Aesthetics 03/16/09 1994) Interface Aesthetics 03/16/09 SIGNS Icons

Interface Aesthetics 03/16/09 - Symbolic - Iconic Sign - Indexical

Pictograms Icons Logos Pictorial representations. Iconographic representations. A graphical element Represent complex facts Represent any kind of object (a set of symbols and through visual carriers of or action, most often in typeface) for forming meaning. computer context (folder, a trademark or brand. tools, moods).

Interface Aesthetics 03/16/09 SIGNS Icons The free spirits of the sign world. Greater freedom of design.

Interface Aesthetics 03/16/09 Pictogram Icon

Interface Aesthetics 03/16/09 by Susan Kare (1980’s) from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) by Meta Design, San Francisco from Pictograms, Icons & InterfaceSigns (Abdullah Aesthetics & Hübner, 03/16/09 2006) 128 48 32 16 SIGNS Logos

Interface Aesthetics 03/16/09 - Symbolic - Iconic Sign - Indexical

Pictographic and Typograms ideographic logos

Interface Aesthetics 03/16/09 SIGNS Logos Pictographic Ideographic

Interface Aesthetics 03/16/09 Pictographic logos Signs as pictograms which pinpoint an idea or message, in a graphically reduced form.

from Los Logos (Mischler,Interface Bourquin, Aesthetics & Klanten, 03/16/09 2002) Ideographic logos Abstract 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.”

from Los Logos (Mischler,Interface Bourquin, Aesthetics & Klanten, 03/16/09 2002) SIGNS Typograms Type as type Pictorial type Type as pictures

Interface Aesthetics 03/16/09 Type as type Lettering developed from existing typefaces, consistently avoiding additional graphic elements and other interventions.

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

from Los Logos (Mischler,Interface Bourquin, Aesthetics & Klanten, 03/16/09 2002) from Understanding ComicsInterface (McCloud, Aesthetics 03/16/09 1994) Pictorial type Typograms in which additional graphic elements communicate content.

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

from Los Logos (Mischler,Interface Bourquin, Aesthetics & Klanten, 03/16/09 2002) Type as pictures Typograms that gain their signiﬁcance from the free approach to characters, the typography broken down to the point of illegibility.

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

from Los Logos (Mischler,Interface Bourquin, Aesthetics & Klanten, 03/16/09 2002) from Los Logos (Mischler,Interface Bourquin, Aesthetics & Klanten, 03/16/09 2002) from Los Logos (Mischler,Interface Bourquin, Aesthetics & Klanten, 03/16/09 2002) - Symbolic - Iconic Sign - Indexical

Pictographic and Typograms ideographic logos

Interface Aesthetics 03/16/09 INTERFACE AESTHETICS Assignment 5 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 signiﬁed. 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 03/16/09