Accentsconagua
Share
Să aruncăm o privire asupra unor instrumente de prototipare disponibile pentru designerii de web astăzi, în nici o ordine particulară:
Lipsirea de idei față de părțile interesate și clienți poate părea fără efort la început, dar când lucrurile devin dificile, avem nevoie de instrumente care să contribuie la accelerarea procesului de feedback. Web-ul devine din ce în ce mai complicat pentru designerii de la front-end, cu tot mai multe cereri interactive. Actiuni cum ar fi glisarea si glisarea sunt doar varful aisbergului, si imaginind cum tot puzzle-ul se potriveste impreuna este locul in care se afla adevarata arta de prototipare.
Prin definiție, un "prototip" este un eșantion timpuriu construit pentru a testa concepte specifice. Un prototip este utilizat pentru a evalua și îmbunătăți un sistem pentru a obține o mai bună înțelegere a proiectului în ansamblu. Cu toții lucrăm la proiecte zilnic, iar altele sunt mult mai complicate decât altele, dar când este timpul să solicităm un instrument care să ajute la ajutor în lanțul alimentar de feedback?
Unii ar argumenta că codul este mult mai rapid, dar există momente în care timpul este mai bine cheltuit folosind un prototip, în loc să cheltuiți timp de proiectare ceva care ar putea cădea rapid la marginea drumului. Prototiparea invită la feedback cu privire la interacțiune și plasare. Este o rețea wireframe interactivă, oferind clienților o mai bună înțelegere a modului în care proiectul se potrivește împreună pentru utilizatorii lor.
Alteori, prototiparea înaintea codării poate ajuta proiectul prin identificarea oricăror cazuri de margine care ar fi putut fi ratate.
Când ne întrebăm unde se potrivește astăzi în peisaj, putem să atribuim cu certitudine cererea din ce în ce mai mare pentru munca în mișcare. Interfețele devin organisme vii cu conținut interactiv. Interacțiunile simple pot fi tăiate și uscate pentru a explica verbal, dar în alte contexte ajută la obținerea perspectivei asupra modului în care poate fi declanșată o interacțiune - și mai mulți clienți cer să vadă dovezile de concepte înainte de a se deconecta. Este important, acum mai mult ca niciodată, să aveți o idee despre locul unde să vă întoarceți atunci când trebuie să apară nevoia de prototip.
Cu atât de multe instrumente disponibile pe piață, pe care ar trebui să le folosiți? Hai să aruncăm o privire.
FramerFramer dă familiaritatea editării vizuale cu flexibilitatea codului, oferind un flux de lucru fără probleme, completat de previzualizarea dispozitivului, controlul versiunii și partajarea simplistă. O aplicație care ajută la crearea de noi modele de interacțiune pentru a crea aplicații inovatoare. Trageți datele din API-ul dvs. preferat, capturați intrările reale ale utilizatorilor pentru a testa și lucrați cu utilizatorii reali și feedback-ul. Importați grafice direct din Sketch, Photoshop sau Figma.
Cu toate că Framer poate apărea ca și cum ar fi folosit strict pentru aplicațiile mobile, poate fi folosit și pentru proiecte care nu sunt aplicații sau folosit ca bibliotecă independentă. Când utilizați numai biblioteca Framer JS, evitați complet IDE-ul. În esență, este un cadru JavaScript open source pentru prototipuri rapide. Definiți animațiile și interacțiunile, complet cu filtre, fizica primăvară, efecte 3D și multe altele. Deși CoffeeScript nu este necesar, docs utilizează CoffeeScript, precum și IDE-ul.
Ar trebui să fie cunoscut faptul că Framer nu este menit să fie folosit pentru crearea de animații gata de producție.
@UXDesignDad @framer Hei Andre! Framer este un prototip pentru Mac. Deci, nu aplicații de producție 😁
- Krijn Rijshouwer (@krijnrijshouwer) 2 februarie 2017
Deoarece Framer are propriul concept de straturi și este destul de greu codificat, nu îl puteți folosi în lucruri simple (existente) de DOM, așa cum ați putea face cu GreenSock. De fapt, ea pune pânza proprie în DOM și toate animațiile sunt difuzate în interiorul acelei pânze.
Adobe XDDesenează, reutilizează și remixează opere de artă vectoriale și raster pentru a crea cadre de tip wireframe, layout-uri de ecran, prototipuri interactiv și active gata pentru producție, toate din aceeași aplicație. Lucrați cu instrumente puternice, cum ar fi Repeat Grid, construit special pentru XD, precum și cu straturi, simboluri și instrumente de stil pentru designul UX. Adăugați interacțiuni utilizând o varietate de animații pentru a crea tranziții între panourile de artă pentru a simula fluxul aplicației / site-ului dvs..
Clienții pot face comentarii direct pe prototipurile dvs. atunci când împărțiți direct și vizualizați desenele în timp real pe dispozitivele reale. Desenele pot fi ajustate și actualizate automat pe platforme. Schimbați cu ușurință structura de sârmă, design vizual, design interactiv, prototip, previzualizare și partajare, toate într-un singur instrument puternic.
În timp ce XD este încă un produs beta, rămâne de văzut dacă va rămâne în viitorul apropiat. Puteți citi mai multe despre caracteristicile publicate aici pentru a fi informat cu privire la modificările și îmbunătățirile viitoare. Am publicat chiar și o serie de 15 părți care acoperă toate instrumentele esențiale de care veți avea nevoie pentru a începe proiectarea și prototiparea cu Adobe XD:
Adobe After EffectsAfter Effects nu este un instrument specific pentru prototipuri pentru site-uri web și aplicații (deși vă puteți lăsa departe), dar nu ajuta la mișcarea prototipului pentru cei care caută o modalitate de a crea animații comp / mockup pentru clienți. Creați grafică în mișcare pentru video sau creați efecte de animație pentru Web. Iată un mare articol despre Tuts + de Charles Yeager:
De asemenea, verificați această serie de zece părți despre Tuts + numită Bine ați venit la After Effects.
Adobe Animate CCAdobe Animate este o evoluție a aplicației Flash Professional. Este un instrument care include funcții cum ar fi linia de timp, cadrele cheie, opțiunile abundente de export, suport pentru bibliotecile JavaScript ale terților, ajustările poziției camerei și multe altele. În timp ce se îndreaptă mai mult către animatori, nu vă lăsați păcăliți să vă gândiți că nu îl puteți folosi pentru alte nevoi. Amintiți-vă că instrumentele fac tot ce doriți și că sunt limitate doar de imaginația voastră. Utilizați-l pentru fire de rețea de site-uri web, teste de animație pentru aplicații și multe altele. Puteți citi despre funcționarea interioară a Adobe Animate în acest articol cu adevărat:
Meșteșug PrototypeConstruiți prototipuri hi-fi cu fișierele de design reale. Craft face parte din familia Invision; o companie care achiziționează multe instrumente (cum ar fi Macaw și Easee) în zilele noastre de la entități externe.
Craft Prototype este un set puternic de instrumente care vă permite să proiectați cu date reale, creând ghiduri de stil cu un singur clic. Cu prototip puteți face treaba direct de la Sketch; toate într-un singur spațiu. Cu oglindirea în timp real a telefonului, puteți testa imediat prototipurile de design. Când sunteți gata să vă împărtășiți, vă puteți publica munca direct la Invision pentru a obține feedback instant din partea clienților și a părților interesate. Vă permite chiar să vă prototipați la o fidelitate mai mare cu mișcarea, oferindu-vă o cronologie pentru a vă ajusta vizual folosind cadrele cheie. Generați HTML și CSS, codul nativ rapid și documentația pentru dezvoltatorul dvs. Urmăriți acest scurt videoclip explicând Craft 2.0 Preview - Prototype în Sketch pe Vimeo.
PrincipiuPrincipiul facilitează proiectarea unor interfețe animate și interactive. Fie că proiectați fluxul unei aplicații cu mai multe ecrane, fie noi interacțiuni și animații, principiul vă permite să creați modele care arată și se simt uimitoare. Aplicația apare foarte mult ca interfața utilizator pentru schiță, inclusiv alte aspecte familiare pentru aliniere, crearea plăcii de artă și conexiuni de ecran, plus previzualizări în timp real. Faceți clic pe straturile de animație pentru a vă arunca mai adânc în cadrele cheie și pentru a ajusta curbele personalizate de relaxare, la fel ca și în cazul altor instrumente de animație. Principiul vă oferă libertatea de a experimenta fără a vă limita la tranziții predefinite, plus puteți importa tablouri de artă din Sketch.
Aplicația Principiul Mirror pentru iOS permite altora să vizualizeze desenele dvs. pe dispozitivul lor. În timpul proiectării, puteți interacționa instantaneu conectând dispozitivul la computer sau exportați o aplicație Mac independentă pentru al vizualiza.
AtomicAtomic este o aplicație bazată pe web care se integrează cu Sketch, permițându-vă să importați modele de acolo sau oriunde ați alege. Aducerea de modele în Atomic este simplă; utilizați pluginul Sketch puternic sau picătură în elemente de la instrumentul dvs. de design preferat.
Atomic are built-in instrumente de desen și layout pentru proiectarea de la zero sau clădire pe modele importate. Conectați-vă rapid modelele utilizând o serie de gesturi și tranziții pentru dispozitive mobile sau desktop. Utilizați CSS personalizat pentru a aplica stiluri suplimentare și exportați, de asemenea, CSS-ul dvs. pentru a permite accesul altor dezvoltatori. Citiți mai multe despre caracteristicile lui Atomic pe site-ul lor web.
ProtoCreați animații sofisticate pentru orice model de design interactiv cu linia de timp ușor de folosit cu Proto. Aplicația vine cu un set complet de biblioteci UI, cum ar fi iOS9, Material Design, Windows 10 și multe altele. Desenele pot fi importate utilizând pluginul Sketch sau Photoshop; importați-le în straturi și sincronizați cu Dropbox. Exportați activele UI direct. Examinați prototipurile din browser sau din dispozitivele care utilizează proto app pentru IOS sau Android. Trimiteți-le clienților sau membrilor echipei să colaboreze și să genereze feedback. Proto se integrează cu instrumentele de testare pentru utilizatorii de vârf pentru a obține feedback puternic și înțelegere.
Aflați mai multe despre caracteristicile sale pe site-ul Proto.
JustinmindJustinMind este un produs bazat pe aplicații pentru transformarea machetelor simple în prototipuri interactive pentru iOS și Android și crearea de fire de rețea web și mobile. Profitați de bibliotecile UI pre-construite, încorporați HTML și documente în orice doriți în inima voastră. Conturile plătite permit mai multor utilizatori să interacționeze simultan cu același prototip, făcând feedback fără efort pentru a câștiga. Are chiar o bibliotecă extinsă de widget-uri pre-existente adaptate șablonului dispozitivului selectat pentru proiectul dvs. Elemente cum ar fi butoane interactive, casete de selectare, liste și chiar parlaxă sunt la dispoziția dumneavoastră.
Dacă sunteți nou la acest instrument, acesta este împachetat cu tutoriale și filme ghidat pentru toată lumea de la începător la expert. Deși oferă un plan gratuit pentru abilitățile de partajare a browserului, trebuie să faceți upgrade la un cont plătit pentru colaborarea dintre membrii echipei dvs. Cu JustinMind Prototyper puteți importa imagini din orice instrument de proiectare sau direct din browserul dvs. web și le puteți transforma în prototipuri de web captivante și interesante cu instrumentul "hotspot imagine". Exportați prototipul într-un document HTML complet funcțional și îl puteți face ușor accesibil în orice browser web.
Origami este construit și folosit de designeri de pe Facebook și a fost folosit pentru a crea astfel de aplicații cum ar fi Instagram, Messenger și Paper. Copiați orice lucru de la Sketch și lipiți straturile native în Studio Origami. Reglați rapid, adăugați comportament și animați orice proprietate a stratului fără a vă întoarce. Instrumentul oferă designerilor o gamă de gesturi și animații de tranziție care sunt comune modelelor UI.
Origami oferă funcții utile pentru prototipuri interactive, împreună cu pluginurile pentru Sketch și Photoshop, precum și o bibliotecă de documentare completă cu forumuri.
Există o caracteristică "Export la cod", care vă permite să vă transformați designul vizual în mostre de cod scrise pentru iOS, Android sau web. Nu puteți împărți în mod direct prototipurile cu persoane care operează pe alte dispozitive decât dvs., deși vă puteți previzualiza prototipurile cu Origami Live, disponibile pentru Android și iOS. Verificați tutorialele pentru mai multe informații despre site-ul Origami.
FlintoFlinto pentru Mac este un instrument bazat pe aplicații, care vă permite să creați orice, de la prototipuri simple, până la prototipuri cuprinzătoare, cu interacțiuni. Nu există programe sau termene; este un instrument de prototip pentru designeri în centrul său. Așezați obiectele și componentele pe care le doriți. Tranzițiile pot fi simple sau complexe, iar tranzițiile sunt reutilizabile. Aveți control precis asupra fiecărui strat, inclusiv relaxarea primăvară sau cubică-bezier.
Utilizați "designer comportament" pentru a crea micro-interacțiuni care există într-un singur ecran. Acest lucru este perfect pentru lucruri cum ar fi efecte de buton, comutatoare de comutare, animații în buclă și animații bazate pe parcurgere.
Adăugarea de zone de defilare pe ecrane este și ușor; selectați straturile și faceți clic pe butonul "grup de defilare". Aveți posibilitatea să optimizați o varietate de opțiuni, să creați grupuri de parcurgere a paginilor, grupuri de derulare a cuiburilor și chiar să creați animații bazate pe parcurgere.
Toate modificările pe care le faceți în Flinto pentru Mac pot fi testate imediat în fereastra de previzualizare sau pe dispozitivul iPhone sau iPad conectat la WiFi utilizând aplicația gratuită de vizualizare pentru iOS.
Aplicația de vizualizare a aplicației iOS de la Flinto este gratuită în App Store pentru a fi descărcată de oricine, astfel încât să puteți trimite fișierele Flinto oricui vreți să le distribuiți.
WebflowWebflow este o altă aplicație bazată pe web care rulează direct în cele mai recente versiuni de Chrome și Safari. Aceasta înseamnă că este optimizat în prezent în acele browsere, însă codul produs are suport de browser încrucișat.
"Creați site-uri dinamice, receptive, fără a scrie cod. Lansați cu un clic și bucurați-vă de cea mai rapidă și cea mai fiabilă găzduire de pe web. Exportați un cod curat, semantic, pentru a le oferi dezvoltatorilor. "
Webflow se concentrează puternic pe animațiile web, interacțiunile și designul web receptiv. Interacțiunile 2.0 se apropie în curând și vor oferi mai mult control pentru animații și interacțiuni între punctele de pauză (adesea un designer de puncte de durere exprimă) și, bineînțeles, ușurința de construire vizuală vs. un proxy de cod.
Pentru a vă oferi un gust al posibilităților Webflow, verificați această demonstrație live, care poate fi vizualizată și în Webflow sau verificați codul produs în acest demo CodePen. De asemenea, este benefic să obțineți un gust de interfață utilizator în acest videoclip.
Calitatea codului produs este semantică, lizibilă și ușor de utilizat, dacă o exportați și o folosiți extern sau o transferați către un dezvoltator. Iată câteva demonstrații care prezintă codul produs.
Interacțiunile V1 sunt disponibile în prezent, iar interacțiunile 2.0 vor include mai multe personalizări cu animații de tip parallax și interactivitate construită vizual; animații bazate pe poziția cursor / live-scroll. Webflow speră să lanseze versiunea beta destul de curând, astfel încât interacțiunile 2.0 vor fi o mare parte a interfeței și un motiv major pentru mulți designeri și dezvoltatori de a utiliza Webflow.
Mulțumită lui Waldo Broodryk de la Webflow, care a avut timp să răspundă la multe întrebări și să împărtășească demo-urile și cunoștințele sale.
Editorul bazat pe browser-ul Marvel vă permite să conectați toate modelele dvs. împreună, să adăugați gesturi și tranziții pentru a vă face prototipul să se simtă exact ca o aplicație sau un site web real. Creați prototipuri pentru iPhone, iPad, Desktop, Apple TV, Apple Watch și Android.
Marvel vine cu caracteristici cum ar fi colaborarea, comentarea, împreună cu proiectarea în browser-ul dvs. cu "Canvas", plus puteți adăuga imagini folosind Photoshop, Sketch sau stilou și hârtie. Utilizatorii pot face clic și trage pentru a crea puncte hotspot interactive pe desene sau modele care reacționează atunci când sunt apăsate sau atinse. Marvel vine cu alte caracteristici interesante cum ar fi un plugin pentru Sketch și chiar un instrument iOS. Aplicația iOS include acum Canvas (menționat anterior), instrumentul de design rapid al lui Marvel, care vă permite să creați machete de aplicații de la zero. Această aplicație include, de asemenea, Iconfinder și Unsplash, care vă oferă o bază de date epică de peste un milion de fotografii și icoane de stoc pentru a le încorpora în desenele și modelele dvs..
De asemenea, Marvel oferă funcții precum rolurile utilizatorilor, organizarea proiectelor utilizând foldere, sincronizarea desenelor din Google Drive, opțiuni pentru încorporarea video și audio de pe YouTube, Spotify, Vimeo și SoundCloud.
Placeit: generator de machetePlaceit este un generator de machete; un instrument online care vă permite să încorporați propriile desene sau modele (fie ele UI, logo-uri, alte elemente de branding) în medii de prezentare. De exemplu, este posibil să aveți un design de aplicații pe care doriți să-l plasați într-un iPhone pe o masă de cafea sau să vă suprapuneți logo-ul pe cămașa unui model.
Poate că v-ar plăcea chiar să vă vedeți design-urile încorporate în videoclipuri precum:
Interfața UI încorporată în filmul de stocuri PlaceitCu aproape 3.000 de șabloane și numărare, Placeit are siguranța că aveți ceea ce căutați.
Indiferent de instrumentul pe care îl decideți să îl utilizați, alegeți cel care se potrivește cu dvs. și cu cel cu care vă simțiți cel mai bine. Lăsați un comentariu mai jos dacă ați avut experiență cu oricare dintre instrumentele menționate pentru a ajuta pe alții să încerce să decidă la ce instrument să vă îndreptați. Sper că acest articol vă ajută să obțineți o mai bună înțelegere și să ajungeți la o decizie educată atunci când va veni timpul să alegeți.
Mulțumiri speciale acestor oameni pentru contribuția lor, schimbul de cunoștințe și opiniile în timpul cercetării mele:
