12 vrhunskih alata za prototipiranje

Stranica 1 od 2: Stranica 1

Izrada prototipa važan je dio svakog postupka digitalnog dizajna. Pomaže nam u simuliranju naših dizajna, istraživanju različitih korisnička iskustva , i testirajte putovanja i korisničke tokove unutar naših projekata. Davno su prošla vremena tiskanja i pružanja PDF-ova dizajna.

Ima ih dosta alati za web dizajn okolo, ali alati za prototipiranje zaista su došli na svoje posljednjih godina. Pomoću ovih alata za prototipiranje postavit ćete da se suočite sa svim izazovima u dizajnu s kojima se možete suočiti, bez obzira želite li od ideje stvoriti nešto lijepo ili tehničko. S bilo kojim prototipom važno je testirati i igrati se sa svojim sučeljem kako biste mogli potvrditi iskustvo.



Većina ovih alata ima cijenu, ali neki daju besplatan pristup za pojedini projekt ili ograničene stranice, što vam omogućuje da pronađete pravu primjenu za svoj projekt.



na prodaju stroj za lasersko rezanje drva

Ako se posebno bavite alatima za bežično uokvirivanje, pogledajte naš popis najbolji žičani alati dostupno.

Glavna ilustracija: Newton Ribeiro



01. Proto.io

Cijena: Od 24 dolara mjesečno (besplatno probno razdoblje)

Pros:

  • Snimite korisničke testove
  • Prototipi koji se mogu dijeliti
  • Dostupna mobilna aplikacija
  • Podržava VR prototipiranje
  • Dostupni su dodaci

Protiv:



  • Nije izvrsno za izvanmrežnu upotrebu

Proto.io je nevjerojatan kandidat za stvaranje životnih prototipova od grubih ideja pa sve do punopravnih dizajna. Alat također nudi mnoge mogućnosti za vaše projekte, uključujući stvaranje detaljnih animacija i prilagođenih vektorskih animacija.

Svakako je jedan od vodećih trkača kada ocjenjujete alate koji će vam pomoći u stvaranju vaših prototipova. S proto.io-om pokretanje projekta je jednostavno koliko želite. S samo grubom idejom ucrtanom, možete odmah krekirati i početi koristiti unaprijed definirane resurse za brzi razvoj vašeg koncepta.

Jednom kada ste zadovoljni svojim idejama, one se mogu pretvoriti u uglađenije i prezentabilnije žičane okvire za daljnju provjeru i promišljanje. Sljedeći važan korak nakon toga omogućuje vam podešavanje dizajna vaših prototipova kako bi bili što vjerniji krajnjem rezultatu.

Proto.io je internetski alat i dolazi s hrpom dodataka i značajki, koji uključuju uvoz datoteka Sketch i Photoshop, VR prototipiranje, UI knjižnice, pa čak i snimanje zaslona za korisničko testiranje. To vam stvarno može pomoći ako prelazite na druge programe i iz njih.

U konačnici, trebat će vam malo vremena da se upoznate s ovim alatom. Puno se toga može učiniti, a postoji i veliki broj opcija i stavki izbornika s kojima se možete igrati. Ipak, kad se jednom naučite, to će biti teško ukloniti. Izgled za stvaranje detaljnih animacija doista čini ovaj izvrstan alat za upotrebu i savršen način za izvršavanje vaših ideja na što realniji način.

02. Adobe XD CC 2018

Cijena : 9,99 USD mjesečno | 9,98 £ / mj
Isprobajte besplatno probno razdoblje : NAS | UK

Pros:

  • Dodajte interakcije sa samo nekoliko klikova
  • Čisto korisničko sučelje
  • Pokrenite i izvezite prototipove za jednostavno testiranje
  • Stvorite prototipove s vrlo malo ograničenja

Protiv:

  • Opcije animacije su ograničene

Adobe XD nudi najbolje okruženje za digitalne projekte pod Adobeom Kreativni oblak zbirka alata za dizajn. Iako ste zagriženi korisnik Adobea i novi ste u XD-u, možda vam sučelje za početak neće biti baš poznato, ali se slaže s ostalim vodećim alatima. Skok je ako već neko vrijeme dizajnirate u Photoshopu. Međutim, isplati se ako ste veliki obožavatelj Adobea.

