Webdesign guide 2.0
Brugervurdering: / 9
DårligBedst 
Søndag, 09. august 2009 09:41

Hvorfor er design vigtigt? Hvis du skal til at starte et webdesign projekt op. Har jeg lavet en lille guide til dette. Guiden tager udgangspunkt i mine personlige erfaringer. Målet med guiden har hele tiden været at gøre hele processen, fra ide til færdig hjemmeside, en anelse mere gennemskuelig. For ofte oplever jeg nemlig at der tages alt for let på vigtigheden af et godt webdesign. Hvilket jo virkelig er en skam, da det er her man virkelig har chancen for at gøre et godt indtryk på potentielle kunder.

webdesignGuide

Wedesign er et meget vidt begreb, det dækker faktisk over flere proffesioner. Enhver der arbejder som webdesigner ved at det modsat det trykte medie, der henvender sig til brugeren visuelt, henvender hjemmesider sig ofte interaktivt til brugerne. Dette kræver en forståelse for mediet og dets mange funktioner. Hver gang jeg skal lave en ny hjemmeside, prøver jeg at sætte mig grundigt ind i målgruppen. Så jeg kan tilbyde kunden, den mest optimale løsning. Herudover skal man opnå målbare resultater, dette kan gøres med google analytics som du kan læse om i min artikel: Kom i gang med Søgemaskineoptimering!

Skitser dit webdesign layout

Hvad skal hjemmesiden bruges til? Hvem er målgruppen? Det er vigtigt du allerede har dette på plads inden du begynder at skitserere hjemmesidens layout. Er det en hjemmeside hvor brugerne skal være logget ind før de kan foretage sig noget, skal login feltet vel prioriteres højt. Og må derfor gerne være meget synligt på forsiden. Eller måske er det en meget tekst tung hjemmeside, hvor brugerne skal kunne finde en masse forskellige information, her vil det måske være en rigtig god ide at prioritere Søgefeltet meget højt. En anden mulighed er prototyper eller wireframes.

Start herefter med at lave en skitse på papir. Først skriv en liste over de ønskede elementer i dit design. Denne liste kunne lyde på: "Logo, navigation, søgefelt, indhold, sitemap, login, pathway, reklamebanner osv." Herefter kan det betale sig at prioritere disse. Hvis du ikke helt har styr på hvilke elementer siden skal indeholde, kan du skrive et brugerscenario. Et brugerscenario er let at skrive, og kan hjælpe dig med at fastlægge hjemmesidens mål. (Forklaring af brugerscenario kommer senere. I det hele taget vil jeg gerne udvide denne artikel med nogle værktøjer til at finde målgruppen. Da der oftest er flere interessanter end man først tror.)

Webdesign

Det gode webdesign skiller sig ud ved at være æstetisk gennemført. Til det har vi forskellige virkemidler, som f.eks. skrifttyper, billeder, ikoner ol. Det er en blanding af alle disse visuelle virkemidler der skaber det gode design, hvor alle elementer arbejder sammen om at sælge dit budskab.

På hjemmesiden websiteoptimization, har de skrevet artikelen First Impressions Count in Website Design, der går i dybden med netop dette emne.

Du bestemmer hvad brugerne kan fortage sig på hjemmesiden, men ikke mindst hvad der er vigtigst. Dette kan du gøre ved at guide dine brugere visuelt. Typisk, finder vi grafisk tunge elementer som logo, call to action elementer, søgefelter osv. Dem der er visuelt tiltaler os og først fanger øjet er oftest de vigtigste, om ikke andet så burde de være det. Også placering er meget vigtig. Det ved vi fra utallige eyetracking tests. Der statistisk har bevist at vi læser skærmen fra venstre mod højre, og at de elementer der befinder sig i toppen af venstre side af layoutet har de mest sete placeringer. Og at alt i højre side, faktisk har sekundær betydning. Derfor tænk over dine elementer, hvad ønsker du brugerne ser først, og hvad har anden, tredie, fjerde-prioritet?

Kunne du tænke dig at se hvordan dine brugere navigere rundt på din hjemmeside, følg deres klik og bevægelser med musen, ved at tilmelde dig userfly, denne tjeneste er rigtig spændende, fordi du ofte vil blive overrasket over hvad folk først ser og klikker på. Hurtig og nem tilmeldig, kræver du indsætter et link i HEAD elementet på din hjemmeside, herefter har du 10 gratis optagelser om månenden.

Det er selvfølgelig ikke nok at din hjemmeside er flot, det skal alt sammen hænge sammen, så det samtidig er brugervenligt.

Brugervenlighed

Vi ved nemlig idag at det ikke kun handler om at se godt ud. En veldesignet hjemmeside er karakteriseret ved, at den er let at navigere i, overskuelig og informationerne er prioriteret for brugeren, også kaldet motiverende design. Et af tidens buss ord er usability eller på dansk brugervenlighed. Og det er jo netop med brugerne i baghovedet at der designes. Målet med usability er at forbedre brugernes oplevelse. Dette gøres i stort omfang idag, ved at bruge visuelle virkemidler så som billeder, knapper ol. Derfor kan man ikke sige webdesign uden at sige usability.

Det er f.esk. også en god ide at være konsekvent. Så f.eks. alle "Læs mere.." links har det samme ikon eller farve. Dette hjælper brugeren til hurtigt at orientere sig på siden.

På større sites og måske især webshops, er det vigtigt at tænke brugervenlighed ind i design og funktionaliteterne. F.eks. falder utroligt mange kunder fra, når de skal til at betale for en vare på en webshop. Dette kan skyldes rigtig mange ting, men ofte blive brugeren forvirret et sted under købsprocessen. Derfor er det altid en god ide at teste hjemmesiden inden den lanceres.

Hold afstand

Det er blevet god net-edikette at holde afstand imellem foskellige elementer. Dette giver et bedre overblik, og alting ser ikke så uoverskuelige ud. Det var typisk 1. Generations hjemmesider at være teksttunge og uoverskuelige.

Derfor vær opmærksom på Liniehøjden i din brødtekst eller (Line-height) skal være høj, dette hjælper brugerne til bedre at kunne læse dine tekster. Hold desuden dine linier så korte som muligt, husk på at statistikken siger at brugere højest læser 28% af dine samlede tekster. Derfor er det også en god ide at fremhæve, specifikke søgeord ol. f.eks. med farver eller brug HTML elementer så som:"bold og italic."

Hold også øje med afstanden til de forskellige elemeter (Padding/Margin),White space eller på dansk tom plads, kan medvirke til at en hjemmeside virker langt mere overskuelig, overdrevet brug af tom plads kan også virke eksklusivt, hvis det gøres rigtigt :)

Typografi

Når du skal vælge hvilken tekst du skal have på din hjemmeside. Er der flere faktore du skal tage med i dine beslutninger. Teksten skal jo helst matche det tema du arbejder med på hjemmesiden. Og samtidig understøtte dine budskaber. Valget af font type til brug på dine hjemmeside har stor indflydelse på hvordan brugere vil opfatte seriøsiteten af sidens tekster.

Når det gælder tekst i billeder, har du lagt større handlefrihed. Men når du skal arbejde med brødtekst, skal du huske at vælge en font der er websikker.

Internettet skaber langt fra de idelle rammer for læsere, som jeg har forklaret i forrige afsnit, scanner de fleste brugere kun teksterne meget overfladisk. Dette skyldes primært Internettets struktur, med så meget information til rådighed, tvinges brugerne til at være kritiske. Og selvom vi har søgemaskiner, ender man hurtigt med at springe fra side til side for at finde præcist det man leder efter. Derfor er det bla. blevet populært med store overskrifter. De hjælper brugerne til at orientere sig, og finde hvad der er relevant for dem.

Leder du efter nye fonts til brug i billeder, kan jeg bla. anbefale:
fonts.com
free-fonts.com
dafont.com

Top 10. Websikre fonts

Websikre fonts har det tilfælles at de findes på alle operativsystemer, være det sig Windows, Mac eller Linux. Herunder har jeg listet de vigtigste. Da vi kun har disse få fonte at arbejde med på Internettet, kan vi blive nød til at være kreative. Se hvad man kan opnå igennem CSS med standard fonte på hjemmesiden: Typechart.com

Arial

font-family: Arial, sans;

Georgia

font-family: Georgia, serif;

Courier New

font-family: Courier New, monospace;

Trebuchet MS

font-family: Trebuchet MS, sans-serif;

Lucida Console

font-family: Lucida Console, monospace;

Verdana

font-family: Verdana, sans-serif;

Times New Roman

font-family: Times New Roman, serif;

Lucida Sans Unicode

font-family: Lucida Sans Unicode, sans-serif;

Tahoma

font-family: Tahoma, sans-serif;

Disse fonts er måske lidt kedelige. Derfor kunne man godt have lyst til at bruge nogle af de nyere fonts der f.eks. er kommet med Windows Vista. Dette er også muligt, dog skal man huske at angive en alternativ font for dem der ikke har Vista fonts. Du kan se et udpluk af de nyeste Vista fonts herunder.

Cambria

font-family: Cambria, georgia, serif;

Calibri

font-family: Calibri, arial, sans-serif;

Corbel

font-family: Corbel, verdana, sans-serif;

 

Tilføj kommentar