Bruke Wireframes for å effektivisere utviklingsprosessen

Å lage en wireframe er et av de første trinnene du bør ta før du designer et nettsted.

En wireframe hjelper deg med å organisere og forenkle elementene og innholdet på et nettsted og er et viktig verktøy i utviklingsprosessen.

En wireframe er i utgangspunktet en visuell representasjon av innholdsoppsettet i et webdesign .

Trådrammen fungerer som en prototype som viser plasseringen av sidefunksjoner, for eksempel topptekst, bunntekst, innhold, sidebars og navigering.

Det spesifiserer også plasseringen av elementene innenfor disse innholdsområdene. Hvis du vil utvikle et nettsted som nøyaktig samsvarer med kundens krav og minimere prosjektrevisjoner, vil wireframing holde deg på sporet.

Fordeler med Wireframing

Å lage en wireframe gir klienten, utvikleren og designeren en mulighet til å ta et kritisk blikk på strukturen på nettstedet og gjør det mulig for dem å gjøre revisjoner lett tidlig i prosessen.

Wireframing gir følgende hovedfordeler:

Det gir klienten en tidlig, nærbildevisning av nettstedet design (eller re-design).
Det kan inspirere designeren, noe som resulterer i en mer flytende kreativ prosess.
Det gir utvikleren et klart bilde av elementene de må kode.
Det gjør oppfordringen til handling på hver side klar.
Det er enkelt å tilpasse og kan vise utformingen av mange deler av nettstedet.

Verktøy for Wireframe Development

Du har mange verktøy å velge mellom når du lager en wireframe:

Håndskisse på papir er alltid et godt utgangspunkt for enhver designer. Det gir en rask og enkel måte å fokusere og organisere på. Hvis du er veldig presis med skisse, kan du til og med bruke dette som din endelige wireframe. (Se figur 1.)
Flowchart eller mind-mapping programvare , for eksempel Visio . Disse programvarealternativene leveres med forhåndsdefinerte elementer som gjør at du enkelt kan lage flytskjemapresentasjoner av wireframe.
Web prototyping programvare , for eksempel Gliffy eller Balsamiq . Verktøy som disse ble opprettet spesielt med det formål å generere wireframes, og de har brukervennlige prototypingsegenskaper.
Grafikkprogramvare , for eksempel Photoshop eller Illustrator. Fordelen med å bruke disse verktøyene er at wireframe kan konverteres direkte til en grafisk mockup av nettstedets design; Ulempen er imidlertid at du må opprette alle elementene for hånden.
(X) HTML wireframes er nesten som de faktiske nettstedene selv. Du kan legge ut wireframe med kode før du bruker stilene, eller du kan lage en fullt utformet, high-fidelity-layout som ligner på en endelig design. (Se figur 2.)

Til slutt skal utvikleren eller designeren velge verktøyet de foretrekker. Personlig bruker jeg Photoshop fordi jeg liker måten den organiserer prosessen på, og hvor lett jeg kan konvertere filen til en mockup.

Wireframe Eksempel

Nivået på detaljer i en wireframe avhenger av flere faktorer, inkludert: hvor mye retning og innhold klienten har gitt, hvor komplisert innholdet er, hvor langt i prosessen er du og hvor mye detaljer du vil ha den til å inkludere .

Her er eksempler på wireframes som ble opprettet ved hjelp av forskjellige verktøy og viser ulike nivåer av detaljer og farge:

Figur 1: Denne enkle wireframe-skissen for nettstedet Coastal Partners-partnere (nå omdøpt Broad Reach Retail Partners) ble brukt til å lage grafiske mockups og til slutt den endelige utformingen. Av Mike Rohde .

Figur 2: Veldig troverdig HTML wireframe. Nyttig for å demonstrere hva et nettsted vil se ut før stilingen er lagt til. Svært nyttig for synskadede brukere.

Figur 3: Fidelity wireframe for Embrace Pet Community , av Jesse Bennett-Chamberlain av 31Three .

Figur 4: En foreløpig mockup av et sosialkonferanseverktøy bygget på Tiddlywiki for bruk på Le Web 3. Notene som følger med den er på tiddleleweb.tiddlyspot.com . Wireframe by Phil Hawksworth.

Figur 5: Denne er basert på avansert bruk av et bloggutgivelsessystem (WordPress). Av Mattheiu Mingassson eller Activeside Internet Strategies and Consulting .

Figur 6: En wireframe for Embrace Pet Community , av Jesse Bennett-Chamberlain av 31Three .

Figur 7: En wireframe med farge og bilder. Forfatter siden wireframe av Bokhandel .

Figur 8: En annen wireframe med farge. Av Mattheiu Mingassson av Activeside Internett strategier og rådgivning .

Beste praksis

