Prototyping, som et konsept, har eksistert siden før Internett. Vanligvis vil folk som utvikler et nytt fysisk produkt, først bygge saken, og sørge for at den virket som ønsket. Den første versjonen ville være patentert, kanskje, og vist til potensielle investorer. Hvis oppfinneren hadde tilgang til egne produksjonsmetoder (hvis de for eksempel jobbet i et eksisterende selskap), ville de bare gå rett fram og utarbeide feilene til de hadde en produksjonsskikk modell.
Husk de gamle demodiskene? Du vet, de som fulgte med programmer med begrenset funksjonalitet, eller det første eller to i et spill? Prototyper er mye som demoer, enda enklere.
Du bygger en prototype av et nettsted eller en app for å sikre at konseptet fungerer som ønsket
Deres formål er ikke så mye å få potensielle kunder til å kjøpe et produkt, for å hjelpe deg med å gjøre en bedre. Du bygger en prototype av et nettsted eller en app for å sikre at konseptet fungerer som ønsket. Du bruker også den til å vise kundene dine, eller potensielle investorer, hvordan det skal fungere.
Nylig har vi sett mange apper rettet mot byggprototyper for Internett, og for mobile apps også. Nå har Adobe Experience Designer blitt utgitt, kombinert funksjonaliteten til en web-og-mobil-spesifikk "design app" med en prototypeprogram. Gitt Adobes rykte og deres markedsandel i profesjonell sektor, står det grunnen til at mange mennesker som ikke har gjort mye prototyping tidligere, kan nå ta det skrittet.
Så, som de fleste andre ultimate guider, er denne for nybegynnere. Det er for folk som nettopp begynner å bygge prototyper med jevne mellomrom, uansett tidligere erfaring (eller mangel derav) i designbransjen.
I denne veiledningen har vi forsøkt å dekke de grunnleggende prinsippene fremfor alt. Etter det er det lenker til guider med ytterligere informasjon, og selvfølgelig en stor lang liste over programmer og verktøy som du kan jobbe med.
Nå, og designeren som har eksistert en stund, har sannsynligvis allerede jobbet med wireframes, og / eller designet mockups i noen bildeditor. Er disse ikke prototyper?
Nei. Ikke alltid, uansett.
Problemet med wireframes og statiske mockups er at de er ... vel ... statiske. Det er mye informasjon som de ganske enkelt ikke kan formidle om funksjonaliteten til en ting. Dette kan føre til misforståelser i tankene til klienter, eller til og med utviklere, om hvordan saken skal fungere. Av denne grunn er prototyper vanligvis interaktive på noen måte.
De vanligste unntakene er konseptuelle prototyper, og eksepsjonelt godt dokumenterte statiske prototyper. Det som gjør forskjellen er ikke interaktivitet selv, men formidling av informasjon om et produkts tilsiktede funksjonalitet.
Når det er sagt, brukes wireframes og mockups ofte til å lage prototyper, slik at ingen forlater dem.
Når du trenger å vise hvordan noe skal fungere. Det er det.
Det opplagte eksemplet er det for en web- eller mobilapp. Apper har en tendens til å ha en rettferdig bit av funksjonalitet som kanskje ikke er lett å se eller utledes av en mockup. Imidlertid kan selv ganske statiske, innholdsdrevne nettsteder kreve en prototype.
For det første har jeg fått klienter til å se på mockups for en enkel forretningsside og spørre "Ok, så hvis de klikker på de tingene øverst," Om oss "," Tjenester "og ting, som tar dem til andre sider? ", eller" Når de klikker send på kontaktskjemaet, får jeg en e-post? "
Selv enkle ... oppgavene er ofte fulle av usikkerhet ... prototyper kan bidra til å ta ut noe av gjetningen
Selv enkle nettlesingsoppgaver er ofte fulle av usikkerhet for noen brukere og potensielle kunder, så prototyper kan bidra til å ta ut noen av gjetningene fra sign-off-prosessen.
I tillegg er de alltid nyttige i brukertesting. Tross alt, hvis du skal gjøre brukertesting i det hele tatt, er det best å starte med en tidlig forhåndsvisning av prosjektet. Det siste du vil ha er å gjøre store endringer etter at det meste av arbeidet allerede er gjort.
Før du starter prototyping, vil du finne ut hvilken type du vil bruke. Du kan alltid bruke mer enn én type i et gitt prosjekt; de fleste designere gjør, på et tidspunkt.
Den typen prototype du velger, må være riktig for deg, din klient, prosjektet og til og med den spesifikke fasen av prosjektet du er inne i. Nå kan det hende at det er komplekst, men det er egentlig ikke så ille.
Hver av disse er ment å brukes på forskjellige stadier i designfasen. Resten er opptatt, og hvor god klienten er på å forstå abstrakte visualer.
Kunder som er mindre erfarne med moderne designprosesser, kan forvente å se noe som er mer "polert" slik at de kan fortelle deg at logoet blir større, flytte den linjen en tomme til venstre, og at deres nettsted ikke vil være på latin , så kan du sette noen engelsk i takk?
Hvis du har problemer med det, er mer detaljerte prototyper - og mye kaffe - din beste innsats. Hvis ikke, kan du bruke noe litt mer vag, og fokusere på å mocking opp den tiltenkte funksjonaliteten.
Disse ser ofte ikke ut som det ferdige produktet på noen måte form eller form. Med konseptuelle prototyper spiller ikke detaljene og utformingen av grensesnittet noe ut. De eneste tingene du jobber med er samspill og prosesser.
Målet med enhver prototype er å vise hvordan noe fungerer, eller vil fungere. På den måten er dette prototyping i sin reneste form. Det handler bokstavelig talt om funksjonen, og skjemaet kommer ikke engang inn i den.
De kan se ut som om alt, på dette stadiet. Du kan bruke et flytskjema, post-it-notater, en PowerPoint-presentasjon, en video som forklarer prosessen med rå ikonbaserte illustrasjoner, eller et opptak av deg selv og snakker inn i kameraet og flailing dine armer vilt. Alt som får poenget over, vil gjøre.
Konseptuelle prototyper brukes vanligvis i det aller tidligste stadiet av et hvilket som helst prosjekt. Prosjektet ditt kan ikke engang få et navn. Det er bare en ide for en app eller et nettsted, og du vil si ting som: "Ja, jeg tror det burde sortere slikt arbeid ..."
Lav-fi prototyper er hvor du begynner å inkludere ting som layout og skjermstørrelse og andre mer konkrete bekymringer. De blir vanligvis gjort fort, og kasseres raskere.
De er ment å gi den raskeste mulige måten å gjenta ideene dine til du og / eller kunden er fornøyd med det grunnleggende. Så ikke bli vedlagt. De fleste av disse vil ikke være rundt lenge, og det er en god ting.
Som tidligere nevnt, er begrepet "fidelity prototypes" ofte utskiftbare med "wireframes". Faktisk skjer dette stadiet ofte på papir.
Når det er gjort i en app, er det tilrådelig å bruke en som har grunnleggende prototypingsfunksjoner som å koble til andre skjermer, kommentarer, etc. Wireframing apps har fordelen av å muliggjøre enklere samhandling over Internett, men de er ofte litt tregere å bruk.
Disse brukes også i begynnelsen av et prosjekt, men du har sannsynligvis en forretningsmodell og en ide for et navn nå. Det er på tide å sortere gjennom de myriade ideene som flyter rundt hodet ditt, og lukte til du har noe du sikkert vil jobbe med.
Noen ganger vil en prototype med lav troskap ikke få poenget godt nok, og en høyfidelighet er for mye arbeid for øyeblikket. Kanskje du ikke har fullstendig raffinert stilguiden, eller ikke alle dine grafiske eiendeler har blitt gjort ennå.
I alle fall er dette den typen prototype du kan bruke i begynnelsen til midten av designfasen. De er ofte laget med prototypeprogrammer, som gjør stor bruk av simulert samhandling. De kan også bygges med HTML og CSS, vanligvis ved hjelp av et CSS-rammeverk.
Yup, Bootstrap og Foundation er trolig to av de største prototypingsverktøyene der ute akkurat nå.
Du bør bruke merkevarebilder for disse hvis du har det, men bilder vil gjøre. Lager UI-elementer brukes vanligvis til å bygge ut det simulerte grensesnittet raskere. Mange prototypeprogrammer kommer med biblioteker av disse elementene for å gjøre arbeidet ditt raskere.
Disse typer prototyper er gode for de mer bokstavelige tenkere som trenger å se en nærbilde av hvordan det skal se ut og fungere. Det er lettere for dem å ignorere en header som ikke er ferdig ennå enn en sketchy utseende som ikke ser ut som en nettsidehode som de vet.
For disse klientene vil du kanskje raskt fremheve ideene dine, og aldri vise dem til klienten. Deretter lager du en prototype med middels sikkerhet som gjør det lettere for dem å se hvor du skal.
Vel, vi er her. Og så er ditt prosjekt. Du har dine mockups for hver skjerm, og alt ser bra ut. Det er på tide å vise folk hvordan dette kommer til å fungere, i all sin prakt, når noen endelig integrerer den med back-end-koden.
High-fidelity-prototyper brukes vanligvis for å få en endelig sign-off på design fra klienten. Men du kan ikke bare sende dem PSDene. Disse tingene må være interaktive.
Dette oppnås vanligvis på to måter. Noen bruker statisk HTML og CSS til å sette de ferdigstillede bildene sammen på en måte som er semi-interaktiv. Andre bruker programmer som importerer bilder, eller til og med rå PSD-filer, og legger til pseudo-interaktive funksjoner for å etterligne den endelige funksjonaliteten til appen.
Avhengig av appen kan du til og med demo disse prototyper på nettet (eller på en mobil enhet, hvis du har jobbet på en app).
Nå som vi har gått over de viktigste prototypene du kan lage, er det på tide å dekke verktøyene som brukes til å lage dem. Jeg nevnte de fleste av disse i den forrige delen, og deres grunnleggende bruk; men jeg vil gjerne gå inn i litt mer detaljert.
Igjen, måten du velger, bør avhenge av hva både deg og klienten er komfortabel med.
Disse blir ofte laget for å selge en ide før konkret arbeid har blitt gjort. Dermed er de vanligvis rettet mot potensielle investorer. De kan også brukes til klienter; men det er ofte mer effektive måter å kommunisere med en klient på. Kjørelengden din kan variere.
Video- og presentasjonsbaserte prototyper som er laget for salgssteder, følger vanligvis en kommersiell formel:
Noen av disse prototyper bruker bare ikoner, tekst og illustrasjoner. Andre har animasjon; og fortsatt andre bruker live action for å få poenget over. Og det er vel ... poenget. Så lenge du selger ideen, har du gjort det riktig.
Her er et fantastisk eksempel som blander video prototyping med papir prototyping.
Wireframes kan gjøres på papir eller i apper. De er nesten alltid betraktet som prototyper med lav troskap, selv om de kan oppgraderes til middels troskap hvis du legger nok tid til dem. Det er sjelden verdt innsatsen, skjønt.
Vanligvis er wireframes designet for å bli trukket og kastet raskt. Dette er en av de tingene som gjør at de tegner dem på papir så attraktivt. Apper kan være langt mer presise, og du kan enkelt redigere eksisterende wireframes; men ingenting slår hastigheten på en skisse som ingen skal se, men deg selv ... noensinne.
Som tidligere nevnt har app-baserte wireframes imidlertid fordelen av lettere å etterligne funksjonaliteten til et grensesnitt. Tapping på en papir wire-ramme vil bare gjøre en hyggelig thunk-thunk-thunk lyd.
Det kan være morsomt, men det kan ikke formidle din mening.
Du kan velge å bruke begge: papir for å spikre ned de mest grunnleggende konseptene, og en app for å kutte den ut, og dele den lett.
Disse er forskjellige fra wireframes fordi de er mye mer enn tegninger. I denne typen prototype brukes papir til å lage en fysisk, om fortsatt ganske flat, modell av grensesnittet. Du kan se en av disse i videoen ovenfor.
Grensesnittelementene blir vanligvis trukket, kuttet ut, noen ganger kopiert for å lage tillegg, og deretter samlet på et annet stykke papir. Dette gir dem fordelen av fleksibilitet. Hvor du kan kaste bort et helt ark med en wireframe, kan du bare omorganisere elementene i en papirmodell til du er fornøyd. Fikk et element som er feil størrelse, etter at du har re-arrangert ting noen ganger? Bare kutt en ny versjon ut.
De har også en tendens til å føle seg litt mer "ekte" enn en ledningsramme. Selv om intet interessant vil skje, kan en klient røre en papirmodell. De kan føle det. Den taktile følelsen kan noen ganger forklare mer for en klient enn noe du noen gang kan vise dem.
Alle trenger fysisk kontakt for å få bedre forståelse for ethvert objekt. Halvdelen av UX-design handler om å skape følelsen av fysisk interaksjon med et digitalt grensesnitt.
Disse har mye felles med papirprototyper. Prototyper laget med en app som Invision, eller en av de mange andre alternativene der ute (se listen nedenfor), er vanligvis laget av forhåndsdefinerte grensesnittelementer, og deretter kuttes sammen for å etterligne sluttproduktet.
Forskjellen er selvsagt at alt er gjort på skjermen. Åh, og du kan gjøre det med den endelige grafikken og merkevaren, slik at prototypen ser ut akkurat som det ferdige produktet. Da, som nevnt tidligere, kan noen apper demo produktet i nettleseren og på mobile enheter.
Dette bringer den taktile følelsen tilbake i spill, og du vil ha dette. Hvis du kan gi kundene dine den følelsen, og de liker det, har du i utgangspunktet fått sin endelige godkjenning.
Selvfølgelig, hvis interaksjon er det du vil, så bygger grensesnittprototyper med kode en god måte å få det på. Nå kan du velge kodebaserte prototyper av en av flere grunner:
Prototyping i nettleseren kan være litt tregere, spesielt hvis det fortsatt gjøres store revisjoner. Jeg vil ikke anbefale det for de tidlige stadiene av et prosjekt, så det er best for medium-to-high fidelity prototyper.
Likevel er det en av de beste måtene å vise frem et nesten ferdig prosjekt, hvis du allerede liker å jobbe med HTML og CSS.
Prototyping med rammer
Det bør bemerkes at bruk av et rammeverk for å bygge prototyper kan øke hastigheten på kodebasert prototyping betydelig. Som en bonus, hvis du bruker rammen som er ment å bli brukt til sluttproduktet, er det mindre koding å gjøre samlet.
Som en side notat, har noen mennesker bygget dra 'n' drop nettside redaktører basert på mer populære rammer, som Bootstrap og Fundament . Ved å bruke disse kan en gang tenkelig lage alt fra prototyper med lavt troverdighet til sluttproduktet med kode.
Noen bruker imidlertid bare dem til å bygge prototyper raskt, og deretter bruke tilpasset kode for det endelige prosjektet. Det fungerer uansett.
Nå som vi har dekket alle grunnleggende, er det på tide å virkelig komme inn på detaljer. Som med nesten alt annet i design, og i livet, er det ingen riktig måte å bygge en prototype på. Det er bare måten som fungerer for deg. Når det er sagt, har vellykkede designprosesser en tendens til å ha noen få ting til felles.
Her er noen forskjellige guider til prototyping som fokuserer på forskjellige metoder og troverdigheter, bare for å komme i gang. Ta fra dem hva som fungerer for deg, ignorere hva som ikke gjør det.
(Vi vil ikke inkludere appspesifikke opplæringsprogrammer fordi det er rett og slett for mange.)
Denne veiledningen fra Smashing Magazine fokuserer på en metode for å bygge prototyper raskt, og iterating ofte.
Dette er en mer personlig artikkel av Nick Pettit på Treehouse bloggen som skisserer sin egen tilnærming til prototyping.
Her er en tredje artikkel på rask prototyping. Det ser ut til å være populært. Denne er her på Webdesigner Depot, og det skisserer et par tips for og fallgruvene som er knyttet til prosessen.
En annen artikkel av Smashing Magazine , dette går i større detalj om prototyping med lav troskap.
I denne dybden, og helt ærlig fascinerende artikkel Newfangled byrå beskriver deres prosess i dybden. Det dreier seg om nettleserbasert greyscreen prototyping, og de gjør et overbevisende tilfelle for å prøve det ut.
En annen her på WDD , denne artikkelen handler om å sørge for at prototypen din har et poeng. Hvis du bare gjør brukervennlighetstesten din etter at du har fullført det endelige prosjektet, gjør du det sannsynligvis feil.
Du må gi over noen av dine personlige opplysninger (eller bare lyve) for å få denne boken , men hei, de ber ikke om penger! Den inneholder mer informasjon om populære prototypemetoder, appbaserte opplæringsprogrammer og beste praksis fra store selskaper som Google, Apple, Zurb og mer.
Nå er det laget av folkene bak UXPin, en prototypeprogram, så de kan være litt partisk om hvilken app du bør bruke. Likevel har det mange gode opplysninger.
Ok, så du har teorien. Det er på tide å få sprekker på å bygge prototyper. Forutsatt at du ikke kommer til å holde fast i papirmodeller eller kode, vil du bruke en app på et tidspunkt.
Den gode nyheten: Det er mange flotte apps å velge mellom. De dårlige nyhetene: Det er mange flotte apps å velge mellom.
Igjen vil det hele komme ned til måten du jobber på. Trenger du muligheten til å demo mobilapper? Trenger du å synkronisere filene dine med Google Disk, Dropbox eller en annen tjeneste? Hva med Github-integrasjon? Lav-fi, medium eller high-fi? Avansert skripting?
Appene som er oppført nedenfor, inneholder noen eller alle disse alternativene. Jeg vil liste de mest relevante funksjonene for hver og en for å gi deg en ide om hvor du skal se.
Det skal bemerkes at mange av disse først og fremst er kjent som wire-innramming verktøy. Det er vanlig for wireframing-programvare å integrere funksjonene som trengs for interaktive prototyper. Kilometertallet ditt med disse appene kan variere.
Dette er det nyeste tilbudet på markedet akkurat nå, og det er klart å levere alvorlig konkurranse til et noe mettet marked. Det er ikke bare en wire-innramming eller prototyping app; det er en design app. Det er som Skisse , eller den nådøde Fyrverkeri , men det tar ting et skritt videre ved å la deg lage prototyper ut av alt du nettopp har designet.
Det er for øyeblikket kun Mac-kun, og i forhåndsvisningstrinnet ved det, men en Windows-versjon forfaller før årsskiftet.
Forutgivelsesversjonen er gratis, når den endelige versjonen er sendt, vil den være en del av Adobes Creative Cloud-abonnementsplan.
Microsoft PowerPoint , Apple Keynote , LibreOffice Impress , og Google Slides kan alle brukes til å lage prototyper. For det meste vil disse prototyper være av konseptuelle variasjonen. Du kan etterligne en viss mengde interaktivitet, skjønt, ved bare å koble lysbildene sammen.
Det kan fungere like bra for prototyping av innholdsdrevne nettsteder, og sjansen er at du allerede bruker minst ett av disse programmene. Hvis ikke, er Impress og Lysbilder gratis.
Invision er et annet av de "store navnene", med flere prototyper med høy troskap. Den legger vekt på versjonskontroll, og stoler seg på samarbeidet og tilbakemeldingsfunksjonene i sanntid. Som Marvel app, har den også animasjon, prototype-embedding, demo-enheter og mer.
I tillegg kjøpte de nettopp nylig Silver Flows, et verktøy som integrerer prototypefunksjonalitet med Sketch. De har til hensikt å bruke den til å integrere Sketch med sin online programvare.
Det er en gratis plan, men du kan bare lage en enkelt prototype. Deretter kan du starte med $ 15USD per måned.
Justin synes bevisst rettet mot å skape prototyper med høy fidelity. Nettstedet nevner også prototyping responsive nettsteder. Det er også demonstrasjoner i appen.
Prissetting starter for øyeblikket på $ 19USD per bruker, per måned, hvis du betaler årlig.
Marvel App er en stor app (et av de "store navnene" i prototyping) med en gratis plan og moderat prising for alle oppgraderinger. Merkbare funksjoner inkluderer: støtte for Photoshop og Sketch, synkronisering med Drive og Dropbox, integrering av prototyper på nettsider) og funksjoner som gjør prototyper dine til animerte presentasjoner.
Denne handler om sikkerhetsprototyper.
Axure er litt rar med funksjoner for både lav-fi og high-fi prototyping. Det er enda mer merkelig, fordi det er en stasjonær app med engangspris. Den er designet for bedriftsbrukere og store lag, med funksjoner for å skrive egen dokumentasjon, prosjektledelse og mer.
Standardversjonene kommer inn på $ 289USD per lisens.
HotGloo handler om lav-til-medium-trofaste trådrammer og prototyper. Det startet som først og fremst en wireframing-app, først og fremst, men funksjonaliteten for mer avanserte prototyper er der.
Hvor andre programmer fokuserer på prototypingapp, fikk HotGloo sin start med webdesignere. Så, du kan heller gjøre det.
Planene starter på $ 14USD per måned, og denne planen kan omfatte opptil 10 personer som samarbeider.
Annnnnnd vi er tilbake til high-fidelity prototyping med Proto.io . Det har komplekse interaksjoner, animasjon, eksportering, utskrift, innlemming og demonstrasjoner av alt som er bygget inn. Prisene starter på $ 24USD per måned, men det er en 15-dagers gratis prøveversjon hvis du vil gi det en virvel.
størkne er hentet til oss av Zurb, det samme firmaet som lager stiftelsens rammeverk. Den er designet for å håndtere (og få tilbakemelding på) alt fra skisser til high-fidelity prototyper og mockups.
I stedet for å fokusere på animasjon og andre presentasjonsverktøy, tilbyr Solidify en overflod av brukertestingsfunksjoner. Du kan kjøre tester i person eller eksternt, og dele resultatene med teamet ditt.
POP skiller seg fra andre apper ved å hjelpe deg med å lage en hybrid av wire-frame skisser og digitale prototyper. Du starter med å ta bilder av skissene dine med en iPhone, Android-telefon eller Windows-telefon, og snu disse skissene til en interaktiv prototype.
Hvis du gjør det meste av arbeidet ditt på papir, kan det være en fin måte å dele resultatene med. Tjenesten er gratis for to prosjekter, og deretter begynner planene på $ 10USD per måned.
Flairbuilder er en annen desktop app, selv om den har en online seer for prosjekter. Det ser ut til å være rettet mot mellomfidelity wireframes og prototyper. Den har funksjoner som gjør at du kan legge til interaksjon, det kan gjøre demo-enheter, og det legger særlig vekt på nettbasert design.
Det er priset til engangsavgift på $ 99USD. Det er bratt, sikkert, men mye billigere enn Axure.
Flinto har faktisk to versjoner: det er en Mac-app og en web-basert Lite-versjon. Forskjellen? Mac-versjonen gir mer komplekse animasjoner, funksjoner og samspill til bordet. Det lar deg også importere eiendeler fra Sketch, som webversjonen ikke kan gjøre.
Det koster $ 99USD som et engangs kjøp. Interessant, Lite-versjonen (som koster 20USD i måneden) inneholder en lisens for desktopversjonen, og gir deg det beste fra begge verdener.
UXPin er en prototypeprogram med medium til høy troskap med alle funksjonene som vi har kommet til å forvente. Som et par av de andre har det også sanntidssamarbeid, innebygde brukervurderinger og prosjektledelse.
I motsetning til andre apps, har UXPin som mål å være en one-stop designbutikk. Som i, kan du hoppe over Photoshop, Sketch, eller hva-ha-deg, og skru dine ledningsrammer inn i mockups. Dette er ambisiøst å si mildt, men hvis det virker som lovet, kan jeg se at det er nyttig for mange designere.
Prissetting starter på $ 19UD per måned, per bruker.