Ovaj vam alat omogućuje stvaranje visoko vjernih dizajna i prototipova s ​​vrlo malo ograničenja. Sigurno će uvijek biti među oružarnicom za vizualnije projekte. Vrlo je dizajnerski vođen i vrlo je jednostavan za upotrebu s nekim zaista urednim značajkama kako bi postupak dizajna bio učinkovitiji i zadovoljavajući.

Postoje dva načina rada na vašem platnu: to su Dizajn i Prototip. Nakon što stvorite skup sučelja i umjetničkih ploča, možete početi crtati odnose između elemenata koji se mogu kliknuti i stranica. Možete birati između prijelaznih stilova poput klizanja, guranja i rastvaranja. XD vam tada omogućuje pokretanje i izvoz prototipova kako biste ih mogli testirati i pokazati klijentima.

Današnja najbolja Adobe Creative Cloud ponuda nudi AdobePreporučeni prodavač Sve aplikacije Creative Cloud 49,94 GBP / mj Pogled na Adobe Kreativna fotografija u oblaku 9,98 GBP / mj Pogled na Adobe Pojedinačna aplikacija Creative Cloud 19,97 £ / mj Pogled na Adobe

03. Axure

Cijena: Od 29 dolara mjesečno

Pros:

  • Izvrsno za složene web lokacije i ideje
  • Izvrsno rukuje dinamičkim podacima
  • Uvjetna logika
  • Sposoban za izvoz kao HTML datoteke
  • Vrlo funkcionalan

Protiv:

najskuplje prijenosno računalo na tržištu
  • Nije idealno za izradu prototipa dizajna visoke vjernosti

Axure je uspio stvoriti reputaciju jednog od najboljih žičanih alata na tržištu i savršenog izbora kada je riječ o rješavanju složenijih projekata koji zahtijevaju dinamičke podatke. S Axureom možete doista usmjeriti svoju pozornost na ruganje projektima koji su i tehničkiji i zahtijevaju više pažnje kada je riječ o strukturi i podacima.

Iako to nije nužno prvi izbor za izradu prototipa dizajna visoke vjernosti, ipak je sjajan u brzom provođenju većih projekata / softverskih platformi kroz prvostupanjske koncepte žičanog okvira.

Glavna je prednost Axurea što jako dobro rukuje dinamičnim sadržajem, omogućujući vam da ga mijenjate i mijenjate u skladu s određenim putovanjima ili interakcijama korisnika. To se postiže kombinacijom uvjetne logike i manipulacijom stranicama, blokovima sadržaja ili tekstom postavljanjem varijabli i parametara.

No, potencijal onoga što možete učiniti s Axureom tu se ne zaustavlja. To je izvrsna opcija za vizualizaciju dijagrama toka i dijagrama, što je upravo ono što vam pomaže u artikuliranju nekih tehničkih putovanja s kojima biste se mogli susresti.

Govoreći o tehničkim aspektima projekta, Axure bi trebao biti na vrhu vašeg popisa za kupnju radi rješavanja tehničkih aspekata dizajna, kao i podatkovnih ili dinamičkih platformi, pri čemu je dizajn na kraju puka kozmetička promjena. Na pamet mi pada funkcija nad formom.

04. Studio Origami

Cijena: Besplatno

Origami je izvorno razvio Facebook kako bi pomogao timu u izgradnji i dizajniranju proizvoda. Sada je dostupan besplatno: možete se registrirati kao programer za Apple, a zatim preuzeti i instalirati Xcode pomoću Quartz Composer kako biste Origami pokrenuli na Macu.

Ovaj alat zahtijeva više posla za instaliranje od ostalih opcija prototipiranja. Međutim, nakon što se instalira, možete početi stvarati koncepte dizajna koji simuliraju pomicanje, dodirivanje, prevlačenje i veze na stranice. Origami dokumentacija, vodiči i videozapisi s uputama olakšavaju početak rada.

Dizajni skica i Photoshopa mogu se uvesti u Origami, a slojevi vašeg projekta bit će sačuvani, spremni za povezivanje, animiranje i transformiranje po potrebi. Ni Origami nije usmjeren na dizajn za mobilne uređaje: možete dizajnirati odzivne web stranice i simulirati značajke poput unosa teksta, FaceTime kamere i OS X povlačenjem i ispuštanjem.

Svoje prototipske komponente (uključujući animacije) možete izvesti samo jednim klikom, tako da inženjeri mogu kopirati i zalijepiti u projekt. Origami uključuje alat za prezentaciju koji vam omogućuje dodavanje prilagođene pozadine dizajnu, prikaz na cijelom zaslonu i simulaciju različitih uređaja.

