Design atomic: aruncând în aer ceea ce credeați că știți despre designul web

Este o credință obișnuită că flexibilitatea este la fel ca a fi neîngrădit, că, pentru a fi creativ, trebuie să fii neînfrânat. Totuși, pentru a finaliza un proiect, în special unul care este la fel de complicat ca designul web, crearea structurii vă poate oferi de fapt mai multă flexibilitate. Aveți nevoie de un cadru - este negociabil. Flexibilitatea mușchilor artistici și creativi acolo unde aveți cu adevărat libertatea de a rezulta în modele inspirate pe cât de funcționale și realiste. Designul atomic este o abordare senzorială și metodică a designului web, care vă oferă încă șansa de a experimenta în cadrul.

Sisteme de proiectare

Designerii nu mai creează pur și simplu pagini web; ei creează sisteme de proiectare. Sistemele de proiectare includ:

• Culoare
• Grile
• Textură
• Tipografie
• Etc.

Îmi place cum Jack Strachan de la UX Planet descrie sistemele de proiectare: „Pe scurt, un sistem de proiectare este o colecție de componente reutilizabile, ghidate de standarde clare, care pot fi asamblate împreună pentru a construi orice număr de aplicații. Sistemele de proiectare sunt o metodă de a traduce o experiență consistentă și un limbaj vizual pe un produs atunci când se lucrează la diferite puncte de contact. ”

Elementele de design pot fi subiective și pot deveni rapid copleșitoare și haotice. Pentru a le clasifica, proiectarea trebuie privită într-un mod mai metodic. Așa a făcut designerul web Brad Frost.

Nașterea designului atomic

Iată cum Brad a venit cu designul atomic: „Căutând inspirație și paralele, am revenit în continuare la chimie. Gândul este că toată materia (fie că este solidă, lichidă, gazoasă, simplă, complexă etc.) este alcătuită din atomi. Aceste unități atomice se leagă între ele 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 ”.

El continuă să explice că interfețele sunt alcătuite din componente care pot fi clasificate în blocuri. Iată ordinea de la cel mai mic la cel mai mare:

• Atomi
• Molecule
• Organisme
• Șabloane
• Pagini

Sursa: BradFrost.com

Elementele de bază ale designului atomic

Principala atracție a designului atomic este că promovează consistența. Multe dintre elementele pe care le creați pot fi reproduse cu ușurință, reutilizate sau scalate. Și pentru a ține evidența tuturor, designerii își pot construi singuri o bibliotecă în care își pot vedea toate elementele și stilurile într-un singur loc. Există și spațiu pentru personalizare, dar numai pe măsură ce elementele de bază devin mai complexe și mai ample ca domeniu. Să intrăm în cele cinci blocuri:

1. Atomi

Deoarece atomii trebuie să conteze în lumea naturală, etichetele HTML sunt pentru interfețele web. Semnificație: toate interfețele web încep cu etichete HTML sau elemente fundamentale (animații, butoane, palete de culori, fonturi, etichete de formular etc.). În timp ce acești atomi nu sunt benefici pentru designul web pe cont propriu, li se cere să construiască interfața web.

2. Molecule

Moleculele sunt mai complexe decât atomii, dar în general nu sunt complexe. Când grupați atomi care nu sunt atât de utili, aveți molecule mai utile: Etichetă formular de căutare + Intrare + Buton (atomi) = Formular de căutare completat (moleculă)

3. Organisme

Când grupați molecule împreună, obțineți organisme, care sunt mai complexe decât predecesorii lor: Logo + Navigare + Formular de căutare + Icoane de socializare (molecule) = Masthead completat (organism)

În mod ideal, veți putea reutiliza organismele de pe site sau de pe diferite site-uri web, păstrând aspectul general și personalizându-l cu text și imagini diferite. De exemplu, puteți utiliza același tip de masthead pe toate site-urile web pe care le proiectați sau puteți crea un organism specific produsului (imagine + titlu + preț) pe care îl repetați pe pagina produsului.

Acesta este momentul în care interfața web începe cu adevărat să se contureze într-un mod unic, personalizat. Înainte, interfața dvs. este doar o colecție de elemente simple. În timpul etapei organismelor, site-ul devine mai vizual.

Dacă ar fi să împărtășiți procesul dvs. cu un client, aceasta este partea în care aceștia ar merge: „Oh, am înțeles”. Acesta este momentul pentru a începe wireframing-ul sau pentru a pune împreună machete, astfel încât clientul să vă poată oferi feedback înainte de a merge mai departe.

4. Șabloane

Când grupați organismele împreună, aveți șabloane. Acesta este momentul în care aspectul real al paginii se reunește. În timp ce moleculele și organismele au propriile structuri interne, stadiul șabloanelor este momentul în care începeți să vedeți cum se completează și interacționează între ele; unde sunt plasați unul față de celălalt; și modul în care acestea curg ca un întreg. Șablonul oferă contextul moleculelor și organismelor. Rețineți că șabloanele au conținut substituent, nu conținut personalizat sau original.

Sursa: BradFrost.com

5. Pagini

Paginile duc șabloanele la nivelul următor prin înlocuirea conținutului substituent cu conținut real. Probabil că nu va fi conținutul final, dar va fi mai reprezentativ pentru designul și conținutul final. Adăugarea de conținut permanent de înaltă calitate în acest moment ar putea fi o risipă, deoarece site-ul web trebuie încă testat, revizuit și modificat. Acestea fiind spuse, este posibil să va conectați în conținutul finalizat - depinde de locul în care vă aflați în acest proces.

Aceasta este etapa în care site-ul web va fi cel mai controlat. În funcție de recenziile și feedback-ul pe care îl primiți, moleculele, organismele și șabloanele trebuie să fie schimbate. Acesta este, de asemenea, un moment bun pentru a testa variațiile de proiectare.

Gânduri finale

Lucrul despre designul atomic este că nu este nou - verbul este, dar teoria nu. Acesta este modul în care site-urile web sunt proiectate de mult timp. Vorbirea în termeni de design atomic nu vă va face automat un mare designer sau dezvoltator; nu este un înlocuitor pentru munca solidă.

Un avantaj al vorbirii despre aceasta în acest mod, prin utilizarea acestui tip de terminologie pentru a clarifica metodologia, este că este mai ușor de înțeles pentru non-dezvoltatori - puteți explica procesul dvs. clienților. Iar pentru dezvoltatorul organizat, este o modalitate de compartimentare a proiectelor. Veți putea descrie într-o componentă sau într-un grup mic de elemente care nu funcționează. Vă poate ajuta să vedeți pădurea copacilor în loc să spuneți: „Toată treaba este defectă”.

Designul atomic vă permite să îmbrățișați creativitatea fără a vă pierde în ea. Se ceartă elemente de bază și sisteme de proiectare într-un mod care te face să începi mai repede un proiect, astfel încât să poți petrece timp acolo unde arta și abilitățile tale sunt cele mai necesare - realizând adaptări complicate, rezolvând probleme, satisfacând nevoile clienților și în cele din urmă creând un site web dincolo de normă.

Păstrați acest impuls de design web și consultați 10 reguli pentru o bună interfață UI pe care să le urmați în fiecare proiect de proiectare web.

Imagine prezentată prin ShadeDesign / shutterstock.com