Flere veier til Rom
Som kjent finnes det flere veier man kan bruke for å komme seg til Rom. Her tar vi for oss tre «veier» man kan ta når man er på skissestadiet:
- Her lages en enklere statisk skisse, med penn og en bunke med papir. Man får et relativt enkelt visuelt uttrykk hvor layout kommer frem, men font, farger og øvrige detaljer blir ofte utelatt. Det kan også oppfattes både som rotete og lite oversiktlig på det tenkte nettstedet.
- På den andre «veien» kan man lage en digital skisse i Photoshop og/eller Indesign. Den er fortsatt statisk, men her er layout, fonter og farger på plass og gir ofte, generelt, et mer detaljert uttrykk enn ved bruk av penn og papir.
Begge de to foregående metodene viser, som nevnt, et statisk visuelt uttrykk. Oppsettet er der, men man mister det helhetlige inntrykket og opplevelsen av hvordan nettsiden skal fungere. La oss ta det opp ett nivå – eller tre. - Vi har nå kommet til den tredje, og kanskje den mest fordelaktige «veien» til en lekker og funksjonell nettside. Her får man en mer konkret og anvendbar skisse fra prototype-programmet, som i vårt tilfelle er Adobe XD – og gjør den til så mye mer enn langs de foregående «veiene». Dette kan gjøres på flere måter. Vi skal ikke kalle det magi, men noen ganger så føles det neimen ikke så langt unna. Her våkner den statiske skissen til liv med alle visuelle elementer, og hvor den kan inneholde alt fra enkle overganger til mer avanserte funksjoner som ulike typer menyer, bilder, video, animasjoner, lyd osv. Man får altså testet både hvordan konseptet er, hvordan brukergrensesnittet fungerer og hvordan man navigerer seg rundt på nettstedet. Dette er en såkalt interaktiv prototype.
Prototypen oppdateres automatisk
Vi sender en lenke til kunden med presentasjon av prototypen. Denne blir automatisk oppdatert etter hvert som det blir gjort endringer fra designer. Brukeren får da mulighet til å kunne klikke seg nøye rundt inne på nettstedet og med det få en opplevelse av hvordan nettsiden kommer til å fungere. Kunden kan dermed følge hele reisen, fra tidlig i skissestadiet, til tett opp mot en fullt operativ nettside. Så tett som det er mulig å komme med en slik prototype. Og det må sies å være ganske så nært.
Fremgangsmåten for når vi skal lage en prototype kan variere, uten at du som kunde merker så mye til det.
Denne siste metoden har, med stort hell, vært brukt på to av våre største nettsideprosjekter – Østberg Norge og Kverneland bil. Og vi stopper ikke der, for å si det sånn. Dette er en metode som gjør det enklere og bedre for både oss som produsenter og for deg som kunde. Vi får muligheten til å lage bedre nettsider og kunden får bedre innsikt i designprosessen. I tillegg blir det også mer kostnadseffektivt da vi i samarbeid med kunden kan på et tidlig stadie i prosessen ta grep, hvis det skulle bli nødvendig.
Ulike prototypeløsninger
Når vi snakker om prototyper, har vi noen løsninger å velge imellom. Det er ikke sånn at den ene er bedre enn den andre; de bare gjør nytte for seg på forskjellige områder. Disse kan lages for å kunne gi kunden, eventuelt en potensiell sådan, et godt innblikk i hvordan nettstedet kan se ut ved lansering.
De forskjellige løsningene er:
- Standard Wireframe
Her bygger vi opp en enkel 2-dimensjonal framstilling av skjelettet til nettstedet. Her bruker vi enkle former, gjerne bare i gråtoner, uten bilder eller noen form for nyanser innen fonter eller farger. Dette skal vise innholdshierarkiet – en prioritert plassering av elementer i forhold til hverandre, med tanke på viktigheten i løsningen. En wireframe er også viktig i forbindelse med konseptutvikling – den skal sikre at de ulike funksjonene på nettsiden fungerer i tråd med hensikten. Denne løsningen bestemmer hvordan neste steg skal se ut.
Verktøy: Photoshop og Adobe XD
- Design mock-up
Her går vi ett steg videre fra det forrige stadiet. Der hvor en wireframe bestemmer hvordan en mock-up skal se ut, skal en mock-up vise mer eksakt hvordan sluttproduktet vil se ut visuelt. Her gis det tidlig mulighet for endringer av utseende, oppsett og farger før man har kommet for langt i prosessen.
Verktøy: Photoshop og Adobe XD
- Interaktiv prototype
Vi hopper raskt videre til den siste løsningen, som også er det siste steget før man begynner med selve utviklingsdelen. Når wireframe og design mock-up er godkjent settes alt sammen i en interaktiv prototype med ferdige og fungerende interaksjoner og animasjoner og alt tilhørende. Dette kan gi en ganske god smakebit på hvordan den endelige ekte nettløsningen vil komme til å være. Denne prototypen kan være kjekk å bruke, for eksempel, ved innsalg av et prosjekt til en mulig kunde eller lignende.
Verktøy: Adobe XD
Vi får alltid gode tilbakemeldinger fra kunder når det kommer til bruk av en prototype. Det gjør at de kan følge utviklingen hele veien, og når den godkjennes vet begge parter hvordan sluttproduktet vil se ut.
TRENGER DU HJELP TIL NETTSIDEUTVIKLING?
