Atomic design/webdesign

Webdesign er en dynamisk og kreativ disciplin, der kræver både æstetisk sans og teknisk viden. Men hvordan kan man designe et website, der er både smukt, funktionelt og nemt at vedligeholde? Et muligt svar er atomic webdesign, en metode der bygger på principperne fra atomic design.

Atomic design er en filosofi, der blev introduceret af Brad Frost i 2013. Han sammenlignede webdesign med kemi, og foreslog at man kunne opdele et website i fem grundlæggende elementer:

• Atomer: De mindste enheder i et website, som f.eks. knapper, ikoner, farver og typografi.
• Molekyler: Grupper af atomer, der danner en funktionel enhed, som f.eks. et søgefelt eller en menu.
• Organismer: Samlinger af molekyler, der danner større og mere komplekse dele af et website, som f.eks. en header eller en footer.
• Skabeloner: Layouts, der viser hvordan organismerne er placeret på en side, og hvordan de tilpasser sig forskellige skærmstørrelser.
• Sider: Konkrete eksempler på skabelonerne med reel indhold og data.

Atomic webdesign er en praktisk anvendelse af atomic design, der bruger værktøjer som CSS-preprocessorer, style guides og komponentbiblioteker til at skabe konsistente og modulære websites. Fordelene ved atomic webdesign er blandt andet:

• Det fremmer genbrug af kode og designelementer, hvilket reducerer udviklingstid og vedligeholdelsesomkostninger.
• Det gør det nemmere at teste og debugge websites, da man kan isolere og ændre individuelle komponenter uden at påvirke helheden.
• Det skaber en fælles sprog og forståelse mellem designere og udviklere, da man kan referere til de samme elementer med de samme navne.
• Det giver mulighed for at skabe responsive og adaptive websites, der fungerer på alle enheder og skærmstørrelser.

Atomic webdesign er ikke en endelig løsning eller en fast regel, men snarere en måde at tænke på webdesign på. Det kræver stadig kreativitet og fleksibilitet at skabe et godt website, men atomic webdesign kan være en hjælp til at strukturere og organisere processen.

Hvis du vil vide mere om atomic webdesign, kan du besøge Brad Frosts hjemmeside eller læse hans bog Atomic Design.

SaaS og Atomic webdesign

Saas systemer er Software as a Service f.eks. i form a CMS, webshop, værktøjer og lign., som leveres som en service over internettet, og som ofte har brug for at tilpasse sig forskellige kunder, enheder og brugsscenarier.

I SaaS systemer med CMS og open sorucesystemer hvor der er drag and drop funktion til at placere indhold, er Atomi webdesign godt da man så kan lave hjemmesider der er tilpasset den enkelte kunde selvom de bruger samme værktøj

Men der er flere fordele ved at tænke Atomic webdesign ift. Saas systemer og Open source systemer med drag and drop.

Her er nogle af fordelene:

• Atomic webdesign gør det nemmere at oprette og vedligeholde Saas systemer, fordi man kan genbruge de samme komponenter på tværs af sider og funktioner, og kun skal opdatere dem ét sted.
• Atomic webdesign gør det muligt at skabe forskellige layouts og variationer af Saas systemer ved at sammensætte komponenterne på forskellige måder, uden at skulle kode dem fra bunden hver gang.
• Atomic webdesign understøtter drag and drop interaktionen, fordi komponenterne er små og fleksible nok til at kunne flyttes rundt og tilpasses efter brugernes behov og præferencer.
• Atomic webdesign fremmer et bedre samarbejde mellem designere og udviklere, fordi de kan tale det samme sprog og dele de samme byggesten for Saas systemerne.
• Atomic websdesign gør det billigere. Ved at tænke i små genbrugelige komponeneter, kan man billigt designe en ny side
• Atomic webdesign giver mulighed for at tilpasse komponenter til de enkelte kunder, så de kan få en unikt design og look
• Man kan bruge komponenter forskelligt fra side til side og skabe unikke sider med genkendeligt design

Flex4B og Atomic webdesign

Flex4B systemet som er et stort system med CMS, webshop, billetsystem og kortsystem understøtter Atomic webdesign. Med drag and drop editoren kan du benytte de mange komponenter der er lavet parat til jer, som kan tilpasses efter jeres ønsker og behov.

Flex4B systemet understøtter - imodsætning til de fleste andre systemer - og at der laves komponenter til den enkelte kunder. Du kan dermed få specielttilpassede komponenter. Nogle af de kunder der benytter det er bl.a. Old Irish Pub og Sommerland Sjælland. De har begge lavet komponenter som passer til deres designguide og målgruppe.

Vil du høre mere om Flex4B systemet eller muligheden for Atomic design - så kontakt Flex4Business ApS

Atomic designAtomic webdesignAtomic webdesign og SaaSAtomic webdesign og open source