Dåliga vanor förr i tiden, när vi skaffade nya projektidéer och användarkravsdokument från våra kunder, kanske skissera några idéer och hoppa in i spännande Photoshop-design.

Vårt resonemang för den metoden var att träffa design gate run direkt för att ge tid för revision.

Efter en tid insåg vi att vi lagt ner mycket tid på att designa, varför? Revisioner tog hela tiden. Revideringarna var komplicerade; vi var tvungna att justera layouter, grafik och typografi. Allt var frustrerande, katastrofalt för projektets tidslinjer, oroande för kunderna och tröttsamt för oss. Det tog ett tag innan vi insåg att vi behöver ett annat tillvägagångssätt. Vi bestämde oss för att gå tillbaka till "Square One" initiala process som vi ignorerade tidigare "Wire-framing." Vi började med att Gray-boxes wireframes inkluderade den i vår designprocess, flyttade sedan till en annan process och lade till den i designprocessen. Till slut föll modellen på plats, tack vare "Wire-framing", det sparade vår tid och hjälpte oss att ta itu med problem tidigare. Av den anledningen röstar jag wireframing som den "första porten" i designprocessen.

Wire-framing användarupplevelsedesigner

Vem vet, i ett tidigt skede kan du känna igen potentiella användbarhetsutmaningar i dina designs. Ibland bra projektkoncept med strikta (URS) användarkrav, under den inledande processen verkar de falla på plats. Återigen händer värre när vi börjar lägga planer för papper, "Vad hände?" vi ignorerade wire-frame som bara tar några minuter att skissa på en plan än färgglada Photoshop. Bättre att börja justera tidigare än senare.

Wire-framing som ett tidshanteringsverktyg

Tidshantering är en viktig teknik för varje framgångsrikt projekt om ett projekt har en snäv tidslinje; du kanske tänker "varför ska jag slösa bort min tid med trådramning, så det är bäst att jag hoppar över till färgglada Photoshop." Vi gjorde det misstaget till en början, men det slutade med att vi reviderade hela konceptet, vilket var tidskrävande och ett slöseri med resurser. Att revidera gråa lådor och skisser är mycket enklare än att granska fullfärgsdesigner som är integrerade med flera komplexa element.

Trådramen används för att skapa en verklig och korrekt dimension av en sida. När kunden har godkänts behöver vi bara en grafisk lösning för att förbättra dess utseende. Tricket är att om trådramarna, skisserna och de grå rutorna är i ordning, kommer vi inte att hinna revidera. Istället kommer vi att hoppa till nästa process "visuella" del.

Wire-framing för klientlimning

Sidlayout med färger råkar ibland vara en distraktion för våra kunder; kanske en kund avskyr färg "lila" kundens känslor har svårt att fokusera på planen. Deras feedback kan vara negativ på grund av deras känslor. Det kan sluta med att de frågar efter "Börja om", designen kan vara okej, men det enda som irriterade kunden är den "lila" färgen. Därför är det ett effektivt sätt att använda grå rutor och skisser, eftersom det kommer att eliminera distraktioner av element.

En wireframe kommer att hjälpa till att få feedback angående dimensionering, layout utan att klienten bara fokuserar på utseendet. Att använda wireframe-metoden hjälper oss också att veta mer om en kund, vad de gillar? Stilarna, typografin, etc., trådframing-presentation, är som en bindningstid, deras feedback och interaktion gör att du vet om dem och deras design och vad du kan förvänta dig i framtida faser av projektet? När du skissar ett grovt utkast på papper kommer kunden att fortsätta kommentera ikoner, knappar, typsnitt etc. De kommer sluta säga att de föredrar större knappar än mindre etc. Så småningom lär sig en designer av kunderna och börjar titta efter återkopplingsmönster och lär dig, att ha kunskap kan spara tid, energi och resurser.

7 fascinerande saker om Wireframes

1 Ökar teamarbetserfarenheten

Tråd-framing-processen sammanför olika grupper av människor med olika färdigheter; alla är en del av projektprocessen. Projektledare, designers, utvecklare samlas alla för att uppnå ett mål. Detta är värdefullt eftersom det förbättrar lagarbetet och gör att lagkamrater förstår varandra mer. Med "vattenfall"-modellen kan projekt faktiskt brytas.

2 Transparent kommunikation

Smidigt kommunikationsflöde, vi brukade lida där vissa teammedlemmar gillar utvecklare som inte ingår i projektdiskussionen. Genom att inkludera varje enskild person i wireframing-processen så är problemet löst. En utvecklare kan upptäcka ett problem tidigare som kan missas i e-postmeddelanden och chattar. Å andra sidan är specifikationerna eleganta och vackra men svårare att visualisera.

3 Engagera kunder

En wireframe kommer att hjälpa till att få feedback angående dimensionering, layout utan att klienten bara fokuserar på utseendet. Att använda wireframe-metoden hjälper oss också att veta mer om en kund, vad de gillar? Stilarna, typografin, etc., trådframing-presentation, är som en bindningstid, deras feedback och interaktion gör att du vet om dem och deras design och vad du kan förvänta dig i framtida faser av projektet? När du skissar ett grovt utkast på papper kommer kunden att fortsätta kommentera om ikoner, knappar, typsnitt etc. De kommer att sluta säga att de föredrar större knappar än mindre etc. Så småningom lär sig en designer av kunderna och börjar titta på för återkopplingsmönster och lärande, att ha kunskap kan spara tid, energi och resurser.

4 olika tillvägagångssätt

