10 instrumente de prototipare obligatorii pentru web designeri

Pentru majoritatea web designerilor moderni, prototipul a devenit o parte integrantă a procesului creativ. Pe vremuri, trebuia să încadrați schițe, apoi să le codificați și abia apoi să testați un prototip. Aceasta este o mulțime de muncă și vine la o mare pierdere de productivitate. Din fericire, în zilele noastre, puteți să prototipați o aplicație sau un site web fără a fi nevoie să scrieți codul tehnic pentru aceasta.

Vă puteți imagina că trebuie să scrieți funcții pentru fiecare buton și tranziție în viitoarea dvs. aplicație mobilă? Cantitatea de timp pe care ar fi nevoie pentru a obține prototipuri clienților dvs. ar fi exponențială. Așadar, s-a născut o nouă frontieră pentru instrumentele de proiectare și majoritatea le cunosc drept „instrumente de prototipare”.

În esență, un instrument de prototipare poate fi folosit pentru a crea o „demo” funcțională a aplicației sau a site-ului dvs. web, fără a fi nevoie să scrieți codul de bază. Mai degrabă, puteți să vă proiectați aplicația mai întâi și apoi să aplicați principiile de prototipare pentru a face ca aplicația să pară funcțională.

Este o modalitate excelentă de a începe să introduci concepte clienților tăi, dar și de a-i ține la curent în mod frecvent. În cele mai multe cazuri, clienții vor înțelege mai bine cum va funcționa aplicația lor și vor arăta ca dacă li se prezintă în mod constant un prototip valid. Și pentru această postare, ne vom concentra în mod special pe astfel de instrumente.

Amintiți-vă că productivitatea are un cost, așa că unele dintre instrumentele din această postare ar putea necesita o investiție nominală pentru un abonament. Există, totuși, și opțiuni gratuite disponibile și am acoperit câte am putut.

InVision

Probabil regele instrumentelor de design web, InVision este mereu la curent cu cele mai recente tendințe din industrie. Instrumentele și conținutul lor de design sunt bine recunoscute în comunitate. Și cel mai important, InVision construiește instrumente de design ca designeri înșiși, pentru designeri. Așadar, obțineți nu numai funcționalități de top, ci și o experiență rafinată a utilizatorului.

Studio este produsul asupra căruia am dori să vă atragem atenția, deoarece Studio este ceea ce oferă cea mai mare flexibilitate în departamentul de prototipare. Este complet integrat cu instrumente de proiectare, cum ar fi Sketch, astfel încât să puteți importa/exporta direct fișierele de proiectare între ambele instrumente.

Studio s-a născut din cunoștințele obținute lucrând îndeaproape cu unele dintre cele mai bune echipe de design din lume și găsind inspirație în modul în care creează cele mai iubite produse din lume.

Aplicația InVision

Caracteristica numărul unu pentru Studio este motorul său de animație în profunzime. Animațiile compensează multe dintre elementele interfeței de utilizare în designul modern al aplicației, așa că a putea reflecta stări atât de diferite într-un prototip este cu adevărat revoluționar.

Nu numai asta, ci și InVision's Studio este creat pentru a fi responsive universal. Nu este nevoie să recreați același prototip pentru diferite dispozitive. În schimb, un design se va adapta în mod natural nevoilor diferitelor dispozitive, inclusiv computerelor desktop.

ProtoPie

Motivele pentru a construi prototipuri sunt multe, nu numai că încurajează gândirea creativă, dar te ajută și să construiești un produs mai bun. Pentru un instrument relativ nou, cum ar fi ProtoPie, călătoria lor poate fi rezumată într-un singur cuvânt: puternic . Aplicația este recunoscută în mod repetat ca fiind unul dintre cele mai avansate, dar simple instrumente de prototipare de pe piață.

Și dacă acest lucru nu este suficient de convingător, iată motivele pentru care atât de mulți designeri le place să folosească ProtoPie:

• Curba de învățare foarte eficientă, înscrieți-vă și începeți să construiți imediat.
• Utilizați funcții avansate pentru a adăuga elemente de interacțiune profundă, inclusiv cele mai cunoscute animații cu gesturi.
• Profitați de Variabile și Formule pentru a implementa straturi de design personalizate. Ajută la adăugarea de interacțiuni mai autentice.
• Transformați-vă desenele din Sketch, Adobe XD sau Figma în prototipuri extrem de interactive în ProtoPie și îmbunătățiți-vă întregul flux de lucru.
  
• Disponibil pentru iOS și Android, astfel încât să vă puteți testa prototipurile pe orice dispozitiv instantaneu.

