BRGA

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

2. 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

3. Fancy design/ højopløsligt Grafik/Flash Skal køre på flest mulige computere Acceptabel performance 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? Du får kun 2 …

4. Typografi • Vi skal se på: • Sådan læser vi (i den vestlige verden) • Terminologi • Opsætning • De tre typer: • Displaytypografi • Læsetypografi • Konsultativtypografi

5. Herfra Hertil 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 Dette er vigtigst Dette er indhold der er knapt så vigtigt næste

6. 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

7. 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?

8. 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

9. 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. 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 Typografisk opsætning 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

10. 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 ikkesøges i teksten (grafik!)

11. 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

12. Displaytypografi • Formål: at fange opmærksomhed og være unik • Den skal huskes! • Æstetiske krav til form og originalitet vægtes højt

13. 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

14. 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

15. 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?

16. 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

17. Illustrationer • Typer • Anvendelse • Funktion • Ikon, indeks, symbol

18. 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

19. 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!

20. 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”

21. 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)

22. 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

23. 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)

24. 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

25. 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.

26. 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”