6 veje til et endnu bedre webdesign

Posted By on 7 jan, 2011 | 0 comments


1. Brug flydende overgange med omhu
2. Tilføj negativ rum
3. Juster indhold i “gitter”
4. Lav god typografi
5. Brug en klar og effektiv navigation
6. Få en nyttig sidefod

Forskellen mellem det gode og det rigtig gode webdesign er relativ lille. Kan du se detaljerne, er du godt på vej til at løfte dit webdesign fra godt til rigtig godt. Men en gennemsnitsperson er ikke i stand til at forklare de konkrete forskelle, der afgør et flot design, men de kan som regel fortælle, hvad de kan lide og hvad de ikke kan lide.

Jeg vil prøve at sætte min finger på nogle detaljer, der virkelig gør forskel. Jeg vil blandt andet komme ind på, hvor vigtig en rolle principper som gentagelse, kontrast, negativ rum og samhørighed spiller i webdesign.

1. Brug flydende overgange med omhu

Der findes vel næppe en effekt, der kan slagte dit webdesign mere end dårlig brug af flydende overgange. Intet skriger “dårligt design” mere end en ubehersket regnbue-gradient. Når det er sagt, er et omhyggeligt brug af gradienter en god vej til at løfte dit webdesign. Det centrale er at bruge gradienter sparsomt.

Hvem forstår at bruge flydende overgange?
Et eksempel på god brug af gradient i typografi kan du finde på Shakiras website. Her er der brugt en diskret gradient i typografien og i silhouetten i baggrunden. Tjek også brugen af gradient- og blureffekter i fotografierne. Central Snowboards website er farverig, men har et yderst omhyggeligt gradientforløb, der problemfrit skifter retning omkring navigationen. Det er visuelt imponerende. Tag også et kig på Ziggy Sidewalks website. Forsiden har to “knapper” begge med vellykkede gradientforløb. De valgte farver i de flydende overgange i grafikkerne, som jo her fungerer som knapper, går igen i gradient-baggrunden på de underliggende sider.

flydende overgange i webdesign

Brug af gradient i webdesign

 

 

 

 

 

 

Brug af gradient i webdesign

 

 

 

 

 

 

 

Grunge-stilen i baggrundsbilledet synes jeg i øvrigt også rigtig godt om.

Er du mere opmærksom på gode gradient forløb nu? Eller ved du med dig selv, at du har set mindre heldige gradienter? Skriv gerne en kommentar til indlægget nedenfor, hvis du har bemærkninger.

Jeg vil nu springe videre til næste punkt, der handler om negativ rum.

2. Tilføj negativ rum

Udtrykket negativ rum betyder hvidt rum. Når vi taler webdesign, kan det mere præcist beskrives som afstanden mellem elementerne i en komposition. Mere specifikt er rummet mellem de store elementer i en komposition makro-mellemrum for eksempel marginstørrelser eller afstanden fra din navigation til indhold. Mikro-mellemrum er rummet mellem de mindre elementer for eksempel mellem listeelementer, afstanden mellem dine linjeskift, mellem en billedtekst og et billede.

Det bør ikke undervurderes, hvor vigtigt det er at lade elementerne ”ånde” eller stå frit i et webdesign. Dette er formentlig det største problem for knap så erfarne webdesignere. Det kan også være en del af menneskets natur at forsøge at proppe så meget som muligt ind i et lille område.

Hvad du skal være opmærksom på med margener
1. Sammenhæng
Hold dine margener ensartet i hele dit layout. Jo mere konsekvent afstanden er, jo mere organiseret og professionel vil dit website tage sig ud. Når du tænker på margener, er det både lodret og vandret adskillelse, som begge har en effekt på det overordnede design.

2. Ikke for meget margin
Gør ikke din margener for store. For meget adskillelse kan opdele dine elementer så meget, at websitet virker usammenhængende.

3. Ikke for lidt margin
Vær sikker på, at der er overhovedet er nogle margener! Det er sjusket at have tekst presset op mod et billede, en sidebar, en overskrift eller en navigation. Hold disse afstande og dine læsere vil navigere med dit indhold.

Hvem opfylder negativ rum?
Her er nogle eksempler på websites, der med succes bruger negativ rum til at kommunikere budskabet.

negativ rum i webdesign

negativ rum i webdesign

negativ rum i webdesign

negativ rum i webdesign

Peak Performance har en klar navigation, der adskiller sig fra det centrale foto. Peak har med sit negative rum opfyldt en særlig minimalistisk tilgang til informationerne og alle dele kan ånde. Afstanden mellem elementerne er velovervejet og billedet taler for sig selv. Det er ofte de websider med det klareste budskab og med en afsindig let tilgang til vigtige informationer.

Invita har også et vellykket negativ rum. Konsekvent brug af margener, alt efter indholdselementer, gennemstrømmer hele websitet. Det giver et behageligt overblik og intet forvirrer.

