Redesign af webside/webshop med Atomic design

Atomic design har længe været noget man kender til, men det er blevet mere aktuelt efter at systemer mere og mere er begyndt at bruge drag and drop, og lade kunderne selv design og opsætte nye sider.

Atomic design kan hjælpe med at få et mere professionelt udtrykt i denne process ved at man designer elementer til kunderne som kan benyttes, og dermed skabe et flot, brandet og ensartet udtryk på siden, som er mere brugervenligt.

Vi har skrevet en artikel om Atomic Design, hvis du vil læse mere om hvad det er - i denne artikel kigger vi på redesign med Atomic design

Forvandl jeres webside med Atomic Design

Er I på udkig efter en effektiv metode til at redesigne jeres webside eller webshop? Så er Atomic Design tankegangen en moderne og effektiv løsning, der kombinerer æstetik og teknisk viden for at skabe smukke, funktionelle og nemt vedligeholdelige websites. Atomic Design blev introduceret af Brad Frost, og er en metode, der opdeler et website i fem grundlæggende elementer: Atomer, Molekyler, Organismer, Skabeloner, og Sider. Det er en teori som er blevet mere og mere relevant i og med SaaS og open source systemer er begyndt at komme med drag og drop editorer, og dermed netop er begyndt at arbejde med f.eks. molokyler, organismer og skabeloner på et praktisk niveau. I praktisk bruges nogle ting anderledes end Brad Frost tænkte det da han kom med teorien, også fordi det har udviklet sig, men grundteorien er den samme i moderne webdesign.

Redesign med Atomic Design

Atomic Design er en filosofi, der sammenligner webdesign med kemi.

Det opdeler et website i mindste enheder kaldet 'Atomer', som kan være knapper, ikoner, farver og typografi.
Disse atomer samles i grupper kaldet 'Molekyler' for at danne funktionelle enheder som søgefelter eller menuer.
Flere molekyler samles til 'Organismer' for at danne større og mere komplekse dele af et website, som en header eller en footer.
'Skabeloner' viser hvordan organismerne er placeret på en side, og hvordan de tilpasser sig forskellige skærmstørrelser.
Sidst men ikke mindst, 'Sider' er konkrete eksempler på skabelonerne med reel indhold og data.

Ved at opdele det på denne måde kan man designe i genbrugelige elementer fremfor som i gamle dage at tænke pixelperfekt design eller opsætning af fuldt design i et grafisk program. 

Fordele ved Atomic Design

Der er flere forskellige fordele ved at tænke i Atomic design når man skal redesigne eller forny ens eksisterende webside eller webshop

• Genbrug af kode og designelementer, hvilket reducerer udviklingstid og vedligeholdelsesomkostninger.
• Gør det nemmere at teste og debugge websites, da man kan isolere og ændre individuelle komponenter uden at påvirke helheden.
• Skaber en fælles sprog og forståelse mellem designere og udviklere, da man kan referere til de samme elementer med de samme navne.
• Giver mulighed for at skabe responsive og adaptive websites, der fungerer på alle enheder og skærmstørrelser.
• Tilpasset moderne systemer der typisk har drag and drop af netop elementer som tilsammen giver et design

Redesign af webside/webshop med SaaS-systemer og Atomic Design

SaaS-systemer er Software as a Service, f.eks. i form af CMS, webshop, værktøjer og lignende, der leveres som en service over internettet.

Atomic Design er især gavnlig i SaaS-systemer, da det gør det nemmere at oprette og vedligeholde systemerne, fordi man kan genbruge de samme komponenter på tværs af sider og funktioner, og kun skal opdatere dem ét sted.

I moderne SaaS systemer sider kunderne ofte selv og sætter sider op, og ved at have elementer designet kan man skabe et lækkert og ensartet professionelt design på en nem måde.

Nogle af fordelene ved at designe efter Atomic design tankegangen i SaaS systemer er

• Understøtter drag and drop interaktionen: Editoren i systemet hvor kunden opsætter sider kan benytte elementerne, så kunden nemt selv kan lave sider der er tilpasset til brandet
• Fremmer et bedre samarbejde mellem designere og udviklere, fordi de kan tale det samme sprog og dele de samme byggesten for SaaS-systemerne.
• Gør det billigere at designe en ny side ved at tænke i små genbrugelige komponenter.
• Giver mulighed for at tilpasse komponenter til de enkelte kunder, så de kan få et unikt design og look.
• Man kan bruge komponenter forskelligt fra side til side og skabe unikke sider med genkendeligt design

Find et systemer der understøtter egne komponenter

Det er ikke alle SaaS systemer der lader jeg bruge komponeneter der er specialdesignet. Mange har kun nogle standard komponenter som kan tilpasses.

Det er få systemer hvor der både er mange standardkomponenter og skabeloner, men hvor man også kan få lavet egne komponeneter på flere niveauer f.eks.

• Atomer: Få opsat knapper, ikoner, farver, typografi mf. efter jeres brand og ønsker
• Molekyler: Få lavet elementer tilpasset jeres brand, som kan trækkes ind i editoren og bruge på alle sider
• Organismer/skabeloner: Mulighed for at få lavet skabeloner som indeholder molekyler, så man nemt kan opsætte sider hurtigt og effektivt

hvilket det giver mulighed for at man som kunde nemt via drag and drop kan lave flotte sider tilpasset til ens brand, og samtidige gøre det nemt og hurtigt.

Et af de systemer hvor det er muligt er Flex4B systemet.
Systemet tilbyder et stort CMS med drag and drop og ovenstående muligheder, og samtidige er der også mulighed for at få webshop, og endda billetsystem og kortsystem i det.

Flex4B systemet er super fleksibelt, og der er gjort meget for at det kan tilpasses de enkelte kunder, og samtidige sikrer alle fordelene ved SaaS systemer som f.eks. at det er konstant opdateret (sikkerhed, plugins mv.), nye gratis funktioner og opdateret teknisk SEO.

Kontakt Flex4Business ApS for at få et gratis og uforpligtende tilbud på Flex4B systemet eller for at høre mere om det