12 topværktøjer til prototyping

Side 1 af 2: Side 1

Prototyping er en vigtig del af enhver digital designproces. Det hjælper os med at simulere vores design, udforske forskellige brugeroplevelser og afprøve rejser og brugerstrømme inden for vores projekter. Længe væk er dagene med udskrivning og levering af PDF-filer af design.

Der er masser af værktøjer til webdesign rundt, men prototypeværktøjer er virkelig kommet til deres ret de seneste år. Med disse prototypeværktøjer er du indstillet til at imødekomme de designudfordringer, du måtte stå over for, hvad enten du vil skabe noget smukt eller teknisk ud fra en idé. Med enhver prototype er det vigtigt at teste og spille med din grænseflade, så du kan validere oplevelsen.

De fleste af disse værktøjer leveres med en pris, men nogle giver fri adgang til et enkelt projekt eller begrænsede sider, så du kan finde den rigtige applikation til dit projekt.



Hvis det specifikt er wireframing-værktøjer, du leder efter, skal du tjekke vores liste over bedste wireframe-værktøjer ledig.

Hovedillustration: Newton Ribeiro

01. Proto.io

Pris: Fra $ 24 / mo (gratis prøveversion)

Fordele:

  • Optag brugertests
  • Delbare prototyper
  • Mobilapp tilgængelig
  • Understøtter VR prototyping
  • Tilføjelser tilgængelige

Ulemper:

  • Ikke fantastisk til offline brug

Proto.io er en utrolig konkurrent til at skabe naturtro prototyper fra grove ideer til fuldt ud design. Værktøjet giver også mange muligheder for dine projekter, herunder oprettelse af detaljerede animationer og brugerdefinerede vektoranimationer.

Det er bestemt en af ​​de forreste løbere, når du vurderer værktøjer til at skabe dine prototyper. Med Proto.io er det så enkelt at starte et projekt, som du vil have det. Med kun en grov idé skitseret kan du straks begynde at knække og begynde at bruge foruddefinerede aktiver til hurtigt at udvikle dit koncept.

Når du er tilfreds med dine ideer, kan disse omdannes til mere polerede og præsentable trådrammer til yderligere validering og refleksion. Det næste vigtige trin derefter giver dig mulighed for at tilpasse designet af dine prototyper, så de er så tro mod slutresultatet som muligt.

Proto.io er et webbaseret værktøj og leveres med en bucketload af tilføjelser og funktioner, som inkluderer import af Sketch- og Photoshop-filer, VR-prototyping, UI-biblioteker og endda skærmoptagelse til brugertest. Dette kan virkelig hjælpe, hvis du skifter til og fra andre applikationer.

I sidste ende bliver du nødt til at tage noget tid at få fat i dette værktøj. Der er meget, der kan gøres med det, og der er et stort antal muligheder og menupunkter at lege med. Når du først har lært dig rundt, vil det være svært at lægge væk. Udsigten til at skabe detaljerede animationer gør dette virkelig til et fremragende værktøj til at bruge og den perfekte måde at udføre dine ideer på en så realistisk måde som muligt.

02. Adobe XD CC 2018

Pris : $ 9,99 / mo | £ 9,98 / mo
Prøv en gratis prøveperiode : OS | UK

Fordele:

  • Tilføj interaktioner med blot et par klik
  • Rengør brugergrænsefladen
  • Kør og eksporter prototyper for nem test
  • Opret prototyper med meget få begrænsninger

Ulemper:

  • Animationsmuligheder er begrænsende

Adobe XD tilbyder det bedste miljø til digitale projekter under Adobe Creative Cloud samling af designværktøjer. Selvom du er en ivrig Adobe-bruger og ny i XD, kan du muligvis ikke finde grænsefladen meget velkendt til at begynde med, men den stabler op mod de andre førende værktøjer derude. Det er et spring, hvis du har designet i Photoshop i et stykke tid. Det er dog det værd, hvis du er en stor Adobe-fan.