Musikhuset Aarhus bruger konsekvent pæne afstande mellem navigation, tekst og overskrifter. Der er dog en tendens til, at billederne får for meget margin under beskrivelsen af de enkelte arrangementer. Her virker teksten og det tilhørende billede usammenhængende.

Du bør nu have et par idéer til, hvordan man effektivt bruger margener, tekstseparation, og visuel adskillelse af billeder og overskrifter. Ellers er du velkommen til at kommentere i feltet nedenfor.

3. Juster indhold i “gitter”

Indhold, der “hviler” i kolonner og rækker, ses ofte på online aviser. Men kigger du nærmere efter, kan du ofte se regler om gitter-baseret webdesign på mange andre sider. Gitter eller grid er simpelt, let og et godt udgangspunkt for brugervenligt webdesign.

Et gitter behøver ikke at betyde kedeligt webdesign, det betyder bare, at du inden for disse rammer nemmere kan udfolde dig. Denne justering af dit indhold er en vigtig disciplin i at gøre dit website mere raffineret og brugervenligt.

Ingen nye elementer bør blive placeret uden formål eller tilpasning til det øvrige indhold. Sammenkæd elementerne så de indgår i en logisk struktur.

Hvem opfylder indhold i gitter?

Gridbaseret layout

Gridbaseret layout

Måden, som for eksempel ARoS og Surf og Ski præsenterer deres indlæg på, er let og simpel. Den nyeste post, eller vigtigste nyhed, er fremhævet i toppen, og de næste vises i henholdsvis 2-kolonne-gitter (Surf og Ski) og 3-kolonne-gitter (ARoS).

Gridbaseret layout fordeler indholdet logisk og let og er visuelt tiltalende i begge eksempler.

4. Lav god typografi

Typografi nærmer sig en kunstform. En god typografi og den rette brug kan i høj grad løfte dit webdesign. Selvfølgelig spiller typografi en vigtig rolle i læsbarheden, men brug den i grafikken hvor du designer og understreger budskaber, ikke i selve teksterne.

Eksemplet Surf og Ski bruger også typografi helt bevidst. Overskriftstyper er fremhævet, de er læsbare og ser samtidig ret godt ud. Surf og Skis valg af font fungerer både som typografi i grafik/bannere og i overskrifter samt priser. Langt de færreste typografier kan bruges både i grafik og i tekst.

Brug kontraster
Nogle websites formår at gøre et fantastisk stykke arbejde med varierende kontraster til at dirigere brugerens opmærksomhed i tiltænkt retning. Kontraster i typografi kan ændres gennem valg af skrifttype, farveafvigelser og variation i skrifttypestørrelse.

5. Brug en klar og effektiv navigation

God navigation er essentiel i webdesign. Dit websites navigationsværktøjer og teknikker skal grundlæggende give brugerne svar på tre spørgsmål:
• Hvor er jeg?
• Hvor har jeg været?
• Hvor kan jeg gå hen?

Musikhuset Aarhus bruger en klar navigation i toppen, der indeholder alle hovedpunkter. Det er der ikke så meget usædvanligt ved, men kontrasten til det øvrige indhold er visuelt rigtig god.

I navigationen er Kalender/arrangementer fremhævet og hjælper brugeren til at målrette sin søgning efter et musikarrangement. Jeg går stærkt udfra, at arrangementskalenderen er den mest besøgte side. En ulempe ved fremhævning af arrangementskalenderen, er, at du kan blive i tvivl om, hvor du befinder dig på Musikhusets website.
Det mest hensigtsmæssige er at fremhæve det menupunkt i navigationen, som du befinder dig på, så du ikke er i tvivl om, hvor du er.

Problemet kan løses ved at forstørre skriften på det aktive menupunkt eller ved at give punktet en anden baggrundsfarve. Sådan kan en kontrast adskille Kalender/arrangementer og aktivt menupunkt.

Navigation

6. Få en nyttig sidefod

Et nødvendigt onde der bare skal vises…? Det vigtigste formål med en sidefod har længe været at vise alt den nødvendig information om websitet og ophavsret. Nu har man heldigvis fundet ud af, at sidefoden indgår på ligefod som indholdsfelt med alle andre placeringer. En god sidefod eller “footer” betyder, at du ikke har “døde” ender i dit webdesign, men at du i sidefoden ikke giver slip på dine brugere. Guide dem for eksempel til information om, hvor man ellers kan kommunikere med din virksomhed for eksempel på Twitter og Facebook. Eller sæt nyttige links ind som for eksempel ofte stillede spørgsmål eller mest besøgte sider.

Afsluttende bemærkninger

Jeg vil meget gerne høre dine tanker om emnet. Hvad der adskiller godt webdesign fra dårligt eller mindre godt? Hvilke detaljer gør en forskel?

Send kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Pin It on Pinterest