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


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.


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


Symbolic signsCode or rule-following conventions required

SIGNS


Symbolic signsLanguage characters, numbers

SIGNS


Orb[Ambient Devices]

AMBIENT MEDIA


[Ambient Devices]

OrbAMBIENT MEDIA


Symbolic signsAbstract visual representations

SIGNS


Iconic signsAn intermediate degree of transparency to the signified object

SIGNS


Iconic signsDrawings and caricatures

SIGNS


Iconic signsMetaphors

SIGNS

[Jeremijenko , 1995]


Indexical signsDirectly connected to the signified.

SIGNS

16

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

Indexical signsNatural signs


Indexical signsSIGNS

Measuring instruments (scale, thermometer, clock)

18

Indexical signsCountdowns


Symbolic

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

SIGNS

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.

4


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


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)

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





Amplification through simplification

SIGNS

[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)

http://en.wikipedia.org/wiki/Wolfgang_K%C3%B6hler

http://en.wikipedia.org/wiki/Wolfgang_K%C3%B6hler




IconsSIGNS


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


IconsSIGNS

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


Pictogram Icon


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


Sign





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)

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


Sign





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.

Documents

Interface Aesthetics Week 8 Signs, pictograms, and icons