Præsentation 5: Layout – Design til output-medier BRGA Præsentation 5: Layout – Design til output-medier

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øsligt Grafik/Flash Acceptabel performance Skal køre på flest mulige computere 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 Dette er vigtigst Dette er indhold der er knapt så vigtigt næste

Dette ligger vi altid først mærke til på en side Grafik Levende billeder og animationer Farvefotos Sort/hvid fotos og illustrationer Fremhævet skrift Overskriften (med visse undtagelser dog) Fremhævede citater, indledninger og indskudte afsnit Billedetekster Vi ser efter tekst til de spændende billeder ; ) 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ætning Lø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 Løs bagkant Anvendes altid ved smalle spalter så du får ensartede mellemrum mellem ordene. Det forstyrrer læsningen mindst muligt. Der kan anvendes orddeling. Centreret Centrere sig rundt om midter akse. Bør kun bruges til f.eks. citatater Figursats Kaldes det når en tekst “smyger” sig rundt om en figur. Dette kan bruges til at skabe nogle spændende effekter. Systemskrifter Nogle 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 Fast bagkant Opnå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

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: Skriftstørrelse: Linielængde: Linieafstand: 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: Brug af farver: 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 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 Brug naturlige 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”