Atomic Design and Sketch – Un ghid pentru îmbunătățirea fluxului de lucru

Sketch și Atomic Design sunt un set puternic de instrumente și metodologii pe care designerii le pot folosi pentru a crea sisteme de proiectare care permit standardizarea și un flux de lucru mai eficient.

Sisteme de proiectare: un primer

Un sistem de proiectare este un set de componente și linii directoare reutilizabile care ajută echipele să se unească în jurul unui limbaj comun în timpul creării și al vieții unui produs.

În cele mai multe cazuri, sistemele de proiectare sunt compuse dintr-un ghid de stil și o bibliotecă de componente. Ele pot include, de asemenea, elemente precum vocea și tonul, precum și valorile mărcii. Scopul unui sistem de design este de a crea un set de standarde care să acționeze ca o singură sursă de adevăr pentru un produs sau o marcă.

Google Material Design este un exemplu de sistem structurat de proiectare a UI. Material Design a fost introdus în 2014 ca o modalitate de a proiecta și dezvolta aplicații Android coezive.

Un alt exemplu este Vocea și Tonul lui Mailchimp. Descrie modul în care vocea cuiva este întotdeauna aceeași, dar tonul se schimbă în funcție de context. A fi conștient de acest lucru ajută la împuternicirea conținutului și conferă personalitate mărcii.

Deși există multe metode diferite care pot fi utilizate pentru a crea un sistem de proiectare, este o idee bună să alegeți un cadru care să permită echipei să se unifice în jurul unui limbaj comun și a unui set de standarde. Atomic Design este un exemplu excelent de cadru care atinge aceste două obiective.

Proiectare atomică: sisteme de proiectare a clădirilor

Atomic Design, o metodologie introdusă de Brad Frost în 2013, se bazează pe ideea că fiecare sistem de design poate fi definit ca o serie de blocuri care coexistă.

Iată o scurtă prezentare generală a componentelor Atomic Design:

• Atomi . Reprezintă elementele de bază ale unui sistem de proiectare. Un exemplu este un buton sau un stil de text.
• Molecule . Un grup de atomi care lucrează împreună ca o unitate. Moleculele sunt elemente tangibile ale UI. De exemplu, un buton și un câmp de text pot fi grupate pentru a crea un formular de căutare.
• Organisme . Atomi și molecule lucrează împreună într-o structură complexă. Un câmp de căutare grupat cu o bară de navigare formează un organism antet pe un site web.
• Șabloane. Obiecte la nivel de pagină care plasează componente într-un aspect care definește structura conținutului. De exemplu, luând un organism antet și plasându-l pe un șablon de pagină de pornire.
• Pagini. Exemple de șabloane care reprezintă produsul final.

„Avem sarcina de a crea interfețe pentru mai mulți utilizatori în mai multe contexte, folosind mai multe browsere pe mai multe dispozitive cu mai multe dimensiuni de ecran și mai multe capabilități decât oricând. Este într-adevăr o sarcină descurajantă. Din fericire, sistemele de proiectare sunt aici pentru a ajuta.” – Brad Frost ca o introducere în proiectarea atomică și sistemele de proiectare.

Utilizarea Atomic Design pentru a crea și întreține un sistem de proiectare îi va ajuta pe designeri să lucreze mai eficient și să comunice mai bine în cadrul echipelor lor. Există o multitudine de instrumente și metode pentru crearea și întreținerea sistemelor de proiectare, dar adesea cele mai bune instrumente sunt cele cu care suntem cel mai familiar.

Cum să utilizați designul atomic cu Sketch

Pentru a dezvolta un sistem de proiectare folosind Atomic Design, un instrument grozav (și deja familiar) este Sketch. Ne oferă o pânză pentru a crea atomi, molecule și organisme: elementele necesare pentru a defini miezul unui sistem de proiectare.

Crearea atomilor

Începem prin a crea trei tipuri de atomi în Sketch: simboluri, stiluri de straturi și stiluri de text.

Simboluri. Simbolurile nu sunt altceva decât componente reutilizabile. Ele sunt definite o singură dată, deoarece pot fi instanțiate în cadrul unui produs. De exemplu, un simbol săgeată (atom) poate fi definit cu proprietăți precum culoarea marginii, dimensiunea etc. Putem apoi reutiliza acest simbol fără a fi nevoie să-l recreăm de fiecare dată.

Stiluri de straturi . Stilurile de straturi sunt elementele de stil vizual reutilizabile care rămân consistente pe fiecare strat. De exemplu, culoarea de umplere a săgeții definită anterior.

Stiluri de text. Stilurile de text, similare stilurilor de straturi, sunt elemente reutilizabile care asigură coerența obiectelor de text similare. De exemplu, definirea dimensiunii fontului și a culorii unui element h1. Funcționează într-un mod similar cu stilurile de text din Google Docs sau Microsoft Word.

Când definim simboluri, stiluri de straturi și stiluri de text, Sketch le poate împărți în categorii ierarhice în meniurile sale de simboluri și stiluri de text cu ajutorul unui „/” (bară oblică). Respectarea convențiilor de denumire și un set bine definit de categorii principale va oferi fișierelor o structură organizată, reducând confuzia și inconsecvențele.