Brainstorming låter människor komma på olika sätt att ta sig an projekt. De är lätta att producera och skissa speciellt i papper, allt du behöver är en penna och ett papper, och vi tar oss an problem från olika vinklar och ritar dem på ett papper. Du kan kombinera och ta bort uppdrag tills du har två eller fyra som är vettiga.

Olika tillvägagångssätt inkluderar teknisk tillvägagångssätt – nya och trendiga tekniska funktioner, användarupplevelse och användbarhetstester hur användare snabbt ska uppnå ett mål och en uppgift innan de blir uttråkade, vilket leder till uppgiftsabort, återigen miljömässigt tillvägagångssätt – vilka är intressenterna? Vilka områden riktar vi oss till? Vilka typer av funktioner är viktiga som lätt kan passa in i en viss intressent och fokuserat område?

5 En grund för testning

Med 3 eller 5 prototyper kan du testa en projektskiss med riktiga användare. Det finns en uppfattning om att vi bara kan testa med en färdig HTML-prototyp, men det är inte sant. Dessutom kan de handritade trådramarna användas för testning. Du kan fråga användarens förslag om knappar de vill klicka på; de kan också få feedback på namntaggar och slutligen kan de hjälpa till att kontrollera om de har rätt visuell hierarki. Testning via wireframe hjälper till att identifiera problem tidigare.

6 Snabbare projekt producerat

Det tar lite tid och pengar att prototypa ett wireframe-baserat projekt, detta beror på att olika grupper av människor var involverade i wireframing-processen. Därför hanteras oförutsedda fel som kan orsaka revisioner innan verkliga projekt. Återigen har projektlayouten setts av kunderna och så är den slutliga designen klar. Detta minskar tiden för flera koncept.

Wire-framing med Photoshop

Gråa lådor och skisser med photoshop.

Steg 1: Samla in ytterligare krav från kunder, sedan "starta" för att färga full photoshop och börja inrama.

Steg 2: Skapa dokumentet baserat på 960 rutnätssystem (1100 pixlar brett och 760 högt) du kan lära dig detta i "ställa in Grid i Photoshop."

Steg 3: Paint Bucket Tool (G) används för att fylla bakgrunden med en ljusgrå färg för att förklara att det kommer att finnas en bakgrundsfärg eller bild.

Steg 4: Välj rektangelverktyget från verktygsfältet och rita en ruta för att symbolisera innehållsområdet. Vi använder 960-nätsystemet; min ritade box kommer att vara 940 pixlar bred. Gör förgrundsfärgen vit med "Paint Bucket Tool" så att den syns mot vår grå bakgrund.

Steg 5: För att göra processen mycket snabbare, bara (skriv bokstaven D) för att ställa in förgrunden till svart eller vilken färg som helst som passar dig och bakgrunden till vit eller vilken färg som helst. Rita sedan svarta rutor för att representera innehållsområdena. Återigen kan du välja att ändra opaciteten för bakgrunderna för att få dem att se gråa ut eller vilken färg som helst.

Steg 6: Inuti rutnätet, lägg till en rektangel för att representera vad som helst. I det här fallet "Inloggningsknapp", skriv opacitetsvärde ("30") för att sänka opaciteten för rektangeln ("30") efter att rektangeln har ritats. Du kan lägga till text med hjälp av typverktyget (T) i textverktygsfältet för att lägga till texten "LOGGA IN" över rutan. Lägg till ytterligare en rektangel för att skapa navigeringsområdet, sänk återigen opacitetsvärdet för att göra det grått.

Steg 7: Lägg till rektanglar skapa innehållskolumnområdena. Använd en layout med två kolumner med en något större huvudinnehållskolumn och en mindre kolumn för startsidans bild. Ställ in opaciteten till 10 % för kolumnerna och la även till ytterligare en rektangel för att representera sidfoten längst ner på sidan.

Sida 8: I innehållsområdet lägg till dummy-texter med Photoshops kommandot Typ > Klistra in Lorem Ipsum.

Andra applikationer

Annan applikation för trådramning som kan användas av icke-grafiska designers för att bygga interaktiva och vackra trådramar.

OmniGraffle

Det är som Micro-Visio, det har mycket fina stenciler som kan användas för högteknologisk design, och funktionerna är fantastiska. Det här är det bästa.

Ninja Mock

Min favorit, GRATIS att använda, den har väldigt fina funktioner och stenciler som kan användas för att bygga ett interaktivt projektkoncept. Det låter användare arbeta offline och online.

Härliga diagram

Detta är bra för nybörjare, det är GRATIS och gränssnitten är lätta att förstå.

Balsamiq

Ett snabbt sätt att förmedla designkoncept till en klient, den har gratis demo som låter användare spara den slutliga produkten. Har alla element som behövs för att skissa såväl som handritningslook som är unik.

Google Drive-ritning

Kan användas för skärmmock-up, det är inte helt av trådramstyp, men det har funktioner som bra samarbetesverktyg, snabbt, gratis och lätt att använda.

Gliffy

Gliffy Den är enklare att använda, den är smidigare och erbjuder diagramfunktioner som flödesscheman och planer, den har Venn-diagram med nätverksprocesser och UML som har export till SVG, PNG och JPEG.

Lumzy

Det är en flashapplikation, den tillhandahåller en samarbetsplattform, den är gratis, snabb och slutligen har den olika typer av kontroller som är lätta att använda.

Moqups

Gratis, snabb och enkel att använda, jag behöver ingen webbläsarplugg, länkning av skärm och knapp görs felfritt så att en person kan publicera en demonstration för kunderna att se och använda. Export av bilder enligt specifikation är tillåten. Förutom detta har standard HTML5 och JavaScript integrerats i Moqups.

Inspelningskälla: instantshift.com