En web wireframe er en simpel visuel guide til at vise dig, hvordan en webside vil se ud. Det foreslår strukturen på en side uden at bruge nogen grafik eller tekst. Et websted wireframe ville vise hele webstedet struktur - herunder hvilke sider der linker til hvor.
Web wireframes er en fantastisk måde at starte dit design arbejde på. Og mens det er muligt at oprette komplekse wireframes med store detaljer, kan din planlægning starte med en serviet og en pen. Nøglen til at lave gode wireframes er at udelade alle visuelle elementer. Brug bokse og linjer til at repræsentere billeder og tekst.
Ting at medtage på en webside wireframe:
- kasser til primære grafiske elementer
- placering af overskrifter og underhoveder
- en enkel layout struktur
- opfordringer til handling
- tekstblokke
Sådan opbygges en enkel web-wireframe
Opret en webside wireframe ved hjælp af noget papirskrot, du har brug for. Sådan gør jeg det:
- Tegn et stort rektangel - dette kan repræsentere enten hele siden eller bare den synlige del. Jeg starter normalt med den synlige del, og udvider den derefter til at omfatte elementer, som ville være under folden.
- Skitse layoutet - er det 2-kolonner, 3-søjler?
- Tilføj i en boks til en header-grafik - Tegn over dine kolonner, hvis du vil have, at det skal være et enkelt overskrift over kolonnerne, eller bare tilføj det, hvor du vil have det.
- Skriv "Overskrift", hvor du vil have din H1 overskrift til at være.
- Skriv "Sub-Head", hvor du vil have H2 og lavere overskrifter skal være. Det hjælper, hvis du gør dem proportionelle - h2 mindre end h1, h3 mindre end h2 osv.
- Tilføj i bokse til andre billeder
- Tilføj i navigation. Hvis du planlægger faner, skal du blot tegne bokse og skrive "navigation" over toppen. Eller sæt punktlister i kolonnerne, hvor du vil have navigationen. Skriv ikke indholdet. Skriv blot "navigation" eller brug en linje til at repræsentere tekst.
- Tilføj yderligere elementer til siden - identificer, hvad de er med tekst, men brug ikke den egentlige indholdstekst. Hvis du f.eks. Vil have et opkald til handlingsknapp nederst til højre, skal du sætte en boks der og mærke det "call to action". Skriv ikke "Køb nu!" i den boks.
Når du har fået din enkle wireframe skrevet, og det skal ikke tage dig mere end 15 minutter at skitse en op, vis det til en anden. Spørg dem, hvis der mangler noget, og for anden feedback. Baseret på hvad de siger kan du skrive en anden wireframe eller beholde den du har.
Hvorfor Paper Wireframes er bedst til første udkast
Selvom det er muligt at oprette wireframes ved hjælp af programmer som Visio, skal du holde fast i papiret til de første brainstorming sessioner. Papir virker ikke som permanent, og mange mennesker antager, at du smed det sammen om 5 minutter og så tøv ikke med at give dig god feedback. Men når du bruger et program til at skabe fancy wireframes med perfekte firkanter og farver, risikerer du at blive fanget i selve programmet og bruge timer til at perfektionere noget, der aldrig kommer til at gå live.
Papir trådrammer er nemme at gøre. Og hvis du ikke kan lide det, smuldrer du bare papiret, smider det i genbrug og tager et nyt ark.
