Tegenwoordig is een goede consistente gebruikerservaring op alle apparaten een must. Alle digitale producten zijn nu een stuk complexer dan een paar jaar geleden en om hier eenheid en structuur in te brengen gebruiken wij Atomic design in ons proces. Dit is een verhaal waarom.

De bedenker

In 2014 introducerende Brad Frost het concept van Atomic design. Geïnspireerd in zijn scheikundelessen op de middelbare school kwam hij op het idee om zijn designs op te delen in atomen, moleculen en organismen. Als een design ook op deze manier zou worden opgebouwd kan elk complex ontwerp gereduceerd worden tot de kleinste componen: de atomen.

Hoe werkt het?

Atomen zijn de fundamentele onderdelen van een design systeem. Kleuren, typografie, maar ook knoppen, het invoerveld, labels, selectievakjes en paragrafen zijn voorbeelden hiervan. Afzonderlijk zijn de atomen niet zo bruikbaar, maar kunnen beter gezien worden als de bouwstenen die de UI’s omvatten. Door op te knippen wordt in een bibliotheek direct zichtbaar of de atomen wat betreft stijl op elkaar aansluiten.

Maar een label, invoerveld en knop stellen op zichzelf nog niet zoveel voor, maar door de atomen te combineren krijgt het een waardevolle betekenis. Zo vormen waterstofatomen en zuurstofatomen samen bijvoorbeeld watermoleculen. Doordat de unieke eigenschappen van atomen worden gecombineerd, zijn moleculen tastbaarder en operationeler. Door kleinere componenten samen te laten komen worden ze ineens herkenbaar in het zoekveld. Nu komen we bij de complexere sectie van het design systeem, namelijk de organismen. Het zijn assemblages van moleculen die samen in een bredere context kunnen worden gezet. Het organisme ‘header’ kan bestaan uit de componenten logo, navigatie en zoekformulier en kan zo makkelijker op meerdere plaatsen worden hergebruikt.

De volgende stap in de ontwikkeling van een Atomic design zijn de templates. Deze bestaan uit gegroepeerde organismen die gezamenlijk een pagina beginnen te vormen. Deze organismen worden op paginaniveau in een lay-out geplaatst om zo de onderliggende inhoudsstructuur van het ontwerp verwoorden. In essentie zijn dit dus de wireframes, de blauwdruk van een digitaal product.

Het hoogste niveau in dit ontwikkelingsproces is de uiteindelijke pagina. Dit is als een template, maar dan gevuld met representatieve content. Zo kan de pagina met verschillende soorten content worden getest. Wat als de inhoud twee keer langer is dan gebruikelijk? Wat doet dit met het design?

Atomic design wordt steeds populairder in de digitale wereld en deze denkwijze zal niet snel verdwijnen als het aan de designers ligt. In plaats van het complete eindresultaat te visualiseren, laat Brad Frost met een scheikundige vergelijking zien wat de precieze ‘ingrediënten’ zijn van het totale product. Deze ondervinding laat een verschuiving zien in het perspectief van website-ontwerp gericht op statistische pagina templates, naar een dynamisch systeem van aanpasbare componenten.

Deze benadering maakt het mogelijk om complexe UI’s concreet en gestructureerder te maken vanaf het begin. Hierdoor is het makkelijker overzicht te houden en in de toekomst doorontwikkelingen van digitale producten consistent te houden. Dit zorgt ervoor dat de tijd van doorontwikkelingen ook een stuk korter is omdat designers met een bestaand systeem werken.

Maar uiteindelijk is een digitaal product bedoeld voor de eindgebruiker. Atomic design is gebruiksvriendelijk doordat bepaalde patronen, knoppen en lay-outs van de digitale producten bekend zijn voor gebruikers, wat de navigatie en interactie met de UI’s sneller en makkelijker te leren maakt.

Today, a good user experience on all devices is a must. All digital products are a lot more complex than they were a few years ago and to bring unity and structure to this, we use Atomic design in our process. This is a story about why.

The inventor

In 2014 Brad Frost introduced the concept of Atomic design. Inspired by his highschool chemistry classes, he came up with the idea of dividing his designs into atoms, molecules and organisms. If a digital design were also constructed this way, any complex design could be reduced to the smallest components: the atoms.

How does it work?

Atoms are the fundamental parts of a design system. Colours, typography, but also buttons, the input field, labels, check boxes and paragraphs are examples of this. Individually, the atoms aren’t as useful, but can be seen as the building blocks that comprise the UI’s. By slicing it becomes immediately visible in a library whether the atoms fit together in style.

But a label, input field and buttons do not amount to much by themselves, but combining the atoms gives it a valuable meaning. For example, hydrogen atoms and oxygen atoms together form water molecules. By combining the unique properties of atoms, molecules are more tangible and operational. By bringing smaller components together, they suddenly become recognizable in things like the search field. Now we’ve come to the more complex section of the design system, namely the organisms. They are assemblies of molecules that can be put together in a broader context. The ‘header’ organism can consist of the logo, navigation and search form and can thus be reused more easily in several places.

The next step in the development of an Atomic design are the templates. These consist of grouped organisms that collectively begin to form a page. These organisms are placed in a layout at the page level to articulate the underlying content structure of the design. In essence, these are the wireframes: the blueprint of a digital product.

The highest level in this development process is the final page. This is like a template, but then filled with representative content. This allows the page to be tested with different types of content. What if the content is twice as long as usual? What does this do to the design?

Atomic Design is becoming more and more popular in the digital world and this way of creative thinking is not going to disappear anytime soon if it is up to the designers. Instead of visualising the complete end result, Brad Frost uses a chemical equation to show the precise ‘ingredients’ of the total product. This experience shows a shift in the perspective of website design from statistical page templates to a dynamic system of customizable components.

This approach makes it possible to make complex UIs concrete and structured from scratch. This makes it easier to keep an overview and to keep future developments of digital products consistent. The time spent on further developments will definitely be a lot shorter because designers work with an existing system.

But ultimately a digital product is intended to be experienced by the end user. Atomic design is user-friendly because certain patterns, buttons and layouts of the digital products are known to users, which makes navigation and interaction with the UIs faster and easier to learn.

Atomic Design: the building blocks of digital design

002

START READING

De bedenker

Hoe werkt het?

The inventor

How does it work?

But wait...

So...

Need a website?