Week8 Signs Interface Aesthetics

8/12/2019 Week8 Signs Interface Aesthetics

1/117

Interface Aesthetics 03/16/09

Interface Aesthetics Week 8

Signs, pictograms, and icons


2/117


- Semiotics

- Building symbols- Pictograms- Icons

- Logos

OUTLINE


3/117


Assignment 5INTERFACE AESTHETICS

Design a new pictogram/logo/icon for:

I School, or

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

Your own project


4/117


Semiotics:

The study of signs


5/117


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.


6/117


Signs

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


7/117Interface Aesthetics 03/16/09

Symbolic signs

Code or rule-followingconventions required

SIGNS


8/117Interface Aesthetics 03/16/09

Symbolic signs

Language characters,numbers

SIGNS


9/117


Orb[Ambient Devices]

AMBIENT MEDIA


10/117


[Ambient Devices]

OrbAMBIENT MEDIA


11/117


Symbolic signs

Abstract visual representations

SIGNS


12/117


Iconic signs

An intermediate degree oftransparency to the signifiedobject

SIGNS


13/117


Iconic signs

Drawings and caricatures

SIGNS


14/117


Iconic signs

Metaphors

SIGNS

[Jeremijenko , 1995]


15/117


Indexical signs

Directly connected to thesignified.

SIGNS


16/117

16

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

Indexical signs

Natural signs


17/117


Indexical signsSIGNS

Measuring instruments (scale,thermometer, clock)


18/117

18

Indexical signs

Countdowns


19/117


Symbolic

Languagecharacters,numbers,abstractmapping(e.g. colorsof orb)

SIGNS

Iconic

Drawings,caricatures,metaphors

Indexical

Measuringinstruments


20/117


Signs in context of useSIGNS

to represent cold weather == Indexical

to represent snow ake == Iconic

to represent Ski Club == Symbolic


21/117

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


22/117


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


23/117


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


24/117


Signs and the surroundingsSIGNS


25/117



26/117



27/117



28/117



29/117



30/117



31/117


National Museum of EmergingScience and InnovationTokyo Japan


32/117


PragmaticsSIGNS

The manner in which thereceiver interprets the sign.


33/117


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)


34/117


Building signsSIGNS


35/117


The BearerThe bearer is whatever holdsthe pictogram.

The landscape formatreinforces the direction inwhich the symbol is going.The circular lamp reinforcesthe indicative message.



36/117


The FormatA free standing pictogram onlyneeds a protective area toseparate it from surroundingelements. A pictogram with abackground also needs aninner protective area.



37/117


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



38/117



39/117



40/117



41/117



42/117


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



43/117


CornersBoth inner and outer corners may be either roundedor squared off.



44/117


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



45/117


StructureShapes could be empty, fully or partially lled.



46/117


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



47/117


1996 Atlanta


48/117


1996 Atlanta

1988 Seoul

1976 Munich

1992 Barcelona

2000 Sydney


49/117


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



50/117


Crossing outMethod of visualizing a ban.



51/117


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



52/117


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


53/117



54/117


Mirror image of the motifCrossing out a pictorial motif can reduce the ability for peopleto recognize the sign. Recognition could be restored throughmirroring image.



55/117


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.



56/117


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.


SIGNS


57/117


Examples


58/117



59/117


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


60/117


Berlin Transport ServicesA pictogram system created by Meta DesignBerlin in 1993. Introduced a ve-color systemand consistent directional representations.


61/117



62/117



63/117


Dsseldorf AirportAn extended pictogram system createdby Meta Design Berlin.


64/117


Swiss PostA system designed by Designalltag Zurich.


65/117



66/117


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


67/117



68/117



69/117


Pacic Bell - Yellow PagesVisual guidelines by Michael Renner andJoachim Mller-Lanc, to illustrate the differentthemes of Yellow Pages.


70/117


Z i h W t Di l


71/117


Zurich Waste DisposalDesigned by Designalltag Zurich

Sto AG


72/117


Sto AGA product label system designed by MetaDesign for Sto AG, a major manufacturer ofbuilding materials and paint.Reduced multilingual instructions.


73/117



74/117


Natural History Museum

BerlinDesigned by Mohn Design, Berlin. A dynamicmovement that varies according to the distanceat which one is standing.


75/117



76/117


Ill t ti diSIGNS APPLIED


77/117


Illustrative diagrams


78/117

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


79/117

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


80/117



81/117



82/117


A lifi tiSIGNS


83/117


Amplification

through simplification[McCloud, 1994]


84/117

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


85/117



86/117



87/117


LinesSIGNS


88/117


Lines


89/117



90/117



91/117


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%B6hler


92/117


93/117


IconsSIGNS


94/117


Icons

Sign- Symbolic- Iconic


95/117


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


96/117


IconsThe free spirits of the signworld. Greater freedom ofdesign.


97/117


Pictogram Icon


98/117


Pictogram Icon


99/117


by Susan Kare (1980s)from Pictograms, Icons & Signs(Abdullah & Hbner, 2006)


100/117


by Meta Design, San Franciscofrom Pictograms, Icons & Signs(Abdullah & Hbner, 2006)

128 48 32 16

LogosSIGNS


101/117


Logos


102/117

LogosSIGNS


103/117


LogosPictographicIdeographic

Pictographic logos


104/117


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

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

Ideographic logos


105/117


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.


TypogramsSIGNS


106/117


TypogramsType as typePictorial typeType as pictures

Type as type


107/117


Lettering developed from existing typefaces, consistentlyavoiding additional graphic elements and other interventions.


Type as type


108/117

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


109/117


Pictorial type


110/117


Pictorial typeTypograms in which additional graphic elementscommunicate content.


Pictorial type


111/117


Pictorial type



112/117

Type as pictures


113/117



114/117



115/117


Sign- Symbolic- Iconic- Indexical


116/117


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


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.

Week8 Signs Interface Aesthetics

Documents

Transcript of Week8 Signs Interface Aesthetics