Dette værktøj giver dig mulighed for at oprette high-fidelity-design og prototyper med meget få begrænsninger. Det vil helt sikkert altid være blandt rustningerne til de mere visuelle projekter. Det er meget designledet og er meget let at bruge med nogle virkelig pæne funktioner for at gøre designprocessen mere effektiv og tilfredsstillende.

Der er to tilstande til dit lærred: disse er design og prototype. Når du har oprettet et sæt grænseflader og tegnebrætter, kan du begynde at tegne relationer mellem klikbare elementer og sider. Du kan vælge mellem overgangsformer som at glide, skubbe og opløse. XD giver dig derefter mulighed for at køre og eksportere prototyper, så du kan teste dem og vise dem til klienter.

Dagens bedste Adobe Creative Cloud-tilbud AdobeAnbefalet forhandler Creative Cloud Alle apps £ 49,94 / md Udsigt på Adobe Kreativ skyfotografering 9,98 £ / md Udsigt på Adobe Creative Cloud Single App 179,00 kr / md Udsigt på Adobe

03. Axure

Pris: Fra $ 29 / mo

Fordele:

  • Perfekt til komplekse steder og ideer
  • Fremragende til håndtering af dynamiske data
  • Betinget logik
  • Kunne eksportere som HTML-filer
  • Meget funktionel

Ulemper:

  • Ikke ideel til prototyper af high-fidelity-design

Axure har formået at opbygge et ry som et af de bedste wireframing-værktøjer på markedet og det perfekte valg, når det kommer til at håndtere mere komplekse projekter, der kræver dynamiske data. Med Axure kan du virkelig fokusere din opmærksomhed på at spotte projekter, der både er mere tekniske og kræver mere opmærksomhed, når det kommer til struktur og data.

Selvom det ikke nødvendigvis er det første valg til prototyping af et high-fidelity-design, er det ikke desto mindre godt til hurtigt at tage de større projekter / softwareplatforme gennem wireframe-koncepterne i første fase.

En stor fordel ved Axure er, at den håndterer dynamisk indhold rigtig godt, så du kan ændre og ændre det i henhold til bestemte brugerrejser eller interaktioner. Dette opnås gennem en kombination af betinget logik og manipulering af sider, indholdsblokke eller tekst ved at indstille variabler og parametre.

Men potentialet i, hvad du kan gøre med Axure, stopper ikke der. Det er en god mulighed for at visualisere flowdiagrammer og diagrammer, hvilket er netop det, der hjælper dig med at formulere nogle af de mere tekniske rejser, du måske kommer op på.

Og når vi taler om de tekniske aspekter af et projekt, skal Axure være øverst på din indkøbsliste for at tackle tekniske aspekter ved design såvel som dataledede eller dynamiske platforme, hvor design kun er en kosmetisk eftersyn i slutningen. Funktion over form kommer til at tænke på.

04. Origami Studio

Pris: Gratis

Origami blev oprindeligt udviklet af Facebook for at hjælpe teamet med at opbygge og designe produkter. Nu er den tilgængelig gratis: du kan registrere dig som en Apple-udvikler og derefter downloade og installere Xcode med Quartz Composer for at få Origami til at køre på en Mac.

Dette værktøj kræver mere arbejde at installere end andre prototypemuligheder. Når den først er installeret, kan du dog begynde at oprette designkoncepter, der simulerer rulning, tryk, swipes og sidelinks. Origamis dokumentation, vejledninger og vejledningsvideoer gør det nemt at komme i gang.

Skitse- og Photoshop-design kan importeres til Origami, og dine projektlag bevares, klar til at blive linket, animeret og transformeret efter behov. Origami er heller ikke mobil design-centreret: du kan designe responsive websteder og simulere funktioner som tekstinput, FaceTime-kamera og OS X træk og slip.

Du kan eksportere dine prototypekomponenter (inklusive animationer) med et enkelt klik, så ingeniører kan kopiere og indsætte i projektet. Origami inkluderer et præsentationsværktøj, der giver dig mulighed for at tilføje en brugerdefineret baggrund til dit design, se på fuldskærm og simulere forskellige enheder.

