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

    Bekijk onze laatste case

    Onze klanten beoordelen Whello met een:

    4.8 / 5

    Onze blije klanten aan het woord

    Positief: Professionaliteit, Responsiviteit Het was een absoluut genoegen om met het Whello-team te werken! Ze hebben de verschillende fasen doorlopen, van branding en conceptontwerp tot de lancering van een geweldige nieuwe website! Het was leuk om met zulke professionals te werken. De Whello's zijn stuk voor stuk professionals binnen hun eigen vakgebied, vriendelijk en flexibel en er wordt kwalitatief hoogstaand werk verricht binnen het afgesproken tijdsbestek.

    Daniel - Keesing Technologies

    Whello is een prettig bedrijf om mee samen te werken. Bij Arend Auto ben ik verantwoordelijk voor de marketing en besteed veel online marketing uit bij Whello. Serge en Nasser zijn vakbekwaam en recht door zee. Ze voeren niet alleen uit maar komen ook zelf met adviezen en ideeën om meer resultaat te halen uit onze online campagnes.

    Ruud Weekers - Arend Auto

    Het fijne van Whello t.o.v. veel andere partijen is dat ze met je meedenken en zelf met goede suggesties komen. Ze zijn persoonlijk en hebben alle verschillende expertises in huis zodat iedereen doet waar hij/zij goed in is. Houd deadlines goed in de gaten maar twijfel niet om met ze in zee te gaan, het resultaat is top!

    Robin - Antenna Groep

    Sinds wij samenwerken met Whello, hebben wij een enorme groei doorgemaakt. De medewerkers van Whello weten als geen ander marketingbureau hoe je 'de expat' moet benaderen. Ze werken persoonlijk, enthousiast en effectief. Ik beveel ze van harte aan!

    Koen Gijzel - Koentact

    Whello staat altijd open voor nieuwe inzichten en ze denken graag mee over hoe we samen tot het juiste resultaat kunnen komen.

    Rosa - OCEANDIVA Unique Event Locations

    Positief: Kwaliteit, Professionaliteit, Responsiviteit Geweldige en goed meedenkende marketing partij die voorziet in alle facetten van de online marketing. Absolute aanrader.

    Sander Kok - Vicky

    Bedankt voor de fijne samenwerking Whello! Door het betrokken team zijn we nóg enthousiaster over onze dienst dan dat we al waren, dat wil wat zeggen!

    Hakima El Allaoui - Staxi Taxi

    Wij werken nu al zeker 2 jaar met Whello samen op het gebied van onze online marketing. De samenwerking is zo fijn omdat we snel kunnen schakelen met elkaar en er echt wordt meegedacht in het verbeteren van onze zichtbaarheid en het verhogen van het aantal leads. Experts die de juiste snaar weten te raken, keer op keer.

    Mirco Pruyser - BP College

    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.

    Daniela Fantaziu - Top Employers Institute