Tips til design

Typografi

En linie der skal læses på skærmen, må højest være 60-70 tegn lang. Længere linjer er generende at læse.

Typografi

Formkontraster

Gruppen med formkontraster indeholder 3 kontrast former

  • Størrelseskontrast
  • Formkontrast
  • Placeringskontrast

Størrelseskontrast

Størrelseskontrasten handler om elementers størrelsesforskelle. Det er en af lette kontraster at både bruge og forstå. Store elementer er vigtige. Små elementer er mindre vigtige.

Størrelseskonstrasten er god til at skabe et hierarki på siden. Bruges ofte i typografien. Store overskrifter og lille brødtekst.

I grafisk design kan meget store overskrifter give et flot udtryk. Ofte må vi på vores websider gå på kompromis. Skærmene er for små til de informationer, vi gerne vil give til brugerne. De helt store overskrifter har deres berettigelse, hvis man formidle livstil eller et eksklusivt image. Overdrevne størrelseskontraster og masser af tom luft på siden, kan give associationer om luksus, høj klasse og eksklusivitet.

Størrelseskontrast. Apple

Apple 6-10-2007

Størrelseskontrast. Her er der ingen tvivl om, hvad der er vigtigt.

Apples hjemmeside er holdt i neutrale farver, krydret med produktfotos i klare farver. Det skaber nogle stærke sort/hvid-farve kontraster og komplementær kontrast mellem den røde og grønne ipod.

Desuden er der en kraftig styrkekontrast mellem den helt hvide side, og de meget mørke billeder i bunden.

De mange og kraftige kontraster og er med til at give et dynamisk udtryk.

Formkontrast

Formkontrast er den kontrast der opstår, når elementer i designet har forskellig form. Firkantede mod runde. Geometriske kontra organiske.

F.eks. når man har både firkantede og fritlagte billeder i designet.

Det er også formkontrasten, når man bruger forskellige skrifttyper, i brødtekster og overskrifter.

Formkontrast. Flügger

Flügger 5-10-2008

Formkontrast ses mellem de firkantede bokse i venstre side, og de to fritlagte personer i banneret og danmarkskortet i højre side.

I modsætning til Apples side er styrkekontrasten mere afdæmpet her. Grå tekst og grå bokse i forskellige styker af grå. Og indtrykket af Flüggers side er noget roligere end Apples. Målgruppen er tydeligvis ældre end Apples.

Placeringskontrast

Placeringskontrast er kontrasten man opnår ved at placere sine elementer forskellige steder.

F.eks. ved at placere de vigtigste elementer i toppen. Eller man kan skabe fokus eller variation ved at centrere nogle elementer og holde stram venstre kant på andre.

Placeringskontrast. Dr Martens

Dr Martens 6-10-2007

Mange eksempler på placeringskontrast hos Dr. Martens. Box med logo er placeret øverst til venstre, og i konstrast hertil er en box med slogan placeret i bunden.

En anden placeringskontrast er modellen der vender på hovedet i det øverste højere hjørne. En tredie er bogstaver der hæver sig over linierne i menuerne.

Derudover er der en mængde andre kontraster. Sort/hvid-farve kontrast mellem baggrund og figurer. Formkontrast mellem fritlagte figurer og bokse. Kontraster i typografien mellem forskellige fonte og håndskrift.

Hjemmesiden signalerer ungdom og trendyness. Både på grund af den grafiske stil med masse sampling og rustikke fotos og grafikker, men også på grund af den ubredte brug af kontraster. Kontrasterne tilføjer en mængde dynamik her.

Ulempen kan være at de mange kraftige kontraster gr det svært at finde et visuelt hierarki. Der er megen uro, og mange elementer der slås om opmærksomheden.

Formkontraster. Grafisk oversigt

Størrelseskontrast

Størrelseskontrast.

Forskellige størrelser giver størrelseskontrast.

Formkontrast

Formkontrast.

Forskellige former skaber formkontrast.

Placeringskontrast

Placeringskontrast

Anderledes placering giver placeringskontrast.

Farvekontraster. Grafisk oversigt

Komplementær kontrast
Komplementær kontrast.

Farver der ligger overfor hinanden på farvecirklen er komplementære. De konkrete farver afhænger af den anvendte Farveteori. Her har jeg valgt at illustrere med blå gul kontrast.

Varme-kulde kontrast
Varme-kulde kontrast.

Der er tilføjet lidt rødt til den gule for at gøre den endnu varmere, og forstærke varme-kulde kontrasten.

Styrkekontrast
Styrkekontrast

Den gule er lysnet, og den blå mørknet for at få større styrkekontrast

Mæthedskontrast
Mæthedskontrast

Den gule er gjort helt ren, mens den blå er gjort mere grå. Mæthedskontrasten er øget.

Sort/hvid-farve kontrast
Sort/hvid-farve kontrast

Alt farve er fjernet fra den blå, og der er nu sort/hvid-farve kontast.