Atomic Design

Skriven av

Linnea_Olsson_3

Linnea Olsson

Skånsk front end-utvecklare som älskar växter, katter och strukturerad kod.

Vi som digital byrå lever i en otroligt föränderlig värld, ingenting är eller kan vara skrivet i sten (eller kod) särskilt länge. Det märker vi med den erfarenheten vi har av att bygga både nya projekt i form utav appar, webbplatser och tjänster åt våra kunder, men även i det jobb vi gör när vi tar över underhållet av redan byggda sajter.

I den erfarenhet vi har tillskansat oss genom åren har vi på senare tid försökt hitta en ny väg framåt, för att underlätta både för oss själva och för våra kunder. Det är inte längre hållbart att behöva bygga om allt från grunden om och om igen.

Därför har vi det senaste året fokuserat på en rad olika metoder för att hjälpa oss att ändra tankesättet vi har när vi designar och utvecklar en digital produkt, webbplats eller app. Vi fokuserar på att identifiera komponenter som kan justeras och ändras, läggas till och tas bort, utan att det innebär att vi alltid måste börja om från noll och med blankt papper.

Den nya vägen: designsystem

Ett designsystem har som syfte att hitta ett sätt att koppla samman designmönster och arbetssätt för att kunna leverera en enhetlig digital produkt. I vårt dagliga arbete använder vi oss därför utav bland annat egna Sketch bibliotek med designade komponenter, stilguider och kodbaserade komponentbibliotek.
Designsystem är ett helt eget ämne i sig, så vi kommer inte fördjupa oss mer i det nu utan återkommer om det i ett framtida inlägg istället, men som en del i att organisera vårt designsystem använder vi oss utav en metod som kallas Atomic design.

Atomic design gör det lättare för oss att kunna kommunicera om och identifiera tidigare nämnda komponenter, vilket gör att projektet blir konsekvent, välbyggt men framför allt skalbar och modulärt.

Vad är Atomic Design?

Som så mycket annat i livet så blir det mer lätthanterligt och överskådligt om du plockar isär ett problem eller en utmaning i mindre delar och tacklar det i lagom små portioner istället för att försöka sätta i sig allt på en gång.
Oavsett vad vi kallar metodiken så är kontentan densamma: om du bryter ner något i mindre delar så kommer det vara lättare att hantera. När det kommer till digitala projekt, t.ex. att ta fram en ny webbplats åt en kund, så kan vi tillämpa exakt ett sådant tankesätt.

Tänk dig tillbaka till kemilektionerna i skolan. Vi satt där och kollade på det periodiska systemet och fattade (mer eller mindre) hur allt i universum på något sätt härstammade från små atomer. I olika formationer bildade dessa allt du kan se och ta på. Detta tankesätt går att ta in i vårt dagliga arbete som digital byrå också.

“all matter in the universe can be broken down into a finite set of atomic elements. As it happens, our interfaces can be broken down into a similar finite set of elements.”
– Brad Frost

Som man ser i bilden nedan så har vi redan ett gäng fördefinierade byggstenar att utgå från när det gäller webbutveckling.

Sättet Atomic design underlättar vårt arbete på är just genom att gå tillbaka till klassrummet, till kemisalen och sätta relaterbara ord på de olika komponenterna en webbplats består utav. Vi bryter ner projektet till mindre delar tills vi kan identifiera enskilda, fristående element som lägger grunden för allt på sidan.

Resultatet blir följande steg:

  • Atomer
  • Molekyler
  • Organismer
  • Sidmallar
  • Sidor

Vi kommer fokusera på de tre första stegen, då detta är det vi främst använder oss av för att kommunicera om våra komponenter.

Atomer:

De minsta beståndsdelarna, det allt är uppbyggt utifrån, är atomerna. Det kan vara en länk, en rubrik eller en knapp. Vi sätter attribut, utseende och interaktion på detta enskilda element. Atomerna fungerar som byggstenar för resterande delar av projektet. Dessa byggstenar kan man inte bryta ner i mindre delar utan de är fristående och fungerar i sig själv.

Molekyler:

En kombination av en eller flera atomer bildar nästa steg i kedjan.
Vi kombinerar atomerna för en rubrik, en paragraf och en knapp och sätter samman till en molekyl.

Organismer:

Nästa steg är att kombinera molekylerna till en mer komplett och komplex komponent. Vi kan sätta samman ovan nämnda molekyl (rubrik, text och knapp) med fler molekyler, t.ex. bild, författarinformation och datum. Tillsammans bildar det en organism för t.ex. bloggartikel.
En organism är en fullständig sektion på sajten. Den har en mer sofistikerad struktur, men kan fortfarande ha olika nivåer av komplexitet, från en enkelt sektion med text till ett mer avancerat sidhuvud eller bildspel.

Summan av kardemumman:

I vårt jobb tar vi fram allt från strategier, UX, design till utveckling av en digital produkt och vi strävar alltid efter den optimala upplevelsen, för alla.

Genom att tillämpa ovanstående metod i vårt dagliga arbete kan vi fokusera på att ta fram ett gränssnitt som är välbyggt, genomtänkt och tillgängligt för alla, och framför allt – enkelt att jobba med och anpassa efter de behov som växer fram med tiden.

I praktiken har vi jobbat på detta sätt när det gäller en av våra äldsta kunder. Vi har tagit fram design, designbibliotek och komponentbibliotek som ligger till grund för deras externa webbplats, deras app och en rad andra digitala projekt de har. Det har bidragit till en enhetlighet mellan plattformarna, men även att vi snabbt och enkelt kan hjälpa dem ta fram ny funktionalitet, nya komponenter, nya projekt och göra anpassningar av deras befintliga plattformar på ett effektivt sätt. Det är ett sant nöje för alla parter att jobba så!

Har du som läser några tankar, funderingar eller insikter om ämnet? Dela gärna med dig av dessa till mig!
Min mailadress är linnea@wmyl.se

Välj bilder med ett tydligt budskap

Hur viktigt kan det vara med bra bilder på en webbplats? Så himla viktigt, skulle jag säga.  En bild...

Föregående inlägg

Vikten av uppföljning

Jag tror de flesta har sagt detta till antingen kollegor eller kunder: ”Uppföljning är det viktigast...

Nästa inlägg