7 prototypeværktøjer til webdesignere

Kender du forskellen mellem wireframe, mockup og prototype? Disse tre udtryk bruges ofte udveksling til at betyde det samme. Problemet er, det burde du ikke.

EN wireframe er en statisk, lavtroskabsbillede af et design. Det giver en oversigt over udseendet eller formen af ​​et foreslået design, men ikke dets funktionalitet eller følelse. EN mockup giver en større mængde information. Mockups er mid-til-high-fidelity skildringer af et foreslået design. Mockups er også statiske, og de beviser ikke interaktivitet.

prototyper, på den anden side er dynamisk. De kan repræsenterer dit endelige design til næsten enhver grad af detalje du vælger. En prototype kan endda testes som om det var det egentlige slutprodukt, da det kan give det samme udseende. Af de tre vil den der vil få mest muligt ud af et indtryk, være prototypen.

Sådan opbygges en prototype

Nu er målet med en prototype at nøjagtigt bevise udvalgte designfunktioner. Prototyper til web- eller appapplikationer udvikles typisk i tre niveauer:

1. Siden flyder (hvordan en bruger kan navigere) er skitseret ud.
2. Flere versioner af lavfidelitet på hver side er bygget og testet brugervenlighed.
3. Ud fra erfaringerne tilføjes detaljer for at oprette en højfidelighedsmodel af dit foreslåede design.

I dette indlæg vil vi tjekke nogle prototypeværktøjer, som kan hjælpe med at lette processen, gøre tingene nemmere, og for at du kan kaste prototyper meget hurtigere ud. Her er 7 prototyper værktøjer til at prøve.

InVision

InVision er ifølge Forbes nær toppen af ​​listen over private sky firmaer i verden, sammen med luminaries som Slack, Dropbox og MailChimp. Denne ære skyldes til dels InVisions "always-on" platform, hvilket gør samarbejde, feedback og opbygning af high-fidelity prototyper så let.

Med InVision er det muligt at styre projektskærme og statuser fra et enkelt sted, samarbejde i realtid og vedligeholde versionsstyring, mens Bygning pixel-perfekte prototyper, der har udseendet af ægte web- og mobilapps. Med InVision kan du endda udføre gratis, ubegrænset test på dine prototyper.

For at opdage, hvad designverdenen og InVisions mere end 2 millioner brugere elsker om denne platform, skal du tilmelde dig en gratis prøveperiode. Bare klik på InVision-linket for at komme i gang.

Pidoco

Uanset om du har brug for en klik-through wireframe, eller a fuldt interaktive UX prototype, Pidoco vil få dig der hurtigt, og uden opstyr. Med den nemme skitseringsfunktion kan du bygge et sæt af brugerdefinerede skabeloner, Opret interaktive elementer du mangler, præsentér din prototype til andre, og afventer deres tilbagemelding - som ikke skulle være lang i fremtiden.

Pidoco giver dig alt, hvad du behøver for at opbygge prototyper med lavt troværdighed, så du kan have hurtig feedback på forhånd eller high-fidelity-modeller, der har det samme udseende som dit foreslåede web- eller appdesign. Dette værktøj vil endda generere specifikationsdokumenter der kan tjene som blueprints for teammedlemmer, eller kan præsenteres for klienter for tilmelding.

Proto.io

Proto.io vil være et ideelt valg, hvis du har brug for et kvalitetsprototypeværktøj til at hjælpe dig med dine mobilappedesignaktiviteter. Proto.io er en dedikeret mobil prototyping platform, der kører på de fleste browsere, kræver ingen kodning, og gør det muligt for dig implementer fuldt interaktive mobilapp prototyper og simuleringer der har udseendet af den virkelige ting.

Tre dele kombinerer til at udgøre dette værktøj: et dashboard, en editor og en spiller. Dashboardet fungerer som din master kontrol og projektleder. Redaktøren består af et sæt værktøjer til at efterligne dit design og bygge i interaktionerne. Med afspilleren kan du se din prototype på din webbrowser, interagere med det, anmode om feedback og teste det på rigtige mobilenheder. Hvis mobilappdesign er dine ting, er dette værktøjet til dig.

Webflow

For alle, der søger en all-in-one design, prototyping og udviklingsværktøj, søgen slutter her. Først og fremmest, med Webflow, kan du bygg og test high-fidelity prototyper du skal hjælpe din designindsats. Men her er hvor forskellen kommer ind - alt du bygger bygger på produktionsklar HTML / CSS og JavaScript. Resultatet?

Du kan Flyt problemfrit fra en fuldt interaktiv prototype til et udviklet produkt. Prototype, design og udvikling kommer i samme pakke, som også indeholder de nødvendige samarbejdsfunktioner og -funktioner. Og forresten, alt er lydhørt såvel.

PowerMockup

Dette specialprototypeværktøjssæt blev udviklet med PowerPoint-brugeren i tankerne. PowerMockup er faktisk en PowerPoint-add-on, som du kan bruge til Opret wireframes og mockups til websites, stationære apps eller mobilapps. Det er simpelthen et spørgsmål om at vælge former og designelementer fra PowerMockup-biblioteket og slippe dem på et PowerPoint-objektglas.

Så kan du brug PowerPoints diasshow og animationsfunktioner til at forhåndsvise dit design med andre. Du kan også tilføje dine egne figurer og elementer til biblioteket og dele dem med andre PowerPoint-brugere, hvis du ønsker det.

Lucidchart

Lucidchart er en online ansøgning med en bibliotek af designelementer og enhedstyper hvorfra du hurtigt kan bygge wireframes eller mockups på dit website eller mobilappdesign. Den har en ren, brugervenlig grænseflade, og den har træk og slip teknologi, interaktive demonstrationsfunktioner, og en lagteknologi, der giver dig mulighed for at opbygge meget komplekse simuleringer.

Lucidchart er også et praktisk værktøj til skabe professionelle projektflowdiagrammer og flowdiagrammer, og dets samarbejdsfunktioner fungerer glat og er nemme at bruge.

HotGloo

Emulering af et designs foreslåede UX kan nogle gange indebære udfordringer. Derfor har du brug for HotGloo. Med en enorm element bibliotek og UI widget galleri, eksport og deling funktioner samt samarbejde med holdmedlemmer det får dig i gang på næsten ingen tid.

Hvis du har spørgsmål eller har brug for hjælp, har de en fuldstændig dokumentation samt nyttige video tutorials og live webinars ledig. Opret dine prototyper lige i din browser, del dem eller forhåndsvis dem på en mobil enhed. Du kan endda eksporter dit arbejde til HTML. Wireframing & prototyping har aldrig været nemmere og sjovere!

Indpakning det op

Der er masser at vælge imellem denne liste fra værktøjer dedikeret til særlige formål, til et alt-i-ét værktøj, der absolut er et besøg værd. Disse er alle topkvalitetsværktøjer, så der er ingen risiko involveret, og du kan altid se en demo eller bede om en gratis prøveversion.

Disse produkter har en stor brugerbase. De bruges af eller anbefales af større virksomheder. Så uanset hvilken du kan vælge, finder du dig selv i godt selskab. Uanset om du leder efter et mockup-, wireframe- eller prototypeværktøj, finder du et værktøj til dine behov ovenfor.