When, Why and How to Use Design Systems?
When, Why and How to Use Design Systems?
Jan 04, 2020
We have been hearing a lot about design systems these days. All the big shots like Google, Microsoft, IBM, and Mozilla have their own design systems. These companies have changed the way they design digital products. They have built a collection of reusable components and a set of guidelines and standards for those components. Let's understand what design systems are first. 10 years ago, people simply called them pattern libraries. A few years ago, Atomic Design entered the scene and provided extensive grammar around them. Once Google unveiled Material Design in 2014, the concept of design systems had finally matured. I believe you have heard various definitions, so let me start by defining what a Design System isn’t; it is not a Sketch library, no more than a Style guide, or a Pattern Library. It’s all of this and so much more. More simply put, the difference is in the standards and documentation that accompanies the assets and components. A guide on why and how to use them would help the team and people working on the product.
“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
Design System is defined in many other ways, but a definition so broad could be perceived ambiguous. Therefore, don't let a definition dictate your understanding of the design system.
Design Systems bring order to chaos.They help teams by giving them a more structured and guided way to build their product. Everyone involved in building the product is on the same page, so the entire product remains consistent throughout. The team knows exactly how components should look and work.
Design System exists if it can be used without the creator
Why should you build a Design System?Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. The need for Design Systems goes hand in hand with the need for scalability, efficiency, and consistency in Design. So, how do you address these challenges? Scalability: How will you design consistent UIs across platforms (Web, iOS & Android) with a growing design team and organization? Efficiency: How efficient is your design+development workflow? Is the dev handoff road bumpy or a smooth cruise? Consistency: My UI looks to be consistent across platforms. Let the UI audit decide. Assure scalability, efficiency, and consistency with Design System. Imagine that your company has a product that has been building for a long time. It’s likely that many teams working on different parts of the product will create inconsistencies in the product over time. Many businesses are investing in design as they recognize that the customer experience of their products offers a competitive advantage, attracts and retains customers, and reduces support costs. Why is a company investing in a design system?
- To scale design
- Design faster
- To make design reusable
- Make design and engineering talk the same language
- For better operations with a growing design team
- Build consistency across the product
- Clear the design debt
- Iterate confidently with a single source of truth
How to build a design system?There are some prerequisites to building a design system. First, you need to understand the Component-based design. It's used in Sketch, Figma and Adobe XD by designers and directly in the code by developers
"Components are building blocks of your user interface or reusable bits of code within your application or system. They serve the same purpose as a function."In 1968, at the NATO conference on software engineering, Douglas McIlroy presented component-based development. Component-based development provided a way to speed up programming’s potential by making code reusable, thus making it more efficient and easier to scale. This lowered the effort and increased the speed of software development, allowing software to better utilize the power of modern computers. - excerpt from Invision's Handbook, Introducing design systems The design industry was facing a similar challenge. As the number of devices, browsers, and environments increased at a staggering rate, we were tasked with making more interfaces for different screen sizes and capabilities. Design system methodologies like Atomic Design bring logic and structure into individual screens.
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.There are five stages of atomic design. Source: Invision, Brad Frost's Atomic Design methodology
- Atoms are the basic building blocks of matter. The atoms of our interfaces serve as the foundational building blocks. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further.
- Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
- Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
- Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
- Pages are specific instances of templates that show what a UI looks like with real representative content in place.
- I know you are confused between a template and a page because the rest was 6th-grade chemistry. To clear this out, think of templates as a combination of molecules and organisms to form the structure of a page. It's not a page unless this skeleton is fed with content.
- Choose your players
- Choose your team model
- Do some research
- Conduct a UI audit
- Create a visual design language
- Create a UI library