Atomic design er en metode og et modulsystem, der gør det hurtigere, smartere og sjovere at lave elegant, brugervenligt og professionelt webdesign.

Kort og overfladisk fortalt handler “atomic design” om at designe skabeloner - som så kan bruges til at præsentere indhold. Det kan være små elementer eller større moduler, der kan kombineres og tilpasses.

Mange amatører (og professionelle perfektionister) fanges af endeløse overvejelser om designmæssige detaljer, når de bygger website og designer sider. Uendelige muligheder prøves af. Det er tidkrævende og ofte frustrerende for alle parter. Det problem kan Atomic Design forebygge.

Det bliver meget hurtigere at præsentere indhold. Flot og professionelt. Især for ikke-designere.

Princippet er endda ret simpelt: Split designet op i atomer. Vi kan også kalde det moduler.
Træf flest mulige designmæssige beslutninger FØR indhold skal præsenteres. Før sider bliver bygget. Helt ned i detaljen.
Og tænk i “design af elementer” mere end i at “designe sider”.

I bedste fald kan du spare timers arbejde og få et mere professoinelt, brugervenligt og flot resultat!
Uanset du selv bygger website eller du hyrer en professionel.

Lav specialsider mere effektivt

Den tidsbesparende effekt ved atomic design er særligt stor, når man laver specialsider: forside, salgssider og andre landingpages.

Specialsider er ofte komplekse sider med mange forskellige typer indhold: tekst, billeder, knapper, formularer, ikoner… Og der er mange æstetiske valg, der træffes undervejs. Måske i tæt samarbejde med kunden.

Specialsider ender ofte med at tage urimeligt lang tid, fordi utallige muligheder prøves af, før endelige valg om design er truffet.

Med Atomic Design kan selv professionelle webproducenter skære timers arbejde af processen.

Atomic Design kan også gøre det nemmere for ikke-professionelle at bygge velfungerende og flotte sider. Med mere sikker hånd.

Start med atomerme i dit design-byggesæt

Atomic design handler om at bygge sider ved at kombinere foruddefinerede elementer.

Du kan sammenligne det med at installere et elementkøkken.

Det har jeg prøvet to gange i mit liv. I stedet for at bygge alt fra bunden - med alle de valg og al den arbejdstid, det kræver - fik jeg nyt køkken ved at kombinere færdige elementer.

Processen startede med nogle overordnede valg om stil og budgetmæssige rammer.
Dernæst valgte jeg leverandør og “designede” dét køkken, der passede til mig, min lejlighed og mit budget.

Selvom der er brugt elementer, tør jeg godt vædde på, at mit køkken er ret unikt og ikke findes mage til.
Tilsvarende er det med webdesign.

Der er i øvrigt ikke meget ved at have et smart og dyrt designerkøkken, hvis du ikke kan lave mad og aldrig får gæster. Men det er en helt anden historie…

Et smart website starter med webtekster i topkvalitet

Indholdet er afgørende for dit webdesign

Det er ikke nok at vælge en smart designskabelon.
Du skal have unikt indhold i topkvalitet - og det er vigtigt både at skrive og designe, så det er brugervenligt og mobilvenligt.

Valg af farver, skrifttyper og skriftstørrelser spiller naturligvis også en stor rolle.
Og så er der de enkelte elementer….

Skrifttyper, skriftstørrelser, billedstil, farver, ikoner, kontrast…

Når vi begynder at arbejde med detaljerne, går det galt for mange.
Mange sider bliver nemlig bygget ved konstant at overveje detaljer - som med fordel kan fastlægges før siderne bliver bygget.

Elementer til webdesign

Man kan eksempelvis begynde med at fastlægge skrifttyper, skriftstørrelser, farver.
Få eksempelvis styr på overskrifter - på hvordan de seks forskellige overskrifttyper skal anvendes.

Bruger vi Atomic Design, starter det med de mindste dele - atomerne.
Derefter kommer molekyler, organismer, templates og sider.

Lad os kigge på elementerne….


Atomer er de mindste enheder. Skrifttype. Skriftstørrelse på den største overskrift (rubrik). Farver….

Atomerne bruges i det uendelige på alle sider.
De kan bruges uden ændringer! Eller med få ændringer undervejs.

Vi kan style og justere i det uendelige. Hvis vi vil. Hvis vi kan. Hvis vi har tid. Hvis det er nødvendigt - og det er det sjældent, hvis vi har fastlagt det grundlæggende design - alle de fundamentale elementer - med omtanke og omhu.

At bygge ved at genbruge foruddefinerede elementer indebærer altså ikke, at man er låst til udelukkende at gøre som besluttet på forhånd. Men det giver mulighed for at arbejde hurtigt og sikkert ved at gøre det.

Og atomerne er bare starten.

De fem elementer i Atomic Design - atomer, molekyler, organismer, templates og sider

Illustrationen tilhører Brad Frost, der har udviklet Atomic Design modellen

