How Are Design Systems Changing The Way We Design Products
First of all, what is a design system? Some people confuse it with UI kits or Style guides, but that's something that has a broader sense. Also, Design Systems are still in early stages and not generally used everywhere or being covered by design agencies or designers... Ok, I have some notes on this topic. So let's try to figure out everything and understand how it can be useful for designers, design firms, product makers, and different scale companies.
A Design System is Not a UI Kit
The first statement that I think is important is that a design system is not the same as a UI kit. Because UI kit is more a set of UI elements, samples, and rules of using them, it doesn't say why people should use particular elements and not expand on design patterns much.
Of course, every design system starts from something like UI Kit, and the first versions can be quite narrow and remind a UI kit, but at the same time, it's a starting point for further updates with more knowledge, examples, use cases, and technologies.
Developers can have a library that helps them automate things on their side. Designers have a UI kit or a set of elements that they repeatedly use in their designs within a product. Managers have their own set of rules to manage the project and make sure that the development of the product is going to achieve business goals. That could be more efficient to have everything in one place or at least cross-referencing between departments is a part of a design system.
Selling The Value Of Your Design System
First, whether you work as a designer in your organization or a freelancer, you need to convince the other person who makes decisions regarding a project that building a design system has value.
All you need is a constructive approach and real examples of efficiency and showing the real benefits. For example, you can show useless work that is being done repeatedly, but that's something that you can automate with design systems. Design systems allow making design processes and solutions consistent, organized, and automated. It will take time initially, but in the long run, it will save a bunch of time and energy and build new features, sub-products, and similar products within an organization.
A design system is not a product itself. So it's challenging to sell it as a solution. However, that's something that helps build a product and do it fast and efficiently.
A Scale of Design Systems
The design system itself needs to be bigger than anyone implementation of technology.
Users don't care what technology has been used to build the app that they're using. Also, they don't care about frameworks, methodology, design trends, and similar things. All they care about is how easy for them to use the product and what value it brings to them.
One app can be made for different platforms like iOS or Android, and it needs to have a set of rules to build a consistent cross-platform solution. A design system could help organize design processes to build cross-platform and consistent solutions way faster than doing it one by one. A system like this can have rules, UI elements, and design patterns for different platforms.
A header, footer, and cards are probably the most common thing that every design system starts with because you can find these elements in almost every website.
Then it can be more highly valued patterns like, for example, a calendar widget or a date picker. That's something you can use in one website or product, but once it's in the system, you can reuse it everywhere else. So these elements become more valuable.
Technical Feasibility
How possible is it on the technical side to actually accomplish this project? You depend on some technology or complex framework and so on.
Top Players That Use Design Systems
Airbnb
They experienced a lot of growth over the years, and they have a dozen teams. So they decided to move towards a more systematic approach to guide and leverage their collective efforts. A design system is an answer in cases like this. Style guides and components are what helped Airbnb to start implementing its systematic approach to product design.
Resource: https://airbnb.design/the-way-we-build/
Shopify
Polaris is a design system that helps Shopify to build a great experience for customers of their product. You can learn how to use their design language, find out how they approach the visual elements of their interface, use components as building blocks, use patterns to see how Shopify puts pieces together to create meaningful product experiences.
Resource: https://polaris.shopify.com
Apple
At first, it was more for developers, but now they started expanding on design knowledge. So you can read their Human Interface Guidelines, download the UI library to get basic components used in iOS, and even watch video tutorials for design and development.
Resource: https://developer.apple.com/design/
Trello
Nachos is Trello's design system. They have a comprehensive guide and resource library that contains everything you'll need to design for Trello, including their core principles, visual design, interface components, branding, and resources.
Resource: https://design.trello.com
Material Design is a design language that Google developed in 2014. The system is evolving, expanding, and being used in the design and development of various products.
Resource: https://material.io
MailChimp
The MailChimp Pattern Library is a byproduct of their move to a more responsive, nimble, and intuitive app.
Resource: https://ux.mailchimp.com
Atlassian
Atlassian's Design System is addressed to every interdependent group in the digital ecosystem. They have patterns, a web UI kit, typography, brand highlights, and thorough documentation.
Resource: https://atlassian.design
Starting Point In Creating a Design System
You can build a style guide as an empty shell even if you don't have content yet. It can consist of design elements that you think you're going to use in the product, layout examples, and navigation patterns. You can share it with designers to move along with the design solution to the more concrete side.
A style guide website can be the guidebook with rules for the design you created and develop. You can change it later, and this is how you can track so that changes have been made in other places, again, according to a style guide.
A design system can be understood as a collection of assets and a roadmap for designers or products. It includes conventions and a knowledge base about the product.
A style guide website is a storefront environment for a design system—all the design elements in one place. A good example is material.io. It has a comprehensive library of components and instructions on how to use them.
Design systems can have collections of assets such as images, icons, and fonts that help to build interface solutions. So it looks more like an end solution or a realistic prototype.
Atomic Design
There is a great concept introduced by Brad Frost called "Atomic Design." It simplifies the way we think about components, levels of complexity of each element, and how you can organize your library of components, so it's easy to understand the hierarchy and use cases.
A design system based on atomic design principles consists of 4 main elements: atoms, molecules, organisms, and templates.
Atoms
Labels, inputs, buttons, images, headings.
Molecules
Components like newsletter or sign-up forms have a meaning. So from this point, we have encapsulated components. The navigation bar and a search bar also represent a discrete chunk of interfaces, sort of simple components.
Organisms
Complex components can be represented as organisms. One organism can have a logo, navigation, a search bar, and for example, used as a header. Or it can be a grid of cards.
Templates
A combination of organisms that form final screens can be called templates. We're not focusing on specific content at this point but rather building a skeleton model of the UI. We can see these patterns and start to interplay with one another.
Pages Or Screens
At the page level, we take our templates and pour real content used in the final UI solutions. This is what your end-user will see and interact with.
What's Inside a Design Systems
Components Library
This is one of the foundations of every design system. You can design or build and validate ideas fast using components from a system.
Style Guide
A style guide helps to summarize everything that's included in a design system. It helps in navigation and gives context notes to help designers achieve brand consistency when creating a product design.
Interactions
This is a section where you can find an explanation of how things should work. You can find things such as gestures, actions like selections, and states like hover, focus, selected, activated, disabled, etc.
Templates or Layouts
Using templates, you can speed up your workflow even more. Basically, you don't need to immerse yourself in the specifics of a design system. Just pick a set of templates for your needs, do some personalization tweaks, pour your own content, and have a first version or beta of your product design.
Motion
Some design systems include a section with principles and guidelines for interface animations. You can learn which transitions to use in certain use cases and don't spend too much time researching possible interactions everywhere else. Motion library like this also helps to achieve consistency in transitions throughout your product.
Iconography
Icons pack that covers a variety of use cases helps to make interface solutions easy to understand. Your content, navigation, and action elements can be more self-explanatory if you have a decent library of icons included in a design system of your choice.
Color system
Sometimes it takes so much time to choose a decent color palette for your product, define a primary color and a secondary color. Check the level of contrast, so it's all works for end-users. Some design systems have a guide for applying colors where you can see how colors work with each other in different cases, how it impacts the readability of text, and even preset color schemes that you can start using to speed the part of the work with colors.
Summary
By using Design Systems and the atomic design principle, you can set aside the actual components as you need them. I tend to reuse the components rather than build a new version of a card or a component.
A design system is a vocabulary. We used to work on details for each particular stage of development to hand over the work to the next stage. Let's say wireframes are the end product of the UX stage of work, and it goes straight to the visual design stage and then designed screens or pages with icons, images, and a style guide provide developers with instructions on how to code and create components for an app or a website. With a design system, it's enough to describe how things should work and use cases of components.
The cool thing here is that we have more free time if most of your design system is already established and a lot of things can be automated. We can use this time to test the system on many different solutions and improve it to cover more cases. Then focus on creative solutions and quality of an end product instead of focusing on routine work like repeatedly working on user scenarios, making comps, and then coding the UI. So the design system will be evolving that way. You get a foundation, and you have a lot of opportunities to customize, improve and expand the system.
Thanks for the reading, and keep up whatever amazing creative job you do.
Credits: InVision, Brad Frost