Oricine a dezvoltat vreodată un design de site web știe cât de dificilă și minuțioasă este munca. Da, dacă lucrezi singur, totul este puțin mai simplu: tu decideți cum ar trebui să arate rezultatul final, discutați despre editări cu clientul și stabiliți propriile reguli nespuse în funcție de care creați designul. Dar dacă lucrezi într-o echipă care are zeci de proiecte sub centură, lipsa unei metodologii clare va afecta cu siguranță eficacitatea muncii tale.

Lipsa unor reguli clare pentru lucrul la design va duce la faptul că fiecare designer va proiecta elemente în felul său. Ca urmare, schițele gata făcute vor trebui ajustate în mod constant, aspectul va diferi adesea de machetele create inițial și va trebui să uitați de implementarea constantă a ideilor noi, deoarece munca de rutină va dura mult timp. . Dacă o persoană nouă se alătură echipei, îi va lua mai mult de o lună pentru a ajunge la viteză și a începe să lucreze pe deplin. Desigur, cu „haos” complet în echipa de proiectare, dezvoltatorii vor fi și ei confuzi. Rezultatul este clienții nemulțumiți, munca ineficientă și lipsa oricărei dezvoltări.

Pentru a evita astfel de situații, echipa are nevoie pur și simplu de un sistem de reguli pentru dezvoltarea designului. Recent, pentru a sistematiza procesul de dezvoltare a site-ului web, „ design atomic„, propusă în 2013 de Brad Frost. Această metodologie este utilă nu numai companiilor mari, ci și celor care lucrează numai pe site-uri web, deoarece ajută la simplificarea semnificativă a procesului de dezvoltare. Astăzi vom încerca să înțelegem ce este designul atomic și cum această metodologie vă va ajuta să vă optimizați fluxul de lucru.

Ce este designul atomic?

Potrivit creatorului metodologiei, ideea designului atomic i-a venit din chimie. După cum știți, în natură toate substanțele constau din atomi și molecule. Frost vede interfețele într-un mod similar, deoarece și ele sunt formate din anumite componente. Această metodologie sugerează că designerul nu lucrează la întreaga interfață odată, ci mai întâi își creează componentele, combinându-le treptat în blocuri și creând un design. Pe scurt, metodologia „proiectării atomice” cere dezvoltatorului să poată gândi de la cel mai mic la cel mai mare și să combine elemente gata făcute.

În metodologia de proiectare atomică există 5 nivele evolutii:

1. Atomi

Acestea sunt cele mai mici părți ale interfeței - butoane, câmpuri de introducere, paragrafe, titluri, pictograme, imagini. Conceptul de atomi include și concepte mai abstracte - culori, fonturi, gradienți, animații. Se înțelege că designerul va stabili mai întâi de ce elemente va avea nevoie pentru a crea aspectul paginii și pentru a le dezvolta designul.

Atomii în sine sunt inutili, dar combinându-i în blocuri, designerul va ajunge treptat la o structură de interfață holistică. Deja în stadiul atomic, dezvoltatorul ar trebui să aibă grijă ca toate elementele să corespundă unui anumit stil și să fie combinate între ele.

2. Molecule

Moleculele sunt combinații de doi sau mai mulți atomi; cele mai mici blocuri care alcătuiesc un design. De exemplu, combinând mai multe câmpuri de introducere, butoane și pictograme, obținem un formular finalizat. În această etapă, avantajele abordării atomice sunt deja mai clare - la urma urmei, este evident că moleculele pot fi refolosite, iar acest lucru reduce semnificativ timpul de dezvoltare.

3. Organisme

Un organism este o colecție de molecule. În această etapă, dezvoltatorul este mult mai aproape de rezultatul final, deoarece organismele sunt secțiuni gata făcute ale interfeței. În această etapă, clientul poate vedea deja cum vor fi blocurile individuale ale site-ului și, dacă este necesar, poate face propriile modificări. Acest lucru va fi extrem de ușor de realizat: un designer care a lucrat inițial folosind metodologia atomică nu va trebui să petreacă mult timp căutând elementele necesare în cod sau editând întreaga structură a paginii. Astfel, ușurința de a schimba un site este, de asemenea, unul dintre beneficiile designului atomic.

4. Șabloane

