En web wireframe er en enkel visuell guide for å vise deg hvordan en nettside vil se ut. Det foreslår strukturen til en side, uten å bruke noen grafikk eller tekst. En nettside wireframe ville vise hele nettstedstrukturen - inkludert hvilke sider som lenker til hvor.
Web wireframes er en fin måte å starte designarbeidet på. Og mens det er mulig å lage komplekse wireframes med store mengder detaljer, kan planleggingen starte med et serviett og en penn. Nøkkelen til å lage gode wireframes er å legge ut alle visuelle elementer. Bruk bokser og linjer til å representere bilder og tekst.
Ting å ta med på en webside wireframe:
- bokser for primære grafiske elementer
- plassering av overskrifter og underhoder
- en enkel layout struktur
- oppfordringer til handling
- tekstblokker
Hvordan bygge en enkel web-wireframe
Opprett en webside wireframe ved hjelp av noe papirskrot du har hendig. Slik gjør jeg det:
- Tegn et stort rektangel - dette kan representere enten hele siden eller bare den synlige delen. Jeg starter vanligvis med den synlige delen, og utvider den for å inkludere elementer som vil være under brettet.
- Skiss layoutet - er det 2-kolonner, 3-kolonner?
- Legg til i en boks for en topptekstgrafikk - Tegn over kolonnene dine hvis du vil at den skal være en enkelt overskrift over kolonnene, eller bare legg den til der du vil ha den.
- Skriv "Overskrift" der du vil ha H1-overskriften til å være.
- Skriv "Sub-Head" hvor du vil ha H2 og lavere overskrifter å være. Det hjelper hvis du gjør dem proporsjonale - h2 mindre enn h1, h3 mindre enn h2, etc.
- Legg i i bokser for andre bilder
- Legg til i navigasjon. Hvis du planlegger faner, bare tegne bokser, og skriv "navigering" over toppen. Eller sett punktlister i kolonnene der du vil ha navigasjonen. Ikke skriv innholdet. Bare skriv "navigasjon" eller bruk en linje for å representere tekst.
- Legg til flere elementer på siden - identifiser hva de er med tekst, men ikke bruk selve innholdet teksten. Hvis du for eksempel vil ha en anrop til handlingsknapp nederst til høyre, legger du en boks der og merker den "ring til handling". Ikke skriv "Kjøp nå!" i den boksen.
Når du har fått din enkle wireframe skrevet, og det bør ikke ta deg mer enn 15 minutter å skissere en opp, vis den til noen andre. Spør dem om det mangler noe og for tilbakemelding. Basert på hva de sier kan du skrive en annen wireframe eller beholde den du har.
Hvorfor Paper Wireframes er best for første utkast
Mens det er mulig å lage wireframes ved hjelp av programmer som Visio, for de første brainstormingene dine, bør du holde fast ved papir. Papir virker ikke som permanent, og mange folk vil anta at du smidde det sammen om 5 minutter og så ikke nøl med å gi deg god tilbakemelding. Men når du bruker et program for å lage fancy wireframes med perfekte firkanter og farger, risikerer du å bli fanget opp i selve programmet og å tilbringe timer som gjør noe som aldri kommer til å gå live.
Papir wireframes er enkle å gjøre. Og hvis du ikke liker det, bryr du bare opp papiret, kaster det i resirkulering og tar et nytt ark.
