Atomic design er en metode til at sikre et konsistent design af websider. Designet brydes ned i dets mindste elementer, fx farver, fonte og former (som i “formen på en knap” osv). De mindste elementer kaldes for atomer, og bygges i HTML en gang for alle.

Atomerne bruges til at lave molekyler, som er mindre enheder – fx en knap, der består af atomerne form, farve og en font til tekst.

Molekylerne sættes igen sammen til organismer, fx en header – og organismerne bruges så til at bygge fx de sidetyper, der benyttes i det daglige arbejde med at publicere på et website.

Allan Helleskov Kleiner kendte godt principperne. Men han vidste også, at de er svære at overholde i praksis. “Design er jo en kreativ proces, som er i konstant udvikling. Derfor er der meget at holde styr på,” siger han.

Hos Peytz er vi vilde med at bygge design systematisk. Vi anvender en række designprincipper og udviklingsværktøjer som er bygget efter Atomic Design principperne. Det styrer vores proces i arbejdet med design, sådan at vi hele tiden arbejder på at skabe et sammenhængende design system i et tæt samarbejde mellem designere og udviklere. Det sikrer en konsistent og gennemført brugeroplevelse for brugerne. På den måde bygger vi frontend kode, der sparker røv.

For Allan Helleskov Kleiner betød det, at hans utålmodighed blev indfriet.

Tirsdag morgen kastede tre frontend-udviklere sig over designfilerne fra Loft37.

Frontend-udviklerne splittede designet i atomer og byggede det op efter principperne for Atomic Design. Koden blev gjort tilgængelig for Fitness World i systemet Pattern Lab, hvor alle Fitness Worlds interessenter kunne følge udviklingen på deres egen mobil, tablet og pc – og klikke sig rundt i frontenden, som om sitet var færdigt.

Allan forklarer fordelene således: “Ved at bruge Atomic Design principperne og Pattern Lab kunne vi ikke bare følge med i hele processen. Vi fik også sikret, at designet er konsistent på hele sitet – og at ændringer, fx af en farvepalette, slår igennem på alle sider med det samme. Systemet betyder, at vi ikke længere behøver designere til at lave de mere banale tilføjelser og ændringer, fordi elementerne er givet på forhånd og “bare” skal samles.”

En Drupal-arkitekt gik i dialog med Fitness Worlds egne IT-folk for at finde den bedste løsning på udfordringerne – og da arkitekturen var fastlagt, satte leverandøren et helt hold udviklere på opgaven. Såvel arkitekten som udviklerne arbejder på Peytz's kontor i Moldova, og det gav først anledning til nogen skepsis hos Fitness World:

Også Fitness World’s Lead Developer var nervøs for samarbejdet med Moldova. “Men det var helt uden grund. Hele forløbet har været supergodt. Jeg kunne hente arkitekten frem på Skype nårsomhelst, og fik et tæt ping-pong samarbejde, og det er guld værd, især når man udvikler API’er sammen. Og så kan man godt mærke, at han er en skarp herre – man skal ikke forklare ret meget, før han er helt med,” siger Thomas Roel Jørgensen fra Fitness World.

Fitnessworld.com fokuserer på at hjælpe brugerne til at finde den løsning, der er den rigtige for dem: Vil du træne alene eller på hold, vil du træne i et eller flere centre, vil du have en personlig træner, husk at booke plads på dit hold næste tirsdag, osv. Kompleksiteten fremkommer, fordi der er flere end 150 centre at vælge mellem, centrene har ikke de samme priser og tilbyder ikke de samme hold.