Kao besplatno rješenje za izradu prototipova, Origami ima puno toga za ponuditi. Međutim, jedan je nedostatak što još uvijek ne dopušta vašim klijentima ili dizajnerskom timu da komentiraju izravno povijest projekta ili verzije.

05. Web protok

Dizajniranje prototipova je brzo i jednostavno s Webflowom, ali ovaj alat zaista sjaji kad je vaš prototip gotov. Klik na gumb možete pretvoriti svoj gotovi prototip u web mjesto spremno za proizvodnju.

Nedavno je Webflow predstavio novu značajku koja mijenja igru: CMS za vaše prototipove. CMS Webflow-a potpuno je vizualan, što vam omogućuje stvaranje moćnih, dinamičnih web stranica bez pisanja jednog retka koda. Još jedna posebno korisna značajka je sposobnost stvaranja bloga pomoću koncepta prototipa vaše stranice bloga.

Ako ste slobodni dizajner i imali ste poteškoća s pronalaženjem programera koji bi vaše dizajne preusmjerio na proizvodna mjesta, Webflow može biti za vas. Možete čak postaviti korisničke račune ili odrediti administratora za upravljanje sadržajem, a vaši će klijenti moći vizualno unositi promjene.

Alternativno je jednostavno izvesti prototip u kod. Čisti, semantički kôd Webflowa može uštedjeti satima čišćenja koda vašim inženjerima.

Webflow dolazi s predlošcima web stranica i web komponentama koje se mogu povući i ispustiti u vaš prototip. Oni ubrzavaju postupak izrade prototipa, jer znače da ne trebate ponovno stvarati često korištene elemente dizajna.

Ako u bilo kojem trenutku zapnete i trebate pomoć, možete pogledati detaljnu dokumentaciju Webflowa ili pogledati korisne video tečajeve s uputama. I naravno, ako Webflow upotrebljavate prvi put, ova podrška pomoći će umanjiti krivulju učenja.

Webflow po prirodi reagira, tako da će raspored web stranica biti optimiziran za sve uređaje: stolna računala, mobitele i tablete. Ako to nije bilo dovoljno, možete dizajnirati animacije koje će raditi na mobilnim uređajima i svim modernim preglednicima. I tu još uvijek nije kraj: Webflow ima ugrađenu proširivost, što olakšava povezivanje vaših prototipova uživo sa Slackom, MailChimpom, Google pogonom i više od 400 drugih usluga.

06. Skica

Cijena: 99 dolara godišnje (besplatno probno razdoblje)

kako napraviti tekst zvijezdama u riječima

Pros:

  • Neopterećeno korisničko sučelje
  • Vrlo fleksibilan u pogledu funkcionalnosti
  • Jednostavna izrada prototipova
  • Izgradite simbole i imovinu za višekratnu upotrebu
  • Dostupni su dodaci
  • Jednostavno podijelite svoj prototip

Protiv:

  • Opcije animacije su ograničene

Sketch je aplikacija koja se jako voli u zajednici dizajnera. Jednostavan je za upotrebu i pruža vam sve što je potrebno za stvaranje prekrasnih sučelja. Do nedavno se Sketch oslanjao na proširenja nezavisnih proizvođača za prototip s InVisionom, ali sada pruža potpuno svoje okruženje.

Koristeći unaprijed definirane umjetničke ploče, Sketch možete pokrenuti vrlo brzo uz vrlo malo truda; jednostavno počnite učitavati u grafiku ili tip. Dizajniranje u ovom alatu je lijepo i jednostavno.

Jedna od značajki koja u Sketchu jako dobro funkcionira je način na koji obrađuje simbole. Ovo je uredan način pakiranja malih ili čak velikih predmeta sučelja i njihova ponovna upotreba iznova i iznova. Sa svojim simbolima možete ih uređivati ​​i na nekonstruktivan način. Na primjer, možda imate element gumba upakiran u simbol koji koristi tekst, ikonu i obrub. Možete ponovo upotrijebiti simbol oko svog dizajna i po potrebi promijeniti tekstualni element. Ako simbol uredite na izvoru, možete promijeniti stvari poput stila i boje fonta i ažurirat će sve vaše simbole oko vašeg dizajna. Vrlo uredan i često štedi vrijeme.