Atomic Design er ikke kun velegnet til webdesign.
Og bortset fra udtrykkene er der intet nævneværdigt nyt i metoden.

Man kalder det også component-baseret design, design systemer og modulært design.

Jeg har layoutet tusindevis af avissider (på papir) efter samme princip på Århus Stiftstidende og Jyllands-Posten - før og efter jeg blev uddannet webdesigner og kom til at arbejde med elektronisk kommunikation.

Eksperter i design har fastlagt avisens design i detaljer.

Mange af de designmæssige detaljer kan og må avisens medarbejder ikke ændre på, når de laver sider til dagens papiravis - eller lægger nyheder online på den elektroniske.

De bygger indenfor fastlagte rammer.

Og kig engang på en gammeldags avisside - indholdet er helt afgørende for, hvordan siden ser ud.

Design atomer og molekyler før du bygger sider

Groft sagt skal man ikke designe sider, men bygge dem af elementer, der er designet.

Man designer atomer, molekyler, organismer og templates - og bygger man sider.

Der er fem elementer, der er fundamentet i Atomic Design:

  • atomer
  • molekyler
  • organismer
  • templates
  • sider

Lad os kigge på de enkelte dele.

De fem grundlæggende niveauer i Atomic Design

  • Atomer er designets mindste elementer. Det er enkeltdelene i designet. Fonttyper, farver, individuelle billeder, knapper, citater, ikoner. Du kan sammenligne atomer med LEGO-klodser. Atomerne fastlægges på forhånd - og som det første i processen. De kan efterfølgende kombineres - bruges til at bygge.Atomic design - Her er flere atomer samlet til en molekyle: en kontaktformular med felter og knap til at sende besked
  • Molekyler er grupper af atomer, der er hører sammen. Eksempelvis består en kontaktformular af felter og knap. Der er også truffet mikro-beslutninger om skrifttyper, størrelser, farver. Om baggrundsfarver…Molekyler i webdesign - en samling af atomer
  • Organismer er mere komplekse komponenter, der består af flere atomer og/eller molekyler. Det kan eksempelvis være: navigationsmenuen i toppen af siden. Det kan være en kompleks footer med mange elementer. Det kan være en sidebar. Eller en såkaldt popup.

Menuen på et website består af atomer - masser af beslutninger om de enkelte detaljers udseende

  • Templates er sider uden reelt indhold. Der er dummy-tekst og dummy-billeder. Designer skal blot tilføje indhold - billeder, tekster, ikoner etc.

Atomic Design handler blandt andet om at bygger sider ved at bruge templates

Indholdet er sædvanligvis delt op i flere moduler, der kan rokeres rundt med. Men udseendet af atomer og organismer er grundlæggende fastlagt, så mange beslutninger er allerede truffet  - og det kan derfor gå lynhurtigt med at designe en side.

Templates består overvejende af organismer, der samles.

Intet udelukker, at man kan vælge at bruge lang tid på at flytte rundt - og lave om på - elementer.

Man kan naturligvis også lave om på atomer og organismer, om man vil - men så begynder tidsforbruget og frustrationerne sædvanligvis også at stige.

  • Sider er mere eller mindre færdige. I første omgang bliver dummy-tekst og billeder skiftet ud. Strengt taget kan man udgive siden straks efter. Begynde at teste, om den virker. Og justere efter behov.

 

Få professionel hjælp til de første trin i Atomic Design

Det kan være en fremragende idé at få en professionel designer til at lave de elementer, der skal være fundamentet i DIT design.

Kan du selv bygge sider, behøver du ikke hyre en webproducent, hver gang du skal bygge en salgsside.

Det er som at samle et elementkøkken. Designet er fastlagt. Kunden kombinerer ved at vælge mellem et utal af moduler, der leveres ved gadedøren. Og så kan kunden selv - eller en dygtig snedker - samle køkkenet.

Kunden kan efterfølgende sætte sit personlige præg på køkkenet uden at ændre designet.

Den metode er lige så fremragende, når man bygger et website.

WordPress og designskabelonen DIVI er perfekt til Atomic Design

Jeg har lavet  flere tusinde websider ved at bruge WordPress og den såkaldte pagebuilder DIVI fra Elegant Themes.

De to - WordPress og DIVI - er fremragende at kombinere med arbejdsprocessen Atomic Design.

DIVI har masser af færdige moduler, der kan genbruges på utallige måder.

Og ja… man kan også fortabe sig i at designe sider ved at justere detaljer i det uendelige. Man kan med andre ord opfinde den dybe tallerken hver gang man skal lave en ny side.

At begynde fra bunden hver gang man designer en side er tidkrævende. Og det bliver sjældent bedre for slutbrugerne, at man bruger timer på at lave noget unikt på hver eneste side.

Sammenhæng og kontinuitet i designet er kun en fordel. Det er hurtigere at forstå websitet. Der er altså enorme fordele ved at designe elementer på forhånd. Det er netop dét, Atomic Design handler om.

Tip til at få styr på atomerne i dit webdesign: