Wireframe – Arkitekttegningen til dit website

For at bygge et godt website skal man have en plan for hvordan websitet skal struktureres og hvilke funktioner og skabeloner det skal indeholde. En god metode til at få et overblik over websitets indhold er at lave en Wireframe.

En wireframe er en skitse, der med simple streger og figurer, viser websitets opbygning. Den er et godt redskab til at få et overblik over sitet struktur og væsentlige flows, så man sikrer at opbygningen understøtter brugernes behov.

Derudover er det et godt redskab til at “scope” en opgave. Dvs. aftale hvilke funktioner der er nødvendige og udregne en pris.

Wireframen er den digitale verdens svar på arkitekttegningen. Man kan godt gå i gang med at bygge et hus uden en plan, men resultatet bliver helt sikkert bedre hvis der laves en arkitekttegning først.

Den tid der skal bruges for at komme i mål med en god wireframe er afhængig af størrelsen på projektet, hvor meget der skal afklares i forbindelse med udformning af wireframen og hvor meget den skal justeres før alle bruger- og interne behov er mødt.

Herunder finder du et eksempel på en wireframing proces som passer godt til rigtig mange af de projekter vi møder:

Wireframe proces

Møde – indkredsning af opgaven

Vi starter med et fælles møde, hvor vi:

  • Afstemmer forventningerne og målet med løsningen (hvad skal vi have brugerne til gøre for at websitet bliver en succes?)
  • Får en god forståelse for målgrupper der skal bruge websitet (Personas)
  • Får en fælles forståelse for sitets indhold og struktur (Userflows)
  • Får sat nogle flere ord og eksempler på ønskerne til stil og design.

Wireframe

På baggrund af den viden vi har fået fra mødet/workshoppen, udarbejder vi informationsarkitektur og prioritering af elementerne på sitet i en wireframe.

Med simple streger og knapper illustrerer vi hvordan den endelige løsning kommer til at fungere. Fordelene ved denne tilgang er blandt andet:

  • Det er lettere at tale funktionalitet og indhold, når man ikke samtidig skal forholde sig til det visuelle design
  • Det er nemt og billigt at afprøve forskellige ideer på dette stadie
  • Det sikrer at vi efterfølgende får et effektivt design og programmeringsforløb.

Funktionalitetsbeskrivelse

Når wireframen er lavet kan der med fordel laves et tilhørende dokument, som beskriver hvilke softwarekomponenter/platforme, der kan benyttes til at lave websitet. Dokumentet beskriver hvilket CMS der anvendes, hvilke plugins og udvidelser der anvendes, hvilke eksterne systemer der skal anvendes, og hvordan der skal integreres med dem.

Budget

  • Møde inkl. forberedelse og opsamling: 4.400 kr.
  • Wireframing (24 timer): 26.400 kr.
  • Funktionalitetsbeskrivelse: 6.600 kr.

I alt = 37.400 kr. + moms

Optioner

Analyse af brugeradfærd på eksisterende website

Hvis du allerede har et website, som skal omstruktureres eller erstattes af et nyt, så kan der ofte hentes en masse viden om brugeradfærden, som med fordel kan benyttes i arbejdet med det nye site.

Vi kan inddrage data fra jeres nuværende statistiksystem, google søgninger, samt opsætte tracking, som kan optage brugernes handlinger på websitet.

Eksempel på budget:

  • Få adgang til jeres statistiksystemer og sætte ekstra scripts på (1 time): 1.100 kr.
  • Dialog om hvilke flows der skal undersøges nærmere (1 time): 1.100 kr.
  • Se data/brugeroptagelser igennem og sammenfatte hvad vi har observeret (6 timer): 6.600 kr.

Analyse ialt: 8.800 kr. + moms.

Teknisk afklaring / datamodel

I projekter, hvor der skal integreres til andre systemer, anbefaler vi at der også inkluderes tid til at lave en teknisk afklaring, som går ud på at undersøge API dokumentationen på de systemer der skal bruges og lave en selvstændig skitse af hvor datakilder og integrationer.

Kontakt os

Vil du vide mere, så kontakt os her

Det med småt

KathArts generelle forretningsbetingelser https://www.kathart.dk/jura/forretningsbetingelser/ er gældende for alt samhandel med KathArt.

Alle priser er excl. moms.