7 Prototypverktyg för webbdesigners

Känner du skillnaden mellan trådmodell, attrapp och prototyp? Dessa tre termer används ofta utbytbart för att betyda samma sak. Problemet är, det borde du inte.

en trådmodell är en statisk, lågtrohetsdefinition av en design. Det ger en översikt över utseendet eller formen på en föreslagen design, men inte dess funktionalitet eller känsla. en attrapp ger en större mängd information. Mockups är mellan- och högfidelighetsbilder av en föreslagen design. Mockups är också statiska, och de bevisar inte interaktivitet.

prototyper, å andra sidan är dynamisk. Dom kan representera din slutliga design till nästan vilken grad av detalj du väljer. En prototyp kan till och med testas som om det var den egentliga slutprodukten, eftersom det kan ge samma utseende och känsla. Av de tre skulle den som skulle få ut det mesta av ett intryck vara prototypen.

Hur man bygger en prototyp

Nu är målet med en prototyp att exakt bevisa utvalda designfunktioner. Prototyper för webb- eller appprogram utvecklas typiskt i tre steg:

1. Sidan flyter (hur en användare kan navigera) skissas ut.
2. Flera low-reliability versioner av varje sida är byggda och användbarhetsprovade.
3. Från lärdomar, detaljer läggs till för att skapa en högfärdighetsmodell av din föreslagna design.

I det här inlägget kommer vi att kolla in några prototypverktyg som kan hjälpa till att underlätta processen, göra det enklare och för att du ska snabba ut prototyperna mycket snabbare. Här är 7 prototypverktyg att prova.

InVision

InVision är enligt Forbes nära toppen av listan över privata molnföretag i världen, tillsammans med armaturer som Slack, Dropbox och MailChimp. Denna ära beror delvis på InVisions "alltid på" -plattform, vilket gör samarbete, återkoppling och byggandet av high-fidelity-prototyper så enkelt.

Med InVision är det möjligt att hantera projektskärmar och statuser från en enda plats, samarbeta i realtid och upprätthålla versionsstyrning medan bygga pixel-perfekta prototyper som har utseendet på riktiga webb- och mobilappar. Med InVision kan du även genomföra gratis, obegränsad testning på dina prototyper.

För att upptäcka vad designvärlden och InVisions mer än 2 miljoner användare älskar om den här plattformen, anmäler sig till en kostnadsfri provperiod. Klicka bara på InVision-länken för att komma igång.

Pidoco

Oavsett om du behöver en click-through wireframe, eller a helt interaktiv UX prototyp, Pidoco tar dig snabbt och utan krångel. Med den enkla skissfunktionen kan du bygga en uppsättning anpassade mallar, skapa interaktiva element du behöver, presentera din prototyp till andra, och vänta på deras återkoppling - som inte borde vara lång i kommande.

Pidoco ger dig allt som behövs för att bygga prototyper med fidelity för att få fram snabb återkoppling eller högfärdighetsmodeller som har samma utseende som din föreslagna webb- eller appdesign. Detta verktyg kommer även att generera specifikationsdokument som kan tjäna som ritningar för teammedlemmar, eller kan presenteras för kunder för avmälning.

Proto.io

Proto.io kommer att vara ett idealiskt val om du behöver ett kvalitetsprototypverktyg för att hjälpa dig med din mobilappdesign. Proto.io är en dedikerad mobil prototypplattform som körs på de flesta webbläsare, kräver ingen kodning, och gör det möjligt för dig att distribuera helt interaktiva mobilapprototyper och simuleringar som har utseendet på den riktiga saken.

Tre delar kombinerar för att kompensera detta verktyg: en instrumentpanel, en redaktör och en spelare. Instrumentpanelen fungerar som din huvudstyrning och projektledare. Redaktören består av en uppsättning verktyg för att emulera din design och bygga in interaktionerna. Med spelaren kan du visa din prototyp i din webbläsare, interagera med den, begära feedback och testa den på riktiga mobila enheter. Om mobilappdesign är din sak är det här verktyget för dig.

WebFlow

För den som söker en allt-i-ett-design, prototyper och utvecklingsverktyg, sökningen slutar här. Först av allt, med Webflow, kan du bygga och testa high-fidelity-prototyperna du behöver hjälpa till med din design. Men här är var skillnaden kommer in - allt du bygger bygger på produktionsklar HTML / CSS och JavaScript. Resultatet?

Du kan rör sig smidigt från en helt interaktiv prototyp till en utvecklad produkt. Prototyp, design och utveckling kommer i samma paket, som också innehåller de nödvändiga samarbetsfunktionerna och kapaciteterna. Och förresten, allt är lyhörd också.

PowerMockup

Denna speciella prototypverktygssats utvecklades med PowerPoint-användaren i åtanke. PowerMockup är faktiskt en PowerPoint-tillägg som du kan använda till skapa wireframes och mockups för webbplatser, stationära appar eller mobilappar. Det handlar helt enkelt om att välja former och designelement från PowerMockup-biblioteket och släppa dem på en PowerPoint-bildruta.

Då kan du använd PowerPoints bildspel och animeringsfunktioner för att förhandsgranska din design med andra. Du kan också lägga till egna former och element i biblioteket och dela dem med andra PowerPoint-användare om du vill.

Lucidchart

Lucidchart är en onlineapplikation med en bibliotek med designelement och enhetstyper från vilken du snabbt kan bygga wireframes eller mockups av din webbplats eller mobilappdesign. Den har en rent, användarvänligt gränssnitt, och den har drag- och släppteknik, interaktiva demonstrationsmöjligheter, och en lagteknik som låter dig bygga mycket komplexa simuleringar.

Lucidchart är också ett användbart verktyg för skapa professionella projektflödesdiagram och flödesdiagram, och dess samarbetsfunktioner fungerar smidigt och är lätta att använda.

HotGloo

Att emulera en designs förslag till UX kan ibland ge utmaningar. Därför behöver du HotGloo. Med en enorm element bibliotek och UI-widget galleri, exportera och dela funktioner samt samarbete med gruppmedlemmar får du igång på nästan ingen tid.

Om du har några frågor eller behöver hjälp, har de en fullständig dokumentation samt hjälpsamma video tutorials och levande webinarier tillgängliga. Skapa dina prototyper direkt i din webbläsare, dela dem eller förhandsgranska dem på vilken mobil enhet som helst. Du kan till och med exportera ditt arbete till HTML. Wireframing & prototyping har aldrig varit enklare och roligare!

Wrapping upp det

Det finns gott om att välja från den här listan från verktyg avsedda för speciella ändamål, till ett allt-i-ett-verktyg som är definitivt värt en titt. Det här är alla verktyg av högsta kvalitet, så det finns ingen risk, och du kan alltid visa en demo eller be om en gratis provperiod.

Dessa produkter har en stor användarbas. De används av eller rekommenderas av stora företag. Så oavsett vilken du kan välja, befinner du dig i gott företag. Oavsett om du letar efter ett mockup-, wireframe- eller prototypverktyg hittar du ett verktyg för dina behov ovan.