Cum să construiți un cadru de design eficient (Include un cadru gratuit de interfață de utilizare pentru schiță)

Dacă sunteți în lumea designului de ceva vreme, probabil că ați auzit acești termeni: cadru de design, cadru UI, kit UI sau bibliotecă de modele. Toate se referă la același lucru: un sistem de standarde de design, șabloane, modele de interfață de utilizare și componente care sunt utilizate în întregul produs și servesc limbajului său de design.

Dacă nu ați creat un cadru de proiectare înainte, începerea unuia poate părea copleșitoare și vă va consuma timp, dar vă va accelera munca de proiectare și o va face mai eficientă în general.

Să subliniem principalele probleme pe care le rezolvă un cadru de proiectare, de ce aveți nevoie de unul și componentele pe care va trebui să le creați atunci când construiți unul. Veți găsi un cadru Sketch UI descărcabil gratuit mai târziu în articol, care vă permite să vă creați propriul cadru de design.

Ce este un cadru de design?

Fiecare design al interfeței cu utilizatorul începe cu o planșă goală și fiecare designer are un proces pe care îl utilizează pentru a transforma acea pânză goală într-un produs complet funcțional. Acest proces include toate componentele mici de design create și pașii prin care parcurge designerul pentru a construi un întreg coeziv, de la culori la butoane și tot ce se află între ele.

Adesea, această muncă este repetitivă și poate fi consolidată și eficientizată prin crearea unui sistem de modele și componente interconectate. Cu alte cuvinte, un cadru de design .

Cadrele de proiectare rezolvă mai multe probleme, inclusiv:

• Eliminarea inconsecvențelor în designul produsului.
• Creșterea colaborării, eficienței și comunicării între echipele de proiectare și de produs.
• Efectuarea actualizărilor de design mai târziu în procesul de proiectare mai puțin frustrantă.

Prima problemă: Incoerența produsului

Consecvența transformă un design bun într-un design grozav. Consecvența îmbunătățește UX, utilizabilitatea generală și eficiența cu care utilizatorii pot folosi produsele digitale. Indiferent dacă este un site web mic, o aplicație sau un produs SaaS mare, inconsecvențele în design compromit aspectul, senzația, credibilitatea și experiența utilizatorului produsului.

Inconsecvențele apar adesea atunci când o echipă sau un designer face lucrurile prea repede sau face schimbări din mers. Uneori, un designer răspunde la un client sau o parte interesată care cere ceva diferit, arătându-i rapid cum ar arăta acele schimbări. Dintr-o dată, echipa de proiectare se trezește cu patru nuanțe diferite de verde și nimeni nu este sigur care dintre ele este culoarea principală a butonului.

Cadrele de proiectare rezolvă această problemă prin stabilirea unor standarde consistente.

A doua problemă: Lacune de colaborare și comunicare

Adesea, în timpul procesului de dezvoltare, când există mai mulți membri ai echipei implicați, mulți lucrând la proiectare în diferite puncte ale procesului, poate deveni confuz dacă nu există un set de standarde care să ghideze echipa.

Un cadru de proiectare stimulează colaborarea și eficiența prin eficientizarea procesului de comunicare și oferind standarde și direcții clare. Nu mai pierdeți timp alergând înainte și înapoi încercând să vă dați seama ce culoare sau font este cea corectă de utilizat.

A treia problemă: modificări de proiectare în faza târzie

De câte ori trebuie să facă designerii o singură schimbare de culoare în fișierul de design cu 120 de planșe deja dezvoltate? De câte ori este necesar să schimbați o pictogramă care face parte din 200 de componente?

Schimbarea este inevitabilă pe tot parcursul procesului de proiectare, așa se îmbunătățește produsul, dar de multe ori se întâmplă mai târziu decât și-ar dori designerii. Un cadru de proiectare face ca acele modificări din stadiul ultim să fie mult mai puțin dureroase, deoarece este construit pe un sistem de componente orientate pe obiecte. Schimbați-l o dată și se răspândește pe întregul design.

