Make it Modular

Make it Modular

January 12, 2019

This article originally appeared in the May 2008 issue of net Magazine (then called .net Magazine, and was also sold as Practical Web Design magazine). Since CreativeBloq took many of the articles offline, I decided to republish it here.

Note: I do not use “production designer” any longer to describe the work I do, and I use descendent selectors sparingly these days. However, the overall sentiment of applying modular design concepts to web development is still something I believe in, so I wanted to share!

Also, I changed my last name references to reflect what I prefer to go by now, though you can see my legal last name in the photo.

Finally, I changed some British English spellings to American English. 🙃

Tagline from the editor:

Minimalism and modular design can provide inspiration for modern web development, says Jina [Anne].

Some people look at web development as engineering. Personally, I like to see it as web “production design”. In film, a production designer brings the script alive, using a strong sense of space, time, mood, and texture. In graphic design, the production designer takes an idea to execution, by creating prototypes and determining techniques and materials. In both scenarios, there’s one underlying goal: bringing a concept to life. A web production designer would be the person who takes the designs and turns them into interactive reality.

I enjoy thinking of my work as design and I like to look to certain design themes to improve it. There are two themes I’m a fan of when it comes to design: minimalism and modular design. Each includes aspects of great-looking design that I find attractive, practical, and useful. If you’re applying both concepts to development, your markup and CSS can be effective and maintainable. I like to think of this markup and CSS as “well-designed”.

“Modular design and minimalism help to make work more manageable and efficient.”

Minimalism is an ongoing trend in design, and in web production design, we strive to simplify. In an ideal world, every site would use the most minimal, yet meaningful, semantic markup available. In the real world, however, some sites require an additional, practical approach. If you’re developing for a dynamic, large-scale enterprise site, you can potentially be more efficient when you consider the advantages of modular design.

Designed for life

Modular design involves breaking an object down into smaller parts, or modules, which can be developed individually and are often used to perform different functions outside the object as a whole. It’s a theme you’ll find in many architecture, interior design and industrial design publications. The term is usually applied to tangible objects that are created to offer customization in a “plug-and-play” or “mix-and-match” manner. The goal is to offer more usability and reusability, and to save materials and money.

In furniture, a sectional sofa is a great example of modular design. Pieces of furniture fit together to create a large seating area. These pieces can be moved in different configurations to create a layout for seating or, alternatively, can be separated to become stand-alone pieces. These pieces can even go into different locations, so the couch can be in the living room and the ottoman in another part of the house. This enables the individual to use the pieces the way that’s most beneficial to them: if their needs change, they can reposition them to suit that change.

So how does this relate to web development? Take a news site, for example. A list of top-rated stories may appear on the homepage, big and bold, in a center column. That same list of stories may also be visible in a search results or archives page in a right-hand side column, where they appear smaller and more subtle. The markup for these stories could be an unordered list of linked story titles. We can use the same markup for both lists and then, by using descendant selectors, we can give each list its unique styling depending on where it lands on a page (or even depending on which page it lands on).

Another example is a commercial site, where this type of design can be useful for products that appear throughout the site. Whether the product appears in a “new products” section, a search results page, or a “related products” section, the markup for that product can be the same.

When I’m inspired by modular design and minimalism, and I apply these concepts to web production design, I find it can help to make work more manageable and efficient. Pieces of the site are reusable, which can save time on development. Simplifying the markup and CSS, where possible, also makes development maintainable and easier to edit over time. In the end, not only can we have a well-designed site, but the way in which it was built can be well-designed, too.