BRGA

BRGA

Præsentation 5:

Layout – Design til output-medier

Ingeniørhøjskolen i ÅrhusSlide 2 af 26

Indhold i denne præsentation

• Design til skærmen (+ andre output-medier)– Typografi– Illustrationer– Farver– Komposition

• Fokus på design til PC skærm• Principper gælder dog generelt


De svære designvalg

• Alting er et spørgsmål om ”tradeoffs”

• Brug af de nyeste teknologier – Flash, fancy grafik koster performance og dermed brugere

• Typografi kan laves som ren grafik – eller som ren tekst – hvad tror I er hurtigst?

Fancy design/højopløsligtGrafik/Flash

Fancy design/højopløsligtGrafik/Flash

Acceptabelperformance

Acceptabelperformance

Skal køre påflest muligecomputere

Skal køre påflest muligecomputere

Du får kun 2 …


Typografi

• Vi skal se på:– Sådan læser vi (i den vestlige verden)– Terminologi– Opsætning– De tre typer:

• Displaytypografi• Læsetypografi• Konsultativtypografi


Sådan læser vi

• Vi læser (i den vestlige verden) altid – Fra øverst venstre– Til nederst højre

• Vi opfatter ting der ”står over andre ting” som mere væsentlige (mere om komposition senere) – heraf også ”overskrifter” som mest betydende

• Vi leder efter ”fortsættere” nederst på siden – og som regel i midten og til venstre

Herfra

Hertil

Herfra

Hertil

Dette er indholdder er knapt såvigtigt

Dette er indholdder er knapt såvigtigt

Dette er vigtigstDette er vigtigst

næstenæste


Dette ligger vi altid først mærke til på en side

1. Grafik

1. Levende billeder og animationer

2. Farvefotos

3. Sort/hvid fotos og illustrationer

2. Fremhævet skrift

1. Overskriften (med visse undtagelser dog)

2. Fremhævede citater, indledninger og indskudte afsnit

3. Billedetekster

1. Vi ser efter tekst til de spændende billeder ; )

4. Endeligt ser vi brødteksten (altså indhold)

Prøv at tænk over hvordan en avis er opbygget


Prøv det af

• Næste gang du sidder og surfer – så prøv det af

• Hvad ser man først på – hos f.eks. MTV?

• Hvorfor er det mon sådan?


Typografisk Terminologi

• MAJUSKLER ER STORE BOGSTAVER

• minuskler er små bogstaver

• Monospatierede Er skrifttyper hvor de enkelte bogstaver

har lige stor bredde f.eks. Courier New

• Proportionale Er skrifttyper hvor hvert tegn har sin egen bredde. Dette er den mest

harmoniske skrifttype at læse (mest læsevenlige) – f.eks. Arial


Typografisk opsætningLøs forkant

Kan være svært at læse, da starten på linierne hopper og

danser og øjet derfor ikke kan opfange dem

Bør kun anvendes sparsomt.Kan dog bruge når billedet skal stå til højre for teksten – og du ønsker at teksten er knyttet til

den

Fast bagkantOpnås når både forkant og bagkanten i teksten er lige. Det kaldes også for justeret skrift. Det må kun bruges til større spalter af tekst – aldrig i smalle

FigursatsKaldes det når en tekst “smyger” sig

rundt om en figur. Dette kan bruges til at skabe nogle spændende effekter.

SystemskrifterNogle skrifttyper anvendes af alle browsere. Hvis du vil være sikker på at din tekst præsenteres ens på alle systemer (browsere og OS’er) skal du anvende Systemskrifterne:-Times, Arial, Geneva, Helvetica, Chicago, Monaco, New York, Palatino

Løs bagkantAnvendes altid ved smalle spalter så du får ensartede mellemrum mellem ordene. Det forstyrrer læsningen mindst muligt. Der kan anvendes orddeling.

CentreretCentrere sig rundt om midter akse. Bør kun bruges til f.eks.

citatater


Tekniske muligheder

Vi diskuterede tidligere ”tradeoff” problemet.

På grund af skærmens ringe opløsning kan det være rart at kunne lave tekst som grafik – så står det akkurat som du måtte ønske det, og med den rette skrifttype. Der kan så samtidigt anvendes ”Antialisering” til at gøre teksten mere ”blød” i overgangen og letlæselig. Specielt ved små skrifttyper.

Ses hyppigt ved f.eks. HTML baserede klienttyper – da grafik kræver mere båndbredde! Samtidigt kan der ikke søges i teksten (grafik!)


De 3 forskellige typografier

• Afhængigt af hvad du skal anvende en typografi til (overskrift, indhold, figurtekst, linkknap osv.) inddeles typografier i 3 typer:– Displaytypografi– Læsetypografi– Konsultativtypografi


Displaytypografi

• Formål: at fange opmærksomhed og være unik

• Den skal huskes!

• Æstetiske krav til form og originalitet vægtes højt


Læsetypografi

• Formål: skal læses• Funktion: (som

læsevenlighed) over æstetik

• Typisk brødtekster

• Vigtige elementer:– Skriftype– Skriftsstørelse– Linielængde– Linieafstand– Også Afstand og Farver


Læsetypografi

• Skriftype:– Brug skrifttyper designet til skærmen (f.eks. Arial og de øvrige

Systemskrifter nævnt før)– Undgå

