Component-based design: what it is and how to do it
As the web evolves and gains complexity, so our approach to designing websites needs to become more sophisticated.
7 October 2016
The design world has long had the concept of design systems. They can be as simple as a one page style guide, all the way up to a corporate brand manual running to hundreds of pages. Either way, they set out how colours, fonts, images and other graphic elements should be used to create consistent designs across a range of applications.
These guides are vital for websites too – they ensure the site fits into the wider brand and can help maintain consistency within the site itself, especially if different sections have been developed at different times by different people.
However, there is a need for a deeper design system, which a normal style guide often does not adequately cover.
In a ‘typical’ web design process, the designer creates a few different page layouts in Photoshop, for example a homepage, landing pages, listings and content pages. The developers then take these designs and build a set of templates into which content can be put. If new sections or big changes to existing ones are needed new templates need to be designed and developed, and often it may well be simpler to start again with a new site.
When sites were fairly simple, and were really only viewed on desktop computers this was fine. Now however, they have to work on everything from a smartwatch up to a 5k display and integrate with a wide range of external services. Additionally, the amount of time and resources it takes to build a complex site means it’s no longer feasible to start again every few years. It should be simple to add new sections or amend existing ones, and the site should work well across all display devices.
Rather than thinking of a website as a collection of pages, we should think of them as a collection of components combined in various ways to create pages.
This is our deeper design system. What are the elements we need to build every part of the site? What are the rules for combining them?
This isn’t a new idea. The concept of modular, or component-based design has been around for a while – most recently popularised by Brad Frost as ‘Atomic’ design. In this, ‘elements’, like headings, images and fields are combined into ‘molecules’. A molecule could be a post teaser, call to action block, header etc., which are then grouped to become ‘organisms’, or page templates.
The benefits of component design
Enforces consistency – by designing a set of components, and building page layouts from them it’s much more likely that the designs will be consistent.
Quicker to add new designs – when new pages or sections are needed, it’s quicker to create a few new components than it is to design an entirely new page.
How to componentize your design
Break your pages into logical components
Look at your designs. What elements are used across multiple pages? What are unique? Break the pages into pieces and put them all on a separate page. You might find it helpful to print out your page designs, cut them up into the components and arrange them on the wall.
These elements could be headers, footers, carousels, buttons, content displays, call to action blocks, listings etc.
Bring in the auditors
Now that all of the components used across the site are in one place, look for duplication and variation. Do you need all those different button styles? Is it necessary to have two different types of carousel? If so, great. If not, decide what you want to keep and get rid of the rest.
Is there anything missing? Are there other components you’ll need to complete the designs?
How will these components look at different breakpoints? It may be necessary to create a few different versions of each component to show how they work at various screen sizes.
Page layouts: assemble
Now, using your list of components, try to put together all the different page templates you need. If you’ve already printed and cut out your components, use those.
Rinse and repeat
As you put together the templates, you may find you need to go back and make amends to some of the components, or add new ones. That’s fine – it’ll take a few rounds to get everything in place and make sure the components all work well with each other.