Îmbunătățiți-vă fluxul de lucru cu instrumente de prototipare pentru designeri

Nu știu despre tine, dar sunt mereu în căutarea instrumentului perfect de prototipare pentru fluxul meu de lucru de web design. Există multe opțiuni, dar un lucru este sigur: puteți lucra mai eficient la proiectele dvs. cu prototipare rapidă.

Ai fani HTML, CSS sau Javascript? Dacă acestea sunt tehnologii care vă plac, este posibil să fiți un prototip rapid. În calitate de web designeri, un număr tot mai mare dintre noi au redus decalajul și au făcut niște lucrări de dezvoltare front-end. Pe lângă faptul că suntem reclame vizuale superstar, suntem și creatori de coduri experți.

Având un prototip funcțional, codificat, puteți fi rapid în funcțiune, având posibilitatea de a vă partaja site-ul clienților și de a primi feedback la începutul procesului. Dacă codarea nu este treaba ta, dar vrei totuși să creezi prototipuri într-un ritm rapid, există o serie de instrumente pentru a oferi clienților tăi un prototip de calitate.

De ce prototipare rapidă?

Prototiparea rapidă este adesea o componentă cheie într-un proces agil. Este proiectat și dezvoltat un exemplu activ al site-ului dvs. și, adesea, codul din prototip poate fi reutilizat mai târziu pentru procesul de dezvoltare propriu-zis. Feedback-ul este căutat și dat la începutul procesului, ceea ce ajută la reducerea numărului de modificări în timpul fazei de dezvoltare. Designerii sunt adesea de acord că îmbunătățește designul final, deoarece sunt încercate diferite variații pe parcurs. Atunci când creați un prototip, este important să alegeți un instrument care vă permite să lucrați rapid și eficient, indiferent dacă este vorba de cod sau nu.

Rapid Prototypers aduc valoare fiecărui proiect, iar clienților cu siguranță le place să vadă un exemplu de lucru. Majoritatea oamenilor sunt vizuali și, dacă le este disponibil un prototip, consideră că este benefic să vadă designul în browser, de preferință pe mai multe dispozitive.

Prototipuri statice și de lucru

În mod tradițional, designerii creau o machetă statică pentru prototipuri, adesea în Photoshop sau Illustrator. Aceste machete statice oferă o valoare extraordinară, dar prototipurile funcționale sunt o opțiune excelentă, deoarece modelele pot fi testate instantaneu în browser pe măsură ce sunt dezvoltate. Mulți designeri constată că, pe măsură ce abilitățile lor de codare devin mai puternice, codifică mai rapid și proiectarea în browser devine norma pentru ei. Dacă doriți, nu trebuie să vă bazați pe o machetă statică Photoshop/Illustrator ca cândva.

Cât de detaliate trebuie să fie prototipurile?

Nu există un răspuns corect sau greșit la cantitatea de detalii de design pe care trebuie să o furnizați, depinde doar de client și proiect. Este posibil să fiți familiarizat cu termenul „fidelitate” în lumea designului. Aceasta se referă la cantitatea de detalii și interacțiune incluse într-un design. Fidelitatea scăzută este foarte simplă, adesea „ca schiță” și nu permite utilizatorului să interacționeze cu designul. Sunt oferite foarte puține detalii de design și fidelitatea scăzută include doar informațiile de bază pentru amplasarea componentelor în prototip. Prototipurile de înaltă fidelitate permit adesea interacțiunile utilizatorilor și sunt aproape de o reprezentare adevărată a site-ului web. Elementele de design conțin adesea multe detalii și sunt foarte rafinate.

Prototip de joasă fidelitate.

Prototip de înaltă fidelitate.

Instrumentele pe care le alegeți pentru prototipul dvs. vor depinde de cerințele de fidelitate. Unul nu este neapărat mai bun decât celălalt, depinde doar de scopul proiectului.

Instrumente excelente de prototipare

Acum că am trecut peste elementele de bază ale prototipului, să aruncăm o privire la unele dintre instrumentele disponibile. Instrumentele de prototipare au diferite niveluri de fidelitate și limitări. Dacă codarea este în timonerie, minunat! Dar vom arunca o privire rapidă și asupra unor opțiuni care nu necesită cunoștințe de cod.

Instrumente de prototipare pentru codare rapidă

Framework-urile sunt instrumente care oferă un punct de plecare al codului standardizat, care este format din HTML, CSS, JS etc. În cazul unui prototip, un cadru este o opțiune excelentă pentru a crea rapid un proiect web. De asemenea, poate fi de mare ajutor să creați o temă de pornire pe care să o puteți reutiliza pentru următorul prototip.

Există două cadre grozave care pot permite construirea rapidă. Chiar și atunci când codificați, aveți de ales să mergeți la fidelitate mai mică sau fidelitate înaltă. Puteți obține cât de detaliat sau de bază doriți atunci când abordați prototipul rapid. Odată ce înveți nuanțele acestor instrumente, vei fi surprins de cât de repede merg lucrurile.

Primul prototip rapid – Twitter Bootstrap