For å oppnå optimale resultater, er det flere viktige ting å huske på når du utvikler en wireframe:

Enkelhet. Nøkkelen er å holde det enkelt nok til å være klare for kunden og å være fleksibel for designeren, men detaljert nok til å veilede programmereren. Som nevnt, kan du opprette en high-fidelity wireframe, men å gjøre dette tidlig i utviklingsprosessen kan være forvirrende for klienten, som kan misforstå det til et endelig utkast.
Arbeid i gråtoner. Når du lager elementer for en wireframe, er det best å jobbe i gråtoner slik at du kan fokusere på oppsettet uten å bli distrahert av designet. Hvis du har fått en fargelogo, konverter den til gråtoner også. For å skille mellom og kategorisere ulike elementer, vis former og skisser i forskjellige nyanser av grått.
Bruk wireframes sammen med et sitemap. En wireframe er en visuell representasjon av et godt nettstedskart, ikke en erstatning. Et sitemap er et nyttig verktøy for alle nettsteder, og det vil definitivt være nyttig å referere til under utviklingsprosessen.
Fokuser på ønsket utfall. Har en klar forståelse av hvordan klienten din vil at brukerne skal svare på siden før du lager din wireframe. Samtalene til handling burde være veldig klare bare fra å se på wireframe.
Opprett en fullstendige wireframe hvis den er for et nettsted. Dette vil gi den mest nøyaktige representasjonen av den aktuelle siden.
Planlegg elementene ved å sikre innholdet på forhånd. I et best scenario vil klienten din allerede ha levert deg elementene som skal vises på hver side, for eksempel logoen, annonsene, Flash- eller videospilleren, funksjonene, navigasjonsseksjonene og sidebjørken, topptekst og bunntekstelementer. Hvis du ikke har denne informasjonen ennå, møtes med klienten din og får (eller opprett) et sitemap. Hvis du re-designe eksisterende elementer, kan du samle dem fra en nøye gjennomgang av nettstedet. I dette scenariet må du først bekrefte med klienten at du ikke vil bli bedt om å legge til eller fjerne elementer, fordi du ikke har en klar forståelse av forventningene dine, vil redusere prosessen.

Grayscale vs Color

Når du lager en wireframe, bidrar arbeidet i gråtoner til å opprettholde fokus på primærfunksjonen til prosessen , som er å fullføre oppsettet, ikke designet (se figur 3). En annen risiko for å jobbe i fargen er at klienten kan feillegge wireframe for den endelige mockupen.

Fargekart kan imidlertid vise seg å være nyttig når du viser plasseringen til hver handling. Fordi en side kan inneholde flere anrop til handling, er det viktig å prioritere dem. Wireframes kan hjelpe til med å avgjøre hvilken oppfordring til å trekke brukerens øye til først.

Jeg jobbet nylig med et prosjekt som hadde en veldig levende logo, som i så fall var den primære handlingen fordi det representerte et nylig lansert magasin.

Når du bruker farge, kan du lettere fortelle om visse elementer overstyrer den primære handlingen. Denne prosessen faller fortsatt under rammen av wireframing, i stedet for mockup-design, fordi elementlokaler fortsatt er bestemt.

Farge kan gradvis legges til wireframe mens prosjektet forløper , noe som er mer effektivt enn å gå videre med mockups før plasseringen av elementene er låst ned. Ved å gjøre dette, kan grafisk programvare hjelpe deg å bytte direkte til en mockup når du er klar.

Hva du skal unngå

Som andre aspekter av utviklingsprosessen kan wireframing ha sine fallgruver hvis ikke utført riktig. Her er noen tips om hva du skal unngå for å oppnå de mest effektive resultatene:

For mye skjer på siden. Gi rikelig hvit plass, slik at designet ikke ser for opptatt eller rotete.
Fokus på farge og design. Wireframing er for å bestemme utformingen og plasseringen av elementene. Selv om en wireframe kan påvirke designen, vil det nok bare være å distrahere grafikk og farge fra formålet.
For mye detalj. Du kan alltid legge til flere detaljer senere, men hvis du inkluderer for mye i begynnelsen, kan klienten forvirre wireframe for den siste mockupen.

Hvis du er interessert i å lære mer om wireframes, Wireframe Magazine er en stor ressurs som deler prøver, diskuterer teknikker og løser problemer knyttet til informasjonsarkitektur.

Opprette en wireframe for kundens nettsted gir et effektivt kommunikasjonsverktøy for alle involverte parter.

Selv å bygge en enkel wireframe vil spare tid i det lange løp og lette utviklingsprosessen for designeren, utvikleren og klienten.

Skrevet utelukkende for WDD av Eric Shafer.

Bruker du wireframes for ditt design? Hva er noen av de beste måtene å lage effektive wireframes?

design webdesign tråd