Nu este surprinzător faptul că companii precum Google, Reddit și Microsoft l-au ales ca unul dintre instrumentele lor esențiale de design. Fluxul de lucru și productivitatea sunt întotdeauna de cea mai mare prioritate pentru orice echipă de proiectare, iar ProtoPie le oferă ambele într-un mod eficient.

ProtoIO

ProtoIO este unul dintre acele instrumente care nu arată bine doar pe hârtie, ci și într-un caz real de utilizare. În timp ce instrumentul se concentrează pe prototipuri, nimic nu vă împiedică să îl utilizați și pentru nevoi complete de design web. Cu funcții vectoriale integrate, este ușor să creați animații cu atenție complexă la detalii.

Cea mai bună parte este că nu trebuie să te bazezi prea mult pe tine. Adică, ProtoIO vine pre-ambalat cu o mulțime de șabloane și stiluri preexistente, astfel încât să le puteți aplica rapid structurii dvs. generale de design. În acest fel, puteți experimenta adevărata „prototipare rapidă” și vă puteți economisi o mulțime de timp.

Evident, dacă lucrați la proiecte mari - veți avea posibilitatea de a săpa adânc în designul dvs. Dacă scopul tău principal este să creezi o aplicație cât mai realistă posibil (sub forma unui prototip), atunci această aplicație te va ajuta să faci asta rapid și ușor. De menționat este faptul că ProtoIO se concentrează pe o experiență de editare bazată pe web, cu toate acestea, o aplicație offline este ușor disponibilă.

Iată câteva alte funcții pe care îți va plăcea să le folosești:

• Gradienți instantanei, astfel încât să nu fiți nevoit să vizitați site-uri externe.
• Directorul de active care facilitează gestionarea și organizarea fișierelor de proiect.
• Creați grupuri și straturi și editați-le pe toate simultan pentru o experiență de flux de lucru cu adevărat avansată.
• Sincronizați-vă toate proiectele cu Dropbox pentru a avea acces la fișierele importante oricând aveți nevoie de ele.

Ca și în cazul oricărui instrument, va dura puțin timp pentru a învăța dezavantajele. De la început, este posibil să importați proiecte din aplicații precum Sketch, Photoshop și XD. Puteți chiar să lucrați cu fișiere care sunt destinate aplicațiilor de realitate virtuală. Deci, acesta este un plus definitiv.

Draftium

Ce zici de un instrument de design care îți oferă toate elementele de bază pentru prototipuri din cutie? Aceasta este premisa pentru Draftium. O aplicație stelară care se concentrează pe colaborarea în timp real între echipa ta de proiectare. Una dintre caracteristicile mai bune ale Draftium este biblioteca de peste 300 de șabloane.

Puteți alege literalmente un șablon preexistent și puteți începe să construiți imediat. Șabloanele sunt împărțite în categorii, acoperind aproape toate industriile cunoscute de pe web. Odată ce ați selectat șablonul, fiecare element din șablon este separat ca un bloc.

Blocurile pot fi modificate individual, inclusiv eliminarea sau adăugarea de elemente folosind nimic altceva decât un panou de setări. Și asta este valabil și pentru adăugarea de animații, forme și alte elemente de design. O mare parte din fluxul de lucru este cu adevărat drag & drop, ceea ce vă va spori productivitatea de zece ori în prima zi.

Freelanceri, agenții și designeri din întreaga lume folosesc acest instrument de design al anului Product Hunt 2018 pentru a crea prototipuri perfecte.

Cred că utilizatorul ideal ar trebui să fie noi echipe de designeri și agenții care caută să-și eficientizeze procesul de proiectare. A avea atâta flexibilitate în aplicații este rar. Iar faptul că poți aplica șabloane globale este un avantaj enorm în ceea ce privește timpul necesar pentru a proiecta aplicații și site-uri web pentru clienții tăi.

Justinmind

Justinmind este încă un alt instrument puternic de prototipare pentru proiecte mobile și desktop. Replică situații din viața reală în timp ce acoperă domenii precum designul interactiv și dinamic. Când vine vorba de crearea de prototipuri fără cod, Justinmind are multe de oferit.

