Design is becoming increasingly complicated day by day. To empower teams to collaborate effectively and follow a set of design standards, companies like IBM, Uber and Airbnb have incorporated design systems to design their products. A design system is a lot more than your style guide or pattern library. Let’s dig into the details of what a design system is and how you can formulate the perfect one for your company.
What is a design system?
A design system is a collection of independent yet related components that helps improve product efficiency and enable a rich customer experience. Let’s take an example. A login button on your product is an independent component in itself with its own color tone and typography. But it is also an integral part of other components such as login screen, login message and so on. It can also be correlated with links to other pages.
By maintaining a standard across all such independent components can make the designer’s and developer’s work easy and ultimately the result shows in a great user experience.
How to build a design system?
Express the purpose of the product and map out user goals
The purpose of your product defines your design and development decisions. For example, if you’re developing a product that helps teach students about web designing in 20 days, your goal is to facilitate quick learning. This goal can evolve with time but make sure that your design revolves around this purpose. It could mean to-the-point directions on your website, quick sign up process, etc.
The next step is to understand who the users are and what their goals are. If, for instance, you're dealing with the elderly, your design process should resonate with them and be easy for them to understand. It will also give you an insight into how they will interact with your product. The product team should keep all this information in mind while working on the design system.
Establish design principles
Design principles are the guiding light for your team to reach the purpose of the product. They encompass what good design means for the company and some practical recommendations on how to achieve it.
Your design principles should not contain qualities that are given like “simple and useful”. Take for example one of the design principles of Medium, a popular blogging platform - “Direction over choice.” The design team understands that in order to make the writer focus on the content of the article, instead of designing a text editor with various visual styles, they should stick to a limited number of visual styles.
You can even inculcate practical recommendations by pairing a principle with a real-life example. This shows how the principle can be applied in context and avoids misinterpretation.
Focus on design components and patterns
The components in your design system are the building blocks which will have their technical and functional behavior specified whereas a pattern will allow you to use these components in a consistent and logical way. The pattern is further divided in two parts: functional and perceptual.
Functional pattern includes the tangible building blocks such as buttons, text, icons and all that comes together to form a product. The perceptual pattern, on the other hand, focuses on what users feel and helps differentiate your product from the other ones in the same domain. This goes on to include color, typography, shapes, animation and iconography. Not only these individual elements but the relationships between these elements will also influence perception. For example, you have to use the right combination of typography and animations to make your product feel a certain way.
Your perceptual pattern will depend on the answers to such questions: “How do we want our product to be perceived?”, “Do we want to have a serious or playful tone?”
What type of design system is best for you?
A strict design system will have detailed documentation to cover the majority of the guidelines the team will require and there will be a strict process to introduce anything new in the system. A loose design system leaves more room for experimentation and creativity. It gives an overall framework for the design team but the designers and developers are free to use it or not, depending on their requirements.
A balance between a strict and loose system is needed. In that way, you can experiment on a small scale and also not repel your designers and developers by keeping the process too restrictive.
Check out Ruttl- a visual feedback tool that helps you make changes to your website design without having to work with the code.
Follow us for more insight on design, UI, UX and everything in between: LinkedIn | Instagram | Facebook | Twitter
