"Look & Feel" / GUI / Designet på siden din er det første brukerene dine møter. Brukeren vet enda ikke om siden din er enkel å bruke, men han vet hvordan den ser ut.

Å utvikle utseendet er kanskje den delen av arbeidet med nettstedet som er mest spennende for de som jobber med det. Dette er den delen av arbeidet hvor en kan være kreativ. Her lages fargetema, templates / maler og om nødvendig, et referansedokument.

Hva var sidens formål?

I fase 1, definere et prosjekt, avsluttet vi med en oversikt over blant annet sidens formål. Resultatet av fase 1 bør friskes opp sånn at designet blir utviklet for å støtte opp mot det tidligere avtalte målet. Var målet å få et mer profesjonellt utseende, søkemotoroptimalisering eller noe annet? Dette er informasjon som allerede er avtalt, men som man må ha med når man starter å utvikle utseendet.

Utvikling av konsept / Prototyping

Utifra hva man vet om nettstedets formål er det nå på tide å skissere ideer til utseendet.

Dette kan først gjøres på papir, og/eller man kan bruke programvare for å raskt å skissere opp forskjellige alternativer. Plassering av moduler, artikler, bilder, menyer, bannere med mer er noe av det første som kan skisses ut. Tema / Fargekart kan jobbes med utifra det som tidligere er avtalt i fase 1.

Man ender ofte opp med 2 eller 3 forskjellige designutkast som kan jobbes videre med, alt annet forkastes.

Et annet viktig poeng i denne prosessen er at designet blir "testet" mot utvikling og implementasjon. Lar det seg faktisk gjøre å implementere designet i et nettsted? Hvilken utfordringer får man, og vil tidsrammene bli overskredet? Vil designet være tung å laste og / eller bryte med webstandarder man har bestemt seg for å følge? Det hjelper lite med et fint bilde i Photoshop dersom elementene ikke lar seg overføre til html.

Spesiellt viktig er dette dersom en bruker et dynamisk rammeverk / publiseringsløsning hvor elementposisjoner er faste. Man kan ikke presentere et designutkast som i etterkant viser seg umulig å implementere i et produksjonsklart nettsted.

Design for nettstedets brukere

Det er viktig å huske på en utvikler design for nettstedets brukere, ikke seg selv. Hva er mest hensiktsmessig for at brukeren av nettstedet skal få en god opplevelse? Han skal kunne utføre de oppgavene nettstedet ønsker han skal utføre, designet skal hjelpe til å underbygge dette.

Har nettstedet mange brukere fra mobile enheter så sier det seg selv at et fancy design i Flash ikke er veien å gå.

Er det redesign av et allerede eksisterende nettsted har man kanskje statistikk som hjelper med å bestemme endel av de tekniske begrensningene en har i forhold til brukerene.

• Hvilken skjermstørrelse er mest vanlig? Designet må ikke være for stort, men heller ikke for lite. Hvor mange prosenter av brukerene er det greit å "misse" p.g.a at man velger en sidebredde som gjør at de må scrolle sidelengs?

• Hvilken hastighet er det på brukerenes Internettlinjer? Hvor lenge skal brukerene dine måtte vente for å få lastet ned siden din? Gradienter er raskere å laste ned en komplekse bakgrunner, men er kanskje ikke like stilig?

Velger man å bruke Flash bør en i tillegg tilby en html versjon av de viktigste delene av nettstedet. Husk også på at Flash sider ikke kan bokmerkes, og heller ikke indekseres. Dette går utover nettstedets brukere.

Flash sider er også vanskeligere å oppdatere i ettertid da en er avhengig av Flashkompetanse internt i organisasjonen, eventuellt innleid kompetanse. Dette går utover deg som nettstedets eier.

Designdokumentet

Etter at designutkast er lagt frem og man har bestemt seg for et av de, vil dette gjøres ferdig og implementeres på nettstedet. For å lette arbeidet med å vedlikeholde nettstedet, samt ha oversikten over hvilken elementer som er i bruk kan et designdokument utarbeides. Dette vil fungere som en mal for fremtidig vedlikehold / utvidelser av nettstedet og sørge for at nytt innhold ikke bryter helheten i designet.

Et designdokument kan inneholde:

• Sidestørrelse: maksimalt og anbefalt. Flytende eller fast sidebredde?

• Header: størrelse, logo plassering, banner plassering, tekst størrelse med mer.

• Fargepalett: hexverdier for bakgrunn, palett, hendelser / tilbehør (knapper, piler, bullets m.m), linker med mer.

• Tekst: formatering, fonttyper, farger, størrelser med mer.

Man kan også velge å ha med regler for når og hvor knapper skal brukes, filter som er brukt på grafikken på siden og utvidet informasjon om fontsettingen.