Unirea organismeși plasându-le conform schiței dorite, obțineți eşantion- un prototip gata făcut al interfeței dvs. Adesea, o diagramă a structurii paginii (wireframe) este creată mai întâi. În acest design, designerul determină modul în care vor fi plasate elementele și cum vor răspunde la acțiunile utilizatorului. Unii dezvoltatori creează o machetă simplă alb-negru care se transformă treptat într-o pagină finită. Într-un fel sau altul, această etapă este extrem de importantă - la urma urmei, merită să stabilim inițial care elemente ar trebui să atragă atenția utilizatorilor și care pot fi retrogradate în plan secund.

5. Pagini

O pagină este un șablon plin cu conținut real. În etapa de pagină puteți verifica cum arată conținutul, dacă este lizibil și dacă pagina este ușor de utilizat. Dacă găsiți inexactități, puteți oricând să vă întoarceți și să schimbați un anumit atom, moleculă sau organism (ceea ce este mult mai convenabil decât să lucrați cu o pagină întreagă).

După cum puteți vedea, abordarea atomică a lucrului la designul paginii este extrem de eficientă - vă permite să evitați greșelile grave, precum și să economisiți timp de dezvoltare și să faceți rapid modificări.

În articolul următor, veți afla despre beneficiile și aplicațiile designului atomic.

TL; DR: Designul atomic folosind Sketch este viitorul produselor de design.

Vino cu mine

Brad Frost, omul uimitor pe care îl vedeți în videoclipul de la începutul acestui articol, este în mare măsură responsabil pentru sistemul discutat aici. Designul atomic a fost dezvoltat ca răspuns la lumea digitală adaptativă în care trăim.

Încă lucrăm la stilul de conducere, principii elementare, colaj și multe alte instrumente pentru a face proiectele noastre mai ușor de înțeles pentru generațiile viitoare. De asemenea, dezvoltatorii folosesc instrumente precum Bootstrap, Foundation, Bourbon și altele pentru a-și ușura viața atunci când vine timpul să codifice. Când facem compromisuri și lucrăm împreună, viața devine mult mai ușoară pentru ambele părți. Despre asta se referă Atomic Design.

Designul atomic nu se referă la proiectarea unui singur model sau a unei pagini, ci este despre proiectarea unui sistem imens sau, mai precis, despre proiectarea nucleului acelui sistem.

1-j1P0pjQtl36QJavv8lHdyw

În ce constă Atomic Design?

Designul atomic implică crearea unor părți ale unui sistem care pot fi combinate pentru a dezvolta elemente și modele care pot fi apoi folosite din nou și din nou.

Atomi

Atomul este baza absolută a sistemului nostru. Atomii includ paleta de culori, fonturile, elemente individuale (cum ar fi titluri, paragrafe, butoane etc.) și orice altceva care se combină cu alți atomi pentru a crea o moleculă.

2 1-SmVWgKY2jdCYOV4dXJNlkg

Molecule

Moleculele sunt blocurile de construcție pe care le construim folosind atomi. Deși sunt făcute din atomi, moleculele sunt chiar piesele Lego cu care vom construi și proiecta în viitor. Deși unele elemente pot părea complicate la început, simplitatea este cheia aici.

Moleculele includ componente precum câmpuri de formular cu etichete sau tabele cu anteturi și coloane de date.

3 1-kA-WoT5O0uCgeowzhuSwiQ

Microorganisme

Microorganismele sunt locul unde începem să vedem cum interfața formează o imagine unificată. Prin combinarea moleculelor putem construi elemente mai complexe, dar repetabile ale produselor noastre.

Un exemplu de microorganism ar fi un antet de navigare care include un logo, linkuri de navigare și câmpuri de căutare sau un buton de înregistrare.

4 1-aL51hsdFw7ugSXXB5HnWZQ

Șabloane

Șabloanele sunt în esență aceleași scheme. Prin combinarea mai multor microorganisme, începem cu adevărat să vedem imaginea de ansamblu a ceea ce construim.

Dacă nu este necesară o precizie ridicată a rezultatului, acesta este punctul în care am putea începe cu ușurință dezvoltarea unui sistem codificat.

5 1-mx-cBDwsz3MkXa-oX_-56g

Pagini

Paginile sunt versiuni extrem de precise ale șabloanelor noastre. Designul de mai sus va fi considerat o pagină. Acesta este locul unde chiar și cei care nu știu nimic despre design pot înțelege ce construim.

