Dårlige vaner helt tilbake i tiden, da vi skaffet nye prosjektideer og brukerkravdokumenter fra våre kunder, skissere kanskje noen ideer og hoppet inn i spennende Photoshop-design.

Vår begrunnelse for denne metoden var å treffe design gate run rett ut umiddelbart for å gi tid til revisjon.

Etter en tid innså vi at vi brukte mye tid på å designe, hvorfor? Revisjoner tok hele tiden. Revisjonene var kompliserte; vi måtte justere oppsett, grafikk og typografi. Alt var frustrerende, katastrofalt for prosjekttidslinjer, bekymringsfullt for kundene og slitsomt for oss. Det tok en stund før vi innså at vi trenger en annen tilnærming. Vi bestemte oss for å gå tilbake til «Square One»-innledende prosess vi ignorerte tidligere «Wire-framing». Vi startet med Gray-boxes wireframes inkluderte den i designprosessen vår, så flyttet vi til en annen prosess og la den til designprosessen. På slutten falt modellen på plass, takket være "Wire-framing", det sparte tid og hjalp oss med å løse problemer tidligere. Av den grunn velger jeg wire-framing som den "første porten" i designprosessen.

Wire-framing brukeropplevelsesdesign

Hvem vet, på det tidligste stadiet kan du gjenkjenne potensielle brukervennlighetsutfordringer i designene dine. Noen ganger flott prosjektkonsept med strenge (URS) brukerkrav, i løpet av den innledende prosessen ser de ut til å falle på plass. Igjen skjer verre når vi begynner å legge planer for papirer, "Hva skjedde?" vi ignorerte wire-frame som tar bare noen få minutter å skissere en plan enn fargerik Photoshop. Bedre å begynne å justere tidligere enn senere.

Wire-framing som et tidsstyringsverktøy

Tidsstyring er en viktig teknikk for hvert vellykket prosjekt hvis et prosjekt er på en stram tidslinje; Du tenker kanskje "hvorfor kaste bort tiden min på trådramming, så det er best å hoppe over til fargerik Photoshop." Vi gjorde den feilen i utgangspunktet, men i stedet endte vi opp med å revidere hele konseptet som det var tidkrevende og sløsing med ressurser. Å revidere grå bokser og skisser er mye enklere enn å gjennomgå fullfargedesign med flere komplekse elementer.

Trådrammen brukes til å lage en faktisk og korrekt dimensjon på en side. Når den er godkjent av klienten, trenger vi bare et grafisk middel for å øke utseendet. Trikset er at hvis wireframes, skisser og grå bokser er i orden, så har vi ikke tid til revisjon. I stedet vil vi hoppe til neste prosess "visuelle" del.

Wire-framing for klientbinding

Sidelayout med farger kan noen ganger være en distraksjon for kundene våre; kanskje en klient avskyr fargen "lilla" kundens følelser finner det vanskelig å fokusere på planen. Tilbakemeldingene deres kan være negative på grunn av følelsene deres. De kan ende opp med å spørre om "Start på nytt", designene kan være i orden, men det eneste som irriterer kunden er den "lilla" fargen. Derfor er bruk av grå bokser og skisser en effektiv måte, fordi det vil eliminere distraksjoner av elementer.

En wireframe vil hjelpe med å få tilbakemelding angående dimensjonering, layout uten at klienten kun fokuserer på utseende. Å bruke wireframe-tilnærming hjelper oss også å vite mer om en kunde, hva de liker? Stilene, typografien osv., presentasjon med trådramme, er som en bindingstid, deres tilbakemeldinger og interaksjon gjør at du vet om dem og deres design og hva du kan forvente i fremtidige faser av prosjektet? Når du skisserer et grovt utkast på papir, vil klienten fortsette å kommentere om ikoner, knapper, fonter osv. De vil ende med å si at de foretrekker større knapper enn mindre osv. Til slutt lærer en designer av klientene og begynner å se etter tilbakemeldingsmønstre og lær, å ha kunnskap kan spare tid, energi og ressurser.

