Creating a high-quality and consistent experience for end users can be a challenge. However, there is a way of addressing this issue. Many large corporations with strong digital brands such as AirBnB, Apple, and Mailchimp have developed and deployed a design language system (DLS) to help efficiently and consistently create strong brand identities.
But what is a DLS? How do you build one? And what components make it up? In this article you will find a comprehensive overview of design language systems: what they are, how they differ from style guides, the benefits they bring, how they are developed, and examples of excellent DLSs.
Read along to find out more about the inner workings and the benefits they bring.
A design language system (DLS) is a set of tools and components with accompanying rules and guidelines.
A DLS acts as a single source of truth assisting in creating cohesion and consistency across a digital ecosystem and brand. It can be seen as the foundational base upon which teams build user interfaces. Having a DLS reduces the complexity of developing a visual language by having the system and documentation behind it. This enhances brand identity and helps both efficiency and consistency. Some of the things included within a DLS are a pattern library, style guide, naming conventions, documentation, visual language system, and tokens. We’ll unpack some of these terms later in this piece. But first…
It is not uncommon to see style guides, design systems, and design language systems used interchangeably. Experts offer differing opinions on the definitions and the exact elements that make up each of them. While all three are related to each other and contain similar properties, they are not the same. Let’s start by defining each of these terms.
Consistency and quality
A DLS provides a consistent and cohesive brand experience for users. This is largely thanks to a DLS giving multiple users access to a single source of information. Developers and designers then have an agreed upon path to creation and design. Large and complex digital ecosystems can be scaled whilst remaining consistent despite a multitude of contributors. Through reusing the same components, text and styles, dependable high quality design can be maintained across digital platforms.
Brand identity and authenticity
Brand identity includes the visible elements of a brand, such as the color, typography, or icons that identify and distinguish a brand in consumers’ minds. Having a DLS enables all the components and tools that create a brand identity to live in a single repository. As mentioned, this allows for consistency but also delivers the foundations of an authentic brand experience for consumers.
Efficiency and cost
The initial collaetion and build of a DLS takes time and consideration. Once completed however, the efficiency and cost benefits, over the longer term, provide enormous value. With developers able to access one component library with all the tools at their disposal, faster development speed is achieved. Building components from scratch can be time consuming and costly, not to mention the inevitable inconsistencies in UI that emerge. Setting clear rules with a design language provides designers with guard rails to streamline their work.
Conducting a UI audit across your digital ecosystem will help you identify the current components and branding. But more importantly it will identify any inconsistencies in design. The audit can be as simple as taking screenshots and comparing components.
Another benefit of a UI audit is that it breaks down the ecosystem to its finer details and components assisting with documentation and the building of a style guide and subsequent design language.
The design language is a vital step in building a design language system. A design language helps define the components, their meanings and the role they play in the digital ecosystem. Having these definitions allows for clear rules to inform design and construction. A design language should carefully consider the role each of the following design elements:
We have already established what a style guide is and the position it has within a DLS, but it is important to note the foundational base it provides. Within a style guide sit elements such as typography, colours, icons, grid layouts, information architecture, and how each should look and feel.
A pattern library helps establish the building blocks of a DLS by categorising and grouping the different elements. In effect it is a library that details the elements and rules with which they must abide. These rules are informed by the style guide.
Documentation is important in creating a ‘one stop shop’ for every piece of information related to the system. Capturing what each component is and when to use it improves efficiency and helps inform developers and designers in understanding not only what decisions were made, but why they were made.
There should be a clear set of tools all the different stakeholders use and are aware of. This should be established and set out early in a project.
Applying standardised grid systems reduces design decision making and assists with creating cohesive and consistent designs across the digital product. Having rules in place can help assist designers in scenarios in which the grid needs altering. However, best practice should be observed wherever possible.
Setting up naming conventions is especially important when multiple teams and stakeholders access the DLS. Naming conventions can be used for layers, elements, components, and symbols.
Design tokens allow designers and developers to easily scale and re-use existing work while efficiently applying consistent design decisions across a range of digital platforms.
Design tokens are commonly defined as:
...a raw material or tool used to build more complex elements like assets, components, and patterns. A token stores the core values of UI elements, such as spacing, colour, typography, object styles and more.
Design tokens clearly assist with efficiency which enables developers to spend more time on complex development activities, while designers can focus on solving complex customer problems.
Apple’s design language system is widely lauded for its logical simplicity. Source
Apple is renowned for putting customer experience first. Its design system showcases the incredible detail to which it goes in order to create a seamless and pleasing customer experience for users of all abilities.
Mailchimp’s pattern library is simple but strong. Source
The brilliance in Mailchimp’s design language system is how it communicates with Mailchimp’s end users. Its style guide contains writing resources and a detailed breakdown of the voice and tone the brand uses in all content. MailChimp has consciously cultivated a personality, which is complimented by its choice of typography to fit its tone and brand identity.
Shopify’s design language system is called Polaris. Source
Shopify’s DLS aims to create a purposeful brand presence, familiarity across experiences, and future-friendliness. Shopify has ensured its DLS is flexible by making use of design tokens. These enable teams to make quick, effective changes where necessary.
Like many things in the world of design, a DLS is something that will continually grow, evolve, and be iterated upon. There are many benefits to a variety of different stakeholders when creating a DLS. The designers and developers have a single source of truth that improves efficiency and reduces cost, but most importantly improves the brand identity. These benefits greatly assist both the business and end users, solving the challenge we opened with: “Create a high-quality and consistent experience for end users.”