Iată câteva modalități de a crea categorii ierarhice pentru simboluri, text și stiluri de straturi în Sketch.

Putem reprezenta simboluri folosind următoarea convenție de denumire sugerată sub Atomi/ :

• Active
• Butoane
• Controale de intrare
• Imagini
• Navigare
• informație

Nu vom converti stilurile de straturi în simboluri, așa că identificarea lor după grupul lor semantic este suficientă. Din nou, folosind Atomii /:

• Umple
• Frontiere
• Umbre
• Gradiente

Similar cu stilurile de straturi, iată cum putem crea stiluri de text sub Atoms /:

• Titluri
• Corp
• Legendă
• Etichete
• Legături

Un limbaj de design unificat nu ar trebui să fie doar un set de reguli statice și atomi individuali; ar trebui să fie un ecosistem în evoluție.—Airbnb on Building a Visual Language.

Crearea de molecule

Atomii definesc partea de bază a ghidurilor de proiectare a unui produs, dar prin ei înșiși nu sunt în întregime utili. Pentru a obține o anumită funcționalitate, unim atomii și creăm molecule.

Asocierea unei etichete (atom) cu un buton de introducere (atom) pentru a crea o funcție de căutare este un bun exemplu de element de moleculă utilizat în mod obișnuit.

Un cuvânt de precauție, deoarece aici poate fi o zonă gri. Un buton, la nivel de cod , este considerat un atom, dar un buton la nivel de proiectare este considerat o moleculă, deoarece grupăm un stil de strat și un atom de stil text. Pentru a evita orice confuzie, este o idee bună să vă gândiți doar la elementele de nivel de cod.

Principalele categorii care se încadrează în Molecule/ sunt:

• informație
• Navigare
• Controale de intrare

Deoarece moleculele vor începe să modeleze produsele noastre într-un mod interactiv, este o idee bună să definim în continuare categoriile de mai sus. În acest caz, vom defini un set de subcategorii care reprezintă o bibliotecă de modele:

• Liste derulante
• Comută
• Glisoare
• Filele
• Paginare
• Indicatori de progres
• Câmpurile de dată
• Câmpuri de text
• Casete de selectare
• Butoane radio
• Module

Crearea Organismelor

Organismele sunt grupuri de atomi și molecule. De asemenea, pot face parte din alte organisme.

Spre deosebire de atomi și molecule, organismele nu au o includere abstractă în produsele pe care le proiectăm; sunt componente concrete, reutilizabile, care pot fi ușor identificate cu acțiuni specifice. Structura lor este mai complexă decât un atom sau o moleculă.

Dacă câmpul de căutare definit anterior este grupat cu alte componente, cum ar fi o bară de navigare (moleculă) și un logo (atom), este creat un organism. Un exemplu este o bară de navigare sau un calendar.

Organismele, precum moleculele, se pot încadra în aceleași categorii și subcategorii:

Iată principalele categorii pe care le vom crea pentru Organisme/:

• informație
• Navigare
• Controale de intrare

Ca și în cazul moleculelor, vom crea și subcategorii pentru organisme:

• Liste derulante
• Comută
• Glisoare
• Filele
• Paginare
• Indicatori de progres
• Câmpurile de dată

Până în acest moment, cea mai mare parte a interfeței de utilizare a fost deja proiectată, așa că acum este la fel de simplu ca apelarea instanțelor componentelor noastre atunci când acestea sunt necesare pentru proiectare.

Este ușor să localizați fiecare dintre aceste componente după grupurile lor semantice, fie căutându-le direct folosind panoul de inserare din bara de instrumente Sketch, unde vom găsi un set bine organizat de 3 categorii principale, fie folosind un plugin precum Runner pentru Sketch.

Runner for Sketch optimizează fluxul de lucru al designerului, oferind un set de comenzi de la tastatură pe care le pot folosi în loc să găsească lucruri în meniuri nesfârșite. De exemplu, pot introduce cuvântul insert , pot apăsa tasta Tab și pot căuta componentele de care au nevoie.

Tastând atoms , o listă derulantă ne va afișa toate elementele care se încadrează în acea categorie. Dacă atomii și moleculele au categorii comune, numai atomii vor fi văzuți și toate moleculele vor fi ignorate.

Încheind-o

Sketch și Atomic Design sunt un set puternic de instrumente care pot fi utilizate împreună pentru a îmbunătăți fluxurile de lucru de proiectare și pentru a facilita un cadru de sistem de proiectare eficient.

Folosind conceptul de atomi , molecule și organisme ca bază de componentă, Atomic Design îi ajută pe designeri să se unifice în jurul unui limbaj comun în timpul creării și al vieții unui produs.

Designerii pot folosi instrumente precum Sketch pentru a implementa Atomic Design, oferind un flux de lucru mai eficient și un set de standarde care sunt acceptate de toată lumea din echipa de proiectare, inclusiv de dezvoltatori, în etapele finale ale proiectului.

Citiri suplimentare pe Blogul Toptal Design:

• Cum să construiți un cadru de design eficient
• Înțelegerea sistemelor și modelelor de proiectare
• Cum să creați un ghid de stil de schiță, o bibliotecă și un kit UI
• De ce startup-urile au nevoie de un ghid de stil
• Zeplin Sketch Plugin – Podul fluxului de lucru între proiectare și inginerie