When you work with multidisciplinary teams, you need to adopt a methodology to make sure the product you are designing is inline between developers, designers and business managers.
How to put stakeholders in the same page?
This is the first challenge when you face a digital production.
Imagine that you have a shopping website listing a long variety of products to sell. It must have a content organisation and visual hierarchy, otherwise it would be chaotic to shop online. So in a webpage like this, you have global user interface (UI) components like search, checkboxes with filters, items list with a title, a description and a “add to cart” button. We can look at all of the described elements as Patterns because it’s what they are in their essence.
As we are humans, we have the capacity to learn from experiences. This is a natural process, it’s behind human behaviour. The fact that these UI patterns are transversal to the whole shopping experience enable users to learn from its interactions over the time.
Can we look further? Besides UI elements, there are grids, colours, typography, icons, text readability and accessibility. It’s invisible to user’s eyes, but that’s all part of what we can call Foundations. Solid principles are the foundation for any well-functioning system. It’s important to define some basic rules, or guidelines, to make sure you can patronise a user experience (UX) and maintain the design consistency of a digital product.
Design system is an important tool to refer when handing over a project, which we can look to in order to solve problems that are mainly about failures in collaboration where design, content strategy, and front-end development come together to form a holistic picture of how to build a product.
Design System vs. Style Guide — What’s the Difference?
The two concepts are connected but definitely not the same.
- Design System is the complete set of design standards, clear documentation, and principles along with the assets to achieve those standards.
- Style guide is a subclass of the design system, it’s about how products should look and feel, presenting use cases for UI patterns and components.
A style guide is a map of your design system. It’s where you can bring together the elements that are related with how UX is approached. A design system is a concept of tangible and intangible assets. It’s like any other business. In the real world, vehicles, furniture or machinery are tangible assets. And patents, trademarks and copyrights are intangible assets.
Let’s change the perspective, look at the diagram below.
Design System is the complete set of design standards, documentation, and principles. Patterns are user interface components with development use cases. Style Guide is how products should look and feel, colours, fonts, logos, and brand attributes.
How do others do it?
There are more than hundred design systems that we could look into. But let’s just look at a few.
Material Design by Google is a good example as it gathers all kind of information like material icons, design guidelines, colour palettes or even resizing options. Atlassian Design Language is exceptionally eye catching in its content as well as mode of presentation. The design and development are clearly mentioned through out the guide. Ever wondered how Skyscanner is designed? You can take a look at their design system. There’s a focus on the use of colour and font with a variety of pictures to demonstrate the look and feel of the brand. IBM captures the balance between colour and content, it’s easy to navigate, informative and covers everything from their logo to grammar. Even the U. S. federal government has a design system with guidelines to capture their style specifications in a simple and structured format.
What is the conclusion of all of this? A design system must have documentation, guidelines, rules and assets about:
- Brand Voice & Tone;
- Designers Kit;
- Development Components; and
How can you sell this concept?
Design systems gather useful and relevant information along with visual consistency among enterprise digital products. It not only is more effective but also improves user experience.
It’s an important tool to keep business managers, designers and developers synchronized, it maintains control of the quality and production cost and it’s a way to communicate design standards to an organisation or a client.
How to build an effective design system?
Now that you know what these terms mean and how they work together, let’s review how to build a design system.
- List and describe all design patterns used in your interface.
- Establish design principles and codify your practices.
- Make sure not to create strict rules about how modules and components should be used. Must be easy to update.
- Standardize and simplify the implementation.
- Test the prototype
Remember that it works as a guide for developers, designers and business managers and can improve the way of working.
While building a design system, we can expect hard work and lots of people working together to iterate on how to build products and how to document what we’ve learned. This deep work is where the real value is.