Cum se creează un cadru de design

Acum că știm ce este un cadru de design și problemele pe care le rezolvă, să vorbim despre crearea unuia (și despre ce se află în descărcarea kit-ului Sketch UI furnizată mai târziu în articol).

Cadrul de proiectare folosit pentru acest articol este un singur fișier Sketch care este așezat folosind o ierarhie specifică de componente, cunoscută în Sketch ca „simboluri”. Aceste simboluri facilitează implementarea modificărilor la nivel de fișier cu un singur clic. O schimbare în componenta „master” – „simbolul” – se reflectă instantaneu în toate celelalte cazuri.

Ierarhia cadru de proiectare

Pentru a crea un cadru de design care funcționează bine, începeți prin a configura o ierarhie vizuală solidă. Proiectați cele mai omniprezente componente, cum ar fi mai întâi culoarea și tipografia. Apoi reduceți la cele mai mici, cum ar fi butoanele și componentele de intrare. Gândiți-vă la asta ca la construirea unei case - construiți mai întâi fundația și apoi adăugați celelalte piese pe măsură ce proiectul progresează.

Culoare

Culoarea este cel mai important element dintr-o ierarhie a cadrului de proiectare a interfeței de utilizator – fiecare componentă dintr-un design folosește culoarea. Culoarea provoacă reacții și emoții puternice la oameni și stabilește aspectul general, senzația și tonul unui produs.

O bună practică este împărțirea culorilor în grupuri:

1. Culorile primare sunt culorile principale ale mărcii, utilizate de obicei pentru a crea schema generală de culori a unui proiect și pentru componente cruciale, cum ar fi butoanele.
2. Culorile secundare completează paleta primară - adesea sunt nuanțe, saturații sau nuanțe diferite ale culorilor primare. Tonurile de gri sunt utilizate în mod obișnuit pentru tipografie sau fundaluri. Undeva între cinci și opt niveluri de gri ar trebui să fie suficiente.
3. Culorile de feedback ale sistemului sunt un grup important de care designerii uită adesea. Aceste culori afișează mesaje de sistem, inclusiv alerte, avertismente și notificări.

Grilă: spațiul de proiectare

Odată ce culorile sunt selectate, următorul pas este configurarea unei grile. O grilă păstrează toate celelalte componente de pe pagină în locul potrivit și în ordine. Acesta este spațiul general de proiectare.

Există două tipuri de grile: verticală și orizontală .

Grila verticală este cea care este cel mai des folosită și menține totul aliniat orizontal. Există multe sisteme de grilă populare, cum ar fi Bootstrap sau grila mai veche de 960 px.

O grilă orizontală nu este atât de comună. Pentru tipografie se folosește o grilă orizontală. Creează ritm vertical pentru paragrafe și este frecvent întâlnită în ziare.

Modificatori: Reguli stilistice

Pe lângă culoare și grilă, mai există o componentă care se află în vârf în ierarhia cadrului de proiectare: modificatorii. Ele nu pot fi folosite ca componente autonome – sunt folosite pentru a modifica sau a stila altele.

Acest grup aduce stil unui proiect și include componente responsabile de estetică, cum ar fi formele sau umbrele ; schimbarea lor individuală în fazele ulterioare ale proiectului poate fi greoaie.

Tratați modificatorii ca parametri pentru toate blocurile de construcție ulterioare. Creați simboluri Schiță din trei forme diferite: dreptunghi, dreptunghi rotunjit și cerc. Utilizați aceste forme pentru a crea fiecare componentă a unei interfețe de utilizare, inclusiv butoane, componente de intrare, câmpuri de formular etc. și elemente de fundal.

Această tehnică permite designerilor să se concentreze mai mult pe UX decât pe aspectul componentelor UI. De asemenea, facilitează revenirea la forma de bază, schimbarea stilului acesteia (de exemplu raza colțului) și tot ce este conectat se va actualiza automat.

