Why embracing living style guides improves design & development consistency, efficiency and speed of production.
Throughout my career I’ve encountered design inconsistencies at varying degrees. It’s a concern that affects every organisation. Now whilst we can never eliminate inconsistencies altogether, we should try our best to develop tools to reduce as many as possible, without affecting design progression.
Back when I first began my design career, we utilised flat documents (PDF, Word) to document our design patterns… this worked for while. With the evolution of our industry and the demand to produce ever more complex products and services quickly, these guides no longer serve their purpose as our source of truth. In fact, with so many iterations floating around an organisation, they are part of the problem.
Step up the Living all Breathing Style Guide!
So, what are living style guides?
Simply put, these are a set of well defined guides that reside in a centralised live environment. They change with the demands of business and the evolution of design practices, and help define patterns and styles commonly used across responsive and mobile development projects, keeping designers, developers and the wider team synchronised.
By providing a single source of truth, living style guides enable faster and more efficient workflows across multiple business teams, helping streamline development, standardise interactions, and unify the visual design layer.
The benefits are many
Single source of truth – One centralised live document that is easily accessible to everyone within or working with the organisation. It can be easily updated to reflect the evolution of design patterns.
Addresses inconsistencies – Through design to development, across multiple project teams.
Increased speed of delivery – As the maturity of the pattern library grows, the speed of design and development increases exponentially. Code becomes reusable as do design patterns and interactions.
Reduction in errors during testing – Code that enters the library is tested across multiple browsers and devices reducing the risk of errors.
Synchronicity & Integration – Synchronising the living document to your live environment ensures updated patterns are reflected back to product and services seamlessly.
Faster brand refresh – As code is synchronised, changes can be easily applied without going through lengthy development cycles.
Im sold! where do we start!
Assess your current products and services to discover the inconsistencies in the style and design patterns. There are various ways to do this, but I personally find best results are achieved by printing and visually inspecting elements, then stripping them down to their raw form.
This process enables us to discover common design patterns used across the organisations digital space. Over time, a library of consolidated patterns, styles and components are defined forming the basis of a living breathing style guide.
Next, produce clean code! Development efficiency requires that all designs patterns, styles and components are accompanied with code. These should be available to copy and paste to all developers. The key drivers are to maximise code reuse, minimise customisation, remove development duplication.
Deciding on how to organise and present a living guide is as important as the content itself. It must be meaningful to both developers and designers. Likewise, it must be digestible and not overwhelming.
Utilising frameworks is a great starting point. They are pre-organised, customisable and their open source nature means that they are tested, cross browser compatible and responsive in nature. They are supported by developers worldwide with releases and fixes updated frequently.
Don’t forget!
Once created, its important to ensure it is maintained, executed and evolved over time. This is achievable by delegating clear ownership and accountability. Lack of ownership will render the guides useless.
Creative, User Experience & Technical leads are commonly accountable for keeping the document active. It’s a harmony between these areas that ensure consistency throughout the lifecycle of digital products.