A Style Guide is a collection of design decisions made during the design process. These decisions focus on graphic styles and the design language that will be used as reference and guidance for areas such as fonts, branding etc.
What are Design Systems?
Design Systems have a much greater breadth and depth than style guides. Many Design Systems provide definitions of the visual language or pattern library which details atoms, molecules and organisms based on atomic design principles.
Some Design Systems focus on defining implementation methods and usable tools such as design library files containing reusable components. Others centre around brand guidance such as voice, tone and principles as well as a definition of the design language.
However, in its most complete and mature form, a Design System encapsulates all these elements. For members of any digital team, a Design System is a living framework that continually grows in maturity.
Design Systems represents a single source of truth needed to complete a project.
Design Systems and digital teams
An architected Design System has four key benefits for digital teams:
- Consistency
- Scalability
- Design debt
- Collaboration
Consistency
Consistency is a key area where Design Systems can support the delivery of products. Design Systems identify and categorise visual elements and components alongside their behaviour and usage.
This allows our Sitecore project teams to reference and reuse already established elements and components for Sitecore projects. This reduces the risk of new solutions being created leading to inconsistencies and an incoherent experience.
Why is this important? Users perceive the quality and experience of digital touchpoints as a direct representation of a brand’s product, and/or service. Design inconsistencies, therefore, may give the perception of unprofessionalism, which could lead to a negative brand image.
Scalability
Design influences the experience we have when we interact with digital touchpoints. Because of this, It has never been more important to have a design that scales. Since a Design System is not simply a single deliverable but a living component, it is aimed at facilitating the creation of new products. Using various methodologies such as atomic design creates the building blocks for the complexities of products and their touchpoints.
Design debt
From the perspective of the design process, design debt is where key steps in the formation of creative solutions are bypassed in order to achieve short-term results. With new elements and features designed into an already established visual design, introducing new elements causes disruption of the relationships the elements have with one another in the original visual design.
Diagram 1: Elements designed within the context of one another
Diagram 2: Disruption caused by the introduction of a new element
Disruption incurs design debt which accrues interest as more features are added, leading to a large and costly refactoring of the interface, or in some cases, abandonment. This typically occurs as the lifespan of the teams or team members involved may not last for the same duration of the visual design, with teams introduced for particular features sets.
A robust Design System allows new teams to work at velocity without the need for bypassing critical steps as already established rules, usage and best practices are in place. In some instances, tools or kits will also be available to them. This will reduce the interest of time spent in order to correct rushed solutions, allowing more time to create superior user experiences that strengthen the brand.
Collaboration
It’s easy to assume that a Design System solely relies on a designer to establish it. But the creation and management of Design Systems foster collaboration from many disciplines within a project team; from developers and product owners to business analysts and content teams.
This collaboration removes the ‘over the fence’ approach, as a Design System, while ultimately designed for a user, is there to serve digital teams. With various disciplines involved in order to create digital products, a strong Design System ensures teams are using a shared cohesive language to create faster and better digital products.
At Codehouse we've worked with many customers spanning a variety of industries. We use best practice design principles to deliver exciting and engaging Sitecore digital products that achieve measurable results.
