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!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.