Webdesign: Grundlaget for Wireframing - dummies

A wireframe er et diagramoversigt over en hjemmesideside, der bruger enkle former og tekstelementer til at vise sidestruktur, indhold og navigation. Du kan bruge et program som Illustrator eller InDesign til at bygge wireframes, men informationsarkitekter foretrækker generelt Microsoft Visio til at udvikle sitemaps.

kredit: © LEVEL Studios | Et Rosetta Company

Kortlægning af indholdszoner til en hjemmeside

Udarbejde hvad der foregår på hver side, og hvordan indholdet præsenteres og navigeres, er en stor opgave, især for store virksomheder. Nogle virksomheder vælger et lille pre-wireframe prep-arbejde og oprettet en skabelon for at hjælpe teamet med at kortlægge indholdszoner for hver side for at sikre, at de alle arbejdede godt sammen og var konsekvente.

Skabelonen indeholdt nøgleinformation for at hjælpe med at minde teamet på målene på sideniveau. For eksempel kan et vigtigt forretningsmål være at fremvise nye produkter på hjemmesiden og på de efterfølgende sider foreslå andre produkter, som en bruger kan være interesseret i. Med kendskab til disse mål kan du definere et par indholdszoner og vise deres relative placering, størrelse og prioritet af disse komponenter på siden. Bemærk, hvor lavprioriterede elementer falder under fold (uden for det oprindelige synsområde på websiden, hvor brugerne skal rulle for at se dem).

En skabelon til før-wire-skabeloner kan hjælpe dig med at designe store websteder: Du kan hurtigt kortlægge nøglesoner og minde dig om bruger- og forretningsmål, før du bliver for detaljeret.

Wireframing i webdesign

Efter en trådefremstilling kan du udfylde detaljerne på hver side. (En præ-wireframing runde er et valgfrit trin anbefales til store, komplekse steder. De fleste websteder går bare lige til wireframes fra sitemap.)

Wireframes fungerer som en slags vasketøjsliste af, hvad der foregår på hver side fra et indhold og medieperspektiv og også kortlægge interaktionsdesign (hvordan brugerne bruger værktøjer på siden eller navigere indhold). Her er nogle eksempler på, hvad din wireframe kan vise:

• Hvilken kopi - og hvor meget af det - går på siden

• Hvilke CMS-objekter går på siden (hvis du bruger et indholdshåndteringssystem) > Hvilke slags billeder og medier (f.eks. Flash og videofiler) går på siden

• Din tekniske og interaktionsplan for siden - links, widgets som drop-down menuer, udvidelse af indholdsområder, afkrydsningsfelter og knapper

• Wireframing er et vigtigt skridt, som du ikke må forlade noget interaktivt projekt - hvad enten det drejer sig om en mobilapp, en Flash-præsentation på et messe eller (selvfølgelig) et websted.Som en god arkitektonisk blueprint er wireframe din mulighed for at udarbejde alle indholds- og interaktionsdesignproblemer på papir med ikke kun klienten, men også det tekniske team, som bygger hjemmesiden.

Du behøver ikke at bygge en wireframe for hver side af siden. Du behøver kun at lave en wireframe til hvert unikt layout. Hvis du f.eks. Har 100 produktdetailsider i dit sideindeks, kan du bygge en enkelt wireramme, der viser, hvordan produktdetailsiden virker. Hvis en eller to produktsider har et lidt anderledes layout eller indholds twist til dem, er det dog en god idé at lave en speciel produktdetalj wireframe, bare for dem.

Det er vigtigt, at dine wireframes ser så kedelige og diagrammatiske ud som muligt. De er normalt i gråtoner, med linjer, bokse, grå bokse og dummy tekst. Dette er for at sikre kunderne klart, at de ser på et skelet og ikke et foreslået visuelt design.