Som en gratis prototypeløsning har Origami meget at tilbyde. En ulempe er dog, at det endnu ikke lader dine kunder eller designteam kommentere direkte på projektet eller versionshistorikken.

05. Webflow

Design af prototyper er hurtig og problemfri med Webflow, men hvor dette værktøj virkelig skinner, er når din prototype er færdig. Du kan forvandle din færdige prototype til et produktions-klar sted med et klik på en knap.

For nylig har Webflow introduceret en ny funktion, der skifter spil: et CMS til dine prototyper. Webflow's CMS er helt visuelt, så du kan oprette kraftfulde, dynamiske websteder uden at skrive en enkelt kodelinje. En anden særlig nyttig funktion er dens evne til at oprette en blog ved hjælp af dit prototype-koncept til blogsiden.

Hvis du er freelance designer og har haft vanskeligheder med at finde en udvikler til at vende dit design til produktionssteder, kan Webflow være noget for dig. Du kan endda oprette brugerkonti eller udpege en administrator til at administrere indhold, og dine kunder vil være i stand til visuelt at foretage ændringer.

Alternativt er det let at eksportere prototypen til kode. Webflow's rene, semantiske kode kan spare dine ingeniører timevis med kodeoprydning.

Webflow leveres med webstedsskabeloner og webkomponenter, der kan trækkes og slippes ned i din prototype. Disse fremskynder prototypeprocessen, da de betyder, at du ikke behøver at genskabe almindeligt anvendte designaktiver.

Hvis du til enhver tid sidder fast og har brug for hjælp, kan du tjekke Webflow's detaljerede dokumentation eller se dens nyttige instruktionsvideokurser. Og selvfølgelig, hvis du bruger Webflow for første gang, vil denne support hjælpe med at minimere indlæringskurven.

Webflow er lydhør af natur, så dine websidelayouter optimeres til alle enheder: desktop, mobil og tablet. Hvis det ikke var nok, kan du designe animationer, der fungerer på mobile enheder og alle moderne browsere. Og det slutter stadig ikke der: Webflow har indbygget udvidelse, hvilket gør det nemt at forbinde dine live prototyper til Slack, MailChimp, Google Drive og mere end 400 andre tjenester.

06. Skitse

Pris: $ 99 / år (gratis prøveversion)

Fordele:

  • Uklart UI
  • Meget fleksibel med hensyn til funktionalitet
  • Nem at bygge prototyper
  • Byg symboler og genanvendelige aktiver
  • Tilføjelser tilgængelige
  • Del let din prototype

Ulemper:

  • Animationsmuligheder er begrænsende

Sketch er et program, der er meget elsket inden for designfællesskabet. Det er nemt at bruge og giver dig alt hvad du behøver for at skabe smukke grænseflader. Indtil for nylig var Sketch afhængig af tredjepartsudvidelser til prototype med InVision, men det giver nu et helt eget miljø.

Ved hjælp af foruddefinerede tegnebrætter kan du komme i gang med Sketch ganske hurtigt med meget lidt indsats; start blot indlæsning i grafik eller type. Design i dette værktøj er dejligt og nemt.

En af de funktioner, der fungerer rigtig godt inden for Sketch, er, hvordan den håndterer symboler. Dette er en pæn måde at pakke små eller endda store interface-objekter på og genbruge dem igen og igen. Med dine symboler kan du også redigere dem på en ikke-dekonstruktiv måde. For eksempel kan du have et knapelement pakket ind i et symbol, der bruger tekst, et ikon og kant. Du kan genbruge symbolet omkring dit design og om nødvendigt ændre tekstelementet. Hvis du redigerer symbolet ved kilden, kan du ændre ting som skrifttypestil og farve, og det opdaterer alle dine symboler omkring dit design. Meget pæn og ofte en stor tidsbesparelse.