Toate proiectele noi încep prin a le selecta tipul (Wireframe & Prototype, iar apoi puteți selecta tipul de șablon cu care doriți să lucrați. Justinmind acoperă interfețe precum Web, iOS și Android. Și da, importând fișierele de design existente din alte instrumente este, de asemenea, o posibilitate.

Nu suntem doar pasionați de produsul nostru, ci și de tot ceea ce este legat de oferirea utilizatorilor noștri cea mai bună experiență posibilă. Muncim din greu pentru a oferi tuturor clienților Justinmind din întreaga lume un serviciu de asistență excepțional.

Personalul Justinmind

În continuare, aș dori să vă aduc în atenție o altă caracteristică fantastică și integrată. Acesta se numește „Biblioteca UI”. În esență, această bibliotecă include mii de widget-uri pe care le puteți aplica modelelor dvs. în timp real. Widgeturile constau din elemente precum Mesaje, Meniuri, Media și multe altele. Cu alte cuvinte, uitați de necesitatea de a crea un meniu Hamburger, deoarece puteți alege pur și simplu dintre elementele UI preexistente.

Deci, pentru a rezuma, nu există nicio îndoială în mintea mea (fără joc de cuvinte!) că Justinmind se află printre regii soluțiilor de prototipare. Pe lângă paleta sa versatilă de caracteristici, veți face, de asemenea, parte dintr-o comunitate vibrantă de designeri. Și acesta este întotdeauna un lucru bun.

Axure

Până acum, am investigat unele instrumente de top, dar mai sunt multe de făcut. Și Axure este următorul nostru instrument de pe listă. Această platformă foarte renumită s-a impus ca un kit de top pentru wireframing. Dar face progrese și în departamentul de prototipare. Și poate în moduri mai tehnice decât orice alt software menționat în acest articol.

Desigur, acest lucru va avea un cost. Dacă doriți să profitați de întregul potențial al lui Axure, va trebui să învățați puțin cod. Dar, din nou, dacă echipa ta lucrează la proiecte mari în mod constant, probabil că ai deja disponibili designeri front-end.

Odată ce vă dați seama, veți putea beneficia pe deplin de funcții precum Interacțiuni dinamice și Managementul fluxului. În esență, dacă proiectul dvs. necesită multă „călătorie a utilizatorului”, acest instrument este printre cele mai bune pentru a vă ajuta să personalizați hărți sofisticate de călătorie de-a lungul proiectelor dumneavoastră.

Iată câteva alte caracteristici notabile:

• Indiferent dacă creați diagrame, călătorii ale clienților sau wireframes, Axure RP vă ajută să documentați problemele și să îi aduceți pe toată lumea pe aceeași pagină.
• Primiți notificări despre cele mai recente modificări și discuții prin e-mail, Slack sau Microsoft Teams.
• Lucrați cu proiecte de înaltă și joasă fidelitate.
• Creați interacțiuni complexe, cum ar fi autentificarea utilizatorului și previzualizarea media din mers.

În acest moment, Axure este disponibil pentru sistemele Windows și macOS. În plus, primele 30 de zile sunt în casă (perioada de probă). Ar trebui să fie timp mai mult decât suficient pentru a lucra la mai multe proiecte și a afla unde Axure este potrivit pentru nevoile dvs.

Încadrator

Este un fel de nebunie să te uiți la peisajul designului web modern. Numai în ultimii 3 ani, majoritatea site-urilor web s-au îndepărtat de orice fel de sentiment „static” pentru ele. Și asta include teme pentru platforme precum WordPress. Deci, se pare că toată lumea a învățat puțin de JavaScript. Și, în consecință, posibilitățile de design s-au deschis la fel ca o cutie a Pandorei.

Dar cine se plânge? Cu cat mai multi cu atat mai bine. Accesul la diferite instrumente și software este esențial pentru succes. Unele fac lucrurile mai bine decât altele, în timp ce unele mărci inovează dincolo de normă. Un astfel de brand este Framer, care fără îndoială a provocat o mulțime de discuții în comunitatea designerilor.

Am lansat Framer în urmă cu patru ani pentru a construi o modalitate simplă prin care oamenii să-și dea viață designurilor statice cu ajutorul codului. Acum Framer este un instrument interactiv complet de design, prototipare și colaborare în care echipele de la Dropbox, Pinterest, Twitter și altele au încredere. Și abia începem.

Framer, Inc.

Dacă ați folosit vreodată Sketch, atunci Framer se va simți îngrozitor de similar. În sensul bun, desigur. Interfața utilizator perfectă a Framer este greu de trecut cu vederea. Crearea de noi machete, adăugarea de elemente noi și implementarea animațiilor se simte pur și simplu fluidă. Un semn de experiență excelentă a utilizatorului.

În timp ce Framer oferă management integrat al interacțiunilor, funcționează excelent împreună cu React. O bibliotecă JavaScript binecunoscută pentru bootstrapping interfețelor utilizator. Te apropie mult de a te face să simți că deții controlul asupra lucrurilor.

Origami Studio

Facebook ar putea să nu aibă cea mai mare reputație în departamentul de securitate, dar cu siguranță știe cum să construiască software robust. Și Origami Studio este încă un alt exemplu în acest sens. Proiectat inițial pentru uz intern, Origami este acum disponibil pentru toată lumea gratuit. Odată ce îl puneți în funcțiune, este o bucurie absolută să lucrați cu el.

Facebook a investit enorm pentru ca Origami să fie cât mai ușor de înțeles. Gândiți-vă la videoclipuri, documentație și inspirație din comunitate. Ar trebui să puteți avea primul prototip animat gata în câteva minute de la utilizarea aplicației.

Proiectele Origami Studio pot fi, de asemenea, transformate în prezentări separate. Deci, dacă trebuie să aduceți un raport de proiectare vineri după-amiază, acest instrument va simplifica întregul proces. Cred că este, de asemenea, unul dintre acele instrumente rare de pe lista noastră care se concentrează exclusiv pe aspectul prototipării. Poate că e un lucru bun?

Alva

Alva este un instrument de proiectare vizual în ascensiune bazat pe componente de cod. Este dezvoltat ca un instrument cu sursă deschisă, așa că puteți atât să verificați codul proiectului, cât și să trimiteți cereri de extragere sau probleme.

Deci, principala diferență între alte instrumente va fi caracteristica componentelor codului. Astfel de componente vor trebui furnizate de echipa ta de dezvoltatori. Ceea ce nu ar trebui să fie o problemă pentru agențiile mai mari.

Începeți cu un set minim de componente pentru a schița conceptele și repetați-vă rapid echipa pentru a crea și a îmbogăți componente, a perfecționa designul și implementarea și pentru a compune un prototip funcțional și viu.

Există, de asemenea, capacitatea de a implementa fișiere de design din instrumente precum Figma și Photoshop. Cu mai mult sprijin fiind adăugat în viitor. Dacă ar fi să-l rezuma în câteva cuvinte, Alva caută să simplifice procesul de utilizare și reutilizare a componentelor existente pentru prototipare rapidă.

Ca marcă, s-ar putea să urmați un ghid de stil de design similar și, prin urmare, fiind capabil să stocați și să reutilizați componentele codului, veți îmbunătăți semnificativ productivitatea echipei dvs.

Fază

Phase este probabil cel mai proaspăt produs din această rundă. De fapt, aplicația este disponibilă doar ca „acces timpuriu”, dar va fi lansată la un moment dat în 2019. Primul anunț a venit în 2018, când echipa a explicat care este viziunea lor și cum arată foaia de parcurs. Pentru dreptate, acesta arată ca un instrument de web design al naibii de bun pe care să îl adăugați la repertoriul dvs.

Scopul este de a face din Phase un kit universal pentru un design complet de produs. Există foarte puține instrumente de pe piață cu o astfel de acoperire, așa că va fi un plus frumos pentru fluxul de lucru al oricărui designer.

Comentând mai multe despre funcționalitate, Phase spune: „Noi credem că adevărul este că, după ani de presupuse progrese, încă avem de-a face cu instrumente de design de imprimare. Sigur că le-am lipit cu bandă adezivă un lucru sau două, dar fundațiile lor sunt în esență aceleași. Merităm mai bine. Este timpul ca produsele noastre să evolueze cu adevărat. „ .

În ultimele două paragrafe din anunț, echipa lui Phase a adus în discuție subiectul codului. Ca și în, codul este folosit ca mijloc de proiectare. În general, este invers. Folosești instrumente pentru a proiecta un aspect, apoi ai un cod de dezvoltator pentru tine. Ei bine, cu Phase, se va pune mult mai mult accent pe scrierea codului ca mijloc de a îndeplini un design.

Acest lucru asigură mult mai multă flexibilitate și, cu siguranță, adaptabilitate pentru diferite dispozitive. Când construiți ceva pe baza unui „ecran” mai degrabă decât a unei „pagini”, devine mult mai ușor să vă transplantați designul pe mai multe medii diferite, inclusiv pe dispozitivele Internet of Things.

Concluzie

În mod clar, opțiunile pentru aplicații excelente de prototipare pentru design web sunt numeroase. Și cred că a fost important să discutăm și despre unele alegeri mai puțin cunoscute și viitoare. După cum știți, designul web evoluează foarte rapid în acest moment.

Posibilitățile tehnologiei moderne sunt extrem de extinse, ceea ce înseamnă că crearea de modele unice și interesante nu se mai limitează la câțiva oameni selectați. Ca atare, instrumentele și aplicațiile enumerate pentru această postare reflectă schimbări atât de rapide și ar trebui să vă ofere resurse ample pentru a aborda nevoile următorului dvs. proiect cu cea mai mare precizie.

Dacă aveți întrebări sau aveți nevoie de ajutor, spuneți-ne prin comentarii și vom face tot posibilul pentru a vă satisface.