Paginile nu sunt întotdeauna necesare, dar cui nu-i place o prezentare vizuală frumoasă?

De ce schiță?

Deși Sketch poate să nu fie încă la egalitate cu Adobe Illustrator sau Photoshop, este totuși un instrument unic atunci când lucrați cu Atomic Design.

Organizare

Sketch este o creație a Adobe Illustrator și Photoshop. Nu negăm că Sketch este încă tânăr, dar este încă foarte puternic și, pe lângă asta, este, de asemenea, incredibil de ușor de luat și de folosit. Nu numai că puteți face aproape tot ce veți avea nevoie să faceți vreodată fără a fi nevoie să găsiți și să scoateți instrumente ascunse în meniurile cu mai multe straturi, dar aveți un model extrem de organizat, care este împărțit în straturi.

7 1-gyxduSTXDd1K-7eEuW1xHA

Modularitate

Schița este un instrument esențial pentru proiectarea atomică, deoarece face ușoară modularizarea unui element. Nu numai că aveți o organizare stratificată, similară cu Adobe Photoshop, puteți, de asemenea, să faceți elemente modulare. În Sketch, aceste elemente sunt numite simboluri.

Crearea unui simbol vă permite să schimbați toate stilurile unui element și să vedeți cum se întâmplă acele modificări tuturor elementelor similare din fișier.

Mai întâi, creați elementul așa cum ați dori să fie.

9 1-QU5UMRKF7jnifIcA0K6RlA

Sfat: pentru a transforma elementele cu text în simboluri modulare în Sketch, asigurați-vă că bifați și caseta Excludeți valoarea textului din simbol din bara de instrumente din dreapta.

Pentru a face acest lucru, în primul rând, trebuie să selectați textul din interiorul simbolului. Dacă nu faceți acest lucru, nu veți vedea opțiunea în bara de instrumente din dreapta.

10 -5iQXZSddoS-OxEm0YfU1Sw

Acum puteți lăsa simbolul oriunde și puteți modifica textul interior fără a schimba textul în orice alt simbol similar utilizat în designul dvs.

11-X9DNHPtyXiBxYEes10u_Iw

Dacă textul interior nu este ceva pe care intenționați să îl schimbați, uitați de acest pas. Dar amintiți-vă că este acolo și este incredibil de convenabil.

De fiecare dată când doriți să plasați unul dintre elementele pe care le-ați creat, tot ce trebuie să faceți este să dați clic pe meniul derulant Inserare, să găsiți opțiunea Simboluri și să selectați simbolul pe care doriți să îl utilizați din meniul derulant.

Convertiți în cod

Acum că ne-am creat proiectul, este timpul să exportăm elementele în cod.

Exportați în cod

Ce este mai bun decât simbolurile modulare? Exportați proiectele dvs. direct în cod. Aceasta înseamnă că voi, designerii, nu trebuie să învățați să codificați și că voi, dezvoltatorii, nu trebuie să știți cum să spargeți elementele de design. Deși, ar trebui să știi asta.

Pentru a obține codul pentru elemente, trebuie mai întâi să vă asigurați că acestea sunt fie combinate corect, fie transformate în simboluri. După aceea, totul este simplu, doar faceți clic dreapta pe element și selectați Copy CSS Attributes din lista derulantă

12-0JSPPy6qdMM6UUUfzH1Zmw

Tot ce trebuie să faceți este să copiați și să lipiți codul de acolo în editorul de text preferat.

13-qrSfNi7EmBroFNQoM1zcuw

Asigurați-vă că țineți cont și de toate prefixele necesare, deoarece acestea nu provin din Sketch. În caz contrar, asigurați-vă că utilizați un pachet de caracteristici pentru a le trata.

La fel ca Bootstrap sau șablonul Foundation, acum elementele noastre sunt stilate și tot ce trebuie să facem este să adăugăm o clasă elementului din HTML.

A trece de aici înseamnă a crea elemente de pagină HTML care vor fi vizibile doar pentru echipa de dezvoltare. Aici putem crea o pagină a elementelor noastre cu clasa corespunzătoare, astfel încât să putem vedea cum arată în browser pe baza dimensiunilor ecranului.

Brad Frost și Dave Olson de la Pattern Lab au creat un exemplu uimitor de cum arată. Evaluează-l.

