Upload
mosylom
View
217
Download
0
Embed Size (px)
Citation preview
8/12/2019 Week8 Signs Interface Aesthetics
1/117
Interface Aesthetics 03/16/09
Interface Aesthetics Week 8
Signs, pictograms, and icons
8/12/2019 Week8 Signs Interface Aesthetics
2/117
Interface Aesthetics 03/16/09
- Semiotics
- Building symbols- Pictograms- Icons
- Logos
OUTLINE
8/12/2019 Week8 Signs Interface Aesthetics
3/117
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
8/12/2019 Week8 Signs Interface Aesthetics
4/117
Interface Aesthetics 03/16/09
Semiotics:
The study of signs
8/12/2019 Week8 Signs Interface Aesthetics
5/117
Interface Aesthetics 03/16/09
SIGNS
Signier
The representation ofthe object, whichcould be a word, apicture, or a sound.
Sense
The understandingthat an observer getsfrom seeing orexperiencing either
the signied or itssignier.
Signied
The physical thing oridea that the signstands for.
Warm, hot, burn,
bright,
dangerous, etc.
8/12/2019 Week8 Signs Interface Aesthetics
6/117
Interface Aesthetics 03/16/09
Signs
- Symbolic- Iconic- Indexical[Charles Sanders Peirce, 1839-1914]
8/12/2019 Week8 Signs Interface Aesthetics
7/117Interface Aesthetics 03/16/09
Symbolic signs
Code or rule-followingconventions required
SIGNS
8/12/2019 Week8 Signs Interface Aesthetics
8/117Interface Aesthetics 03/16/09
Symbolic signs
Language characters,numbers
SIGNS
8/12/2019 Week8 Signs Interface Aesthetics
9/117
Interface Aesthetics 03/16/09
Orb[Ambient Devices]
AMBIENT MEDIA
8/12/2019 Week8 Signs Interface Aesthetics
10/117
Interface Aesthetics 03/16/09
[Ambient Devices]
OrbAMBIENT MEDIA
8/12/2019 Week8 Signs Interface Aesthetics
11/117
Interface Aesthetics 03/16/09
Symbolic signs
Abstract visual representations
SIGNS
8/12/2019 Week8 Signs Interface Aesthetics
12/117
Interface Aesthetics 03/16/09
Iconic signs
An intermediate degree oftransparency to the signifiedobject
SIGNS
8/12/2019 Week8 Signs Interface Aesthetics
13/117
Interface Aesthetics 03/16/09
Iconic signs
Drawings and caricatures
SIGNS
8/12/2019 Week8 Signs Interface Aesthetics
14/117
Interface Aesthetics 03/16/09
Iconic signs
Metaphors
SIGNS
[Jeremijenko , 1995]
8/12/2019 Week8 Signs Interface Aesthetics
15/117
Interface Aesthetics 03/16/09
Indexical signs
Directly connected to thesignified.
SIGNS
8/12/2019 Week8 Signs Interface Aesthetics
16/117
16
Jason Courtney http://www.perdador.com/f6update/Oc3.html
Indexical signs
Natural signs
8/12/2019 Week8 Signs Interface Aesthetics
17/117
Interface Aesthetics 03/16/09
Indexical signsSIGNS
Measuring instruments (scale,thermometer, clock)
8/12/2019 Week8 Signs Interface Aesthetics
18/117
18
Indexical signs
Countdowns
8/12/2019 Week8 Signs Interface Aesthetics
19/117
Interface Aesthetics 03/16/09
Symbolic
Languagecharacters,numbers,abstractmapping(e.g. colorsof orb)
SIGNS
Iconic
Drawings,caricatures,metaphors
Indexical
Measuringinstruments
8/12/2019 Week8 Signs Interface Aesthetics
20/117
Interface Aesthetics 03/16/09
Signs in context of useSIGNS
to represent cold weather == Indexical
to represent snow ake == Iconic
to represent Ski Club == Symbolic
8/12/2019 Week8 Signs Interface Aesthetics
21/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
22/117
Interface Aesthetics 03/16/09
IconogramIllustrative representation withcommon points between thesignier and the signied.
PictogramPictorial representation.Represent complex factsthrough visual carriers ofmeaning.
CartogramA topological representationwith complex functions (e.g.statistics) and iconic facts.
DiagramFunctional representation.A more functional carrier.
IdeogramRepresentation of a concept.Independent of any formalidentication.
LogogramA visual, referential linguisticsign that does not take thephonetic dimension intoconsideration.
TypogramTypographical representation.A sign derived from a writtenrepertoire.
PhonogramPhonic representation. A signsignies sounds.
4
8/12/2019 Week8 Signs Interface Aesthetics
23/117
Interface Aesthetics 03/16/09
IconogramIllustrative representation withcommon points between thesignier and the signied.
PictogramPictorial representation.Represent complex factsthrough visual carriers ofmeaning.
CartogramA topological representationwith complex functions (e.g.statistics) and iconic facts.
DiagramFunctional representation.A more functional carrier.
IdeogramRepresentation of a concept.Independent of any formalidentication.
LogogramA visual, referential linguisticsign that does not take thephonetic dimension intoconsideration.
TypogramTypographical representation.A sign derived from a writtenrepertoire.
PhonogramPhonic representation. A signsignies sounds.
4
8/12/2019 Week8 Signs Interface Aesthetics
24/117
Interface Aesthetics 03/16/09
Signs and the surroundingsSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
25/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
26/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
27/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
28/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
29/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
30/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
31/117
Interface Aesthetics 03/16/09
National Museum of EmergingScience and InnovationTokyo Japan
8/12/2019 Week8 Signs Interface Aesthetics
32/117
Interface Aesthetics 03/16/09
PragmaticsSIGNS
The manner in which thereceiver interprets the sign.
8/12/2019 Week8 Signs Interface Aesthetics
33/117
Interface Aesthetics 03/16/09
Indicative
A person may smoke here, buthe does not have to smoke.Up to the receiver what hedoes with information.
Imperative
The intention is to inuencethe receivers behavior.Smoking is prohibited even ifthe receiver feels like smoking.
Suggestive
Represents an appeal to stopsmoking for reasons of health,regardless of time and place.
The Intention
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
34/117
Interface Aesthetics 03/16/09
Building signsSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
35/117
Interface Aesthetics 03/16/09
The BearerThe bearer is whatever holdsthe pictogram.
The landscape formatreinforces the direction inwhich the symbol is going.The circular lamp reinforcesthe indicative message.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
36/117
Interface Aesthetics 03/16/09
The FormatA free standing pictogram onlyneeds a protective area toseparate it from surroundingelements. A pictogram with abackground also needs aninner protective area.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
37/117
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 orhorizontal bars.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
38/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
39/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
40/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
41/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
42/117
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 & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
43/117
Interface Aesthetics 03/16/09
CornersBoth inner and outer corners may be either roundedor squared off.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
44/117
Interface Aesthetics 03/16/09
StylesThe designs could be faded, sketched, blurred or fragmented.Creates a big visual impact.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
45/117
Interface Aesthetics 03/16/09
StructureShapes could be empty, fully or partially lled.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
46/117
Interface Aesthetics 03/16/09
Line thicknessThinner lines may not have enough visibility.Thick lines could overwhelm the negative space and affectsrecognizability.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
47/117
Interface Aesthetics 03/16/09
1996 Atlanta
8/12/2019 Week8 Signs Interface Aesthetics
48/117
Interface Aesthetics 03/16/09
1996 Atlanta
1988 Seoul
1976 Munich
1992 Barcelona
2000 Sydney
8/12/2019 Week8 Signs Interface Aesthetics
49/117
Interface Aesthetics 03/16/09
Visualizing prohibitionTrafc signs have made us associate round and red with prohibition,even without crossing through the motif of the pictogram.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
50/117
Interface Aesthetics 03/16/09
Crossing outMethod of visualizing a ban.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
51/117
Interface Aesthetics 03/16/09
Red, round, and crossed outA prohibitive sign with an additional line has a heavier and moreurgent impact.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
52/117
Interface Aesthetics 03/16/09
ProhibitionDiagonal lines are best suited to indicate prohibition.Horizontal and vertical lines could suggest a division.
8/12/2019 Week8 Signs Interface Aesthetics
53/117
Interface Aesthetics 03/16/09from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
54/117
Interface Aesthetics 03/16/09
Mirror image of the motifCrossing out a pictorial motif can reduce the ability for peopleto recognize the sign. Recognition could be restored throughmirroring image.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
55/117
Interface Aesthetics 03/16/09
Visualization of the diagonalProvided that the prohibition is clear, a thinner diagonal canenhance the motif. A transparent diagonal can help to make themotif stand out.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
56/117
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 lostor be misunderstood.
from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
SIGNS
8/12/2019 Week8 Signs Interface Aesthetics
57/117
Interface Aesthetics 03/16/09
Examples
8/12/2019 Week8 Signs Interface Aesthetics
58/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
59/117
Interface Aesthetics 03/16/09
Deutsche Bahn AGA system for German railway company.The thin white line around the outsidehelp the sign to stand out against thesurrounding.
8/12/2019 Week8 Signs Interface Aesthetics
60/117
Interface Aesthetics 03/16/09
Berlin Transport ServicesA pictogram system created by Meta DesignBerlin in 1993. Introduced a ve-color systemand consistent directional representations.
8/12/2019 Week8 Signs Interface Aesthetics
61/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
62/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
63/117
Interface Aesthetics 03/16/09
Dsseldorf AirportAn extended pictogram system createdby Meta Design Berlin.
8/12/2019 Week8 Signs Interface Aesthetics
64/117
Interface Aesthetics 03/16/09
Swiss PostA system designed by Designalltag Zurich.
8/12/2019 Week8 Signs Interface Aesthetics
65/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
66/117
Interface Aesthetics 03/16/09
Cologne/Bonn AirportDesigned by Integral, Paris. Both signs and typeincorporated the same structures and basic forms.
8/12/2019 Week8 Signs Interface Aesthetics
67/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
68/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
69/117
Interface Aesthetics 03/16/09
Pacic Bell - Yellow PagesVisual guidelines by Michael Renner andJoachim Mller-Lanc, to illustrate the differentthemes of Yellow Pages.
8/12/2019 Week8 Signs Interface Aesthetics
70/117
Interface Aesthetics 03/16/09
Z i h W t Di l
8/12/2019 Week8 Signs Interface Aesthetics
71/117
Interface Aesthetics 03/16/09
Zurich Waste DisposalDesigned by Designalltag Zurich
Sto AG
8/12/2019 Week8 Signs Interface Aesthetics
72/117
Interface Aesthetics 03/16/09
Sto AGA product label system designed by MetaDesign for Sto AG, a major manufacturer ofbuilding materials and paint.Reduced multilingual instructions.
8/12/2019 Week8 Signs Interface Aesthetics
73/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
74/117
Interface Aesthetics 03/16/09
Natural History Museum
BerlinDesigned by Mohn Design, Berlin. A dynamicmovement that varies according to the distanceat which one is standing.
8/12/2019 Week8 Signs Interface Aesthetics
75/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
76/117
Interface Aesthetics 03/16/09
Ill t ti diSIGNS APPLIED
8/12/2019 Week8 Signs Interface Aesthetics
77/117
Interface Aesthetics 03/16/09
Illustrative diagrams
8/12/2019 Week8 Signs Interface Aesthetics
78/117
Interface Aesthetics 03/16/09by Aizawa et al (2004)
8/12/2019 Week8 Signs Interface Aesthetics
79/117
Interface Aesthetics 03/16/09by Aizawa et al (2004)
8/12/2019 Week8 Signs Interface Aesthetics
80/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
81/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
82/117
Interface Aesthetics 03/16/09
A lifi tiSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
83/117
Interface Aesthetics 03/16/09
Amplification
through simplification[McCloud, 1994]
8/12/2019 Week8 Signs Interface Aesthetics
84/117
Interface Aesthetics 03/16/09from Understanding Comics(McCloud, 1994)
8/12/2019 Week8 Signs Interface Aesthetics
85/117
Interface Aesthetics 03/16/09from Understanding Comics(McCloud, 1994)
8/12/2019 Week8 Signs Interface Aesthetics
86/117
Interface Aesthetics 03/16/09
8/12/2019 Week8 Signs Interface Aesthetics
87/117
Interface Aesthetics 03/16/09from Understanding Comics(McCloud, 1994)
LinesSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
88/117
Interface Aesthetics 03/16/09
Lines
8/12/2019 Week8 Signs Interface Aesthetics
89/117
Interface Aesthetics 03/16/09from Understanding Comics(McCloud, 1994)
8/12/2019 Week8 Signs Interface Aesthetics
90/117
Interface Aesthetics 03/16/09from Understanding Comics(McCloud, 1994)
8/12/2019 Week8 Signs Interface Aesthetics
91/117
Interface Aesthetics 03/16/09
Wolfgang Khler (1929)
gure from Ramachandran, V.S. & Hubbard, E.M. (2001)
http://en.wikipedia.org/wiki/Wolfgang_K%C3%B6hlerhttp://en.wikipedia.org/wiki/Wolfgang_K%C3%B6hler8/12/2019 Week8 Signs Interface Aesthetics
92/117
8/12/2019 Week8 Signs Interface Aesthetics
93/117
Interface Aesthetics 03/16/09
IconsSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
94/117
Interface Aesthetics 03/16/09
Icons
Sign- Symbolic- Iconic
8/12/2019 Week8 Signs Interface Aesthetics
95/117
Interface Aesthetics 03/16/09
Sign
IconsIconographic representations.Represent any kind of objector action, most often incomputer context (folder,tools, moods).
PictogramsPictorial representations.Represent complex factsthrough visual carriers ofmeaning.
LogosA graphical element(a set of symbols andtypeface) for forminga trademark or brand.
Iconic- Indexical
IconsSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
96/117
Interface Aesthetics 03/16/09
IconsThe free spirits of the signworld. Greater freedom ofdesign.
8/12/2019 Week8 Signs Interface Aesthetics
97/117
Interface Aesthetics 03/16/09
Pictogram Icon
8/12/2019 Week8 Signs Interface Aesthetics
98/117
Interface Aesthetics 03/16/09
Pictogram Icon
8/12/2019 Week8 Signs Interface Aesthetics
99/117
Interface Aesthetics 03/16/09
by Susan Kare (1980s)from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
8/12/2019 Week8 Signs Interface Aesthetics
100/117
Interface Aesthetics 03/16/09
by Meta Design, San Franciscofrom Pictograms, Icons & Signs(Abdullah & Hbner, 2006)
128 48 32 16
LogosSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
101/117
Interface Aesthetics 03/16/09
Logos
8/12/2019 Week8 Signs Interface Aesthetics
102/117
LogosSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
103/117
Interface Aesthetics 03/16/09
LogosPictographicIdeographic
Pictographic logos
8/12/2019 Week8 Signs Interface Aesthetics
104/117
Interface Aesthetics 03/16/09
Pictographic logosSigns as pictograms which pinpoint an ideaor message, in a graphically reduced form.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Ideographic logos
8/12/2019 Week8 Signs Interface Aesthetics
105/117
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 aglance, but requires a certain willingness to read.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
TypogramsSIGNS
8/12/2019 Week8 Signs Interface Aesthetics
106/117
Interface Aesthetics 03/16/09
TypogramsType as typePictorial typeType as pictures
Type as type
8/12/2019 Week8 Signs Interface Aesthetics
107/117
Interface Aesthetics 03/16/09
Lettering developed from existing typefaces, consistentlyavoiding additional graphic elements and other interventions.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Type as type
8/12/2019 Week8 Signs Interface Aesthetics
108/117
Interface Aesthetics 03/16/09from Los Logos (Mischler, Bourquin, & Klanten, 2002)
8/12/2019 Week8 Signs Interface Aesthetics
109/117
Interface Aesthetics 03/16/09from Understanding Comics(McCloud, 1994)
Pictorial type
8/12/2019 Week8 Signs Interface Aesthetics
110/117
Interface Aesthetics 03/16/09
Pictorial typeTypograms in which additional graphic elementscommunicate content.
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Pictorial type
8/12/2019 Week8 Signs Interface Aesthetics
111/117
Interface Aesthetics 03/16/09
Pictorial type
from Los Logos (Mischler, Bourquin, & Klanten, 2002)
8/12/2019 Week8 Signs Interface Aesthetics
112/117
Type as pictures
8/12/2019 Week8 Signs Interface Aesthetics
113/117
Interface Aesthetics 03/16/09from Los Logos (Mischler, Bourquin, & Klanten, 2002)
8/12/2019 Week8 Signs Interface Aesthetics
114/117
Interface Aesthetics 03/16/09from Los Logos (Mischler, Bourquin, & Klanten, 2002)
8/12/2019 Week8 Signs Interface Aesthetics
115/117
Interface Aesthetics 03/16/09from Los Logos (Mischler, Bourquin, & Klanten, 2002)
Sign- Symbolic- Iconic- Indexical
8/12/2019 Week8 Signs Interface Aesthetics
116/117
Interface Aesthetics 03/16/09
IconsIconographic representations.Represent any kind of objector action, most often incomputer context (folder,tools, moods).
PictogramsPictorial representations.Represent complex factsthrough visual carriers ofmeaning.
LogosA graphical element(a set of symbols andtypeface) for forminga trademark or brand.
Pictographic andideographic logos
Typograms
Assignment 5INTERFACE AESTHETICS
8/12/2019 Week8 Signs Interface Aesthetics
117/117
Assignment 5Design 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.) anddescribe 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 theworkshops on March 30th.