The American web designer Brad Frost wrote a book about what he - and meanwhile many others - believe the design process should look like, the so-called atomic design. He, too, thinks that colleague Stephen Hay put it best when he said ‘We’re not designing pages, we’re designing systems of components’. Designs should be able to keep up with the rapidly changing digital landscape of Internet devices and content types without losing momentum. Anyone who missed the boat to the mobile approach a few years ago may now be in danger of going under. And the old design process has also gradually become obsolete. Agility, cooperation and adaptability are central nowadays, while the interfaces between design and development are getting bigger and bigger.
Frost's atomic design process looks more or less like this:
- The atoms: Atoms are the basic building blocks from which everything and everyone is made up. When you extend that line to web interfaces, it corresponds to the HTML tags such as form labels, inputs and buttons. It can also include more abstract elements such as colour palettes and fonts.
- The molecules: When you combine several atoms, you are dealing with molecules. Atoms stick together to form new building blocks with their own function. In web-language, this way you could merge the form label, input and button into a single form that is immediately usable in concrete terms.
- The organisms: Just like the atoms form a molecule together, the molecules in turn can build an organism together. In this way the different parts are eventually merged into one whole, like a web page. For example, a top bar can contain various components such as a logo, a search function and a list of social media channels, or different products are displayed one after the other to offer an assortment. Either way, you can turn small blocks into a larger whole.
- Templates: Once you have been able to build good organisms thanks to your atoms and molecules, you can choose to save this form as a template. In this way, you already have the right way of building, without having to fill in everything concretely. With these templates you also get a concrete view of the design of the web page, although of course a lot can change until the final design is on the table.
- The pages: The end point of the design process. Once all the building blocks have been clicked together and the templates have been completed, you will have a page in mind that users will also see. Now the tests can only really begin, as you already have a fairly true picture of what the final product will be.