Utilizarea limbilor șablonului

Puncte bonus pentru cei dintre voi care au absolvit să învețe șablon și limbi CSS, cum ar fi swig, jade, haml și oricare dintre multele alte limbi disponibile astăzi.

Multe dintre microorganismele pe care le-am proiectat vor deveni parțiale odată ce vor fi convertite în cod.

Deci ai reusit

Acum poți pretinde că știi ceva despre știință. Și într-o oarecare măsură știi. Atomic Design este știința designului de înaltă calitate.

Prin crearea de elemente și modele modulare, repetabile, putem accelera exponențial procesul de proiectare și dezvoltare. Nu este vorba doar despre cât de repede pot fi construite, ci despre cât de repede pot fi făcute modificări întregului sistem.

Petreceți puțin mai mult timp gândindu-vă la nucleul sistemului și este ca și cum ați reveni în timp pe măsură ce acest proces se desfășoară.

Conversii mari!

Designul atomic ne permite să comutăm între contexte așa cum a descris atât de elocvent artistul Frank. Atomii, moleculele și organismele care alcătuiesc interfețele nu atârnă în vid. Interfețele și paginile sunt într-adevăr formate din părți mici. Părțile mici afectează întreaga structură, iar întregul afectează părțile mai mici. Aceste două contexte sunt împletite, iar designul atomic recunoaște acest fapt.

Când proiectăm o componentă, suntem ca un artist care face mișcări de pensulă pe o pânză. Atunci când vedem aceste componente ca pe niște machete cu conținut real, suntem ca un artist care se îndepărtează de pânză și evaluează modul în care fiecare lovitura afectează întreaga compoziție.

Trebuie să vă concentrați pe o componentă specifică pentru a o face funcțională, confortabilă și frumoasă. Dar este, de asemenea, necesar să ne asigurăm că această componentă este funcțională, convenabilă și frumoasă. în contextul interfeței finale cu utilizatorul.

Designul atomic ne oferă un circuit pentru comutarea între părți și întreg, dar este esențial să reiterăm faptul că proiectarea atomică nu este un proces liniar. Ar fi o prostie să proiectați butoanele și alte elemente izolat și apoi să vă încrucișați degetele și să sperați că totul se va reuni pentru a forma un întreg coeziv. Din acest motiv, cei cinci pași ai designului atomic nu ar trebui să sune așa în capul tău: „Pasul 1: atomi; Pasul 2: molecule; Pasul 3: organisme; Pasul 4: șabloane; Pasul 5: Pagini".

În schimb, gândiți-vă la pașii de proiectare atomică ca la un model mental care vă permite să creați simultan interfața rezultată și sistemul de proiectare care stă la baza acesteia.

# Limită clară între structură și conținut

A discuta despre design și conținut este un pic ca să ne certăm despre pui și ou. Mark Boulton explică:

Conținutul trebuie să aibă structură, iar structura, ca și designul, influențează conținutul. Este incorect să spui „întâi conținut, apoi design” și „fie conținut, fie design”. Prin urmare, ele sunt echivalente: „Atât conținutul, cât și designul”. ~Mark Boulton

Un sistem de design bine gândit se potrivește cu conținutul său, iar conținutul de calitate se potrivește cu prezentarea sa în interfață. Modelele de interfață pe care le aprobăm trebuie să reflecte cu exactitate natura textului, imaginilor și a altor conținuturi pe care le conțin. De asemenea, atunci când creați conținut, trebuie să luați în considerare modul în care va fi prezentat. Relația strânsă dintre conținut și design necesită luarea în considerare a ambelor componente atunci când proiectați o interfață de utilizare.

Designul atomic ne oferă un limbaj pentru discutarea structurii tiparelor UI și a conținutului care va fi conținut în acestea. În ciuda distincției clare dintre structura conținutului (șabloane, modele) și conținutul în sine (pagini), designul atomic ține cont de influența acestora unul asupra celuilalt. De exemplu, să ne uităm la această diagramă:

În stânga vedem structura conținutului. Constă din aceeași moleculă de profil de utilizator care se repetă. În dreapta vedem ce se întâmplă când umplem fiecare moleculă de profil cu conținut relevant. Tehnica de vizualizare a structurii de conținut și de prezentare a acesteia cu conținutul rezultat vă permite să creați șabloane care se potrivesc exact cu propriul conținut. Dacă numele de utilizator ar avea cinci rânduri, ar trebui să-l reparăm nu la nivel molecular, ci la nivel atomic.

