Component Based Designs

Back in the land of digital, component-based design has become popular and upfront these days - often as much an aesthetic choice as it is an underlying construction strategy. Witness the modern classic that is the ‘card’ component - employed across a wide variety of digital apps.

Like with non-digital design, the potential benefits are attractive: creating efficient reusable parts (build once, deploy many); improving flexibility (no rigid page templates). A component-based approach also helps establish repeatable and recognisable patterns of UI.

Here at Gecko, we find this kind of design and build philosophy is great when married with a CMS like Umbraco. We have established our own core framework of components, but continually evolve and adapt them to work for each individual client project. Our aim is to make the CMS as easy as possible, with the minimum of different components and options.

So, how do you go about thinking and designing in components rather than pages? And what exactly is a component?

There are a couple of great reference points. Firstly the Atomic Design methodology as explained by Brad Frost.

This uses basic chemistry to describe the hierarchy of component-based design. At the base level, you have atoms - ‘the basic building blocks’. Atoms then can be brought together to become molecules, these can subsequently be combined to form organisms. They break from the chemistry analogy at this stage though to describe the uppermost layers of the design development (templates and pages).

I also like this clear explanation offered by Netherlands design studio Heavyweight.

As with Atomic Design, this walks through a process that encourages the development of a design system, rather than launching into the design of individual pages.

At the base level of this system are the core elements that inform everything above them, e.g typefaces, colour palettes. From there you get into basic reusable elements (buttons, form inputs, headings etc). It’s when you start to combine elements that you get into more interesting and recognisable components.

This ‘built from the ground up’ approach really helps to introduce consistency, so that separate components and the elements within components all live harmoniously side by side.

Coming back to how we build websites at Gecko, a key philosophy for us is to design flexibility into the system. Our starting point is to understand the tasks, pains and gains of potential users. From there we can consider what range of components (or widgets as we tend to call them) we actually need. Thinking about how these components will then be used (and re-used) across a website, we build in flexible options that extend their possibilities.

Of course, while working with components does provide tremendous flexibility it does not defer the need for a plan. Not every component will fit in every place and throwing a bunch of random components together won’t guarantee engagement. Effective web pages and web sites still need some form of hierarchy and a good communication strategy.

- Mark