Wireframes er et rigtigt buzz word i webbranchen. På dansk vil vi nok kalde det sideskitser og de er grundlæggende ikke forskellige fra de trykte mediers rough layout, selvom de oftest udvikler sig til reelle prototyper.

Helt enkelt beskrevet så er wireframes skelettet i dit webdesign. Wireframes fungerer som rettesnor for designeren, og når vi skal lave front-end kode og når funktionalitet skal programmeres og konfigureres.

Derfor skal wireframes være:

Enkle: Men fleksibelt for design – detaljeret nok for programmering.

Monokrome – undgå design elementer, dvs. undgå at visualisere og hold dig til stregtegning. Du skal ikke tage stilling design i wireframes.

Forholde sig til sitestrukturen – det har indflydelse på navigations designet.

Fokuseret på de ønskede resultater.

Have overblik over den totale mængde indhold.

Anvende best practice.

Sådan tegner du wireframes

Vælg dit foretrukne tegne medie. Og hvorfor ikke netop gribe tilbage til papir og blyant? Det giver det indtryk af at skitserne er til diskussion og lette at rette i.

Det er en effektiv måde at få de første ideer på plads og diskuteret med dit team og ejeren af websitet. Hvis du vil se lidt mindre håndlavet ud, så er online programmet moqups fint, og hvis du vil rulle det tunge skyts frem, så er Axure branchens standard værktøj. Adobe XD er et stærkt program til design og visualisering af brugeroplevelser til web design, apps og interaktive løsninger. På et hands-on kursus hos Softworld lærer du at bruge designværktøjerne i Adobe XD, så du kan bygge digitale og interaktive prototyper, UX designs og visuelle løsninger til hjemmesider, apps og meget mere.

 Men du skal vide, at dine flotte wirefames ryger lige i papirkurven når design og programmering er færdigt - så hvorfor ikke gøre det enkelt?

Start med at tegne din navigation. Hvordan skal den fungerer og hvad skal den kunne klare? Hvad vil bruger finde nyttigt at se i en footer osv. Tænk over hvor mange typer side-layout, der er brug for og tegn dem i grove træk.

Til en start er det måske slet ikke nødvendigt at definere særlig nøjagtigt, hvordan funktionalitet skal se ud – en boks med overskriften ”Nyhedsbrev sign-up” er måske nok. Lav en intern gennemgang for at afklare om vi tilgodeser brugeren. Har vi det hele med? – eller er der noget der skal fjernes?

Overlevering af wireframes

Måske er det ikke dig, der skal lave tone and feel design eller implementere front-end kode, så at få afklaret detaljeringsgrad af wireframes med de med det ansvar er en god ide. Dels for at verificere, at de forstår vores mål og dels for at spare tid på ikke at lave skitser, som er overdrevent detaljerede.

Wireframes som det laveste niveau

Webbranchen ser wireframes som et meget nyttigt værktøj. Men med fænomener, som responsive design og in-browser design, er det ved at indtage en plads, der ligner de førnævnte rough layout. Det er simpelthen et for stort arbejde at tegne wireframes x 3 til alle platforme.

Så hvorfor ikke gå direkte i gang og fx sætte det hele op i Wordpress? Der findes grafiske brugerflader til at gøre det og dine håndtegninger vil fungere fint som huskeliste for, hvordan det skal disponeres. Bonussen er, at du får den rigtige funktionalitet på plads i starten, dit arbejde kan være grundlag for sidens webdesign og du sparer tid.