# Ce este într-un nume?

Am spus pe parcursul acestei cărți că ideea de modularitate în proiectare și dezvoltare nu este nimic nou. Atunci de ce introducem termeni noi precum atomi, molecule și organisme când ne putem menține la cei deja consacrați: module, componente, elemente, secțiuni și regiuni?

De când vorbesc despre designul atomic, întotdeauna au existat oameni care au propus nume alternative pentru etapele de proiectare. Unul sugerează: „De ce să nu le numim pur și simplu elemente, module și componente?”, altul: „De ce să nu le numim pur și simplu bază, componente și module?” Problema cu termeni precum „componentă” și „modul” este că numai numele nu vă spun ierarhia. Atomii, moleculele și organismele implică o ierarhie, așa că oricine are cunoștințe de bază de chimie poate ghici despre ce vorbim.

E greu de numit. Cei pe care i-am ales pentru pașii de proiectare atomică au funcționat grozav pentru mine și echipele cu care am lucrat pentru a proiecta interfața de utilizare. Dar s-ar putea să nu funcționeze pentru tine și compania ta. E bine. Iată confirmarea din partea echipei de dezvoltare de la GE:

Când le-am prezentat colegilor concepte de sisteme de proiectare, am folosit inițial terminologia de proiectare atomică. Cu toate acestea, acest lucru a provocat priviri nedumerite. […] A devenit evident că pentru a avea succes în compania noastră, trebuie să alegem o taxonomie mai adecvată. ~

Sistemul de taxonomie cu care au venit băieții în cele din urmă a inclus termenii: „Principii”, „Principii”, „Componente”, „Șabloane”, „Caracteristici” și „Aplicații”. Aceste nume au mai mult sens pentru tine? Nu contează. Ei au stabilit o taxonomie care avea sens pentru compania lor, dar oricine cunoștea principiile designului atomic putea lucra eficient cu ei.

Termenul „design atomic” întruchipează ideile de proiectare și dezvoltare modulară, făcându-l un cuvânt la mod util și puternic pentru a convinge părțile interesate și a comunica cu colegii. Dar Designul atomic nu este o dogmă rigidă. În cele din urmă, indiferent de taxonomia pe care o alegeți, ar trebui să vă ajute pe dvs. și pe angajații companiei dvs. să comunicați mai eficient pentru a crea un sistem excelent de design UI.

Atomic Design pentru UI

Conceptul de design atomic s-a născut pe Internet. La urma urmei, umilul autor al acestei cărți este un web designer, motiv pentru care se concentrează pe interfețele web. Dar este important să înțelegem asta designul atomic este în general aplicabil oricăror interfețe.

Puteți folosi metodologia de proiectare atomică pentru a proiecta interfața oricărui software: Microsoft Word, Keynote, Photoshop, interfața bancomatului băncii dvs., oricare ar fi. Pentru a demonstra acest lucru, să aplicăm designul atomic aplicației native Instagram.

Design aplicație Instagram, defalcat în atomi.

Să descompunem interfața Instagram în atomi:

• Atomi. Acest ecran UI Instagram constă din mai multe pictograme, mai multe blocuri de text și două tipuri de imagini: imaginea eroului și avatarul utilizatorului.
• Molecule. Mai multe pictograme formează componente simple, utilitare: o bară de navigare de jos și o bară de acțiuni foto unde utilizatorii pot aprecia sau comenta. În plus, combinațiile simple de text și/sau imagini formează componente relativ simple.
• Organismele. Aici vedem cum se formează organismul fotografiei. Constă în informații despre utilizator, ora publicării, fotografia în sine, acțiuni cu această fotografie și informații despre aceasta, inclusiv numărul de aprecieri și legendă. Acest organism este baza Instagram, deoarece se repetă de multe ori în fluxul nesfârșit de fotografii realizate de utilizator.
• Șabloane. Vedem cum componentele lucrează împreună în contextul unui layout. În plus, aici suntem expuși structurii conținutului Instagram, care evidențiază în special conținutul dinamic: nume de utilizator, avatar, fotografie, like-uri și semnătură.
• Pagini.Și, în sfârșit, vedem produsul final, plin de conținut. Acest lucru ajută la asigurarea faptului că sistemul de design de bază se reunește pentru a forma o interfață frumoasă și funcțională.

