How Are Design Systems Changing The Way We Design Products

By Max Snitser on May 12, 2019

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 is something that 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 to understand 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, but it doesn't say why people should use particular elements and do not expand on design patterns much.

Of course, every design system starts from something like UI Kit and 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 use over and over again 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 thing first is that whether you work as a designer in your organization or you 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 over and over again, but that's something that can be automated with design systems. Design systems allow making design processes and solutions consistent, organized and automated. It will take time in the beginning, but in the long run, it will save a bunch of time and energy and building 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 to build a product, do it fast and in an efficient way.

A Scale of Design Systems

The design system itself needs to be bigger than any one 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 to organize design processes to build cross-platform and consistent solutions way faster than doing it one by one. A system like this can have a set of rules, UI elements and design patterns for different platforms.

A header, footer, and cards that probably the most common thing that every design system is started with. Because these elements can be found almost on every website.

Then it can be more highly valued patterns like for example 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 it is 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 their 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 as well. So you can read their Human Interface Guidelines, download UI library to get basic components that are being 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

Google

Material Design is a design language that Google developed in 2014. The system is evolving, expanding and being used in design and development for a variety of 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 a set of patterns, web UI kit, typography, brand highlights, and thorough documentation.

Resource: https://atlassian.design

Starting Point In Creating a Design System

Even if you don't have content yet, you can start building a style guide as an empty shell. 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 more concrete side.

A style guide website can be the guide book with rules for the design that you created and going to develop. This something that can be changed later on and this is how you can track so that changes has been made in other places, again, according to a style guide.

A design system can be understood as a collection of assets and as a roadmap for designers or a product. It includes conventions and knowledge base about the product.

A style guide website is a storefront environment for a design system. All the elements of the design in one places. A good example is material.io. It has a comprehensive library of components and instructions on how to use them.

I think design systems can have collections of assets such as image, 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 your library of components can be organized, so it's easy to understand the hierarchy and use cases.

A design system based on atomic design principles consists of 4 main types of elements: atoms, molecules, organisms, and templates.

Nightfall symbols example

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 are also molecules representing 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 that will be 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

Style guide example from Nightfall Design System

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 here 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 and just pick a set of templates for your needs, do some personalization tweaks, pour your own content and you 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 on research of possible interactions everywhere else. Motion library like this also helps to achieve consistency in transitions throughout your product.

Iconography

Icons Pack example from Nightfall

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 work 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 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 result of 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 of how to code and create components for an app or a website. With a design system, it's enough to give a description of how things should work and the rest can be found in the library.

The cool thing here is that as we have more free time after a design system is created and a lot of things can be automated. We can use this time to test the system on a bunch of 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 working over and over again 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