7 Prototypingsverktøy for webdesignere

Kjenner du forskjellen mellom wireframe, mockup og prototype? Disse tre begrepene blir ofte brukt utveksling for å bety det samme. Problemet er, det burde du ikke.

EN wireframe er en statisk, fidelity-avbildning av et design. Den gir en oversikt over utseendet eller formen til en foreslått design, men ikke dens funksjonalitet eller følelse. EN mockup gir en større mengde informasjon. Mockups er Midt-til-høy-fidelity avbildninger av en foreslått design. Mockups er også statiske, og de beviser ikke interaktivitet.

prototyper, på den annen side er dynamisk. De kan Representer ditt siste design til nesten hvilken grad av detalj du velger. En prototype kan til og med bli testet som om det var selve sluttproduktet, siden det kan gi samme utseende og følelse. Av de tre vil den som vil få mest mulig ut av et inntrykk, være prototypen.

Hvordan bygge en prototype

Nå er målet med en prototype å nøye bevise utvalgte designfunksjoner. Prototyper for web- eller appprogrammer utvikles typisk i tre stadier:

1. Siden flyter (hvordan en bruker kan navigere) er skissert ut.
2. Flere enkle versjoner av hver side er bygget og testet for brukervennlighet.
3. Fra lærdomene blir det lagt til detaljer for å lage en high-fidelity-modell av den foreslåtte designen.

I dette innlegget vil vi sjekke ut noen prototypingsverktøy som kan bidra til å lette prosessen, gjøre tingene enklere og for deg å kutte ut prototyper mye raskere. Her er 7 prototypingsverktøy for å prøve ut.

InVision

InVision er ifølge Forbes nær toppen av listen over private sky-selskaper i verden, sammen med luminaries som Slack, Dropbox og MailChimp. Denne ære skyldes delvis InVisions "alltid på" plattform, noe som gjør samarbeid, tilbakemelding og bygging av high-fidelity-prototyper så enkelt.

Med InVision er det mulig å administrere prosjektskjermbilder og statuser fra et enkelt sted, samarbeide i sanntid, og vedlikeholde versjonskontroll mens bygge piksel-perfekte prototyper som har utseendet på ekte web- og mobilapper. Med InVision kan du selv gjennomføre gratis, ubegrenset testing på prototyper.

For å oppdage hva designverdenen og InVisions mer enn 2 millioner brukere elsker om denne plattformen, må du registrere deg for en gratis prøveversjon. Bare klikk på InVision-lenken for å komme i gang.

Pidoco

Enten du trenger en klikk-through wireframe, eller a fullt interaktiv UX prototype, Pidoco vil få deg der raskt, og uten oppstyr. Fra og med den enkle skisseringsfunksjonen kan du bygge et sett med egendefinerte maler, opprett interaktive elementer du trenger, presentere prototypen din til andre, og avvente tilbakemelding - noe som ikke burde være lengre i å komme.

Pidoco gir deg alt du trenger for å lage prototyper med lav troskap for å be om rask tilbakemelding eller høyfidelighetsmodeller som har samme utseende som ditt foreslåtte web- eller appdesign. Dette verktøyet vil til og med generere spesifikasjonsdokumenter som kan tjene som blueprints for teammedlemmer, eller kan bli presentert til klienter for sign-off.

Proto.io

Proto.io vil være et ideelt valg hvis du har behov for et kvalitetsprototypingsverktøy for å hjelpe deg med designprogrammer for mobilapps. Proto.io er en dedikert mobil prototyping plattform som kjører på de fleste nettlesere, krever ingen koding, og gjør det mulig å distribuere fullt interaktive mobilapp prototyper og simuleringer som har utseendet på den virkelige tingen.

Tre deler kombinerer for å gjøre opp dette verktøyet: et dashbord, en redaktør og en spiller. Dashbordet fungerer som hovedkontroll og prosjektleder. Redaktøren består av et sett med verktøy for å etterligne ditt design og bygge i samspillet. Med spilleren kan du vise prototypen din i nettleseren din, samhandle med den, be om tilbakemelding og teste den på ekte mobile enheter. Hvis mobilappdesign er din ting, er dette verktøyet for deg.

Webflow

For alle som leter etter en alt-i-ett-design, prototyping og utviklingsverktøy, søket avsluttes her. Først av alt, med Webflow, kan du bygge og teste high-fidelity prototyper du trenger å hjelpe din design innsats. Men her er hvor forskjellen kommer inn - alt du bygger bygger på produksjonsklar HTML / CSS og JavaScript. Resultatet?

Du kan Flytt sømløst fra en fullstendig interaktiv prototype til et utviklet produkt. Prototype, design og utvikling kommer i samme pakke, som også inneholder de nødvendige samarbeidsegenskapene og evnene. Og forresten, alt er responsivt også.

PowerMockup

Denne spesielle prototypingverktøyet ble utviklet med PowerPoint-brukeren i tankene. PowerMockup er faktisk et PowerPoint-tillegg som du kan bruke til opprett wireframes og mockups for nettsteder, skrivebordsprogrammer eller mobilapper. Det handler bare om å velge former og designelementer fra PowerMockup-biblioteket, og slippe dem på en PowerPoint-lysbilde.

Da kan du bruk PowerPoints lysbildefremvisning og animasjonsfunksjoner for å forhåndsvise design med andre. Du kan også legge til dine egne figurer og elementer i biblioteket, og dele dem med andre PowerPoint-brukere hvis du ønsker det.

Lucidchart

Lucidchart er en online applikasjon med en bibliotek med designelementer og enhetstyper hvorfra du raskt kan bygge wireframes eller mockups av nettstedet ditt eller mobilappdesign. Den har en rent, brukervennlig grensesnitt, og den har dra og slipp teknologi, interaktive demonstrasjonsmuligheter, og en lagteknologi som lar deg bygge svært komplekse simuleringer.

Lucidchart er også et nyttig verktøy for skaper profesjonelle arbeidsflytdiagrammer og flytdiagrammer, og samarbeidsfunksjonene fungerer jevnt og er enkle å bruke.

HotGloo

Emulere et designs foreslåtte UX kan noen ganger presentere utfordringer. Derfor trenger du HotGloo. Med en stor elementbibliotek og UI widget galleri, eksporter og del funksjoner, samt samarbeid med gruppemedlemmer, det begynner på nesten ingen tid.

Hvis du har spørsmål eller trenger hjelp, har de en full dokumentasjon så vel som nyttige videoopplæringsprogrammer og live webinars tilgjengelig. Lag dine prototyper rett i nettleseren din, del dem eller forhåndsvis dem på en hvilken som helst mobil enhet. Du kan til og med eksporter jobben din til HTML. Wireframing & prototyping har aldri vært enklere og morsommere!

Wrapping det opp

Det er mange å velge fra denne listen fra verktøy dedikert til spesielle formål, til et alt-i-ett-verktøy som definitivt er verdt en titt. Disse er alle toppkvalitetsverktøy, så det er ingen risiko involvert, og du kan alltid se en demo eller be om en gratis prøveversjon.

Disse produktene har en stor brukerbase. De brukes av eller anbefales av store selskaper. Så uansett hvilken du kan velge, finner du deg selv i godt selskap. Enten du er ute etter et mockup-, wireframe- eller prototypingsverktøy, finner du et verktøy for dine behov ovenfor.