Am ales în mod deliberat să nu fie un site web ca exemplu, deoarece există tendința de a trata în mod eronat designul atomic ca o abordare atunci când lucrez cu tehnologii web: CSS, JavaScript etc. Să fiu clar: Designul atomic nu are nimic de-a face cu temele web înguste precum CSS sau JavaScript. În primul capitol, am vorbit despre tendința către modularitate în toate aspectele de design și dezvoltare. Este o tendință fantastică, inclusiv pentru CSS și JavaScript, dar designul atomic se referă la crearea de sisteme de design UI, indiferent de tehnologia utilizată.

Designul atomic în teorie și practică

În acest capitol, am vorbit despre metodologia de proiectare atomică și am văzut cum atomii, moleculele, organismele, modelele și paginile se unesc pentru a crea sisteme de proiectare a interfeței de înaltă calitate, atent.

Designul atomic ne permite să descompunăm interfețele în atomi și să observăm simultan modul în care aceste elemente se unesc pentru a forma interfețele rezultate.

Am aflat despre relația strânsă dintre conținut și design și despre modul în care designul atomic ne permite să creăm o structură adaptată conținutului.

În cele din urmă, am învățat cum limbajul de design atomic ne permite să discutăm modularitatea cu colegii și oferă înțelegerea atât de necesară a ierarhiei în sistemele noastre de proiectare.

Designul atomic este o metodologie utilă de proiectare și dezvoltare, dar este doar un model mental pentru crearea interfeței de utilizare. S-ar putea să vă mâncărimi să învățați cum să faceți design atomic în practică. Nu vă faceți griji, dragi cititori — restul cărții este dedicat instrumentelor și proceselor pentru a transforma designul atomic în realitate.

Și o mare parte din el se concentrează pe stabilirea bazelor pentru culoare, tipografie, grile, textură și altele asemenea. Acest tip de gândire este cu siguranță important, dar sunt puțin mai puțin interesat de aceste aspecte ale designului, deoarece în cele din urmă sunt și vor fi întotdeauna subiective. În ultimul timp, am fost mai interesat de ce sunt compuse interfețele noastre și de cum putem construi sisteme de proiectare într-un mod mai metodic.

Căutând inspirație și paralele, m-am tot întors la chimie. Gândul este că toată materia (fie solidă, lichidă, gazoasă, simplă, complexă etc.) este compusă din atomi. Aceste unități atomice se leagă împreună pentru a forma molecule, care, la rândul lor, se combină în organisme mai complexe pentru a crea în cele din urmă toată materia din universul nostru.

În mod similar, interfețele sunt formate din componente mai mici. Aceasta înseamnă că putem descompune interfețe întregi în blocuri fundamentale și putem continua de acolo. Acesta este esenta de bază a designului atomic.

Pagini

Paginile sunt exemple specifice de șabloane. Aici, conținutul substituent este înlocuit cu conținut reprezentativ real pentru a oferi o descriere exactă a ceea ce va vedea un utilizator în cele din urmă.

Paginile sunt cel mai înalt nivel de fidelitate și, deoarece sunt cele mai tangibile, este locul în care majoritatea oamenilor din proces își petrec cea mai mare parte a timpului și în jurul căruia se învârt majoritatea recenziilor.

Etapa de pagină este esențială, deoarece este locul în care testăm eficiența sistemului de proiectare. Vizualizarea totul în context ne permite să ne întoarcem pentru a ne modifica moleculele, organismele și șabloanele pentru a aborda mai bine contextul real al designului.

Paginile sunt, de asemenea, locul pentru a testa variații ale șabloanelor. De exemplu, ați putea dori să articulați cum arată un titlu care conține 40 de caractere, dar și să demonstrați cum arată 340 de caractere. Cum arată când un utilizator are un articol în coșul de cumpărături față de 10 articole cu un cod de reducere aplicat? Din nou, aceste situații specifice influențează modul în care ne întoarcem și ne construim sistemul.

De ce Atomic Design

În multe feluri, așa am făcut lucrurile de-a lungul timpului, chiar dacă nu ne-am gândit în mod conștient la asta în acest mod specific.

Designul atomic oferă o metodologie clară pentru realizarea sistemelor de proiectare. Clienții și membrii echipei sunt capabili să aprecieze mai bine conceptul de sisteme de proiectare, văzând de fapt pașii așezați în fața lor.

Designul atomic ne oferă capacitatea de a trece de la abstract la concret. Din acest motiv, putem crea sisteme care promovează consistența și scalabilitatea, arătând simultan lucrurile în contextul lor final. Și prin asamblare, mai degrabă decât deconstrucție, creăm un sistem imediat, în loc să alegem modele de cireșe după fapt.

Laboratorul de modele

Pentru a aplica această metodologie în munca mea, am creat (împreună cu ajutorul marelui Dave Olsen) un instrument numit Pattern Lab pentru a crea efectiv aceste sisteme de proiectare atomică. Voi aborda Pattern Lab în detaliu mai târziu, dar nu ezitați să îl verificați pe Github.

Lectură suplimentară

• Așa că Andy Clarke a pregătit scena pentru aceste tipuri de conversații de multă vreme. De fapt, a scris un capitol pentru Cartea zdrobitoare 3 numit „Devenirea fabulos de flexibilă: proiectarea atomilor și a elementelor”. Habar nu aveam că există, deci ce zici de asta! Vă încurajez cu căldură să verificați asta. De asemenea, vă încurajez să aruncați o privire la instrumentul său numit Rock Hammer Vimeo.

  Sunt foarte încântat să mă aprofundez și să dezvolt mai multe instrumente și gânduri în jurul acestor concepte.

  Update: de când am scris acest articol original, am scris o carte numită care se scufundă în acest subiect mai detaliat, pe care o puteți cumpăra în/sau formate. Mulţumesc!

Ofer cititorilor Habrakhabr o traducere a articolului lui Brad Frost „Atomic Web Design”.

Noi nu proiectăm pagini, proiectăm sisteme componente. - Stephen Hay

Pe măsură ce meșteșugul designului web continuă să evolueze, simțim din ce în ce mai mult nevoia unui design atent și sistematic, spre deosebire de a crea colecții simple de pagini web.

S-au spus multe despre crearea sistemelor de design, iar cel mai mare accent se pune în principal pe stabilirea culorilor, tipografiei, grilelor, texturilor etc. Acest tip de gândire este cu siguranță important, dar sunt puțin mai puțin interesat de aceste aspecte ale designului, deoarece, în general, sunt întotdeauna subiective. În ultimul timp, am fost mai nedumerit de întrebarea din ce sunt făcute interfețele noastre și cum le putem proiecta mai sistematic.

În căutarea inspirației, m-am întors la chimie. Toate substanțele (fie ele solide, lichide, gaze, simple, complexe etc.) constau din atomi. Atomii se leagă între ei și se formează molecule, care, la rândul lor, se combină și formează organisme. În cele din urmă, așa este creată toată materia din universul nostru.

În mod similar, interfețele sunt formate din componente mai mici. Asta înseamnă că putem împărțiți interfețele în blocuri fundamentale și combinați-le, crescând treptat complexitatea. Aceasta este esența designului web atomic.

Sistem periodic de elemente HTML.

Ce este Atomic Design

Designul atomic este o metodologie pentru crearea sistemelor de proiectare. Există cinci niveluri distincte pentru proiectarea atomică:

1. Atomi
2. Molecule
3. Organismele
4. Șabloane
5. Pagini

Atomi

Atomii din natură sunt blocurile de bază ale materiei. În contextul interfețelor web, atomii sunt etichete HTML, cum ar fi un formular, un câmp de introducere sau un buton.

Atomii pot include și mai multe elemente abstracte, cum ar fi paletele de culori, fonturile sau chiar mai multe aspecte ascunse ale interfeței, cum ar fi animațiile.

La fel ca atomii din natură, ei sunt destul de abstracti și adesea inutili pe cont propriu. Cu toate acestea, beneficiul designului lor constă în sarcină un stil comun interfata.

Molecule

Totul devine mai interesant și mai tangibil atunci când începem să combinăm atomii. Moleculele sunt colecții de atomi interconectați. Au propriile lor proprietăți și acționează ca scheletul sistemului nostru de proiectare.

De exemplu, o etichetă, un câmp de introducere și un buton nu sunt atât de utile în sine, dar pot fi cu adevărat utile dacă sunt combinate.

