Beste ressurser for å skisse gridbaserte wireframes
Prosessen av utforme et grensesnitt starter alltid med ide generasjon. Dette inkluderer visualisering, undersøkelse av andre nettsteder og rask prototyping. Denne tidlige idefasen er avgjørende for forstå oppsettet og brukeropplevelsen du har tenkt å bygge. Så hvordan skal du faktisk utføre wireframing arbeidet på et nytt prosjekt?
Jeg er en fan av tradisjonelt papir og blyant med ekstra verktøy etter behov. Men digital wireframing er også stor, og det er et levedyktig alternativ for moderne designere. I denne artikkelen vil jeg dele de beste ressursene for begge teknikkene for å hjelpe deg med å lage din egen grid-basert UI wireframes.
Tidlig UI / UX Conceptualization
La oss begynne med å klargjøre forskjellene mellom a wireframe og a prototype. Disse to ordene brukes ofte om hverandre fordi de relaterer seg til samme prosess.
EN wireframe er en enkelt statisk skisse av brukergrensesnittet til en nettside eller en app. Det kan ha callouts å forklare knappetekst, marginer, elementstørrelser eller til og med animasjoner. Men wireframes er bare grove utkast for individuelle sider.
Tilsvarende a prototype er som a flytskjema som viser hvordan ulike sider knytter sammen. Så en prototype kobler wireframes for å demonstrere hvordan forskjellige knapper eller lenker skal føre til andre sider.
Disse definisjonene er ikke skåret i stein, noen designere kan ha sin egen terminologi, og kan være uenig med min eksakte ordlyd. Men dette er hvordan jeg ofte har sett dem beskrevet, og det er hvor mange designere som forstår disse vilkårene best.
Så hva skal du nøyaktig gjøre med disse tidlige konseptuelle stykkene? Er de virkelig nødvendige? Jeg vil si prototyping er ikke alltid nødvendig, men det er en veldig god ide, spesielt for å designe apper med komplekse interaksjoner.
Men wireframing er alltid en god ide for hvert nytt prosjekt. Det hjelper deg fokus på det store bildet uten å bekymre deg for detaljer. Du får en følelse av hvordan den overordnede siden er lagt ut, og dette er uvurderlig når du designer en konkret layout.
Mål for Wireframing
Hver gang du starter et nytt prosjekt, bør du tenke på det hva du prøver å løse. Hvert nettsted er bygget med et bestemt mål i tankene. Mange nettsteder har selv flere mål hvor noen mål er viktigere enn andre.
Bruk wireframing som en veiledning for å hjelpe deg med å finne den beste strategien for fange målet / målene på et nettsted. Dette vil sannsynligvis ikke skje på den første wireframen, så vær forberedt på det skisser mange forskjellige ideer.
Se opp andre lignende nettsteder, og skriv ned deres beste funksjoner. Analyser hvordan innholdet er organisert og hvordan du beveger deg gjennom hver side.
Tenk på wireframes fra en interaktivt synspunkt. Dette er ikke bare vakre bilder. De er representasjoner av digitale grensesnitt, og du vil skisse ideene dine med det i tankene.
Å ha rutenettbaserte ressurser for hånden, enten de er laget av papir eller de er digitale, kan hjelpe mye i rask skissering. La oss nå sjekke ut de beste ressursene for å lage wireframes.
Grid Sketchpads
Du kan alltid starte med grunnleggende miniatyrskisser på skriverpapir bare til kartlegge grove ideer. Personlig begynner jeg vanligvis å jobbe på skriverpapir, fordi denne måten jeg er mindre bekymret for nett og mer om generere ideer.
Dot grid sketchpads er den beste måten å gå hvis du vil rydde opp en ide, og gi den mer struktur. Gitteret hjelper deg anslå avstander mellom elementer på siden, og opprett en slags symmetri i wireframe.
Det er mange flotte produkter der ute hvis du vil start wireframing på papir, for eksempel kommer Rhodia Dot Pad i forskjellige størrelser for daglig bruk. Den kommer bare med 80 sider, men dette er ganske typisk for de fleste grid skissebøker.
Et annet veldig kult og tilpassbart produkt er Dotgrid. Alle Dotgrids elementer er dyrere enn Rhodia-bøker, men de kommer med flere materialer og tilpassede dekkdesigner.
Dotgrid aksepterer selv skreddersydde ordrer som lar deg designe din egen sketchpad. Hver bok inneholder bare under 100 ark, så inkludert foran og bak får du omtrent 200 sider for grid skissering.
Et par andre dotgitter skissebøker jeg vil nevne inkluderer Behance Dot Grid som er innbundet og spiralbundet, selv om det bare inneholder 50 ark papir.
Responsive Design Sketchbook er en av de beste ressursene for webdesignere. Ingen annen produktdesigner ville trenge en responsiv design skissebok, men webdesignere drar stor nytte av friheten til generere ideer på varierende enhetsbredder på toppen av et rutenettoppsett.
Disse responsive designpadsene har også 50 ark på totalt 100 sider, men hver side har fire forskjellige responsive grids som representerer forskjellige bruddpunkter i responsiv design: skrivebord, bærbar PC, nettbrett og smarttelefon.
Selv om designet er tørt i forhold til Dotgrid-bøkene, har ingen andre vurdert responsive skissebøker for webdesignere. Hvis du er i den slags ting, så er det verdt å bestille en til en prøvekjøring.
Hvis du virkelig er i håndlagde ting, og ikke vil bruke penger, kan du også skriv ut egne nettsider med grensesnittskisse. Dette gratis nettstedet tilbyr forskjellige gridmaler som du kan skrive ut, og bruke til håndtegnede wireframes.
Rutenettene kommer i A4- og US-brevstørrelser for forskjellige stiler av skriverpapir. Du kan velge mellom mange alternativer, for eksempel maler for nettleser i full lengde, eller forskjellige iPhone-skjermer.
Alle disse alternativene er flotte, og vel verdt å utforske hvis du er i blyantskisse. Papir er et av de enkleste mediumene for å komme ned nye ideer raskt, så det er ofte det foretrukne valget selv av UI-designere.
Digitale verktøy og webapplikasjoner
Det er så mange gode wireframing-programmer der ute som de nesten ikke kan dekkes uten å risikere analyseforlamning, så la oss nå fokusere på noen av de beste alternativene for nettbasert wireframing.
Først vil jeg nevne at du kan bruke Adobe-verktøy som Illustrator til lag din egen wireframes. Dette er ikke en del av alles arbeidsflyt, og Illustrator er absolutt ikke ledig. Men hvis du allerede jobber med Adobe Creative Cloud, kan det være et godt sted å starte.
1. Moqups
Moqups er et av de beste online verktøyene for Wireframing. Du jobber med en visuell redaktør og et bibliotek med eiendeler for å dra og slippe over hele siden.
Hvert nytt Moqups-prosjekt har en forhåndsdefinert rutenett, og bruker lyse, lilla linjer for å hjelpe deg å snape elementer inn i justering. Det er et flott nettverktøy som gjør design med et rutenett så mye enklere.
Nettstedet fungerer som standard på en fri plan som begrenser brukeren til 300 siderobjekter. Nettstedet har premiealternativer, men å betale en månedlig avgift kan være mer irriterende enn bare å gå med Adobe-verktøy, eller et engangs kjøp av Sketch.
2. Gitter Papr
Grid Papr webapp er helt gratis, og tilbyr både offentlige og private kontoer for wireframes. Du lager et navn på prosjektet ditt, og får din egen unike nettadresse for wireframe som du kan redigere fra hvilken som helst datamaskin.
Hver ny wireframe kommer med et rutenett som lar deg utføre snap-to-grid på alle elementer. Funksjonene er enkle, men de er nok til lag en lo-fi wireframe på få minutter. Bare dra alt du vil ha på siden, og følg rutenettet for å lage en stjernekabel.
3. Wireframe.cc
Wireframe.cc er et av de enkleste og mest minimale verktøyene du kan bruke til wireframing. Den har en urolig grensesnitt med en forhåndsbygget rutenett og organisert verktøylinjer. Du klikker og drar bare for å lage nye elementer på lerretet. Du kan også lagre og dele arbeidet ditt.
Dette er enda et verktøy som tilbys gratis med valgfrie premieplaner. Hver plan faktureres månedlig, så det ligner veldig på Moqups i prisstruktur. Det gratis verktøyet kan brukes fra hvilken som helst datamaskin uten en konto.
4. Mockingbird
Mockingbird er et annet flott alternativ, som tilbyr mye flere funksjoner enn de fleste wireframing verktøy. Du kan komme i gang gratis, men prøveperioden er begrenset til 7 dager. Dette kan være en irritasjon for noen brukere, men verktøyet er veldig utrolig og kjører i alle nettlesere.
Mockingbird har et uendelig bibliotek av UI-elementer som faner, trekkspill, rullegardinmenyer, videospillere og enkle tekstforbindelser. Standardnettverket bruker 960gs grid-systemet, men du kan velge mellom 12, 16 og 24 kolonner.
Endelige ord
Uansett om du velger tradisjonell eller digital wireframing, handler det alltid om kvalitet på produksjonen. Det er mye å lære når du gjør denne typen arbeid, så finn det verktøyet som er mest behagelig for deg.
Å flytte frem det beste å gjøre er bare start wireframing. Få en følelse for det du liker best (papir eller digital), og gjør det til ditt eget. Ressursene i denne artikkelen bør gi deg mer enn nok til å komme i gang med wireframing dine egne digitale grensesnitt.
(Cover bilde av Oykun Yilmaz)
