Nog niet eens zo heel lang geleden bedacht ene Brad Frost de term Atomic Design. Het was in 2014 dat dit concept de wereld van het webdesign zou bereiken en als je zelf ook een ontwikkelaar bent, dan heb je er waarschijnlijk al lang over gehoord. Deze aanpak wint aan populariteit, omdat ontwerpteams met steeds meer complexe uitdagingen worden geconfronteerd. En dat vraagt om een hele nieuwe benadering.

Het belangrijkste doel bij webdesign en dus ook bij atomic design is om met een overtuigende online identiteit te komen. Dat neemt echter niet weg dat daar de laatste jaren ook een tweede uitdaging bij is gekomen: die van het zorgen voor een optimale gebruikerservaring (of user experience). Digitale content moet er, ongeacht het gebruikte apparaat (computer, tablet en smartphone), dus niet alleen hetzelfde uitzien, maar ook voor een even vlekkeloze gebruikerservaring zorgen. Atomic design speelt hierop in.

Wat is atomic design?

Tot voor kort werden pagina’s vooral gezien als losse onderdelen. Elke pagina kende natuurlijk wel hetzelfde logo en dezelfde footer, maar het was (en is nog steeds) op bouwtechnisch vlak lang niet altijd duidelijk dat de pagina’s ook wat met elkaar te maken hadden. Bij een optimale gebruikerservaring draait het echter allemaal om de consistentie. Een optimale UX bestaat vandaag de dag uit een hoop meer dan alleen dezelfde letters, kleuren en lay-out. Juist om die reden kwam Brad Frost op het concept van atomic design.

Het zal je niet verbazen dat dit concept is geïnspireerd door de chemie. De gelijkenis daarmee is dat het webdesign nu ook is gesplitst in atomen. Die kleine atomen vormen samen weer moleculen, die op hun beurt weer complexere organismen en de uiteindelijke materie vormen. Het idee daarachter? Dat ook in het webdesign moet worden gewerkt via elementaire delen. En dat vanuit daar weer naar het grotere geheel moet worden gewerkt. Om zo voor meer consistentie te zorgen.

atomic design

Hoe zien deze delen eruit?

En voor wie niet thuis is in de chemie, zorgen we graag voor een toelichting. De afzonderlijke delen kunnen namelijk als volgt worden opgesplitst:

  • Atomen: dit zijn belangrijke, maar afzonderlijke onderdelen. Denk aan de details zoals kleuren, lettertypes, buttons, invulbalk, labels, bulletpoints, paragrafen en andere selectievakjes. Op zichzelf staand hebben deze atomen niet eens zo veel betekenis, maar gecombineerd als moleculen is dat wel weer het geval.
atoms_atomic_design
  • Moleculen: gezamenlijk worden zij namelijk een stuk meer waard. Bekijk maar eens een op zichzelf staande label of invulbalk: grote kans dat je geen idee hebt wat je ermee moet. Maar samen vormen ze een handig zoekveld.
molecule_atomic_design
  • Organismen: deze moleculen zijn daarmee net als bouwstenen waarmee wordt gebouwd. Een aantal van deze bouwstenen staat samen voor een complex deel van een design. Neem als organisme bijvoorbeeld de header van een site: deze bestaat weer uit het logo, de navigatie en in sommige gevallen dus een zoekveld.
organism_atomic_design
  • Templates: dit is als het ware de blauwdruk van een website (of een ander digitaal design). De template is opgebouwd uit gegroepeerde organismen die samen een pagina vormen.
template_atomic_design
  • Pagina’s: dan komen we ook uit bij de pagina zelf. Dit is weer als een template, maar dan gevuld met content die van toepassing is voor de betreffende organisatie. Op basis van de uiteindelijke pagina’s kan er weer worden toegewerkt naar de site.
page_atomic_design

Wat levert het op voor webdesigners?

Atomic design wordt steeds populairder bij webdesigners, omdat het een stuk gemakkelijker wordt om een ​​stijlgids te maken. Atomic design helpt bijvoorbeeld om dubbele taken te voorkomen. Het is namelijk veel duidelijker welke componenten kunnen worden hergebruikt, zonder dat daarbij dubbele codes worden geschreven. Atomic design maakt het gemakkelijk om inhoud en functies te verfijnen, toe te voegen, of te verwijderen.

Als de eerder genoemde bouwstenen al klaar liggen, kun je ze dus eenvoudiger bijsnijden en op de juiste plek plaatsen. Door de opbouw van kleine naar grotere onderdelen is het voor programmeurs ook een stuk eenvoudiger om projecten over te dragen. Oftewel: efficiëntie staat voorop. En dat klinkt bij webdesigners natuurlijk als muziek in de oren.

Benieuwd naar wat we voor jouw website kunnen betekenen? Neem contact met ons op en we bespreken de mogelijkheden! 🙂

Kun jij wel wat hulp gebruiken bij de
marketing van jouw bedrijf?

Kom langs, bel ons, of gebruik onderstaand formulier om ons een mailtje te sturen. We nemen direct contact met je op om te zien hoe we je kunnen helpen!


Meer leadsMeer webshop salesMeer merkbekendheidMeer inzicht in dataNieuwe brandingNieuwe website

In de ochtendBegin van de middagEind van de middag

Onze klanten beoordelen Whello met een:

4.9 / 5

Onze blije klanten aan het woord

The main quality of Whello is that they are able to provide high quality services on a personal, informal level that is close to the customer. Communication is quick and there’s a lot of knowledge in the team. To me Whello is a trustworthy company for online marketing services and web design that I would highly recommend.

Carlies Mol

Passionate people that are very involved and create great advertising campaigns.

TradeIt gg

Whello have a fantastic team and delivered great results for us. Highly recommended !

Doug Neuhofer

Having successfully completed the set up phase, we would like to thank you for your professional behavior and great communication. We look forward to the continuation of this promising partnership!

LEATHER HYPE

Experienced people who are able to deliver great quality. Very pleased to be working with whello.

Maaike - Tandarts Jordaan

Working together with Whello to achieve our digital and automation goals is a great thing - dedicated, knowledgable, professional and up-to-date to the digital best practices.

Top Employers Institute

A smart, talented and friendly company providing top quality, focused service.

Brenda de Jong - The English Center

It's a pleasure working with really professional and competent people. SEO results we have achieved thanks to Whello are amazing!

Luca Bagnaschino

Great Amsterdam based advertising agency with a lot of in-house experience and smart + friendly staff.

Leks Betlem