7 fascinerende ting om Wireframes

1 Øker teamarbeidserfaring

Trådrammeprosessen bringer ulike grupper mennesker med ulike ferdigheter sammen; alle er en del av prosjektprosessen. Prosjektledere, designere, utviklere kommer alle sammen for å oppnå et mål. Dette er verdifullt fordi det forbedrer teamarbeidet og får lagkameratene til å forstå hverandre mer. Med "fossefall"-modellen kan prosjekter faktisk brytes.

2 Transparent kommunikasjon

Jevn kommunikasjonsflyt, vi pleide å lide der noen teammedlemmer liker utviklere som ikke er inkludert i prosjektdiskusjonen. Ved å inkludere hver enkelt person i wireframing-prosessen så er problemet sortert. En utvikler kan oppdage et problem tidligere som kan bli savnet i e-poster og chatter. På den annen side er spesifikasjonene elegante og vakre, men vanskeligere å visualisere.

3 Engasjer klienter

En wireframe vil hjelpe med å få tilbakemelding angående dimensjonering, layout uten at klienten kun fokuserer på utseende. Å bruke wireframe-tilnærming hjelper oss også å vite mer om en kunde, hva de liker? Stilene, typografien osv., presentasjon med trådramme, er som en bindingstid, deres tilbakemeldinger og interaksjon gjør at du vet om dem og deres design og hva du kan forvente i fremtidige faser av prosjektet? Når du skisserer et grovt utkast på papir, vil klienten fortsette å kommentere om ikoner, knapper, fonter osv. De vil ende opp med å si at de foretrekker større knapper enn mindre osv. Etter hvert lærer en designer av klientene og begynner å se på for tilbakemeldingsmønstre og læring kan det å ha kunnskap spare tid, energi og ressurser.

4 forskjellige tilnærminger

Brainstorming lar folk komme opp med ulike måter å takle prosjekter på. De er enkle å produsere og skissere spesielt i papir, alt du trenger er en blyant og et stykke papir, og vi takler problemer fra forskjellige vinkler og tegner dem på et stykke papir. Du kan kombinere og slette oppgaver til du har to eller fire som gir mening.

Ulike tilnærminger inkluderer teknisk tilnærming – nye og trendende teknologiske funksjoner, brukeropplevelse og brukervennlighetsteste hvordan brukere skal oppnå et mål og en oppgave raskt før de kjeder seg, og dermed fører til oppgaveabort, igjen miljømessig tilnærming – hvem er interessentene? Hvilke felt retter vi oss mot? Hva slags funksjoner er viktige som lett kan passe inn med en bestemt interessent og fokusert felt?

5 Et grunnlag for testing

Med 3 eller 5 prototyper kan du teste en prosjektskisse med ekte brukere. Det er en oppfatning om at vi bare kan teste ved å bruke fullført HTML-prototype, men dette er ikke sant. Dessuten kan de håndtegnede wireframes brukes til testing. Du kan spørre brukerens forslag om knapper de vil klikke på; de kan også få tilbakemelding på navnemerker og til slutt kan de hjelpe til med å sjekke om de har det rette visuelle hierarkiet. Testing via wireframe hjelper til med å identifisere problemer tidligere.

6 Raskere prosjekt produsert

Det tar litt tid og penger å prototype et wireframe-basert prosjekt, dette er fordi forskjellige grupper av mennesker var involvert i wireframing-prosessen. Derfor behandles uforutsette feil som kan føre til revisjoner før det virkelige prosjektet. Igjen har prosjektoppsettet blitt sett av klienter, og dermed er det endelige designskiltet ferdig. Dette reduserer tid for flere konsepter.

Wire-framing med Photoshop

Grå bokser og skisser med photoshop.

Trinn 1: Samle ytterligere krav fra klienter, og deretter "fyr opp" for å farge full photoshop og begynn wire-framing.

