Webdesign case stage #3: Wireframes

Jeg har nu styr på strukturen og det er tid til at forbinde informationsarkitekturen, som vist i diagrammet herunder, til det visuelle design af websitet med wireframes.

Diagram af websitets informationsarkitektur

Diagram af websitets informationsarkitektur

Hvad er et wireframe?

Wireframet er en skitse eller “blueprint”, der repræsenterer det basale framework af hvordan websitet skal se ud. Det er her store dele af websitet planlægges, og du kan spare dig selv en masse tid, ved at redigere layoutet af en simpel wireframe i starten af designprocessen, i stedet for et komplekst design senere.

Wireframets formål er, at give et godt overblik over sidens layout, vise hvordan man kommer fra side-til-side, og om der er nogle smarte funktioner på siderne.

Det er en fantastisk måde at begynde et website projekt på, da det giver dig og din klient tid til at fokusere på layout uden at blive distraheret af farve, typografi og andre designelementer.

Koncentrer dig om, hvad der foregår hvor på websiderne, og hvor stor en procentdel af siden hvert element skal fylde, som alt sammen bestemmes af din kundes behov.

Hvad skal wireframet indeholde?

Der er ikke nogen faste regler for hvordan et wireframe skal se ud. Det kan tegnes i hånden, man kan bruge et program på computeren som fx Photoshop eller man kan bruge et dedikeret wireframe værktøj.

Der er dog nogle retningslinjer, man kan følge:

Wireframet indeholder normalt ikke typografisk stil, farver eller grafik, fordi hovedfokus er på funktionalitet, adfærd og prioritering af indholdet.

Et wireframe skal vise:

  • Hvad de forskellige sider overordnet skal indeholde, hvad der skal være i fokus og deres prioritering.
  • Reglerne for hvordan forskelling information vises.
  • Hvordan man går fra den ene siden til den anden.
  • Hvilke funktioner siden skal have og hvordan de virker. Det kunne fx være,  at gøre det tydeligt hvor der er call-to-action.

Herunder ses et eksempel på wireframet til forsiden af websitet.

Wireframe af websitets forside

Wireframe af websitets forside