Five killer ways to use modular design

This article first appeared in issue 235 of .net magazine – the world's best-selling magazine for web designers and developers.

Approaching the design of a website by breaking it down into components is a clever way to tackle larger design issues, as well as accommodate functional limitations.

Most of us do this whether we are thinking about doing it strategically or not – for instance, if you’ve ever designed around a Facebook or Twitter widget because your client asked for it, you’ve been following this strategy. If you can embrace it in some scenarios, it can make the project run more smoothly and also improve the longevity of your design work. Modular design is not simply the use of design patterns, but you can incorporate them into your modular components. An example of a module you might want to use would be a horizontal tab-based navigation – the navigation block is the module and the tabular layout represents the pattern for the navigation design.

Quite a few larger websites will rely on this to create sections packed with functionality that would be suitable for reuse elsewhere. If you’re building responsive websites, or use wireframes as part of your design process, then thinking about your design in terms of components is likely to be something you already do. The key is creating blocks of interactions or copy that can be moved around and reused later, and assembling a page layout using them. It’s a simple idea, but if you harness it correctly it can be something that an entire team can work together very easily on.

Working in this way will enable you to solve design problems and reuse your solutions. Whether you are working as part of a large team or alone on a major website, this way of working can be invaluable if there are more design challenges to overcome than you have time to work on.

Five examples to check out

20 steps to the perfect website layout: check out Creative Bloq's pro tips!