Trinn 2: Lag dokumentet basert på 960 rutenettsystem, (1100 piksler bredt og 760 høyt) du kan lære dette i "setting Grid i Photoshop."

Trinn 3: Paint Bucket Tool (G) brukes til å fylle bakgrunnen med en lys grå farge for å forklare at det vil være en bakgrunnsfarge eller et bilde.

Trinn 4: Velg rektangelverktøyet fra verktøylinjen og tegn en boks for å symbolisere innholdsområdet. Vi bruker 960-nettsystemet; min tegnede boks vil være 940 piksler bred. Gjør forgrunnsfargen hvit med "Paint Bucket Tool" slik at den vises mot vår grå bakgrunn.

Trinn 5: For å gjøre prosessen mye raskere, bare (skriv bokstaven D) for å sette forgrunnen til svart eller hvilken som helst farge som passer deg og bakgrunnen til hvit eller hvilken som helst farge. Tegn deretter svarte bokser for å representere innholdsområdene. Igjen kan du velge å endre opasiteten til bakgrunnene for å få dem til å virke grå eller en hvilken som helst farge.

Trinn 6: Inne i rutenettet legger du til et rektangel for å representere hva som helst. I dette tilfellet "Login Button", skriv inn opasitetsverdi (“30") for å senke opasiteten til rektangelet (“30”) etter at rektangelet er tegnet. Du kan legge til tekst ved å bruke tekstverktøyet (T) i tekstverktøylinjen for å legge til teksten "LOGG PÅ" over boksen. Legg til et annet rektangel for å lage navigasjonsområdet, igjen, senk opasitetsverdien for å gjøre den grå.

Trinn 7: Legg til rektangler opprett innholdskolonneområdene. Bruk en to-kolonne layout med en litt større hovedinnholdskolonne og en mindre kolonne for startsidebildet. Sett opasiteten til 10 % for kolonnene, og la også til et annet rektangel for å representere bunnteksten nederst på siden.

Side 8: Legg til dummy-tekster i innholdsområdet ved å bruke Photoshops Type > Lim inn Lorem Ipsum-kommandoen.

Andre applikasjoner

Andre applikasjoner for trådramming som kan brukes av ikke-grafiske designere til å bygge interaktive og vakre trådrammer.

OmniGraffle

Det er som Micro-Visio, det har veldig fine sjablonger som kan brukes til høyteknologisk design, og funksjonene er fantastiske. Dette er det beste.

Ninja Mock

Min favoritt, GRATIS å bruke, den har veldig fine funksjoner og sjablonger som kan brukes til å bygge et interaktivt prosjektkonsept. Det lar brukere jobbe offline og online.

Nydelige diagrammer

Dette er bra for nybegynnere, det er GRATIS og grensesnitt er enkle å forstå.

Balsamiq

En rask måte å formidle designkonsepter til en klient, den har gratis demo som lar brukere lagre det endelige produktet. Har alle elementene som trengs for skisser samt håndtegningsutseende som er unikt.

Google Drive-tegning

Kan brukes til skjerm-mock-up, det er ikke helt trådramme, men det har funksjoner som godt samarbeidsverktøy, raskt, gratis og enkelt å bruke.

Gliffy

Gliffy Den er enklere å bruke, den er slankere og tilbyr diagramfunksjoner som flytskjemaer og planer, den har Venn-diagrammer med nettverksprosesser og UML som har eksport til SVG, PNG og JPEG.

Lumzy

Det er en flash-applikasjon, den gir samarbeidsplattform, den er gratis, rask og til slutt har den forskjellige typer kontroller som er enkle å bruke.

Moqups

Gratis, rask og enkel å bruke, jeg trenger ikke en nettleserplugg, kobling av skjerm og knapp gjøres feilfritt slik at en person kan publisere en demonstrasjon som klientene kan se og bruke. Eksport av bilder i henhold til spesifikasjon er tillatt. Bortsett fra dette er standard HTML5 og JavaScript integrert i Moqups.

Opptakskilde: instantshift.com