Atomic design – smart arbejdsproces til flottere og billigere webdesign

Atomic design er en metode. Et modulsystem, der ikke kun gør det hurtigere, smartere og sjovere at lave elegant, brugervenligt og professionelt webdesign. Ikke-professionelle webdesignere kan lave flotte sider - hurtigt - med metoden.

Kort og overfladisk fortalt handler “atomic design” om at designe skabeloner - som så kan bruges til at præsentere indhold. Du kan få en webdesigner til at lave unikke elementer. Eller gøre det selv. Fidusen er så at genbruge elementerne. Eventuelt med små justeringer.

Det minder meget om at bygge et modul-køkken. Bortset fra, at modulerne til webdesign kan være helt unikke og specialdesignet til dig alene, så du ikke kommer til at se samme stil på andre websites.

At bygge med atomic design handler meget om at bryde processen ned i overkommelige moduler.
I stedet for at designe hele sider designer man de moduler, som sider bygges af - man designer moduler, der hurtigt og nemt kan kombineres og genbruges i det uendelige.

Sådan gjorde vi på papiravisen

Jeg har layoutet tusindevis af avissider (på papir) efter samme princip på Århus Stiftstidende og Jyllands-Posten - altså både før og efter jeg blev uddannet webdesigner.

De medarbejdere, der designer de daglige avissider er strengt taget ikke designere. Det er layoutere.
De arbejder med et design, der er lavet af eksperter i avisdesign. Avisens design er fastlagt i detaljer før siderne samles.

Når jeg layoutede en avisside, skulle jeg derfor ikke tage stilling til 117 små designmæssige detaljer. De var fastlagt på forhånd. Jeg fulgte nogle principper og retningslinjer, som andre havde fastlagt - og indenfor de rammer havde jeg masser af valgmuligheder.

Mange af de designmæssige detaljer kan og må avisens medarbejdere slet ikke ændre på, når de laver sider til dagens papiravis - eller lægger nyheder online på den elektroniske. Jeg kunne eksempelvis ikke ændre på avisens skrifttyper eller skriftstørrelser.

Vi designede kort sagt sider indenfor på forhånd fastlagte rammer.
Og kunne derfor snildt designe adskillige avissider på en arbejdsdag.

Få professionel hjælp til at komme i gang med atomic design

Med atomic design kan du selv fastlægge rammer og retningslinjer helt ned i detaljer - hvis du kan. Hvis du har tilstrækkelig viden om webdesign og webkommunikation.

Men du kan også få en ekspert til at lave det grundlæggende arbejde. Eksempelvis fastlægge det grundlæggende og overordnede design.

Så kan du nøjes med at layoute sider - og altså lave professionelle sider i en fart.

Du kan spare masser af tid, masser af kroner og slipper for mange frustrationer.

Undgå at blive opslugt af detaljer - så sparer du timer

Mange amatører (og professionelle perfektionister!) fanges af endeløse overvejelser om designmæssige detaljer, når de bygger website. De designer sider - og tager stilling til et væld af detaljer, mens de bygger. Uendelige muligheder prøves af. Og laves om igen og igen. Det er tidkrævende og ofte frustrerende at arbejde på den måde. Det problem kan arbejdsmetoden Atomic Design forebygge.

Atomic design gør det meget hurtigere at præsentere indhold. Flot og professionelt. Især for ikke-designere. Men selv professionelle webdesignere kan få glæde af metoden.

Princippet bag atomic design er ret simpelt:
Split designet op i atomer.
Vi kan også kalde det moduler. Eller elementer.

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…. helt ned i detaljen er dine valg afgørende:

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

Og det er ofte dér, det 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.

Vi skal ikke både bygge sider og træffe beslutninger om detaljer.
Vi skal have styr på detaljerne og de overordnede linjer FØR vi bygger sider.

Elementer til webdesign

Man kan fint begynde med at fastlægge skrifttyper, skriftstørrelser, farver.
Lav en farveskala - og hold dig til den, når du bygger sider.

Få 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.

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.

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.

• 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…

• 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.

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

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:

• Masser af gode råd om billeder til WordPress og DIVI
• Guide til at vælge skriftstørrelser på dit website
• Få dit website hurtigt i luften med Growth Design
• Sådan får du en superbillig hjemmeside
• Start designprocessen ved at lave mood board