| Webdesign guide 2.0 |
| Søndag, 09. august 2009 09:41 | ||||||||||||||||||||||||||
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 layoutHvad 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.) WebdesignDet 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. BrugervenlighedVi 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. Hold afstandDet 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 :) TypografiNå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. Top 10. Websikre fontsWebsikre 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
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.
|

Webdesign guide 2.0 