A Modular Web Design Process

A 3 step modular web design process for a scalable build.

There are many philosophies on how to approach a modular web design process. Brad Frost explains his philosophy through through Atomic Web Design. Atomic Web Design begins with the smallest elements, like a form input field, and builds upon those so that we are able to create our User Interface (UI). For a visual representation of modular design, I find that  explains it best by using legos. Starting with a simple lego, each peg and the space around it represents a web element and its content. Each web element, or the space around the peg, is consistent with eachother. No matter how many pegs are on the lego, the spacing between them is the same. These sort of philosophies at the core of my modular web design process.

The 3 steps to the process are as follows:

  1. Sitemap and Content Inventory
  2. Design Inventory
  3. Design & Development

1. Sitemap and Content Inventory

This should be the first step to your process. Why? Because it will help figure out what pages are ultimately needed. It will also build a logical structure to base all future site additions. Slick plan is good tool that I have used in the past. It has helped create a site maps easily, and I was able to create and edit to what my client wanted without too much fuss. Currently, I am building sitemaps with HTML and CSS in Sublime Text. I started using this program because it allows me to start structuring my HTML before I begin the design process.

Ex: The sitemap is then output like this(in HTML):
Website site map for the modular web design process

2. Design Inventory

The design inventory is created in lieu of wireframes. I used to spend time laying out simple layouts in wireframes, but I found that I got the same results by listing all content in a spreadsheet. Also, I feel wireframes do not represent the modules the same as the design inventory. The design inventory lists out the items as a spreadsheet, displaying the modules in priority on each template. Please notice in the provided spreadsheet there are two tabs:

  1. The Modules Tab – In the document below, the module tab lists all of the features, like a header with the navigation, to a page that will live on the site. In atomic design, I equate these to molecules and organisms of a site. Some are more complex than others, but ultimately these are the building blocks to your website. From these modules you will be able to form your templates as you need to in the second tab.
  2. The Templates Tab – The templates tab is the part of a document that will list all of the templates the site can utilize. For example, you come to me requesting an ecommerce website. We would create one template that would work for each individual product. Within that template we would list out the modules from the previous tab that would facilitate the content needed.

As we fill this document out, it effectively becomes our mobile wireframe. It lists everything from top to bottom in priority. The next would be to take this document to Development and Design to build out the rest of your site.

3. Design and Development

Personally, I believe that these two processes go hand in hand. It is very rare that I design every single page or template from a site in full because we already defined all of our modules. It defeats the purpose of the previous steps and waste valuable time to create static pages since the modules are created. Also, at this point I do provide a beautiful desktop size print out for the client, so they are able to have a complete visual aid of their website.  Once you have all of the modules designed you can start diving into the HTML and CSS.

The modular web design process is easier for a hybrid designer/developer, so if you are designer working with a developer or vice versa, then it is advisable to collaborate every step of the way. This way the developer can start assembling the HTML markup based off of the design inventory before ever seeing a mock up.