Five killer ways to use modular design

Five killer ways to use modular design

Thursday 16th May 2013

Breaking website design into chunks will help your current project and enable you to reuse work in the future, says Gene Crawford.

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

1. ESPN
The sports news website for ESPN is the quintessential 'portal' that utilises modular design blocks.
Visit website

2. eBay
The online auction website eBay uses a modular design so it can scale its expansive content visually and keep a lot of things looking similar so users won't get lost.
Visit website

3. Greenbelt
The website for the Greenbelt conference is responsive and also broken into modules or blocks of interactions and content. Thinking this way can help you move content sections around more easily for a responsive website design.
Visit website

4. Go Ireland
The hotel reservation website Go Ireland is boldly modular. It has large, clearly defined components that act differently based on different interaction groupings. It's also responsive.
Visit website

5. Boston Globe
The website of the Boston Globe is a great example of modular design, as are most newspaper sites in general. It is one of the most notable responsive newspaper website redesigns so far.
Visit website

by Gene Crawford, crawfishstudios.com

Back to blog