Što se tiče izrade prototipa, možete crtati odnose između predmeta na vašem platnu i stranicama. Ti će vam odnosi pružiti veze između vaših stranica koje možete započeti povezivati ​​i omogućiti vam simulaciju putovanja vaših korisnika dok se kreću vašom web stranicom. Unutar Sketcha također možete podijeliti svoje prototipove s jedinstvenom vezom i po potrebi ažurirati projekt.

Skica je mnogima omiljena i svakako je vrijedna pogleda. To je vrlo čist i svestran alat za dizajn. Dostupno mu je niz proširenja koja pomažu u ubrzanju ili olakšavanju postupka dizajniranja.

07. Framer

Cijena: 15 USD mjesečno (besplatno probno razdoblje)

Framer je jedan od najpopularnijih alata za izradu prototipova. Temelji se na pretpostavci da je kodom moguće prototipirati bilo što, što rezultira novim i revolucionarnim dizajnom.

Iako je ovo možda istina, vlasnički jezik kodiranja alata za dizajniranje i animiranje prototipa mogao bi biti prepreka. Postoje oni koji možda neće vidjeti nagradu na kraju strme krivulje učenja, posebno za jezik koji se ne može koristiti izvan Framera.

Međutim, za one koji žele prihvatiti izazov, dokumentacija Framerovog kodirajućeg jezika vrlo je dobro strukturirana, s puno primjera koji pokazuju kako jezik funkcionira. Postoje videozapisi s uputama, kao i tečajevi o Udemyju i O'Reillyju.

Ovaj je pristup posebno koristan za dizajnere koji su novi u kodiranju. Nudi pogled iz prve ruke na to koliko kôd može biti fleksibilan i moćan. Uz to, Framerova Mac aplikacija dobro je dizajnirana i pruža preglede uživo dok pišete kod, što je ohrabrujuće za one koji prvi put pišu kod.

To ne znači da to nije dobro za dizajnere s iskustvom kodiranja koji preferiraju pisanje HTML / CSS-a od prototipa svojih dizajna. Framer je možda samo alat koji ste tražili: nećete biti ograničeni alatima za povlačenje i ispuštanje drugih aplikacija. Nadalje, budući da Framer koristi kod za izradu prototipova, u svoj prototip možete uvrstiti podatke u stvarnom vremenu iz izvora kao što su Twitter i Parse.

Kao i drugi alati, Framer podržava projekte Sketch i Photoshop, a također će sačuvati slojeve vašeg dizajna. Još jedna prednost je ta što - za razliku od većine ostalih alata - također možete uvoziti datoteke After Effects. Kad budete spremni podijeliti svoj prototip, Framer može generirati URL koji se može podijeliti s vašim klijentima. Te se URL-ove za dijeljenje mogu otvoriti na mobilnim uređajima radi pregleda uživo. Framer vam također omogućuje prototip VR-a.

08. Vectr

Svoje prototipove možete dizajnirati na Vectru

Svoje prototipove možete dizajnirati na web-ovim ili stolnim aplikacijama tvrtke Vectr

Cijena: Besplatno

Svoje prototipove možete dizajnirati na web-ovim ili stolnim aplikacijama tvrtke Vectr za Mac i Windows, što je impresivno s obzirom na to da je aplikacija besplatna. Prototipi ostaju sinkronizirani bez obzira radite li na radnoj površini ili web pregledniku, oslobađajući vas rada kad god ste spremni i osiguravajući vam uvijek pristup najnovijim promjenama.

Vectr prototipovi mogu se dijeliti s URL-om i integrirati u aplikacije poput Slacka za snažnu suradnju. Kao dodatni bonus, oni s kojima dijelite svoje makete mogu ih bilježiti i uređivati.

Trenutno Vectr nije bogat značajkama kao mnoge druge opcije, ali to vas ne bi trebalo spriječiti da se s njim ne upoznate. Objavljen je putokaz za aplikaciju koji detaljno opisuje impresivan popis predviđenih značajki. Uključuju: potpuno izvanmrežne aplikacije za stolne računare, više platformi, ugrađenu kontrolu verzija, tržište ugrađenih sredstava za dizajn, potpuno suradničko uređivanje, efekti slika, dodaci, mokeke na koje se može kliknuti, ugrađeni alati za povratne informacije i napomene i izvanmrežne aplikacije za radnu površinu .

Pročitajte još 5 izvrsnih alata za prototipiranje ...

  • 1
  • dva

Trenutna stranica: Stranica 1

Sljedeća stranica Stranica 2