Brug af trådrammer til at strømline din udviklingsproces
Oprettelse af en wireframe er et af de første trin, du bør tage, før du designer et websted.
En wireframe hjælper dig med at organisere og forenkle elementerne og indholdet på et websted og er et vigtigt værktøj i udviklingsprocessen.
En wireframe er dybest set en visuel repræsentation af indholds layout i et website design .
Trådrammen fungerer som en prototype, der viser placeringen af sidefunktioner, såsom header, footer, indhold, sidebjælker og navigation.
Det specificerer også placeringen af elementerne inden for disse indholdsområder. Hvis du vil udvikle et websted, der præcist svarer til kundens krav og minimere projektrevisioner, vil wireframing holde dig på sporet.
Fordele ved Wireframing
Oprettelse af en wireframe giver klienten, udvikleren og designeren en mulighed for at tage et kritisk kig på strukturen på hjemmesiden og giver dem mulighed for at lave revisioner nemt tidligt i processen.
Wireframing giver følgende vigtige fordele:
- Det giver klienten en tidlig, nærbillede af site design (eller re-design).
- Det kan inspirere designeren, hvilket resulterer i en mere flydende kreativ proces.
- Det giver udvikleren et klart billede af de elementer, de skal kode.
- Det gør opkaldet til handling på hver side klart.
- Det er let at tilpasse og kan vise layoutet på mange sektioner af hjemmesiden.
Værktøjer til Wireframe Development
Du har mange værktøjer at vælge imellem, når du opretter en wireframe:
- Håndskitse på papir er altid et godt udgangspunkt for enhver designer. Det giver en hurtig og nem måde at fokusere og organisere. Hvis du er meget præcis med skitsering, kan du endda bruge dette som din endelige wireframe. (Se figur 1.)
- Flowchart eller mind-mapping software , såsom Visio . Disse softwaremuligheder findes med færdigpakkede elementer, der gør det nemt at oprette flowchartpræsentationer af din wireframe.
- Web prototyping software , såsom Gliffy eller Balsamiq . Værktøjer som disse blev skabt specielt med det formål at generere wireframes, og de har nemme at bruge prototyperfunktioner.
- Grafisk software , som f.eks. Photoshop eller Illustrator. Fordelen ved at bruge disse værktøjer er, at wireframen derefter kan omdannes direkte til en grafisk mockup af hjemmesidets design; Ulempen er imidlertid, at du bliver nødt til at oprette alle de enkelte elementer for hånden.
- (X) HTML wireframes er næsten som de faktiske websteder selv. Du kan opsætte wireframe med kode før du anvender stilarterne, eller du kan oprette et fuldt stylet, højfidelighedslayout, der ligner et slutdesign. (Se figur 2.)
I sidste ende skal udvikleren eller designeren vælge det værktøj, de foretrækker. Personligt bruger jeg Photoshop, fordi jeg kan lide den måde, den organiserer processen på, og hvor nemt jeg kan konvertere filen til en mockup.
Wireframe Eksempel
Detailniveauet i en wireframe afhænger af flere faktorer, herunder: hvor meget retning og indhold klienten har givet, hvor kompleks indholdet er, hvor langt i processen er du og hvor meget detaljer du vil have med det .
Her er eksempler på wireframes, der blev oprettet ved hjælp af forskellige værktøjer og udviser forskellige niveauer af detaljer og farve:
Figur 1: Denne enkle wireframe-skitse for webstedet Coastal Partners-partnere (nu omdøbt til Broad Reach Retail Partners) blev brugt til at skabe grafiske mockups og til sidst det endelige design. Ved Mike Rohde .
Figur 2: Meget lavtroskab HTML wireframe. Nyttigt til at demonstrere, hvordan et websted vil se ud, før stylingen er tilføjet. Meget nyttigt for synskadede brugere.
Figur 3: Fidelity wireframe til Embrace Pet Community , af Jesse Bennett-Chamberlain af 31Three .
Figur 4: En foreløbig mockup af et socialt konferenceværktøj bygget på TiddlyWiki til brug på Le Web 3. Noterne til at ledsage den er hos tiddleleweb.tiddlyspot.com . Wireframe by Phil Hawksworth.
Figur 5: Denne er baseret på avanceret brug af et blog-publishing system (WordPress). Ved Mattheiu Mingassson eller Activeside Internet Strategies and Consulting .
Figur 6: En wireframe til Embrace Pet Community , af Jesse Bennett-Chamberlain af 31Three .
Figur 7: En wireframe med farve og billeder. Forfatter side wireframe by Bokhandel .
Figur 8: En anden wireframe med farve. Af Mattheiu Mingassson af Activeside Internet Strategies and Consulting .
Bedste praksis
For at opnå optimale resultater er der flere vigtige ting at huske på, når du udvikler en wireframe:
- Enkelhed. Nøglen er at holde det enkelt nok til at være klare for kunden og at være fleksibel for designeren, men detaljeret nok til at styre programmereren. Som nævnt kunne du oprette en high-fidelity wireframe, men hvis du gør det tidligt i udviklingsprocessen, kan det være forvirrende for klienten, der kan fejle det til et endeligt udkast.
- Arbejde i gråtoner. Når du opretter elementer til en wireframe, er det bedst at arbejde i gråtoner, så du kan fokusere på layoutet uden at blive distraheret af designet. Hvis du har fået et fuldfarget logo, skal du konvertere det til gråtoner også. For at skelne mellem og kategorisere forskellige elementer skal du vise figurer og konturer i forskellige gråtoner.
- Brug wireframes sammen med et sitemap. En wireframe er en visuel repræsentation af et godt sitemap, ikke en erstatning. Et sitemap er et nyttigt værktøj til enhver hjemmeside og vil helt sikkert være nyttigt at henvise til under udviklingsprocessen.
- Fokuser på det ønskede resultat. Få en klar forståelse for, hvordan din klient ønsker, at brugerne skal svare på siden, før du opretter din wireframe. Opkaldene til handling bør være meget klare, blot fra at se på wireframe.
- Opret en fuld størrelse wireframe, hvis den er til en hjemmeside. Dette vil give den mest nøjagtige repræsentation af den aktuelle side.
- Planlæg elementerne ved at sikre indholdet på forhånd. I et bedste tilfælde vil din klient allerede have forsynet dig med de elementer, der skal vises på hver side, f.eks. Logoet, annoncerne, Flash- eller videospillerne, funktionerne, navigationssektionerne og sidebjælken, overskriften og sidefodningselementerne. Hvis du ikke har disse oplysninger endnu, skal du mødes med din klient og få (eller oprette) et sitemap. Hvis du omdanner eksisterende elementer, kan du samle dem fra en omhyggelig gennemgang af hjemmesiden. I dette scenario skal du først bekræfte med din klient, at du ikke bliver forpligtet til at tilføje eller fjerne elementer, fordi du ikke har en klar forståelse for deres forventninger vil bremse processen.
Gråtoner vs Farve
Når du laver en wireframe, hjælper arbejdet i gråtoner med at opretholde fokus på den primære funktion af processen , som er at færdiggøre layoutet, ikke designet (se figur 3). En anden risiko for at arbejde i farve er, at klienten kan fejre wireframe til den sidste mockup.
Farve kan dog vise sig nyttigt, når du viser placeringen af hvert opkald til handling. Fordi en side kan indeholde flere opfordringer til handling, er det vigtigt at prioritere dem. Wireframes kan hjælpe med at bestemme hvilket opkald til handling for at trække brugerens øje til først.
Jeg har for nylig arbejdet på et projekt, der havde et meget levende logo, som i så fald var den primære opfordring til handling, fordi den repræsenterede et nyligt lanceret blad.
Når du bruger farve, kan du lettere se, om visse elementer overstyrer det primære opfordring til handling. Denne proces falder stadig under rammerne af wireframing, snarere end mockup-design, fordi elementlokaler stadig bestemmes.
Farve kan gradvis tilføjes til wireframe, da projektet forløber , hvilket er mere effektivt end at komme videre med mockups, før elementernes placering er låst ned. Ved at gøre dette kan grafisk software hjælpe dig med at skifte direkte til en mockup, når du er klar.
Hvad skal man undgå
Som andre aspekter af din udviklingsproces kan wireframing få sine faldgruber, hvis de ikke udføres korrekt. Her er nogle tips om, hvad du skal undgå for at opnå de mest effektive resultater:
- Alt for meget sker på siden. Lad rigelig hvidt mellemrum være, så designet ikke virker for travlt eller rotet.
- Fokus på farve og design. Wireframing er til at bestemme layout og placering af elementer. Selvom en wireframe kan påvirke designen, vil det nok kun aflede grafik og farve, hvis det er formålet.
- For meget detaljer. Du kan altid tilføje flere detaljer senere, men hvis du inkludere for meget i starten, kan klienten forvirre wireframe til den sidste mockup.
Hvis du er interesseret i at lære mere om wireframes, Wireframe Magazine er en stor ressource, der deler prøver, diskuterer teknikker og løser problemer relateret til informationsarkitektur.
Oprettelse af en wireframe til din kundes hjemmeside giver et effektivt kommunikationsværktøj til alle involverede parter.
Selv at bygge en enkel wireframe vil spare tid på lang sigt og lette udviklingsprocessen for designeren, udvikleren og klienten.
Skrevet udelukkende til WDD af Eric Shafer.
Bruger du wireframes til dit design? Hvad er nogle af de bedste måder at skabe effektive wireframes på?