• kraftig eller fed skrift i store mængder• Kursiv skrift i store mængder (skrå streger gengives ringe)• MAJUSKLER i store mængder – forringer læsevenligheden

• Skriftstørrelse:– Undgå for små skriftstørrelser (igen tradeoff)

• Linielængde:– Del teksten op i spalter. Brug aldrig den fulde skærmbredde (ligesom i

aviser) ellers mistes orientering– Tommelfingerregel: højest 45 bogstaver, tegn og mellemrum pr. linie

• Linieafstand:– Skal altid være tilpasset liniernes længde og skriftens størrelse– Tommelfingerregel: mindst 3pt større linieafstand end skriftstørrelse


Afsnit og farver

• Afsnit:– Tekst i store mængder er uoverskueligt– Begræns mest muligt – eller opdel – f.eks. i flere afsnit– Brug f.eks. en ”Mellemrubrik” til at skabe lidt luft

• Brug af farver:– Vigtigt at kunne skelne tekst fra baggrund nemt

Hvad står der her?


Konsultativ typografi• Formål: at finde oplysninger• Funktion: aflæselighed og tydelighed prioriteres

– Lister• Bør aldrig indeholde mere end 3 niveauer – rækker: 7 +- 2 • Menneskets hjerne kan ikke følge med

– Skemaer• Det som står tættest sammen opfattes af læseren som

hørende sammen (gestalt lov)• Undgå tykke påtrængende rammer der stjæler opmærksomhed

– Adresser, hyperlinks, m.v.• Skal altid fremstå klart markeret i forhold til anden tekst• http://www.politikken.dk


Illustrationer

• Typer• Anvendelse• Funktion• Ikon, indeks, symbol


Typer af Illustrationer

• Abstrakt– Gengiver hvad der ikke kan ses med

det blotte øje (f.eks. Lyd)

• Genkendelig– opbygget af elementer vi genkender– (kontekst: cirkel = hjul, bold,

jordklode, danmarkskort)

• Naturalistisk– altid genkendelige– yderste konsekvens = fotos/film


3 primære funktioner:

• Illustrationen som:– Informationsbærer

• sjældent stor kunst• fortæller ofte om hvordan, hvor henne og hvor

meget (f.eks. Irak krisen – USAs opmarch)

– Opmærksomhedsskaber / blikfang• farver, kontrast, grov, kraftigt perspektiv osv.• bliver hurtigt kedelig at se på – læg noget

information i den!

– Metafor• bruges ofte til henvisninger, knapper osv.• sammen med tekst siger det noget ekstra

– KAN KOMBINERES!


Piktogrammer, Symboler og Metaforer

• Piktogrammer– Skal ikke tolkes!– Skal forstås som det er – eller i den sammenhæng

det er i.– Viser vi en sol bag en sky på en nyhedsside, så

tænker vi på ”Vejret”

• Symboler– Skal tolkes! – F.eks. Nikes logo– CD afspillerens symboler

• Metaforer– Er en mellemting mellem begge– Et hus kan f.eks. symboliserer ”tilbage til

hjemmesiden”


Ikoner

• Brug symboler og piktorgrammer til navigation i stedet for (eller som understøttelse af) en ren tekstuel beskrivelse af linkets funktion

• I denne sammenhæng kaldes alle typer under et for ”Ikoner”

• Et Ikon skal adskille sig fra resten af indholdet, således at det er tydeligt at der IKKE er tale om indhold, men om ”noget der symboliserer” noget andet (affordance)


Farver

• Tag hensyn til identiteten– Farven udstråler et budskab

• ”Netto gul” står for discount

• ”IBM blå” står for kvalitet

– Så kend dit formål– Hvad vil du opnå med

farverne?– tænk på målgruppen


Farver

• Pas på rene farver– Rene farver er meget voldsomme

• Brug naturlige farver– Farver fra naturen er velkendte for os– Syntetiske farver vækker opmærksomhed og kan bruges f.eks.

alarmer eller for at tiltrække opmærksomhed generelt– Brug lette pastel farver (eller hvid eller lysegrå) som

baggrundsfarver (Nielsen)– Brug aldrig mere end 5-7 forskellige farver (Nielsen)– 8 % af alle mænd er farveblinde – så sørg for redundante

informationer (en alarm skal IKKE kun være rød, men også med lyd + evt. anden form eller animation)


Designgrid/Modulnet/Layoytgrid

• Ved flere skærmbilleder• For at sikre grafisk konsistens

laves et overordnet ”Designgrid” også kaldet ”Modulnet” eller ”Layout grid” der sikrer en pæn og ensartet grafisk struktur imellem siderne

• Undgår hoppende og dansende sider

• Dette kan med fordel udarbejdes af en designer


Designgrid eksempel – TV2

Figurer: Dette er et eksempel på hvordan en designer har valgt at lave et ”Designgrid” – i dette tilfælde styret af ”usynlige” tabeller, samt DHTML til at ”tænde og slukke for lag” automatisk Det kunne også have været gjort vha. Frames. Bemærk, at det er ikke er strukturen, men farver og indhold, der ændres.


Kilder

• Design til skærmen– Kim Pedersen– Pernille Hansen– Forlaget: Grafisk Litteratur

• Kan varmt anbefales som opslagsværk + introduktion til de grundlæggende principper bag ”design til skærmen”

Documents

BRGA