de Leon Barnard

Cum se utilizează wireframe cu sisteme de proiectare

Cum se utilizeaza wireframe cu sisteme de proiectare
Fotografie de Med Badr Chemmaoui pe Unsplash

În cei peste 10 ani ca designer UX, una dintre cele mai frecvente întrebări pe care mi le-am pus despre wireframes este cât de multe detalii vizuale să pun în ele.

Există o eleganță atractivă pentru o schiță simplă alb-negru, dar uneori poate duce la lacune în înțelegerea comună a ceea ce va arăta cu adevărat produsul final.

Cadrele metalice strălucesc în primele faze ale dezvoltării produsului, când ideea și iterația rapidă sunt cele mai apreciate. Dar ceea ce le face ideale pentru această fază le împiedică și în faza următoare, când precizia pixelilor și detaliile vizuale sunt solicitate pentru implementare.

Drept urmare, mulți oameni (am fost vinovat de acest lucru) încearcă să încorporeze detalii fine și estetice în cadrele lor prin reglarea fonturilor, adăugarea de culori și utilizarea altor efecte vizuale.

Acest lucru poate duce adesea la confuzie atunci când aceste fire-proto-fidelitate sunt utilizate ca specificații de implementare și trimise „peste perete” echipei de dezvoltare. Majoritatea instrumentelor de încadrare prin sârmă nu sunt optimizate pentru a crea artefacte care arată și se simt ca un produs finit. Cu toate acestea, crearea de redări lustruite pentru fiecare ecran sau un prototip de înaltă fidelitate necesită mult timp s-ar putea să nu se traducă bine în produsul final oricum.

Dar există o altă cale?

Există sigur! O modalitate prin care vă puteți menține wireframe-urile cu o fidelitate redusă, obținând totuși acea înțelegere puternică și comună a aspectului implementat.

Sisteme de proiectare pentru salvare

O alternativă la împingerea cadrelor de sârmă dincolo de limitele lor este să le mențineți cu o fidelitate redusă și să lăsați un alt instrument să facă treaba de a specifica aspectul.

În acest articol, voi explica de ce, cel puțin pentru aplicațiile web și site-urile, un instrument excelent pentru acest job este sistem de proiectare.

Înainte de a vă scufunda, să definim ce este un sistem de proiectare.

La fel ca precursorul lor, ghidurile de stil, sistemele de proiectare definesc aspectul aplicației. Ei merg totuși cu un pas mai departe, în sensul în care deseori definesc comportament și sunt susținute de codul de lucru.

Companiile mari folosesc sisteme de proiectare de mult timp. Până de curând, au fost prea mari în muncă pentru companiile mai mici, deoarece deseori au necesitat designeri și dezvoltatori dedicați care lucrează în afara echipelor primare de produse.

Iată un exemplu din IBM Carbon Design System, afișând aspectul și codul pentru butoane.

Cum se utilizeaza wireframe cu sisteme de proiectare
Sistem de proiectare a carbonului butoane

Peisajul sistemului de proiectare sa schimbat după Bootstrap Framework a fost lansat în 2011. Este un kit de pornire gratuit pentru dezvoltarea web care oferă șabloane HTML compatibile, robuste și, în general, stiluri CSS arătoase, care pot fi personalizate pentru marca dvs.

Acesta vine cu propriile definiții ale grilei și tipografiei, precum și stiluri pentru butoane, formulare și multe altele. Pe scurt, este nevoie de multă muncă grea pentru a începe un proiect web și pentru a vă asigura că acesta funcționează în toate browserele.

Bootstrap și alte cadre precum acesta au fost utilizate ca bază pentru sistemele de proiectare pentru companiile mai mici care nu au resursele pentru a-și construi propriile lor.

După cum puteți vedea mai jos, Bootstrap este foarte asemănător cu sistemele de design corporativ, precum cel prezentat mai sus.

1611289569 235 Cum se utilizeaza wireframe cu sisteme de proiectare
Bootstrap butoane

Sisteme de proiectare + Wireframes în practică

Principalul avantaj al asocierii unui sistem de proiectare cu un instrument de încadrare prin sârmă este că vă poate elibera de griji privind aspectul, simțirea și comportamentul atunci când s-a încadrat. Cu toate acestea, acestea oferă interpretări perfecte pentru pixel ale componentelor finale ale produsului.

Când știți deja cum va arăta un buton (sau o filă, un meniu etc.) și care vor fi tranzițiile de stare ale acestuia atunci când faceți clic pe el, atunci nu trebuie să îl modelați în wireframe. Alb și negru și Balsamiq Sans este bine.

Dacă aveți un sistem de proiectare la care puteți face referire, vă puteți permite să treceți direct de la wireframes la cod, fără a lăsa viziunea finală nedefinită.

Iată cum le puteți împerechea. Veți descoperi că se înțeleg destul de bine împreună!

Dacă aveți deja un sistem de proiectare, minunat. Dacă nu, puteți începe cu o descărcare personalizată a Bootstrap sau fundație. Următorul pas este să creați o mapare între acesta și comenzile din instrumentul dvs. de wireframing.

