Are you finding it slow to add new features to your application?
Are there eight different date pickers and 100+ shades of grey in your site?
Are you repeating several patterns of interaction?
Need to deliver a consistent experience across your site, and on different devices?
Building an application with an eye on sustainability?
You probably need a design system
Design systems
Websites are complex, living creatures that exist on screens of all sizes. They also have a habit of needing to grow new limbs quickly and adapt to changes.
To tame these creatures, we’ve been building design systems into both greenfield sites (like this one!) and established sites we’ve whipped into shape.
Design systems are a set of standards, documentation and components built to give a consistent user experience and visual language across a website.
A robust and thorough style guide gives context and explanation to brand colours, typography sizing and site-wide spacing standards. These provide core principles for the creation of not just components, but the content of a site.
A component library is a set of reusable Lego-like bricks and pieces - for example, a button or a date picker. Each component has clear documentation about its use, standards and variations.
These components are assembled into patterns, the bigger chunks of the application, such as a navigation menu, which can be used once or many times throughout a site.
Here’s an example of the design system in action on our site, with styles feeding into a component, which becomes part of a template. Lovely stuff.
Taming an existing application
All applications have a habit of accumulating legacy code over time. The first step in establishing a design system for an existing site is to audit what’s already there. When Hubspot did this, for example, they found lots of unnecessary repetition and variation on their platform, like the above 100+ shades of grey, and six different ‘primary’ buttons... not ideal for a primary button!
All components and styles are then reviewed, refactored and standardised, starting with more general styles like colours and working up to pattern layouts and pages. Sure, it requires an upfront investment, but doing it well can save time and effort (and therefore money) when you’re called upon to deliver new features at pace and with a consistent user experience across multiple screen sizes.
A single source of truth
In the past, we’ve seen design systems built with the best of intentions but, for various reasons, have fallen behind the live site.
As part of our development process we use Django Pattern Library to construct a design system, which uses the exact code used in the website. This gives every component and design choice a single source of truth and requires minimal code to reuse elsewhere in the project.
In summary
Design systems offer consistency, facilitate rapid growth, and make designing an application more efficient. This means they can also reduce costs in the long run.
They can be implemented in an existing project or built into a brand new site with equal benefit.
If this sounds like something your website or application could be in need of, we’d love to hear from you.