Hvad prototypen angår, kan du tegne forhold mellem objekter på dit lærred og sider. Disse forhold giver dig links mellem dine sider, som du kan begynde at oprette forbindelse til, og giver dig mulighed for at simulere dine brugeres rejser, når de navigerer gennem dit websted. Inden for Sketch kan du også dele dine prototyper med et unikt link og foretage eventuelle opdateringer til projektet, når og når det er nødvendigt.

Skitse er en favorit for mange og absolut et kig værd. Det er et meget rent og alsidigt designværktøj. Der er en række udvidelser til rådighed for det, der hjælper med at gøre designprocessen endnu hurtigere eller lettere.

07. Framer

Pris: $ 15 / mo (gratis prøveperiode)

Framer er et af de mest populære værktøjer til prototyping. Det er baseret på den forudsætning, at det med kode er muligt at prototype alt, hvilket resulterer i nye og banebrydende design.

Selvom dette kan være sandt, kan værktøjets proprietære kodningssprog til design og animering af prototyper være en barriere. Der er dem, der muligvis ikke ser belønningen i slutningen af ​​den stejle læringskurve, især for et sprog, der ikke kan bruges uden for Framer.

Men for dem, der ønsker at tage udfordringen op, er dokumentationen af ​​Framers kodningssprog meget godt struktureret med masser af eksempler til at demonstrere, hvordan sproget fungerer. Der er vejledningsvideoer samt kurser om Udemy og O'Reilly.

Denne tilgang er især nyttig for designere, der er nye inden for kodning. Det giver et førstehåndsbillede af, hvor fleksibel og kraftfuld kode kan være. Derudover er Framers Mac-app godt designet og giver live previews, mens du skriver kode, hvilket er opmuntrende for dem, der skriver kode for første gang.

Det betyder ikke, at det ikke er godt for designere med kodningserfaring, der foretrækker at skrive HTML / CSS frem for at prototype deres design. Framer er muligvis bare det værktøj, du har ledt efter: du begrænses ikke af træk og slip-værktøjerne i andre apps. Desuden, fordi Framer bruger kode til at opbygge prototyper, kan du inkorporere realtidsdata i din prototype fra kilder som Twitter og Parse.

Som andre værktøjer understøtter Framer Sketch- og Photoshop-projekter og bevarer også dit designs lag. En anden fordel er, at du - i modsætning til de fleste andre værktøjer - også kan importere After Effects-filer. Når du er klar til at dele din prototype, kan Framer generere en URL, der kan deles med dine klienter. Disse webadresser, der kan deles, kan åbnes på mobile enheder til live previews. Framer lader dig også prototype VR.

08. Vectr

Du kan designe dine prototyper på Vectr

Du kan designe dine prototyper på Vectrs web- eller desktop-apps

Pris: Gratis

Du kan designe dine prototyper på Vectrs web- eller desktop-apps til Mac og Windows, hvilket er imponerende i betragtning af, at appen er gratis. Prototyperne forbliver synkroniserede, uanset om du arbejder på skrivebordet eller webbrowseren, hvilket frigør dig til at arbejde, når du er klar og sikrer, at du altid har adgang til de seneste ændringer.

Vectr-prototyper kan deles med en URL og integreres i apps som Slack for kraftigt samarbejde. Som en ekstra bonus kan de, du deler dine mockups med, kommentere og redigere dem.

I øjeblikket er Vectr ikke så funktionsrig som mange andre muligheder, men dette bør ikke afholde dig fra at blive fortrolig med det. En køreplan for appen er blevet offentliggjort, der beskriver en imponerende liste over planlagte funktioner. Disse inkluderer: fuldt offline desktop-apps, flere platforme, indbygget versionskontrol, en indbygget markedsplads for designaktiver, fuld samarbejdsredigering, billedeffekter, plugins, klikbare mockups, indbyggede feedback- og annoteringsværktøjer og offline desktop-apps .

Læs videre for yderligere 5 fantastiske prototypeværktøjer ...

  • 1
  • to

Nuværende side: Side 1

Næste side Side 2