Pages and templates are dead. Long live modules.
Web design is a craft in constant evolution. Things are moving fast and the paradigms that were true yesterday are now outdated. You want us to design specific pages of your next website? This is a bad idea. You want us to design a template that you can re-use for many pages across your next website? This is a bad idea.
A short history of website creation
The creativity days
Let’s go back and have a short look at how the idea of designing websites changed. When we started building websites, we were in this new free and exciting world where everything seemed possible. This meant that we designed unique pages. In a website of many pages, each one had its one structure and rhythm. It was great! We had rhythm, we had creativity. The problem with this period was, that it was extremely time consuming to build such websites. But you, the clients, had to deal with the real nightmare. The page structure that you had would block you. Needed to add a page? Come back to your web professional and he had to build a new page from scratch. Of course an exciting new page, but it was costly and time-consuming.
The systematic days
Things evaluated then. The first Content Management Systems arrived, and templates spread out like powder. Instead of building unique pages, web professionals built templates. You had a template for long text pages. You had a template for pages with less text and maybe more images. The idea is that you could create as many pages by yourself as you wished. But you were stuck with one of the templates your web expert created for you. This is a period of high efficiency. Things go fast. You can add and remove content from your website faster. It’s the time of blogs and of the idea that websites aren’t fixed but dynamic. In terms of efficiency, we were at the apotheosis. To arrive at this efficiency we had to sacrifice storytelling and rhythm. In a way your website was boring. It all looked the same. Of course, it was quick to create content, but you were forced in a certain canvas.
The creative systematic days
Technologies continue to evolve. The new version of the languages used to design websites become more flexible. The thinking about the web also evolves. Some smart programmers start to come with new mental models on how we can develop websites. In 2013 one of these smart guys is Brad Frost. He formulates an idea called Atomic Design.
Instead of starting by creating templates, Frost proposes to start with the smallest element, the atom: An atom is a color, a typeface, a button.
By putting together atoms, you get molecules. This is maybe the search input in the header of your website. Then if you put several molecules together you get organisms. Now you have for example your logo molecule with your menu molecule and your search bar molecule which create together your header.
The thinking continues like that. In a way, the approach of Atomic Design is like chemistry.
At Enigma, we love to try out new methods. So we played with this idea developed by Brad Frost. At the same time our partners at Stimul, who help us with coding projects, showed us how they were implementing a similar idea. They did this in the admin panels of Content Management Systems like WordPress or Drupal.
That was four years ago. And after many projects using this newly adapted method, we can say it with pride. Templates are dead, pages are dead, long live modules.
Meet the modules
“We’re not designing pages, we’re designing systems of components.“ — Stephen Hay
At Enigma, we explain these complex thinkings in a simpler way. We love to talk about modular web design. We take the essence of the learnings from that history. Instead of relying on templates we rely on what we call modules. Modules are building blocks like legos. With a certain number of modules, you can build whatever you want on your website. It’s exactly like lego. You have a certain number of bricks and elements and you can build a house, a fort or even some really crazy things.
A module is a portion of a website that you can re-use and place wherever you want. Do you need to place three columns of text? That’s a module. Do you need to place a photo gallery? That’s a module. You need to place a big intro picture with a title? That’s a module. By placing these three modules together you just created a gallery page.
Modules are future ready
Our clients love to use modules because it makes their websites futureproof. Imagine, one year after the launch of your website you want to create a contest page. What would happen if you had a website based on templates? You would have to ask your agency to build a new template for contests. This would cost a lot, take time and energy.
Now imagine, you are in the same situation but you have modules. You can create a new page. Then you add a title module, a text module for the explanation and a form module for people to join the contest. Done.
A modular approach to web design makes you less dependent on your partners. It lets you fulfill future needs without a new budget.
Modules help evolve your website
Technology changes fast and new possibilities arrive each year. With a module system, it is possible to make your website evolve in a simple way. You want to integrate a new technology? You just need to create a new module. You can now use that fancy new technology on any page of your website. And you still have the power of your “legacy” modules and you don’t need to do a complete redesign of your website.
Modules create a common language
In terms of communication and design language, modules are also a powerful tool. Modules are building blocks. They let you create an infinite number of different pages. But because you use the same modules, all these pages will have the same visual language. For your website’s visitors, you can create rich web pages. They have dynamic layouts but still are in the same visual language.
This common visual language helps website visitors to better understand your content. Because once they have seen a module, and know what they can interact with it, this will be true for the whole website.
Modules are the legos of our website
With a modular approach, inspired by Atomic Design, we create websites that are much simpler to build, maintain and evolve.
Because you are not forced by a template thinking you can build easily whatever you need. It is like playing with legos. You have a certain number of play elements and you can build whatever you want. The only limit is your creativity.
Examples of modular websites
How do such websites look like? Here is a selection of websites that use this modular approach that we created in the last years.
Merantix
Salvation Army website
Ragusa