În prezent, Twitter Bootstrap este la a treia versiune, așa că a fost perfecționat pe parcurs. Acesta este un cadru grozav pentru a crea un prototip de lucru dacă doriți să creați un cod. Este grozav pentru că este receptiv, ușor de învățat și are o mulțime de componente de design, cum ar fi butoane, modele, pictograme etc. Cu aceste elemente, puteți pune în funcțiune un proiect web rapid și ușor. Multe site-uri web sunt create folosind Bootstrap, astfel încât codul prototip poate fi folosit și mai târziu.

Prototip rapid opțiunea a doua – Fundație

La fel ca Twitter Bootstrap, Foundation este o opțiune excelentă pentru a crea rapid un prototip. Acest cadru este mai de bază decât Bootstrap și necesită mai mult stil CSS în avans, deoarece nu există atât de multe valori implicite. Este, de asemenea, o alegere grozavă, deoarece puteți fi rapid în funcțiune, în timp ce dezvoltați cod reutilizabil. Puteți folosi acest instrument pentru a crea un prototip care ar putea fi de fidelitate scăzută sau de fidelitate foarte mare, în funcție de preferințele dvs.

Opțiuni de prototip care nu necesită codare

După cum am promis, iată câteva opțiuni de prototipare care nu necesită codare. Există o mulțime de opțiuni atât pentru fidelitate înaltă, cât și pentru fidelitate scăzută, sau ceva între ele.

Prototip rapid opțiunea trei – hârtie și creion vechi bune

Acest prototip static poate fi creat foarte rapid. Această metodă este ușor de utilizat și ar trebui să fiți deja familiarizați cu funcționalitatea! Deși este considerat a fi de slabă fidelitate, schița poate reduce presiunea asupra proiectului și permite ideilor să curgă liber. Credeți sau nu, asta uneori ar putea fi tot ce aveți nevoie pentru un prototip. Depinde doar de proiect și client.

Prototip rapid opțiunea patru – plăci stil

Plăcile de stil sunt o opțiune excelentă dacă preferați abordarea statică a prototipului și, de asemenea, doriți ceva de înaltă fidelitate. Modelele de design au un loc puternic în designul web (la urma urmei, elementele de design sunt ceea ce avem nevoie pentru a construi pagina). Dar înainte de a investi timp pentru a crea o machetă de pagină completă, plăcile de stil sunt o soluție excelentă. Acestea servesc ca un pas vital înainte de a investi timp într-un prototip complet detaliat. Tezele conțin toate informațiile vizuale pe care le-ar avea o machetă statică. Culorile, imaginile, stilurile de butoane etc. sunt incluse pentru a oferi clienților o idee despre cum vor arăta elementele de design.

Prototip rapid opțiunea cinci – Omnigraffle

OmniGraffle este o opțiune excelentă care vă permite să creați rapid un cadru de web site, care servește ca un prototip de fidelitate scăzută până la medie. Puteți adăuga linkuri, puteți alege dintre stiluri și obiecte prestabilite și multe altele. Este o modalitate excelentă de a-ți mapa prototipul și apoi de a crea ceva cu care clienții tăi pot interacționa.

Prototip rapid opțiunea șase – Invision Ap

InVision este o opțiune unică, deoarece puteți încărca un prototip static existent și îl puteți face interactiv, fără a fi nevoie de cod. Este o modalitate excelentă de a utiliza un prototip static, de a-l partaja clienților și de a urmări feedback-ul. În plus, puteți efectua teste de utilizator și puteți comunica orice alt feedback cu acest instrument.

Prototip rapid opțiunea șapte Axure

Axure vă permite să creați un prototip interactiv. De asemenea, există diverse elemente de UI care pot fi folosite pentru a vă putea dezvolta și împărtăși ideile. De la cadru rapid la un design lustruit cu culori, degrade, imagini etc., acest instrument oferă o mare varietate de opțiuni de fidelitate. De asemenea, vine cu o opțiune de partajare la îndemână, astfel încât utilizatorii să poată face clic și să vadă cum va funcționa proiectul dvs.

Prototip rapid opțiunea opt – Lucidchart

Lucidchart este bazat pe cloud și funcționează pe mai multe dispozitive. Colaborarea este, de asemenea, ușoară dacă aveți mai mulți oameni care lucrează la proiect. Permite conversația în timp real cu echipa ta și, de asemenea, poți lăsa comentarii direct în prototip. Prototipurile de site-uri web dinamice, de fidelitate medie sunt create cu numeroasele elemente de UI care sunt oferite.

Ce urmeaza?

Sunt multe de luat în considerare atunci când îți găsești instrumentul de prototipare ales. Indiferent dacă preferați codul live sau nu, există instrumente care oferă diverse opțiuni de fidelitate. Dacă lucrați singur sau vă bazați foarte mult pe comunicarea în echipă, îl veți găsi pe cel perfect care se va potrivi nevoilor dumneavoastră.

Acum că sunteți înarmat cu instrumentele perfecte de prototipare, puteți purta cu mândrie insigna unui prototip rapid.