Post Reply  Post Thread 
Modular Design
Author Message
vwdesigns
Administrator
*******


Posts: 84
Group: Administrators
Joined: Nov 2007
Status: Offline
Reputation: 0
Post: #1
Modular Design

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 our 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. We 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.

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.


Neil Handford
Virtual Web Designs
14-04-08 07:04 PM
Find all posts by this user Quote this message in a reply
Post Reply  Post Thread 

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites

Forum Jump: