TL;DR
The benefits of designing & developing with components in mind. Want to know how to get started with a componentised design system? Read on.
So what is Component based design? This approach is not new or uncommon, but seems to be surrounded with an air of confusion. You might have come across some of the following jargon around this topic:
- A Pattern Library
- A Design System
- A Living Style Guide
- A Design Philosophy
- Atomic Design
To some this sounds like something a scientist might do or a way to get a rocket into space, but as with most seemingly complex things it all boils down to something really simple which I’ll aim to demystify with this post.
Component based design does what it says on the tin. Rather than treating the design of a product like an Impressionist painting, full of flair and spontaneous brush strokes, we can think about it like deciding on the ingredients to make a really tasty meal. The ingredients themselves can be simple, but combine them in the right way and we can create something delightful. You also can re-use those same ingredients to create something different.
1. Design just enough
Designing every page of an app up front and sending it over to a developer can be problematic. Ideally designers & developers should collaborate to define the elements that make up their application.
A move away from large scale re-designs is key. Gradually building up a library of elements as you go means you won't need to define more than you need, this will keep your design documents and eventually your code clean, tidy and therefore much easier to manage changes.
Typography
Once you know which fonts to use (2 is usually enough) you can start coming up with some size variations (otherwise known as a type hierarchy) this helps to balance things out on the page.
Colour
A basic colour palette, which might be reflective of your brand. When colour is applied to functional elements accessibility and usability are first and foremost.
Spacing
If you define this up front, then it's easier to keep the arrangement of elements consistent.
2. Define once and reuse
A component can be something as simple as a form label, an icon or a button. If it will be used more than once in your project, then it is a component. These simple components can be arranged together to make up more sophisticated components. So a label, an input and an edit icon for example.
Everytime you approach a design challenge, ask the question ‘Do I really need something new?’ You might have an existing component you can re-use. It’s like do you really need to pick up a plastic fork, or can you wash an existing fork from the dishwasher?
3. Lean wireframing
Once you have a robust enough library set up, you can start to adopt a really 'Lean' (Maximise value, minimise waste) approach to working. Not only will our Sketch library have reusable components for quick prototyping, but in theory a simple hand drawn sketch referring to a particular component can be enough for a developer to pull it from their library and add it to the project or page.
Aim to define some page layout principles, so that both designers and developers become familiar with how things relate to each other. As with anything; communication and collaboration is key to keep everyone on the same wavelength when building your product.
4. Design in the browser
Once we have designed components and built them, we may still want to tweak our designs in future. There is no need for time consuming rework in Sketch, a designer can pair with developers to make minor changes and use the code as the single source of truth.
So what made us start talking about component based design at OVO?
There's been a whole lot of talk about using React & React Native, the shiny new framework, that people can't wait to get their hands on. The great thing is it lends itself perfectly to component based design. Whilst we re-factor some of our products in React, we may aswell take a fresh look at our design approach too.
So whether you're a designer or developer who felt daunted by the prospect, or never had the chance to try this approach, hopefully this post will be enough to get started.
Want to find out more? Just ask.