Construirea de molecule din atomi îmbunătățește sănătatea mintală „Fă un lucru, dar fă-l bine”. În timp ce moleculele pot fi destul de complexe, cel mai adesea sunt simple combinații de atomi construite pentru a fi reutilizate.

Organismele

Moleculele ne oferă niște blocuri de construcție cu care să lucrăm. Acum le putem pune împreună pentru a forma organisme. Organismele sunt asociații de molecule care formează secțiuni destul de complexe, separate ale interfeței.

Ne mișcăm din ce în ce mai repede spre specificul. Clientul poate să nu fie foarte interesat de moleculele sistemului de proiectare, dar odată cu apariția organismelor se poate observa începutul formării produsului final. Dan Moll (cu care lucrez la mai multe proiecte) folosește colaje de elemente care arată ideile cheie și direcțiile interfeței fără a fi nevoit să proiecteze întregul site.

Organismele pot fi compuse din tipuri similare sau diferite de molecule. De exemplu, titlul unei pagini poate consta din diferite componente - un logo, un meniu principal, un formular de căutare și o listă de canale media. Dar organismul care afișează grila de produs poate conține o singură moleculă (imaginea produsului, denumirea și prețul) care se repetă de mai multe ori.

Tranziția de la molecule la organisme facilitează crearea de componente independente gata de reutilizare.

Șabloane

În această etapă, vom înceta să facem analogii cu chimia pentru a comunica într-un limbaj care este mai semnificativ pentru clienții noștri. Șabloanele constau cel mai adesea din grupuri de organisme legate între ele pentru a forma pagini. În această etapă devine vizibilă imaginea de ansamblu.

Șabloanele sunt foarte specifice și oferă context tuturor moleculelor și organismelor destul de abstracte. Este șablonul care vă permite să vedeți designul final. Din experiența mea cu această metodologie, șabloanele încep ca niște wireframe HTML, dar devin mai precise în timp. În cele din urmă, Bearded Studio din Pittsburgh are un proces similar, în care desenele încep în alb și negru, dar treptat. dobândind specific și detalii până devin lucrarea finală.

Pagini

Paginile sunt exemple specifice de șabloane. În ele, pentru a transmite cu exactitate ceea ce va vedea utilizatorul, conținutul „stub” este înlocuit cu conținut real.

Paginile sunt cel mai înalt nivel de specificitate și, pentru că... sunt cele mai palpabile. Ei ocupă cea mai mare parte a timpului majorității persoanelor implicate și scriu majoritatea recenziilor.

Etapa de pagină este necesară deoarece este locul în care este testată eficiența întregului sistem de proiectare. Văzând totul în context, putem face un pas înapoi și ne putem schimba moleculele, organismele și modelele pentru a se potrivi mai bine contextului real de design.

Aceasta este, de asemenea, etapa pentru testarea modificărilor aduse șabloanelor. De exemplu, trebuie să vă asigurați că un titlu de 40 de caractere arată în concordanță cu un titlu de 340 de caractere. Sau verificați cum, în loc de un coș cu un articol, arată ca unul cu 10 articole și o reducere folosind un cod promoțional. Aceste situații influențează modul în care ne construim sistemul.

De ce design atomic

În multe privințe, așa am făcut site-uri web, chiar dacă nu ne-am gândit în mod conștient la asta.

Proiectarea atomică oferă o metodologie clară pentru crearea sistemelor de proiectare. Clienții și membrii echipei pot evalua ideile pentru un anumit sistem de proiectare, văzând etapele dezvoltării acestuia.

Designul atomic ne oferă capacitatea de a trece de la abstract la concret. Prin urmare, putem crea sisteme care sunt scalabile și au un stil consistent, consecvent, arătând în același timp imaginea finală de ansamblu. Procesează în schimb destructurare se transformă în asamblare- creăm o structură de la bun început, în loc să selectăm cu atenție șabloanele potrivite ulterior.

Laboratorul de modele

Pentru a aplica această metodologie în munca mea, eu (cu ajutorul lui Dave Oslen) am dezvoltat un instrument numit Pattern Lab pentru crearea sistemelor de proiectare atomică. Voi vorbi despre Pattern Lab mai detaliat mai târziu, dar nu ezitați să verificați sursa pe Github