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
socials van jouw bedrijf?

Bij Whello helpen we je graag. Kom langs, bel ons, dm 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
powered by Google
Maaike
Maaike
19:32 08 Mar 18
Experienced people who are able to deliver great quality. Very pleased to be working with whello.
Doug Neuhofer
Doug Neuhofer
14:11 08 Mar 18
Whello have a fantastic team and delivered great results for us. Highly recommended !
Luca Bagnaschino
Luca Bagnaschino
09:21 06 Dec 17
It's a pleasure working with really professional and competent people. SEO results we have achieved thanks to Whello are amazing!
TradeIt gg
TradeIt gg
14:17 19 Mar 18
Passionate people that are very involved and create great advertising campaigns.
Orange FinancialLease
Orange FinancialLease
09:55 09 Mar 18
Een zeer deskundig team die weet van doorpakken. Weet waar de juiste ingang is. Vaak ook meedenkend met de juiste Knowhow en weten doet goed toe te passen waar nodig is. Wij zijn erg blij met de samenwerking en bevelen Whello aan bij andere partijen. Een 5 sterren beoordeling is hierdoor zeker op zijn plaats.
LEATHER HYPE
LEATHER HYPE
07:18 06 Feb 20
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!
Leks Betlem
Leks Betlem
16:34 24 Feb 20
Great Amsterdam based advertising agency with a lot of in-house experience and smart + friendly staff.
Carlies Mol
Carlies Mol
14:38 24 Sep 19
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.
Top Employers Institute
Top Employers Institute
12:14 21 Jan 20
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.
Brenda de Jong
Brenda de Jong
18:33 04 Oct 19
A smart, talented and friendly company providing top quality, focused service.
See All Reviews

Onze blije klanten aan het woord

Great Amsterdam based advertising agency with a lot of in-house experience and smart + friendly staff.
Leks Betlem
Leks Betlem
16:34 24 Feb 20
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
LEATHER HYPE
07:18 06 Feb 20
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
Top Employers Institute
12:14 21 Jan 20
A smart, talented and friendly company providing top quality, focused service.
Brenda de Jong
Brenda de Jong
18:33 04 Oct 19
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
Carlies Mol
14:38 24 Sep 19
Passionate people that are very involved and create great advertising campaigns.
TradeIt gg
TradeIt gg
14:17 19 Mar 18
Een zeer deskundig team die weet van doorpakken. Weet waar de juiste ingang is. Vaak ook meedenkend met de juiste Knowhow en weten doet goed toe te passen waar nodig is. Wij zijn erg blij met de samenwerking en bevelen Whello aan bij andere partijen. Een 5 sterren beoordeling is hierdoor zeker op zijn plaats.
Orange FinancialLease
Orange FinancialLease
09:55 09 Mar 18
Experienced people who are able to deliver great quality. Very pleased to be working with whello.
Maaike
Maaike
19:32 08 Mar 18
Whello have a fantastic team and delivered great results for us. Highly recommended !
Doug Neuhofer
Doug Neuhofer
14:11 08 Mar 18
It's a pleasure working with really professional and competent people. SEO results we have achieved thanks to Whello are amazing!
Luca Bagnaschino
Luca Bagnaschino
09:21 06 Dec 17