Design System vs Style Guide. What is the Difference for Your UI?
Design System vs Style Guide, both sit alongside Pattern Libraries as the three most popular ways to create a digital brand.
Each requires an enormously different level of time, resources, and financial input to create a digital brand with the most effective, successful, and engaging User Interface (UI).
The UI of a brand is just one part of the overall User Experience (UX),.
This is related to the visible elements of a brand rather than the entire interaction that a user may have across all touch points.
The use of either a design system or a style guide will have a significant impact on the whole UX.
It can be fundamental for the success of a brand.
But for this article, I will focus predominantly on the UI.
Both design systems and style guides have their benefits depending on the objective, the end-user, and the level of sophistication required.
It is therefore essential for the user not to prejudge.
It is by no means a sign of a lack of resources, no use, or ambition to use a style guide rather than a design system.
There are fantastic examples of both systems being used by some of the most well-known brands in the world to reach their goals.
Pattern Libraries sit somewhere between the two.
For this article, I will not discuss their details.
I will discuss both style guides and design systems and their strengths, before going on to assess the difference that they will give to the UI.
Table of Contents
Style Guide
Typically, one might say that using a Style Guide is the most basic way to create an engaging digital brand.
You would be surprised by the sheer number of entities with a digital presence that does not even have this in place.
As a user, once you have this in mind, it is surprisingly bright when a brand is not using either.
If the appearance of a brand is jarring, with inconsistent use of fonts, color and formatting, neither are likely being used.
Any brand will have new struggles to gain loyalty, market share over its competitors, and to become memorable without using either system.
It is an investment that is required for all brands to compete successfully in a market that is increasingly crowded and digital.
In the pre-internet days, we would have used a set of printed brand guidelines that would have dictated how any brand would be presented.
This has developed in recent years to have more elastic digital guides that can move with the times.
This is often with parameters to work within rather than stringent rules, the idea remains the same.
Logos : Starting Point for a Style Guide
They create a touchpoint that makes a brand recognizable in the eyes of the user, whether on or offline.
The most successful brands in living memory all have easily identifiable logos.
They can now easily be identified even if the brand name itself is distorted.
Consider Coca-Cola, Ford, McDonald’s, and the vast majority of people on the planet who would be able to identify these brands from the shapes of their logos alone.
If one looks at the history of these brands, their logos and colors have changed very little over a considerable period.
Ford and Coca Cola
If you were to look at the Ford Logo from 1927 and that from today, very little has changed.
The only recognizable change is the tad bit more depth and gradient in the colors and softness in shape.
This consistency has helped Ford become such a recognizable brand.
Likewise, with Coca-Cola and its red color.
Consider showing the public a red box with no discernible shapes, but just the red that Coca-Cola has developed.
Ask which brand it brought to mind most.
I am convinced that a significant proportion would guess correctly.
It must be stated that a style guide is a significant development from the logo.
It should consist of all visible elements of a brand, as well as having the background of:
- How these came about
- Why they are used
- The emotions that they aim to evoke
It should be noted that these are designed to be used for a commercial brand.
But all types of entities and organizations could have a style guide.
These could be from major brands to government departments, sports teams, or tourist destinations.
The London Underground in the UK has one of the most replicated logos in the world and is very specific about its use.
Others are similar and can convey authenticity and trust, as well as recognition.
Examples of this are the United Nations, UNESCO World Heritage, and the Boy Scouts of America.
Creating a Style Guide
The first step in creating a style guide will require the development of a mission statement.
Who is the brand for, and what are its aims?
This should be the overarching objective of the brand, and should, therefore, inform all user-facing communication.
This can be short and to the point, or more detailed and convoluted.
Either way, it’s aim is to answer the questions – why does this company exist?
Microsoft and Disney
Two good examples of this are Microsoft and Disney, respectively.
Microsoft says, “A computer of every desk and in every home.”
While Disney’s is “To entertain, inform and inspire people around the globe through:
- the power of unparalleled storytelling
- reflecting the iconic brands
- creative minds and innovative technologies
that make our the world’s premier entertainment company.”
I think using these two examples makes it possible to see that there is not necessarily a right answer, but the clarity with the objective is a must.
Role of the Mission Statement
The mission statement will then inform the development of the more detailed style guide, split into two separate sections.
Firstly, the writing section, and secondly, the visual section.
The writing section can be incredibly detailed.
But in short, it will determine the tone of the voice that is used throughout all communications.
Is the mood jovial or serious, instructive or questioning, relaxed or formal?
It will not just be the tone.
But also the style of writing, in regards to the length of sentences.
How many words are on each page?
What is the formatting like?
Should the Oxford comma be used or not?
The guide should be detailed and with examples.
The aim is for anyone working on the branding could:
- Take the document
- Digest it
- Write copy in line with what is desired by the company
The key is to create consistency, familiarity, and loyalty, regardless of who is contributing.
One fantastic example of a company that has described it’s the tone of voice both clearly, but at the same time using that very tone of voice to explain is Skype.
Visual Identity
This will arguably have more of an impact on the user interface.
It consists of the colors, logo, fonts, and potential templates for documents.
The color will include both primary color and any other colors that may be used, known as the brand palette.
Alongside the colors, the function of each will be explained.
The logo is the primary visual identity that will be used in all communications, so all must understand it.
It must be obvious how it can be used.
Can it be distorted?
Can it be used alongside certain other marks?
Does it need a bright space around it?
The guide will have examples of how it can and cannot be used, and this will then be enforced rigorously.
The font is also an essential part, which may be different for headings and paragraphs.
There may be times when capital letters are used or not, and these should all be carefully explained.
Depending on how far-reaching each style guide goes, it may also apply to emails, letters, advertising.
These visual elements are designed to create a consistent feel of the brand across multiple touch points.
As you can see, the style guide can have several elements, but they are all relatively basic.
UBER and NASA
Some good examples of brands that have put a useful style guide from both a very modern organization and a more historic one are those used for Uber and NASA.
As an example, Uber describes its tone of voice like this:
“It is designed to serve as an umbrella that informs and unites style guides for departments, countries, and languages.
Voice and tone express a brand’s essence, signaling who we are and what we stand for.
They create the feeling: “that sounds like Uber.” And they let us show up in the world as the innovative global mobility company we are.”.
It is obvious how important they value the tone of voice.
You can see how it is a core part of the brand’s vision and objective as to how their customers will see them.
NASA has a 229 page standards manual.
This does not only demonstrates the key elements of how the brand assets should be used.
But also contains an essay with the thinking behind the branding.
Requirements of a Style Guide
This is a further demonstration that one of the requirements of a style guide is not just instructive.
But it is also to show the reasoning behind what should be used.
Moreover, it should also enable all of those who are using the guide to buy into the aims and objectives of the brand.
The aim is for the user to have a pleasant experience when coming into contact with the brand.
In addition, he must be able to feel warmth towards the brand and perhaps begin to instill some loyalty.
The style guide is the fundamental block for the UI of a brand. It is what will differentiate it from its competitors in a market where products are very similar.
How can a brand stand out and instill confidence, trust, and loyalty in the base?
These elements must be carefully considered and match with one another.
This should be the first step for any serious brand.
In some ways, an efficient and well thought through style guide can be the basis for a successful design system.
Design System
In many ways, a design system is an extension of the style guide.
A sign that a brand is ready to go to the next level of sophistication in its activities.
I have seen a definition of a design system as “the single source of truth which groups all the elements that will allow the teams to:
- Design
- Realize
- Develop a product”
In my eyes, this definition is rather unhelpful.
It gives little direction or actual explanation as to the reasoning behind:
- Creating a design system
- The benefits it brings, or
- Why one might want to
“A single source of truth” feels like an unnecessarily abstract term.
When in fact, this definition would work much better if just as “the single source.”
Therefore, I would argue that a firm definition of a design system is “a single source which groups all the elements that will allow the teams to design, realize, and develop a product.”
A design system is likely to incorporate a style guide, and may well have a pattern library too.
One that has more detail on the way assets should appear digitally.
Design System, Logos, Colors, Fonts
The design system should dictate how logos, colors, and fonts should be used.
Moreover, it should also give far more detail on how one could design a whole environment, whether on or offline.
It is possible to have either a strict or a loose system.
The parameters in which a designer must stay can be set either very wide or quite narrow.
This can be when creating infographics, the journey through a website, layout, and many more aspects.
The brands that have the most successful design systems in place are the ubiquitous ones that have seamlessly worked their way into our lives.
Now can’t imagine what we would do without them.
How would we get around without Uber?
Is there any other way to search other than Google?
Do people organize events with paper invitations rather than a Facebook event anymore?
Facebook, Google, and Amazon have the most sophisticated design systems that one could imagine.
People in the hundreds work to develop them.
Design System VS Style Guide
One of the critical differences between style guides and design systems is the amount of ongoing work that will be necessary.
While style guide elements may be looked at again, or redeveloped now and again, a design system is a living and breathing organism.
It needs constant maintenance to stay relevant, functional, and valuable.
There are, in fact, many steps in between a style guide and a design system.
It may not always make sense to jump from one to the other.
A gradual process may make more sense, particularly if resources are limited.
A style guide may often be outsourced to a specialized marketing agency to create on behalf of a brand.
A design system is inherently internal and will require the expertise and time to be managed.
Impact on UI
The question here is not just the difference between a design system and style guide.
But the impact it has on your User Interface.
I come from an efficient background.
I would like to think, a simplistic understanding of both design systems and style guides.
From a user’s point of view, I would argue that it has been a success if you do not know if you are interacting with a brand that has been created with either a style guide or a design system.
Ultimately, the difference between UX and UI is critical here.
For UX, if a brand uses a design system, there is a fundamental difference as to how consumers will interact with the brand.
Every single touchpoint will be different, and the system will dictate everything.
It is not just the appearance of the logos and typeface and tone.
But the way that one-page changes to another, if you swipe to the left or the right, up or down.
I contend that the UI is wildly undervalued in preference for the UX in modern times.
Humans are pure beings.
While we can, and do, spend many of our hours and our dollars on creating systems that we believe will predict human behavior, we don’t think about the most basic interactions.
Reason for Style Guides
There is a reason that style guides came about and have become so successful.
Simple human psychology shows that director subtler directions are enough to make us change decisions.
We ultimately want to be loyal and to have a comfortable life.
Therefore, if a style guide creates an appearance that is pleasant on the eye, not cluttered and dull to digest, it will go a long way to garnering good feelings from the user.
Whether a good thing or not, we have come to associate specific shapes, colors, or fonts with certain behaviors or characteristics.
These should be replicated by brands.
Very much in the same way that if you see a red road sign, you would expect it to tell you not to do something,
We will act the same with the use of colors for a brand.
If soft shapes for fonts are used, we will expect to be conversational with a brand.
If sharp square corners are used, we will expect more of a direction or instruction.
Final Thoughts
Design system vs style guide for UI?
If you are asking this question, then you are mistaken.
UI should be at the base of whatever you do if you are creating a digital environment.
A style guide is essential to create a secure and successful brand.
One is certainly not better than the other.
The use of a design system that is not managed correctly or effectively will do far more harm than it will do good for a brand’s image and the user’s interaction.
The most important thing for a brand to take into account the aim of the brand.
Furthermore, what needs to be done for every user to reach that aim.
The marks, branding, and way that they speak to their users will go a long way to achieving that aim.
The last thing that I would like put through is that a design system is necessary to be successful.
I hope you found this article helpful in defining the roles of a design system and style guide in your branding journey.
For more helpful readings, do check some of our articles below.
Neumorphism & Soft UI Trend: Ultimate Guide to Neumorphic Design
What To Include in a Media Kit? Ultimate Guide
10 Best Online Courses For Graphic Design
Further Reading:
Difference between a style guide, pattern library and a design system in pictures (with Pokemon)
Style Guide: How to Write One for Your Brand
12 magically meticulous design style guides
Leave a Reply