Formă și funcție – Un ghid pentru instrumentele de top Wireframe

În 1487, Leonardo da Vinci a desenat o schemă numită „vehicul de luptă”, proiectată în timp ce era sub patronajul lui Ludovico Sforza, Ducele de Milano. Deși mașina a fost proiectată intenționat pentru a nu funcționa corect, un grup de ingineri a recreat-o în 2010. Schema lui Da Vinci este unul dintre cele mai vechi exemple de cadru de bază.

Termenul wireframe a fost folosit de zeci de ani, cu mult înainte de a fi adoptat de lumea designului web. Wireframes-urile au fost utilizate inițial în software-ul de proiectare asistată de computer (CAD) pentru a ilustra designul unui obiect fără a fi nevoie de detalii. Rezultatul a fost un plan care părea făcut din fire, așadar, am ajuns să avem wireframes.

Dar ce este un wireframe în design și care este scopul de a avea unul?

Un cadru fir în design digital este un ghid vizual sau o schemă de pagină care este lipsit de stil tipografic, culori, grafică și elemente interactive și reprezintă un punct specific în procesul de proiectare. Scopul său este să arate idei de aspect la nivel de pagină care descriu funcționalitatea, comportamentul și prioritatea conținutului.

Designerii folosesc wireframes pentru a conecta structurile conceptuale subiacente cu designul vizual al unui site sau al unui ecran de aplicație. Există trei tipuri diferite de wireframes:

• Low-fidelity - un desen în stadiu incipient fără multe detalii. Wireframes de joasă fidelitate sunt adesea schițe desenate manual sau linii și forme care reprezintă o idee.
• Mid-fidelity - wireframes care încep să arate mai multe detalii ale componentelor și se concentrează pe aspectul conținutului și pe structura generală a paginii.
• Înaltă fidelitate - desene de etapă ulterioară (post iterativă) care descriu mai multe detalii și redări la nivel mai înalt ale componentelor, cu caracteristici comportamentale și accent pe aspectul conținutului.

O evoluție a wireframes-urilor în designul digital este un alt artefact UX și livrabil: fluxul de fir. Wireflow-urile sunt o combinație de wireframes și diagrame de flux, două artefacte pe care designerii UX le-au fuzionat încet într-un alt scop: pentru a ilustra și urmări interacțiunile care reprezintă fluxuri de sarcini într-un produs, cum ar fi o aplicație web.

O problemă pe care o întâmpină designerii cu wireframes-ul este comunicarea călătoriei utilizatorului. Deși există modalități mai complexe de a arăta călătoriile utilizatorilor, există o tendință de a le include în simplitatea unui wireframe. Un instrument util pentru asta este o hartă wireframe.

O hartă wireframe combină wireframes cu călătoriile utilizatorului (sau fluxurile utilizatorului) pentru a demonstra călătoria utilizatorului printr-un produs folosind wireframes.

Cele mai bune instrumente de wireframing

Designerii au o mulțime de opțiuni atunci când decid ce instrument(e) de wireframing să folosească. Noi instrumente intră în mod continuu pe piață, așa că poate fi greu să țineți pasul. Iată câteva caracteristici ale instrumentelor grozave de wireframing de căutat:

• Capacitatea de a produce o varietate de fidelități (de la mic la mare)
• Software stabil, ușor de utilizat și actualizat frecvent
• Șabloane, simboluri și componente standard de interfață de utilizare încorporate cu capabilități suplimentare

Unele dintre instrumentele din acest ghid se concentrează mai mult pe wireframing, în timp ce altele încearcă să atingă un echilibru între wireframing și prototipare și funcționalitatea machetei. Alegerea de a folosi un instrument în detrimentul celuilalt (sau mai multe împreună) se reduce la preferințele designerului.

Balsamiq

Balsamiq este un instrument de wireframing de joasă fidelitate, simplu de utilizat, preferat pentru ușurința în utilizare și aspectul iconic „desenat manual”. Vine cu un set de șabloane prefabricate care pot fi utilizate rapid și ușor cu un editor drag-and-drop. Designerii își pot adăuga propriile active și pot personaliza aspectul.

Crearea de prototipuri de bază poate fi realizată prin conectarea machetelor pentru a crea experiențe simple de clic pentru testarea utilizării atunci când se afișează proiectul în modul Prezentare pe ecran complet sau ca PDF exportat.

Balsamiq este oferit ca versiune desktop (Windows și Mac), serviciu cloud sau ca plug-in pentru Google Drive, Confluence și JIRA.

Moqups

Moqups este un alt instrument creativ de colaborare care se concentrează pe wireframing, dar poate fi folosit și pentru prototipare. Spre deosebire de Balsamiq, este pur bazat pe web și este menit să creeze wireframes pentru aplicații web și mobile.

Principala diferență dintre Moqups și Balsamiq este fidelitatea wireframes-urilor. În timp ce Balsamiq produce un aspect „desenat manual”, Moqups oferă șabloane și kituri pline de culoare pentru aplicații mobile și design web, inclusiv iOS, Android și Bootstrap.

Moqups se distinge de Balsamiq în câteva alte moduri. Software-ul permite editarea obiectelor finite și gestionarea paginilor, oferind designerilor posibilitatea de a defini obiecte „master”, ceea ce poate economisi mult timp atunci când se efectuează modificări ale wireframe-urilor în timpul procesului de iterație.

De exemplu, un designer creează un obiect buton principal cu o anumită dimensiune, formă și culoare. Acest buton este folosit de mai multe ori pe întregul wireframe. Mai târziu, în procesul de iterație, dacă designerul trebuie să schimbe culoarea butonului, în loc să schimbe fiecare obiect buton, îl poate schimba o dată, iar toate obiectele butonului copil sunt imediat afectate.

Pidoco

Pidoco este un instrument de top wireframing axat pe livrabile de joasă fidelitate, cu o anumită interactivitate de bază. De asemenea, bazat pe cloud, folosește componente reutilizabile și se distinge de Balsamiq și Moqups printr-o experiență mai robustă de tip wireframe prin clic.

Pidoco este util pentru aplicații mobile și design web, deoarece are vizualizări mobile încorporate, astfel încât designerii să poată vedea cum vor arăta paginile lor de aplicații pe diferite dimensiuni de ecran. O altă caracteristică încorporată este funcția de exporturi și specificații . Acest lucru îi ajută pe designeri să treacă de la wireframe la prototip/machetă fără a fi nevoie de un plug-in sau extensie.

Picoco arată și se simte cu o fidelitate scăzută, dar include câteva caracteristici care se găsesc de obicei în instrumentele de design mai complexe. Funcționează bine pentru designerii care fac UX lean și trebuie să repete rapid cu cicluri de feedback mai scurte.

Gliffy

Gliffy este un instrument de wireframing de fidelitate medie, cu câteva caracteristici unice care îl diferențiază de Balsamiq și Mockups. O caracteristică unică este capacitatea de a crea fluxuri de fir. Gliffy are încorporate capacități de diagrame și diagrame cu șabloane incluse, hărți mentale și modelare a proceselor de afaceri.

La fel ca celelalte instrumente de wireframing, Gliffy oferă o bibliotecă de forme, pictograme și abilitatea de a partaja wireframes nativ la Atlassian's Confluence, Slack, Basecamp, Trello și WordPress.

Acesta este un instrument de proiectare wireframe UX relativ nou, cu toate acestea, se mândrește cu o bază mare de abonați de designeri profesioniști care caută integrări simple și capabilități dincolo de un cadru static.

Wireframe.cc

Wireframe.cc este un instrument de bază de wireframing la fel ca Balsamiq. Are o interfață curată, fără multe bare de instrumente și pictograme care distrag atenția. Spre deosebire de multe alte instrumente, vă permite să „schițați” wireframes cu un mouse.

Wireframe.cc oferă o bibliotecă de șabloane și o manipulare curată și necomplicată a obiectelor. Un element util pe care Wireframe.cc îl oferă atunci când lucrați cu lean UX, este o adresă URL pentru fiecare pagină wireframe, astfel încât să poată fi partajată pentru feedback rapid și ușor.

Nu există prototipuri sau interactivitate încorporate, deoarece se concentrează exclusiv pe wireframing de joasă fidelitate.

Capricios

Numit „Google Docs” pentru wireframes, Whimsical imită instrumente de diagramă precum OmniGraffle și Visio. Nu se concentrează pe prototipare/machete, deoarece se concentrează principal pe wireframing și diagrame de flux, ceea ce îl face un candidat excelent pentru producerea de fluxuri de fir.

La fel ca Gliffy, Whimsical este un instrument de wireframing de fidelitate medie și include o bibliotecă mare de elemente configurabile (butoane, intrări, casete de selectare etc.).

Colaborarea nelimitată pe același document wireframe în același timp este o caracteristică încorporată excelentă pentru echipele de proiectare la distanță.

Adobe XD

Adobe XD a atras recent atenția designerilor datorită interfeței sale simple, a legăturilor profunde cu alte produse Adobe, a ușurinței de utilizare și a funcționalității încorporate care reduce nevoia de a se baza pe pluginuri și extensii.

Există două moduri de a construi wireframes în Adobe XD. Acestea pot fi construite folosind linii și forme pentru a crea obiecte și elemente sau pot fi construite folosind kituri de interfață de utilizator prefabricate din surse precum behance.net și resurse XD.

O caracteristică care economisește timp a Adobe XD este capacitatea de a crea componente „master” (numite Symbols in Sketch), care sunt utile atunci când se efectuează modificări, deoarece toate componentele instanțiate de la master vor moșteni orice modificări.

Un alt avantaj al folosirii XD ca instrument de wireframing este abilitatea de a comuta în modul de prototipare cu un clic de mouse. Modul de prototipare este încorporat în XD și funcționează în fundal, astfel încât designerii să nu piardă timpul când trec de la wireframes la prototipuri.

Schiță

Sketch, un instrument de design popular pentru designerii UX/UI, oferă o platformă pentru editare vectorială, prototipare și colaborare și are o bibliotecă în creștere de sute de plugin-uri care îi extind funcționalitatea.

Wireframing în Sketch seamănă mult cu Adobe XD cu utilizarea de truse/șabloane și instrumente de desen. Sketch folosește pe scară largă simbolurile , care sunt componente reutilizabile care pot fi definite o dată și utilizate de mai multe ori (butoane etc.). Simbolurile instanțiate preiau, de asemenea, orice modificări aduse simbolului „master”. Acest lucru este avantajos pentru designeri, deoarece adesea sunt multe modificări care trebuie făcute pe parcursul procesului de wireframing.

Sketch permite designerilor să creeze wireframes, prototipuri și machete de înaltă fidelitate. Nu este o aplicație bazată pe cloud, iar unul dintre potențialele dezavantaje este că funcționează numai cu macOS.

UXPin

UXPin este un instrument wireframe de top care acceptă stări interactive, logica și componente programatice, oferind designerilor capacitatea de a codifica interacțiuni, variabile și expresii condiționate.

UXPin merge mult dincolo de wireframing, concentrându-se în primul rând pe prototipare cu biblioteci de componente UI, simboluri, instrumente de desen vectorial și coeditare.

Există o versiune Windows, macOS și cloud/browser. Pentru wireframing de înaltă fidelitate, UXPin funcționează la fel ca Sketch și Adobe XD. Nu este drag-and-drop ca Balsamiq, dar duce prototipurile și machetele la următorul nivel pentru designerii care doresc să rămână într-un singur ecosistem.

Minune

Marvel, un alt instrument de design popular care facilitează wireframingul și prototiparea, oferă designerilor o interfață familiară de tip drag-and-drop pentru crearea de wireframes de joasă până la înaltă fidelitate.

Marvel nu necesită suplimente sau extensii, deoarece toate activele sunt incluse. Platforma este complet bazată pe cloud, ceea ce face ca partajarea wireframe-urilor cu alți membri ai echipei de proiectare sau clienți să fie rapidă și ușoară.

