Interface Aesthetics 03/16/09
Interface Aesthetics Week 8Signs, pictograms, and icons
Interface Aesthetics 03/16/09
- Semiotics- Building symbols- Pictograms- Icons- Logos
OUTLINE
Interface Aesthetics 03/16/09
Assignment 5INTERFACE AESTHETICS
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
Signifier
The representation of the object, which could be a word, a picture, or a sound.
Sense
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.
Interface Aesthetics 03/16/09
Signs- Symbolic - Iconic - Indexical[Charles Sanders Peirce, 1839-1914]
Interface Aesthetics 03/16/09
Symbolic signsCode or rule-following conventions required
SIGNS
Interface Aesthetics 03/16/09
Symbolic signsLanguage characters, numbers
SIGNS
Interface Aesthetics 03/16/09
Orb[Ambient Devices]
AMBIENT MEDIA
Interface Aesthetics 03/16/09
[Ambient Devices]
OrbAMBIENT MEDIA
Interface Aesthetics 03/16/09
Symbolic signsAbstract visual representations
SIGNS
Interface Aesthetics 03/16/09
Iconic signsAn intermediate degree of transparency to the signified object
SIGNS
Interface Aesthetics 03/16/09
Iconic signsDrawings and caricatures
SIGNS
Interface Aesthetics 03/16/09
Iconic signsMetaphors
SIGNS
[Jeremijenko , 1995]
Interface Aesthetics 03/16/09
Indexical signsDirectly connected to the signified.
SIGNS
16
Jason Courtney http://www.perdador.com/f6update/Oc3.html
Indexical signsNatural signs
Interface Aesthetics 03/16/09
Indexical signsSIGNS
Measuring instruments (scale, thermometer, clock)
18
Indexical signsCountdowns
Interface Aesthetics 03/16/09
Symbolic
Language characters, numbers, abstract mapping (e.g. colors of “orb”)
SIGNS
Iconic
Drawings, caricatures, metaphors
Indexical
Measuring instruments
Interface Aesthetics 03/16/09
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)
Interface Aesthetics 03/16/09
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.
4
Interface Aesthetics 03/16/09
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.
4
Interface Aesthetics 03/16/09
Signs and the surroundingsSIGNS
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
National Museum of Emerging Science and InnovationTokyo Japan
Interface Aesthetics 03/16/09
PragmaticsSIGNS
The manner in which the receiver interprets the sign.
Interface Aesthetics 03/16/09
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)
Interface Aesthetics 03/16/09
Building signsSIGNS
Interface Aesthetics 03/16/09
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.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
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.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
The Visual BalanceA vertical bar looks longer than a horizontal bar.A diagonal bar should appear shorter than a vertical or horizontal bars.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
Line EndingsUsing open forms means that there are more line endings. The endings could be rounded or squared off.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
CornersBoth inner and outer corners may be either rounded or squared off.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
StylesThe designs could be faded, sketched, blurred or fragmented. Creates a big visual impact.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
StructureShapes could be empty, fully or partially filled.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
Line thicknessThinner lines may not have enough visibility.Thick lines could overwhelm the negative space and affects recognizability.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
1996 Atlanta
1988 Seoul
1976 Munich
1992 Barcelona
2000 Sydney
Interface Aesthetics 03/16/09
Visualizing prohibitionTraffic signs have made us associate round and red with prohibition, even without crossing through the motif of the pictogram.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
Crossing outMethod of visualizing a ban.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
Red, round, and crossed outA prohibitive sign with an additional line has a heavier and more urgent impact.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
ProhibitionDiagonal lines are best suited to indicate prohibition. Horizontal and vertical lines could suggest a division.
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
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.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
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.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
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.
from Pictograms, Icons & Signs (Abdullah & Hübner, 2006)
Interface Aesthetics 03/16/09
ExamplesSIGNS
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
Deutsche Bahn AGA 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 ServicesA pictogram system created by Meta Design Berlin in 1993. Introduced a five-color system and consistent directional representations.
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
Düsseldorf AirportAn extended pictogram system created by Meta Design Berlin.
Interface Aesthetics 03/16/09
Swiss PostA system designed by Designalltag Zurich.
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
Cologne/Bonn AirportDesigned 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
Pacific Bell - Yellow PagesVisual 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 DisposalDesigned by Designalltag Zurich
Interface Aesthetics 03/16/09
Sto AGA 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 BerlinDesigned 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
Illustrative diagramsSIGNS APPLIED
Interface Aesthetics 03/16/09by Aizawa et al (2004)
Interface Aesthetics 03/16/09by Aizawa et al (2004)
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
Amplification through simplification
SIGNS
[McCloud, 1994]
Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)
Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)
Interface Aesthetics 03/16/09
LinesSIGNS
Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)
Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)
Interface Aesthetics 03/16/09
Wolfgang Köhler (1929) figure from Ramachandran, V.S. & Hubbard, E.M. (2001)
Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)
Interface Aesthetics 03/16/09
Interface Aesthetics 03/16/09
IconsSIGNS
Interface Aesthetics 03/16/09
Sign
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
Interface Aesthetics 03/16/09
IconsSIGNS
The free spirits of the sign world. Greater freedom of design.
Interface Aesthetics 03/16/09
Pictogram Icon
Interface Aesthetics 03/16/09
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
Interface Aesthetics 03/16/09
LogosSIGNS
Interface Aesthetics 03/16/09
Sign
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
Pictographic and ideographic logos
Typograms
Interface Aesthetics 03/16/09
LogosSIGNS
PictographicIdeographic
Interface Aesthetics 03/16/09
Pictographic logosSigns as pictograms which pinpoint an idea or message, in a graphically reduced form.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09
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.”
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09
TypogramsSIGNS
Type as typePictorial typeType as pictures
Interface Aesthetics 03/16/09
Type as typeLettering developed from existing typefaces, consistently avoiding additional graphic elements and other interventions.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09
Type as type
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09from Understanding Comics (McCloud, 1994)
Interface Aesthetics 03/16/09
Pictorial typeTypograms in which additional graphic elements communicate content.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09
Pictorial type
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09
Type as picturesTypograms that gain their significance from the free approach to characters, the typography broken down to the point of illegibility.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09
Type as pictures
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Interface Aesthetics 03/16/09
Sign
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
Pictographic and ideographic logos
Typograms
Interface Aesthetics 03/16/09
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.