Tipografie: Conținutul

Tipografia este ultima componentă importantă a cadrului de proiectare. Poate fi împărțit în două grupuri: copie statică a paginii, cum ar fi anteturile și paragrafele; și copierea componentelor interactive, cum ar fi butoanele, navigarea sau câmpurile de introducere.

Proiectați stilul și dimensiunea tuturor titlurilor (H1, H2, H3 etc.) și a paragrafelor. Copierea statică a paginii nu are de obicei multe variații stilistice (culoare sau greutate). Singura variație - în legătură cu stilul de copiere statică a paginii - este dacă este pe un fundal deschis sau întunecat. Prin urmare, cel mai bine este să creați două seturi de culori pentru a vă asigura că copierea statică a paginii funcționează pe ambele.

Copia care apare pe componentele interactive, cum ar fi butoanele sau mesajele de feedback ale sistemului, poate avea mai multe variante. De exemplu, mesajele de feedback ale sistemului pot fi afișate pe patru culori diferite de fundal în funcție de tipul mesajului (avertisment, eroare, succes etc.) — etichetele butoanelor pot fi, de asemenea, pe fundaluri diferite.

Includerea acestui grup în cadrul de proiectare este utilă atunci când vă gândiți la tipografie la nivel global. Mai întâi, creați textul obișnuit al etichetei butonului și, în al doilea rând, creați variațiile acestuia; acest lucru va ajuta să evitați să ajungeți la prea multe dimensiuni de font. Când creați noi componente UI în cadru, verificați întotdeauna pentru a vedea dacă există un stil de tipografie care se potrivește.

icoane

Există două grupuri de pictograme într-un sistem de design: pictograme informative și interfață cu utilizatorul. Primul grup face de obicei parte dintr-un sistem de ilustrare și nu este utilizat pentru nicio componentă de interacțiune a UI (cum ar fi butoanele). Al doilea grup – pictogramele UI – adaugă semnificație componentelor mai complexe: butoane, etichete sau tabele, în timp ce ocupă o cantitate foarte mică de spațiu. Pictogramele din interfața de utilizare pot fi, de asemenea, utilizate ca declanșatori de funcții, cum ar fi „editare”, „copiere”, „descărcare” și „eliminare”.

Începeți cu pictograme simple folosite pentru interacțiunile cu interfața de utilizare, cum ar fi săgeți, „adăugați” (+) sau „închideți” (x). O bună practică este să le proiectați în diferite dimensiuni (12px, 16px, 24px 32px).

Componente

Butoane

Butoanele sunt, fără îndoială, una dintre cele mai importante componente în designul UI și, de-a lungul anilor, au trecut prin multe schimbări pe măsură ce tendințele de design au apărut și au dispărut.

Când proiectați butoanele, asigurați-vă că le creați „stările” individuale. De regulă, un buton are mai multe stări și oferă feedback vizual utilizatorilor pentru a indica starea curentă (inactiv, hover, apăsat, dezactivat, activ etc.).

Există două moduri de a face acest lucru: prima este să proiectați aspectul butoanelor separat pentru fiecare stare (obișnuit, activ, hover și apăsat). Această soluție poate consuma mult timp, dar ulterior oferă multă flexibilitate. (Această metodă a fost folosită în cadrul gratuit Sketch UI inclus mai jos.)

A doua modalitate este de a proiecta toate stările pe baza celei inițiale. De exemplu, creați un simbol Schiță care va schimba culoarea, saturația sau luminozitatea fiecărei stări.

Pentru a face acest lucru, plasați simbolul ca o suprapunere a butonului cu unul dintre modurile de amestecare Schiță: nuanță, saturație sau suprapunere. Utilizați un dreptunghi negru cu modul de amestecare a nuanțelor peste butonul obișnuit pentru a-i schimba saturația. Schimbarea opacității suprapunerii mai târziu îl face un buton mai mult sau mai puțin saturat.