Unul dintre motivele pentru care designerii aleg Marvel pentru wireframing este integrarea sa cu alte platforme precum Jira, Sketch, Confluence, Dropbox, Slack și multe altele. Pentru colaborarea cu dezvoltatorii, echipele de proiectare la distanță și clienții, această caracteristică economisește mult timp designerilor.

Marvel are, de asemenea, un produs numit Pop, care ajută la transformarea schițelor de tip pix și hârtie în prototipuri interactive pentru iPhone și Android. Pop permite designerilor să facă o fotografie a schițelor lor și să le transforme în cadre interactive.

Axure RP

Axure RP există de mult timp și este un instrument excelent pentru crearea de wireframes statice (precum și prototipuri extrem de interactive). Nu este bazat pe cloud, deși funcționează atât pe Windows, cât și pe macOS.

Wireframing poate fi realizat folosind biblioteca sa masivă de componente drag and drop, cu toate acestea, Axure RP este un instrument complex care merge mult dincolo de wireframing. Folosind caracteristicile programatice ale Axure RP, designerii pot crea prototipuri avansate cu funcționalități care reflectă o aplicație complet funcțională.

Având în vedere curba mare de învățare a lui Axure, nu ar avea sens să-l folosești numai pentru wireframes statice. Cu toate acestea, dacă scopul este de a produce prototipuri care sunt extrem de lustruite și funcționale, atunci ar fi instrumentul perfect pentru designerii de produse.

Instrumentele Wireframe preferate ale designerilor Toptal

Am contactat unii designeri Toptal pentru a afla ce instrumente de wireframing folosesc designerii profesioniști și de ce. Iată ce au avut de spus.

„Preferatele mele sunt Adobe XD și UXPin. Încep să aleg XD ca favorit, deoarece este ușor să realizez wireframes rapide și idei de testare, iar de acolo pot începe de fapt designul și chiar prototipul pe aceeași platformă.” - Michael Craig

„Preferatul meu este Pop pentru că este atât de rapid. Oricum îmi desenez wireframes-ul pe hârtie, așa că funcționează grozav și nu trebuie să mă descurc cu nimic. De asemenea, găsesc că este bine pentru tot „nu te îndrăgosti de soluție”, deoarece este atât de clar lo-fi.” - Nicola Rushton

„Folosesc Axure aproape tot timpul pentru munca mea de design. Este un instrument foarte subestimat pentru lucrări de proiectare cuprinzătoare, cu o complexitate foarte mare” - Andi Omtvedt

„De fapt, nu mai fac wireframe în sine – deoarece cred că instrumentele sunt suficient de puternice pentru a produce prototipuri de joasă fidelitate, deci aproape combinând wireframe inițial cu o imagine mai bună. Am adoptat Framer X din ianuarie anul acesta și îmi place.” - Charlie Williams

rezumat

Având în vedere capacitatea de a produce prototipuri sofisticate, wireframing este încă relevantă? Unii designeri profesioniști vor argumenta că wireframes sunt o relicvă a trecutului, în timp ce alții își apără cu fermitate importanța continuă pentru procesul de proiectare.

Astăzi există o abundență de instrumente wireframe care facilitează procesul de proiectare. Unele continuă să se concentreze exclusiv pe wireframing, chiar dacă tendința se îndreaptă către produse hibride care încep cu wireframing, dar includ și capacitatea de a prototipuri și, în multe cazuri, de a produce machete pe deplin funcționale.

Deși a evoluat de la un livrabil de joasă fidelitate la unul de fidelitate medie sau înaltă, Wireframing cu siguranță nu va dispărea.

Citiri suplimentare pe Blogul Toptal Design:

• Cartografierea wireframe: Cum să evitați deplasarea domeniului
• Moarte pentru Wireframe. Direct la înaltă fidelitate!
• Confruntare cu instrumentul de design – Adobe XD vs. Sketch (2019)
• Stăpânește-ți meseria cu aceste instrumente UX de top
• Cele 10 produse UX pe care le folosesc designerii de top