De fem trinnene i Atomic Design-systemet

Bransjer som arkitektur, industridesign og bilindustrien har utviklet smarte modulære systemer for produksjon av ekstremt komplekse objekter som fly, skip og skyskrapere. Inspirert av dette, Brad Frost foreslo Atomic Design-systemet, en metodikk som består av fem distinkte stadier som arbeider sammen for å skape et mer hierarkisk system for grensesnittdesign. De fem trinnene i Atomic Design er 

1. Atomer

Atomer i det atomiske designsystemet er de minste enkeltelementene som knapper, innganger, bokser, merker og lenker. De kan utformes ved å kombinere visuell stil, farge og type. På samme måte kan vi skape andre atomer i systemet. Atomer er også grunnlaget for designsystemer som fonter, animasjoner, fargepaletter, skyggestiler og alle elementene som skaper CSS-stiler. Hvert atom har sine egne egenskaper og variasjoner.

2. Molekyler 

Molekyler er den nest største byggesteinen, skapt ved sammenføyning av ulike atomer. Det er mulig å bryte dem ned, konseptuelt, til noe som er lettere å fordøye. I grensesnitt er molekyler relativt enkle grupper av brukergrensesnittelementer som fungerer sammen som en enhet, for eksempel kan en skjemaetikett, en søkeinngang og en knapp settes sammen til et søkeskjemamolekyl. Hvert molekyl kan ha forskjellige tilstander eller variasjoner, og de vil bli gjenbrukt i mockupene på forskjellige måter og til forskjellige formål. 

3. Organismen: det tredje trinnet i det atomære designsystemet

Organismer er mer komplekse UI-komponenter som består av grupper av molekyler og/eller atomer eller andre organismer. Disse elementene danner distinkte deler av et grensesnitt. Organismer kan bestå av lignende eller forskjellige molekyltyper, for eksempel en topptekst på alle nettsteder vi besøker. Noen vanlige organismer er kort, navigasjon, overskrifter og datatabeller. Etter det har vi designet atomer, molekyler og organismer. Nå er vi klare til å begynne å kombinere dem i en malside!

4. Maler

Her slutter kjemien, for maler er enheter laget av ulike organismer som kombineres for å skape en side eller en visning. Maler er objekter på sidenivå som plasserer komponenter i en layout og uttrykker designets underliggende innholdsstruktur. For å bygge videre på det forrige eksempelet kan vi ta overskriftsorganismen og bruke den på en hjemmesidemal. Et annet viktig kjennetegn ved maler er at de fokuserer på sidens underliggende innholdsstruktur i stedet for sidens endelige innhold. 

5. Sider

Sider er spesifikke forekomster av maler som viser hvordan brukergrensesnittet ser ut med ekte, representativt innhold på plass. Hvis vi bygger videre på det forrige eksempelet, kan vi ta malen for startsiden og legge inn representativ tekst, bilder og medier i malen for å vise ekte innhold i aksjon. Dette er den mest konkrete fasen av atomdesign, for det er tross alt dette brukerne vil se og samhandle med når de besøker et nettsted eller bruker en app.

Fordeler med å bygge et designsystem med atomdesign:

1. Ved å lage et designsystem basert på det atomiske rammeverket kan utviklerne utvikle de grunnleggende komponentene, noe som reduserer mengden omarbeid i utviklingsfasen. Som designere vil utviklerne bygge de grunnleggende komponentene for å lage større komponenter.
2. Det blir enkelt for designere å administrere filer på en effektiv måte, og det blir også problemfritt å dele og oppdatere filene i fremtiden.
3. Design Systems bidrar til å dokumentere alle designkomponentene og -mønstrene på en oversiktlig måte, noe som til syvende og sist gjør teamet mer samarbeidsvillig og gir dem mulighet til å fokusere på andre komplekse aspekter ved produktet.
4. Designere kan gjøre endringer under vedlikeholdet av produktet på en smartere måte, ved å oppdatere endringene direkte til atomer, molekyler og organismer og bruke disse endringene på hele grensesnittet.

Atomic Design er en slik metode for å beskrive og praktisere designsystemer, samtidig som de blir stadig viktigere i dagens verden med rask vekst og behov for helhetlige produkter. Disse designsystemene gjør det mulig for teamene å bygge bedre produkter raskere, som brukerne forstår fordi språket er konsistent på tvers av alle berøringspunkter. 

I neste artikkel vil vi vise deg hvordan du kan bruke den atomiske metodikken på din design, men i mellomtiden kan du sjekke vår portefølje for å oppdage vakre apper og design.