Populär gemaach vum Brad Frost am Joer 2013, fir der wuessender Komplexitéit vun Interfaces an dem Besoin fir konsequent Designsystemer gerecht ze ginn, ass atomescht Design eng Method fir Interfaces ze designen, déi vun der Chimie inspiréiert sinn, fir d'Schafung vu responsive Interfaces fir Applikatiounen a Websäiten ze optimiséieren. 

Genee wéi Matière aus Atomer, Molekülen an Organismen zesummegesat ass, kann eng Grenzfläch a seng grondleeënd Bausteng opgedeelt ginn. Atomar Design betount hierarchesch Konstruktioun: ugefaange mat de klengsten Elementer a weider Richtung méi komplexe Schablounen.

 

Déi 5 Niveauen vum Atomdesign

 

• Atomer:
  
  
  Dëst sinn déi grondleeënd Elementer, déi eenzel keen funktionellen Zweck hunn, awer d'Grondlag bilden. Dëst kënne Faarwen, Typographie, Knäppercher, Formulairefelder, Ikonen, Logo, Schrëft, etc. sinn.
  

 

• Molekülen
  
   

  Moleküle si Kombinatioune vu verschiddenen Atomer. Zum Beispill: en Textfeld + e Knäppchen = eng Sichbar. Dës einfach Kombinatioune bilden d'Interface. 

• D'Organismen
  
  
  
  Organismen gruppéiere verschidde Moleküle fir autonom Sektiounen vun der Grenzfläch ze bilden. Zum Beispill: en Header vun enger Websäit, déi aus dem Logo, enger Sichbar an engem Navigatiounsmenü besteet = en Header
   

• Schablounen
  
  
  
  An dëser Phas setzen mir verschidden Organismen zesummen, fir der Säit eng Gesamtstruktur ze ginn. Schablounen si Säitemodeller, déi dat allgemengt Layout weisen, ouni sech nach op den endgültegen Inhalt (Texter, Biller, asw.) ze konzentréieren.  
• D'Säiten
  
  
  D'Säite sinn dat fäerdegt Produkt: si integréieren d'Schablounen an den aktuellen Inhalt. Hei gëtt déi visuell a funktionell Konsistenz validéiert.
  
  

D'Virdeeler vum Atomdesign

• Konsistenz Wiederverwendbar Elementer garantéieren eng Eenheetlechkeet am ganze Produkt, soudatt zwou Säiten mat verschiddene Knäppercher oder Stiler vermeit ginn. 

• Effizienz D'Équipen spueren Zäit andeems se scho definéiert Komponenten ausnotzen: dëst erlaabt eis d'Designzäit ze reduzéieren, awer och d'Entwécklungs- an d'Maintenancezäit. 

• Skaléierbarkeet Modularitéit erlaabt et engem System sech weider z'entwéckelen, ouni datt alles nei opgebaut muss ginn (z.B. wann een e Knäppchen an der Bibliothéik ännert, gëtt déi ganz Websäit aktualiséiert). 
• Zesummenaarbecht Designer an Entwéckler schwätzen déiselwecht Sprooch dank enger gemeinsamer Komponentbibliothéik.

Atomdesign an Designsystem

Atomic Design ass dacks d'Basis vun engem Designsystem, well et eng strukturéiert Manéier bitt fir dës Bibliothéik z'organiséieren. Op dës Manéier profitéieren d'Teams vun enger méi grousser Konsistenz iwwer all hir Produkter, enger méi grousser Effizienz duerch d'Wiederverwendung vu Komponenten a besserer Zesummenaarbecht, well Designer an Entwéckler déiselwecht Sprooch schwätzen. Zousätzlech mécht dës Organisatioun de System skalierbar: d'Modifikatioun vun enger Komponent an der Bibliothéik aktualiséiert automatesch all d'Interfaces, déi se benotzen.

Zesummefaassung

Atomic Design ass net nëmmen eng elegant Metapher: et ass eng richteg Designphilosophie, déi Kloerheet, Wiederverwendbarkeet a Skalierbarkeet am responsive Interface-Design fördert. Duerch dës Approche bauen d'Teams robust a flexibel Systemer, spueren Zäit bei Mockups a vereinfachen d'Kommunikatioun mat den Entwécklungsteams.
Fir Äert Wëssen ofzeschléissen a méi iwwer Atomfuerschung ze léieren, zéckt net, eisen Artikel ze liesen. Atomfuerschung: Eng Method fir d'Deele vun UX-Léieren Deel 1 et Deel 2

 

 

 

 

Julie Bouvier, Produktdesignerin bei UX-Republic