Componente de intrare

Intrările permit utilizatorului să comunice cu aplicația și să încarce date. Utilizarea componentelor precum câmpurile de introducere împreună cu butoanele permite crearea unei aplicații web simple. Ca și în cazul butoanelor, cel mai bine este să creați componente de intrare cu stări diferite. Depinde de cadrul de proiectare, dar cel puțin, luați în considerare crearea de stări goale, umplute și de eroare.

Componente complexe

În această etapă, cadrul de proiectare ar putea fi considerat complet deoarece are tot ce este necesar pentru a crea un produs funcțional. Cu toate acestea, adesea merită să petreceți mai mult timp creând componente UI mai complexe pentru cadrul UI, cum ar fi carduri, tabele, datepickers, diagrame și formulare.

Secțiuni

În această etapă, cadrul de proiectare poate fi dezvoltat în continuare prin crearea celor mai comune secțiuni de aplicații sau site-uri web. Prin proiectarea lucrurilor precum navigarea, anteturile, o secțiune „despre noi” și galeriile, un designer poate economisi timp în fazele ulterioare ale unui proiect. Crearea mai multor variații ale diferitelor secțiuni ale produsului va face mai ușor să se adapteze la diferite proiecte de pe linie.

Cele mai bune practici ale cadrului de proiectare

Testați în mod constant cadrul de proiectare

Testarea ar trebui să fie inclusă în orice proces de proiectare sau dezvoltare. Evitați erorile și lipsa componentelor creând piese de design mici și „testându-le la stres”. De exemplu, verificați dacă modificarea unei componente create la început modifică și o componentă adăugată recent.

Creați componente simple ale interfeței de utilizare

Păstrați componentele simple în timp ce vă gândiți la cât mai multe cazuri de utilizare a designului, astfel încât, în viitor, orice stil poate fi acoperit. Cel mai bine este să creați componente UI cu forme simple, păstrându-le suficient de flexibile pentru a se adapta cu ușurință la orice proiect.

Nu vă concentrați pe un singur stil

Un cadru de design ar trebui să fie universal, așa că în loc să vă concentrați pe un stil specific, concentrați-vă pe componentele care pot fi folosite pentru a crea un stil.

Creați-vă propriul cadru de design

La următorul tău proiect, fă-ți timp de la început pentru a construi cu atenție un cadru de design. Veți descoperi că îmbunătățește procesul general de proiectare, crește eficiența și îmbunătățește consistența designului produsului, ceea ce îmbunătățește gradul de utilizare. Veți economisi timp, veți comunica ideile de design mai eficient și veți face clienții și părțile interesate fericiți atunci când acele idei vor fi aduse la viață în doar câteva secunde pe planșele de artă 120 Sketch.

Ești gata să începi propriul cadru de design?

Descărcați fișierul Sketch aici. Sunt incluse instrucțiuni despre modul de utilizare.

Sisteme de design inspiratoare și cadre UI

Una dintre cele mai bune modalități de a înțelege mai multe despre cadrele de proiectare este de a examina modul în care companiile mari și consacrate le folosesc. Urmăriți aceste tipuri de companii și aflați despre abordarea lor.

Material Design de la Google – în prezent unul dintre cele mai populare cadre de design din lume. Aflați cum Google stratifică întregul proces de proiectare și construiește o ierarhie utilă de componente.

Limbajul de proiectare al IBM – IBM împărtășește întregul proces de proiectare, inclusiv o explicație profundă a fiecărui detaliu. De asemenea, împărtășesc o mulțime de resurse din limbajul lor de design, de la pictograme simple până la o bibliotecă de animații UI.

Atlassian – o altă resursă excelentă de învățare. Ghidul lor de stil al produsului este un sistem de design grozav de studiat. Își împărtășesc pachetul Web GUI, un fișier Sketch cu o mulțime de componente și concepte.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator