Prototyper, som koncept, har funnits sedan innan Internet. Typiskt skulle människor som utvecklar en ny fysisk produkt först bygga saken och se till att den fungerade som avsedd. Den första versionen skulle kanske patenteras och visas för potentiella investerare. Om uppfinnaren hade tillgång till egna tillverkningsmedel (om de jobbade i ett existerande företag), skulle de bara gå direkt och träna buggarna tills de hade en produktionsberedd modell.
Kom ihåg de gamla demodiskarna? Du vet, de som följde med program med begränsad funktionalitet, eller den första nivån eller två i ett spel? Prototyper är mycket som demos, bara ännu enklare.
Du bygger en prototyp av en webbplats eller app för att se till att konceptet fungerar som det ska vara
Deras syfte är inte så mycket att få potentiella kunder att köpa en produkt, för att hjälpa dig att göra en bättre. Du bygger en prototyp av en webbplats eller app för att se till att konceptet fungerar som det ska vara. Du använder också den för att visa dina kunder, eller potentiella investerare, hur det ska fungera.
Nyligen har vi sett många appar som är inriktade på att bygga prototyper för webben och för mobila appar. Nu har Adobe Experience Designer släppts och kombinerar funktionaliteten hos en webb-och-mobil-specifik "designapp" med en prototypapp. Med tanke på Adobes rykte och deras marknadsandel inom den professionella sektorn är det uppenbart att många människor som inte har gjort mycket prototyper i det förflutna kan nu ta det steget.
Så, liksom de flesta andra ultimata guider, är den här för nybörjare. Det är för människor som just börjar bygga prototyper med jämna mellanrum, oavsett tidigare erfarenhet (eller brist på det) inom designbranschen.
I den här guiden har vi försökt att täcka de grundläggande principerna framför allt. Därefter finns länkar till guider med ytterligare information, och naturligtvis en stor lång lista med appar och verktyg som du kan arbeta med.
Nu, och designern som har funnits ett tag har förmodligen redan arbetat med wireframes och / eller designade mockups i en bildredigerare. Är det inte prototyper?
Nej. Inte alltid, ändå.
Problemet med wireframes och static mockups är att de är ... bra ... statiska. Det finns mycket information som de helt enkelt inte kan förmedla om en saks funktionalitet. Detta kan leda till missuppfattningar i klienternas, eller till och med dina utvecklare, om hur sakerna ska fungera. Av detta skäl är prototyper vanligtvis interaktiva på något sätt.
De vanligaste undantagen är konceptuella prototyper, och exceptionellt väl dokumenterade statiska prototyper. Vad som skiljer skillnaden är inte interaktivitet i sig, utan förmedling av information om en produkts avsedda funktionalitet.
Som sagt används trådramar och mockups ofta för att göra prototyper, så ingen överger dem.
Närhelst du behöver visa hur något ska fungera. Det är allt.
Det uppenbara exemplet är det för en webb- eller mobilapp. Apps tenderar att ha en skälig bit av funktionalitet som kanske inte lätt kan ses eller härledas från en mockup. Men även relativt statiska, innehållsdrivna webbplatser kan kräva en prototyp.
För en sak har jag haft kunder att titta på mockups för en enkel företagswebbplats och fråga "Okej, så om de klickar på de sakerna högst upp," Om oss "," Tjänster "och saker som tar dem till andra sidor? "eller" När de klickar skicka på kontaktformuläret får jag ett mail? "
Även enkla ... uppgifter är ofta fyllda med osäkerhet ... prototyper kan hjälpa till att ta ut lite av gissningen
Även enkla webbläsningsuppgifter är ofta belägna med osäkerhet för vissa användare och potentiella kunder, så prototyper kan hjälpa till att ta ut lite av gissningen från avloggningsprocessen.
Dessutom är de alltid användbara vid användartestning. När allt kommer omkring, om du kommer att göra användartestning alls, är det bäst att börja med en tidig förhandsvisning av projektet. Det sista du vill ha är att behöva göra stora förändringar när det mesta av arbetet redan har gjorts.
Innan du börjar prototyper, vill du bestämma vilken typ du vill använda. Du kan alltid använda mer än ett slag i ett visst projekt. de flesta designers gör på något ställe.
Den typ av prototyp du väljer måste vara rätt för dig, din klient, projektet och till och med den specifika scenen i projektet du befinner dig i. Nu kan det hända att det är komplicerat, men det är verkligen inte så illa.
Var och en av dessa är avsedda att användas vid olika steg i konstruktionsfasen. Resten är upp till din preferens, och hur bra är din klient på att förstå abstrakta visuella.
Kunder som är mindre erfarna med moderna designprocesser kan förvänta sig att se något som är mer "polerat" så att de kan berätta för dig att logotypen blir större, flytta den linjen en tum till vänster och att deras webbplats inte kommer att vara på latin , så skulle du kunna lägga lite engelska i snälla?
Om du har problem med det, är mer detaljerade prototyper - och mycket kaffe - din bästa satsning. Om inte, kan du använda något lite mer vagt och fokusera på att mocka upp den avsedda funktionaliteten.
Dessa ser ofta inte ut som den färdiga produkten på något sätt form eller form. Med konceptuella prototyper spelar gränssnittets detaljer och layout ingen roll. Det enda du jobbar på är interaktioner och processer.
Målet med någon prototyp är att visa hur något fungerar eller kommer att fungera. På så sätt är det här prototyper i sin renaste form. Det handlar helt enkelt om funktionen, och formen kommer inte ens in i den.
De kan se ut nästan vad som helst, just nu. Du kan använda ett flödesschema, post-it-anteckningar, en PowerPoint-presentation, en video som förklarar processen med råa ikonbaserade illustrationer eller en inspelning av dig själv som talar in i kameran och slår dina armar vilt. Något som får poängen över kommer att göra.
Konceptuella prototyper används vanligen vid det allra första skedet av något projekt. Ditt projekt kanske inte ens har ett namn. Det är bara en idé för en app eller en webbplats, och du kommer att säga saker som: "Ja, jag tycker att det ska fungera så här ..."
Lågfilm prototyper är där du börjar ta med saker som layout och skärmstorlek och andra mer konkreta problem. De görs vanligtvis snabbt och kasseras snabbare.
De är avsedda att ge det snabbaste möjliga sättet att repetera dina idéer tills du och / eller din klient är nöjda med grunderna. Så bli inte bifogad. De flesta av dessa kommer inte att vara runt länge, och det är en bra sak.
Som tidigare nämnts är termen "prototyper med låg säkerhet" ofta utbytbara med "trådramar". Faktum är att detta stadium verkligen sker på papper.
När det är gjort i en app är det lämpligt att använda en som har grundläggande prototyperfunktioner som att koppla till andra skärmar, anteckningar, etc. Wireframing-appar har fördelen att möjliggöra enklare samarbete via Internet, men de är ofta lite långsammare att använda sig av.
Dessa används också i början av ett projekt, men du har förmodligen en affärsmodell och en idé för ett namn nu. Det är dags att sortera genom de myriade idéerna som flyter runt huvudet och iterera tills du har något som du är ganska säker på kommer att fungera.
Ibland kommer en prototyp med låg trovärdighet inte att få poängen tillräckligt bra, och en högfärdighet är för mycket arbete för tillfället. Kanske har du inte helt raffinerat stilguiden, eller inte alla dina grafiska tillgångar har gjorts än.
Det är i alla fall den typ av prototyp du kan använda i början till mitten av designfasen. De är ofta gjorda med prototypprogram, som gör stor användning av simulerad interaktion. De kan också byggas med HTML och CSS, vanligtvis med hjälp av en CSS-ram.
Yup, Bootstrap och Foundation är förmodligen två av de största prototypverktygen där ute just nu.
Du bör använda märkesbilder för dessa om du har det, men bilder kommer att göra. Lager UI-element används vanligtvis för att bygga ut det simulerade gränssnittet snabbare. Många prototypprogram levereras med bibliotek av dessa element för att göra arbetet snabbare.
Sådana prototyper är bra för de mer bokstavliga tänkarna som behöver se en närmande approximation av hur den ska se ut och fungera. Det är lättare för dem att ignorera en rubrik som är "inte färdig än", än en skissformig form som inte ser ut som en webbplatshuvud som de känner till.
För dessa kunder kanske du vill snabbt framföra dina idéer och aldrig visa dem för kunden. Gör sedan en prototyp med medelfidelighet som gör det lättare för dem att se var du går.
Jo, vi är här. Och så är ditt projekt. Du har dina mockups för varje skärm, och allt ser bra ut. Det är dags att visa människor hur det här kommer att fungera, i all sin ära, när någon äntligen integrerar den med back-end-koden.
High-fidelity-prototyper används vanligtvis för att få en slutlig sign-off på designen från klienten. Men du kan inte bara skicka dem till PSD: erna. Det här måste vara interaktivt.
Detta åstadkommes typiskt på ett av två sätt. Vissa använder statisk HTML och CSS för att lägga de färdiga visuella bilderna på ett sätt som är semi-interaktivt. Andra använder appar som importerar bilder, eller till och med råa PSD-filer, och lägger till pseudo-interaktiva funktioner för att efterlikna appens slutliga funktionalitet.
Beroende på appen kan du även demo dessa prototyper på webben (eller på en mobilenhet om du har arbetat med en app).
Nu när vi har gått över de huvudtyper av prototyper du kan göra, är det dags att täcka de verktyg som används för att göra dem. Jag nämnde de flesta av dem i föregående avsnitt och deras grundläggande användning; men jag skulle vilja gå in lite mer detalj.
Återigen ska den metod du väljer vara beroende av vad både du och klienten är bekväma med.
Dessa görs ofta för att sälja en idé innan konkreta arbeten har gjorts. Sålunda är de vanligtvis riktade mot potentiella investerare. De kan också användas för kunder; men det finns ofta effektivare sätt att kommunicera med en klient. Din körsträcka kan variera.
De video- och presentationsbaserade prototyperna som är gjorda för försäljningsplatser brukar följa en kommersiell formel:
Några av dessa prototyper använder bara ikoner, text och illustrationer. Andra har animation; och andra använder fortfarande levande åtgärder för att få poängen över. Och det är väl ... poängen. Så länge du säljer din idé har du gjort det rätt.
Här är ett bra exempel som blandar video prototyper med pappers prototyper.
Wireframes kan göras på papper eller i appar. De betraktas nästan alltid som trovärdiga prototyper, men de kan uppgraderas till medelhöghet om du lägger tillräckligt med tid i dem. Det är sällan värt ansträngningen, dock.
Vanligtvis är trådramar utformade för att både dras och kasseras snabbt. Detta är en av de saker som gör att de ritas på papper så attraktivt. Apps kan vara mycket mer exakta, och du kan enkelt redigera befintliga trådramar; men inget slår hastigheten på en skiss som ingen ska se men själv ... någonsin.
Men som tidigare nämnts har App-baserade trådramar fördelen att de lättare efterliknar funktionaliteten hos ett gränssnitt. Att knacka på en papperstrådsram gör bara ett behagligt thunk-thunk-thunk-ljud.
Det kan vara roligt, men det kan inte förmedla din mening.
Du kan välja att använda båda: papper för att spika ner de mest grundläggande koncepten, och en app för att koka ut den och dela den lätt.
Dessa skiljer sig från trådramar eftersom de är mycket mer än ritningar. I denna typ av prototyp används papper för att göra en fysisk, om än ganska platt modell av gränssnittet. Du kan se en av dessa i videon ovan.
Gränssnittet brukar dras, klippas ut, ibland kopieras för att göra extras, och sedan monteras på ett annat papper. Detta ger dem fördelen av flexibilitet. Där du kan kasta bort ett helt pappersark med en wireframe, kan du bara ordna om elementen i en pappersmodell tills du är nöjd. Fick ett element som är fel storlek, efter att du har ordnat om saker några gånger? Bara klippa en ny version ut.
De tenderar också att känna sig lite mer "riktiga" än en trådram. Även om inget intressant kommer att hända kan en klient röra en pappersmodell. De kan känna det. Den taktila känslan kan ibland förklara mer för en klient än någonting du någonsin kunde visa dem.
Alla behöver fysisk kontakt för att uppnå en bättre förståelse för något föremål. Halvdelen av UX-design handlar om att återskapa känslan av fysisk interaktion med ett digitalt gränssnitt.
Dessa har mycket gemensamt med pappersprototyper. Prototyper gjorda med en app som Invision, eller en av de många andra alternativen där ute (se listan nedan), är vanligtvis gjorda av förkonstruerade gränssnittselement, och sedan pieced samman för att efterlikna slutprodukten.
Skillnaden är givetvis att allt är gjort på skärmen. Åh, och du kan göra det med den slutliga grafiken och branding, vilket gör prototypens utseende exakt som den färdiga produkten. Sedan, som jag nämnde tidigare, kan vissa appar demo produkten i webbläsaren och på mobila enheter.
Detta ger den taktila känslan tillbaka till spel, och du vill ha det här. Om du kan ge dina kunder den känslan, och de gillar det, har du i grunden fått sitt slutgiltiga godkännande.
Naturligtvis, om interaktion är vad du vill, så bygger gränssnittets prototyper med kod ett bra sätt att få det. Nu kan du välja kodbaserade prototyper av en av flera anledningar:
Prototyper i webbläsaren kan vara lite långsammare, speciellt om stora ändringar fortfarande görs. Jag skulle inte rekommendera det för de tidiga stadierna av ett projekt, så det är bäst för prototyper med medelhögt tillförlitlighet.
Ändå är det ett av de bästa sätten att visa upp ett nästan färdigt projekt, om du redan gillar att arbeta med HTML och CSS.
Prototyper med ramar
Det bör noteras att användandet av en ram för att bygga prototyper kan påskynda kodbaserad prototypning avsevärt. Som en bonus, om du använder ramverket som är avsett att användas för slutprodukten, är det mindre kodning att göra övergripande.
Som en sidotal har vissa människor byggt dragreducerande webbsidredigerare baserat på mer populära ramar, som bootstrap och fundament . Med hjälp av dessa kan en gång tänkbart skapa allt från prototyperna till lågprofilen till slutprodukten med kod.
Men vissa använder dem bara för att snabbt bygga prototyper, och sedan använda anpassad kod för slutprojektet. Det fungerar på något sätt.
Nu när vi har täckt alla grunderna är det dags att verkligen komma in i detaljer. Som med nästan allt annat i design och i livet finns det ingen rätt sätt att bygga en prototyp. Det är bara det sätt som fungerar för dig. Med det sagt, framgångsrika designprocesser tenderar att ha några saker gemensamt.
Här är några olika guider till prototyper som fokuserar på olika metoder och trovärdigheter, bara för att komma igång. Ta från dem vad som fungerar för dig, ignorera vad som inte gör det.
(Vi kommer inte att inkludera appspecifika handledning eftersom det bara finns för många.)
Den här guiden från Smashing Magazine fokuserar på en metod för att snabbt bygga prototyper och iterera ofta.
Det här är en mer personlig artikel av Nick Pettit på Treehouse-bloggen som beskriver sitt eget sätt att prototypera.
Här är en tredje artikeln på snabb prototypning. Det verkar vara populärt. Den här är här på Webdesigner Depot, och det beskriver några tips för och fallgropar som är inneboende i processen.
En annan artikel av Smashing Magazine , den här går in mer detaljerat om prototyper med låg säkerhet.
I det här djupet, och ganska uppriktigt fascinerande artikeln Newfangled byrån beskriver sin process i djupet. Det handlar om webbläsarbaserad prototypning i greyscreen, och de gör ett övertygande fall för att prova det.
En annan här på WDD , den här artikeln handlar om att se till att din prototyper har en punkt. Om du bara gör användbarhetsprovningen efter att du har slutfört det slutliga projektet, gör du förmodligen fel.
Du måste ge över några av dina personuppgifter (eller bara lögn) för att få den här eboken , men hej, de ber inte om pengar! Den innehåller mer information om populära prototyper, appbaserade handledning och bästa praxis från stora företag som Google, Apple, Zurb och mer.
Nu är det gjord av folket bakom UXPin, en prototypapp, så de kan vara lite partiska om vilken app du ska använda. Ändå har det massor av bra information.
Okej, så du har teorin. Det är dags att få sprickor på att bygga prototyper. Om du antar att du inte kommer att hålla sig till pappersmodeller eller kod, kommer du att använda en app vid något tillfälle.
De goda nyheterna: det finns massor av bra apps att välja mellan. De dåliga nyheterna: det finns massor av bra apps att välja mellan.
Återigen kommer det alla att komma ner till det sätt du jobbar på. Behöver du möjlighet att demo mobilappar? Behöver du synkronisera dina filer med Google Drive, Dropbox eller någon annan tjänst? Vad sägs om Github integration? Låg-fi, medium eller high-fi? Avancerad skripting?
Apparna som anges nedan kommer att innehålla några eller alla dessa alternativ. Jag listar de mest relevanta funktionerna för var och en för att ge dig en uppfattning om var du ska leta efter.
Det bör noteras att många av dessa är främst kända som trådverktyg. Det är vanligt att använda trådlösa programvara för att integrera de funktioner som behövs för interaktiva prototyper. Din körsträcka med dessa appar kan variera.
Detta är det senaste erbjudandet på marknaden just nu och det är klart att leverera allvarlig konkurrens till en lite mättad marknad. Det är inte bara en trådframställning eller prototyping-app; det är en design app. Det är som Skiss , eller de nudöda Fyrverkeri , men det tar saker ytterligare ett steg genom att låta dig göra prototyper av allt du bara har utformat.
Det är för tillfället bara Mac-bara, och i förhandsgranskningssteget där, men en Windows-version beror före årets slut.
Förutgåva versionen är gratis, när den slutliga versionen skickas kommer den att ingå i Adobes Creative Cloud-prenumerationsplan.
Microsoft powerpoint , Apple Keynote , LibreOffice Impress , och Google Presentationer kan alla användas för att göra prototyper. För det mesta skulle dessa prototyper vara av konceptuell variation. Du kan emellertid efterlikna en viss mängd interaktivitet genom att bara koppla bilder ihop.
Det kan fungera lika bra för prototyper innehållsinriktade webbplatser, och chansen är att du redan använder minst ett av dessa program. Om inte, Impress och Slides är gratis.
Invision är en annan av de "stora namnen", med fler prototyper med hög trovärdighet. Det betonar versionskontroll och stolt över sin realtidssamarbete och återkopplingsfunktioner. Precis som Marvel app, har det också animering, prototypinbäddning, demo-enheter och mer.
Dessutom köpte de nyligen nyligen Silver Flows, ett verktyg som integrerar prototypfunktioner med Sketch. De har för avsikt att använda den för att integrera Sketch med sin online-programvara.
Det finns en fri plan, men du kan bara skapa en enda prototyp. Därefter kan du börja med $ 15USD per månad.
Justin verkar avsiktligt inriktad på att skapa prototyper med hög trovärdighet. Webbplatsen nämner också prototyper mottagliga webbplatser. Det finns också demo i app.
Prissättningen börjar för närvarande på $ 19USD per användare, per månad, om du betalar årligen.
Marvel App är en stor app (ett av de "stora namnen" i prototyper) med en fri plan och måttlig prissättning för alla uppgraderingar. Anmärkningsvärda funktioner inkluderar: support för Photoshop och Sketch, synkronisering med Drive och Dropbox, inbäddning av prototyper i webbsidor) och funktioner som gör dina prototyper till animerade presentationer.
Den här handlar om högpresterande prototyper.
Axure är lite odditet med funktioner för både låg-fi och high-fi prototyper. Det är ännu mer udda, för det är en stationär app med ett engångspris. Den är avsedd för företagsanvändare och stora team, med funktioner för att skriva egen dokumentation, projektledning och mycket mer.
Standardutgåvorna kommer in på $ 289USD per licens.
HotGloo handlar om låg-till-medel-fidelity trådramar och prototyper. Det började som främst en wireframing-app, främst men funktionaliteten för mer avancerade prototyper finns där.
När andra appar fokuserar på prototypprogram, började HotGloo börja med webbdesigners. Så, du kan heller göra det.
Planer börjar vid $ 14USD per månad, och den planen kan innehålla upp till 10 personer som samarbetar.
Annnnnnd vi är tillbaka till high-fidelity-prototyperna med Proto.io . Det har komplexa interaktioner, animering, export, utskrift, inbäddning och demonstrationer alla inbyggda. Priserna börjar vid $ 24USD per månad, men det finns en 15-dagars gratis provperiod om du vill ge det en virvel.
ÖVERFÖRA TILL FAST FORM kommer till oss av Zurb, samma företag som gör stiftelsens ramverk. Den är utformad för att hantera (och få feedback på) allt från skisser till högfärdiga prototyper och mockups.
Istället för att fokusera på animering och andra presentationsverktyg erbjuder Solidify ett överflöd av användarprovningsfunktioner. Du kan köra test i person eller på distans och dela resultaten med ditt team.
POP särskiljer sig från andra appar genom att hjälpa dig att skapa en hybrid av trådrams skisser och digitala prototyper. Du börjar med att ta bilder av dina skisser med en iPhone, Android-telefon eller Windows-telefon och göra dessa skisser till en interaktiv prototyp.
Om du gör det mesta av ditt arbete på papper kan det vara ett bra sätt att dela resultaten. Tjänsten är gratis för två projekt, och sedan börjar planerna på $ 10USD per månad.
Flairbuilder är en annan stationär app, men den har en onlinevisare för projekt. Det verkar vara inriktat på medellånga trådramar och prototyper. Det har funktioner som låter dig lägga till interaktion, det kan göra demo-enheter, och det lägger särskild vikt vid gridbaserad design.
Det prissätts till en engångsavgift på $ 99USD. Det är brant, säkert men mycket billigare än Axure.
Flinto har faktiskt två versioner: det finns en Mac-app och en webbaserad Lite-version. Skillnaden? Mac-versionen ger mer komplexa animationer, funktioner och interaktioner i tabellen. Det låter dig också importera dina tillgångar från Sketch, vilket webbversionen inte kan göra.
Det kostar $ 99USD som ett enstaka köp. Intressant är att Lite-versionen (som kostar 20 USD per månad) innehåller en licens för skrivbordsversionen, vilket ger dig det bästa av båda världarna.
UXPin är en prototypapplikation med medium till högprestanda med alla funktioner som vi har kommit att förvänta oss. Liksom några av de andra har det också realtidssamarbete, inbyggda användbarhetsprovningsfunktioner och projektledning.
Till skillnad från andra appar, syftar UXPin till att vara en enda designbutik. Som i kan du hoppa över Photoshop, Sketch eller vad-har-du, och vrid dina trådramar till mockups. Detta är ambitiöst minst sagt, men om det fungerar som utlovat, kan jag se att det är användbart för många designers.
Prissättning börjar vid $ 19UD per månad, per användare.