O cartografiere înseamnă în esență dezvoltarea unui acord comun de „acest lucru înseamnă că”. Puteți face acest lucru creând un document care prezintă aceste mapări sau pur și simplu având o întâlnire cu echipele de proiectare și dezvoltare în jurul unui ecran pentru a le rezolva.

Iată un exemplu al modului în care ați putea cartografia unele Balsamiq comenzi pentru componentele Bootstrap (ați putea începe, de asemenea, cu Biblioteca Bootstrap Wireframes To Go).

1611289569 240 Cum se utilizeaza wireframe cu sisteme de proiectare
Maparea simplă a controalelor wireframe la comenzile UI codate

Notă: Este ok să folosiți o anumită culoare, dar ar trebui să fie utilizată doar atât cât este necesar pentru a indica stări și selecții, de exemplu.

A avea acest tip de cartografiere înseamnă că dezvoltatorii nu mai trebuie să se întrebe dacă culorile din wireframe ar trebui folosite în codul lor. Ei pot traduce doar în cap că un buton albastru în wireframe înseamnă de fapt un buton verde în interfața de utilizare (dacă aceasta este culoarea pe care o utilizați) și că pesmetul separat de > caracterul ar trebui de fapt să fie separat de the / caracter în aplicație, de exemplu.

De asemenea, puteți extinde sistemul de proiectare prin crearea propriilor controale Balsamiq ca Simboluri pentru a mapa la alte componente din biblioteca dvs., astfel:

1611289569 765 Cum se utilizeaza wireframe cu sisteme de proiectare
Simbolurile Balsamiq sunt mapate pentru a proiecta componentele sistemului

Această cartografiere poate evolua și crește în timp, pe măsură ce nevoile și designul se schimbă în organizația dvs.

Iată un exemplu simplu care arată cum ar putea arăta un wireframe completat atunci când este construit împreună cu un sistem de proiectare.

Notă: Albastrul din wireframe nu trebuie să însemne albastru în produsul finit.

1611289570 347 Cum se utilizeaza wireframe cu sisteme de proiectare
Creat în Balsamiq
1611289570 710 Cum se utilizeaza wireframe cu sisteme de proiectare
Creat cu cod

Wireframe la cod de lucru fără artefacte de design suplimentare între ele!

A avea un sistem de proiectare înseamnă, de asemenea, că reutilizați același cod în toate părțile aplicației, astfel încât diferiți dezvoltatori să producă aceeași interfață, ceea ce duce la standarde și consistență mai bune. Și dacă sistemul de proiectare este actualizat, wireframe-urile nu trebuie să se schimbe.

In cele din urma, designerii se pot baza mai mult pe comenzile stocului din interiorul instrumentului mai degrabă decât să petreacă ore întregi încercând să reproducă aspectul pe cont propriu, astfel încât atât ciclurile de proiectare, cât și cele de dezvoltare sunt scurtate.

rezumat

Nimic nu funcționează pentru toată lumea, desigur. Această abordare nu este garantată să funcționeze pentru toate proiectele sau organizațiile. De exemplu, este mai potrivit pentru echipele interne.

Este mai probabil ca clienții din afara organizației dvs. să dorească să vadă o machetă de înaltă fidelitate. De asemenea, majoritatea sistemelor de proiectare a starterului sunt pentru produse bazate pe web. Șabloanele și exemplele de sisteme de proiectare a aplicațiilor desktop și mobile sunt mai puțin frecvente.

În sfârșit, și poate cel mai important, ar trebui să aveți o buna comunicare intre echipele de proiectare si dezvoltare pentru ca această abordare să funcționeze.

O mare parte din înțelegerea comună a conexiunii dintre wireframe și sistemele de proiectare este creată de purtând o conversație despre asta. Anunțarea prin e-mail sau pur și simplu postarea doar pe intranet nu va funcționa. Cascada și echipele îndepărtate la distanță care încearcă acest lucru s-ar putea să nu funcționeze la fel de bine.

Acestea fiind spuse, oferă multe avantaje pentru multe echipe, cum ar fi:

  • Economisește timp la încadrarea prin cablu
  • Nicio nepotrivire între wireframe și realitate
  • Bun pentru metodologiile Lean / Agile în care livrabilele nu trebuie să fie atât de formale
  • Bun pentru echipe mici și startup-uri fără multe resurse (mai ales atunci când se utilizează cadre)
  • Diferite seturi de abilități pot fi aplicate diferitelor zone de proiectare (de exemplu, proiectanți vizuali și dezvoltatori pentru sistemul de proiectare, designeri de interacțiune sau PM-uri pentru wireframe)
  • Procesele de proiectare (wireframes vs. crearea sistemului de proiectare) pot fi realizate independent, rezultând mai puține blocaje
  • Mai multă coerență a interfeței de utilizare a produsului

Mai multe resurse ale sistemului de proiectare