/Opinion/ Make it modular
29/09/2008 | Filed under Discover > Opinion
Minimalism and modular design can provide inspiration for modern web development, says Jina Bolton
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”.
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 customisation 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 in 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 centre 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.
Jina Bolton is a designer, artist, developer, speaker and co-author of The Art and Science of CSS. She works and resides in Silicon Valley, and is currently learning Italian.
Bookmark with:
Comments
keith / 05/10/2008 / 18:10 / http://www.keeftronics.org
Great article Jina. Is it possible you could add some links to the news and commercial sites that you reference?
Jess / 14/10/2008 / 03:25 / http://www.jessebrack.com
Great article, this is a practice that I'm currently trying to implement in my future designs.
@keith - http://www.timesonline.co.uk/tol/news/ is a news site referenced and used as an example in the http://www.netmag.co.uk/zine/develop-css/coding-flexible-layouts article that covers modular design.
geet / 05/01/2009 / 15:38
well Jina ur article on modular design i read here is the very same as i read on another site..
could it be that your article has been used with some one else claiming it to be his own
i could provide d url for the other site which is
http://www.vwdesigns.co.uk/forum/modular-design-t-82.html
