The benefits of shared design systems

Over the last few years, design systems have become a hot topic in digital product design as companies like Airbnb, IBM, GitHub, and Salesforce have begun adopting them as an essential part of their workflows. So, should you be using a design system, too? How would embracing a shared system benefit your digital design process?

Let’s get acquainted with shared design systems and discover how integrating one in your organization can dramatically save time and resources.

What is a shared design system?

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of digital products. This set of visual and language components is shared between teams (UX, development, etc.) to ensure a cohesive user experience. It is a single shared source of design truth throughout your organization.

Piqued your interest? Check out our recent Fireside Chat on design systems, with leaders in the design space (including Brad Frost, who wrote the benchmark book on the topic, Atomic Design).

shared design system

But a shared design system is more than just a set of shared parts and pieces (like color palettes, typography standards, forms, icons, illustrations, data visualizations, etc). The essence of a design system is centered around thinking, anticipating, and planning for the needs of your users today and tomorrow. If these elements and their use cases are shared throughout your organization and are used strategically during the entire digital product design process, you’re saving time, energy, and other resources, all while creating better and more cohesive experiences for your users.

What are the benefits of shared design systems?

One of the common complaints that arises when trying to institute a shared design system is that doing so would limit designers’ creativity. If you’re taking the “design” out of the process, why not just let the developers put everything together?

The truth is, by putting certain limitations into place, you are enabling designers to stop worrying about minute details like font sizes and color shades and allow them to start focusing on larger things like the delivery of the experience. You’re enabling creative freedom by solving small issues before they crop up.

In addition to empowering the creative flexibility of your designers, implementing a shared design system saves time. Confusion and frustration lead to time wasted, especially during a design sprint. If everyone works from a shared repository with a central knowledge of how and when to use components, there’s no question about whose version to use, and there’s no discussion about which iteration is the best. You simply pick the element that fits the situation and you move on to more important things.

Having a shared design system reduces friction throughout the entire digital product design process. Every step between ideation and development should be focused on creating a consistent user experience throughout the product.

Dig deeper in this design system how-to from product designer Ål Power.

Finally, a shared design system encourages collaboration. In order for a design system (and the products generated from it) to be successful, your team should build and maintain its structure and governance with tools that are familiar to all of the people using them. Throw too much into something like GitHub and you risk losing the non-developers. Put too much into Photoshop and you lose the folks who prefer Sketch.

Want to see design systems in action? Check out our recent post on companies that have implemented crazy good design systems in their organizations.

Sign up below to request early access to InVision Studio, and harness the power of a shared design system across your entire organization.



REQUEST EARLY ACCESS TO INVISION STUDIO

hbspt.forms.create({
portalId: ‘425470’,
formId: ‘622a9f6f-ece0-438d-bb1a-9c8cc85b003c’
});

#hs-signup { text-align: center; width: 85%; max-width: 400px; margin: 50px auto; }
#hs-signup form { width: 100%; }
#hs-signup form .actions { padding: 0; }
#hs-signup form .input { position: relative; height: 56px; }
#hs-signup form label { display: none; }
#hs-signup form .hs_terms_conditions { margin: 0; height: 26px; }
#hs-signup form .hs_terms_conditions ul.inputs-list { padding: 0; height: 26px; }
#hs-signup form .hs_terms_conditions ul.inputs-list li { margin: 0; height: 26px; }
#hs-signup form .hs_terms_conditions ul.inputs-list li label { margin: 0; display: inline; }
#hs-signup form .hs_terms_conditions ul.inputs-list li label input { height: 15px; width: 15px; margin-right: 10px; box-shadow: none !important; }
#hs-signup form .hs_terms_conditions ul.inputs-list li label input:checked { background-color: #f36; }
#hs-signup form .hs_terms_conditions ul.inputs-list li label span { display: inline-block; top: -3px; position: relative; }
#hs-signup form .hs_terms_conditions ul.inputs-list li label span a { color: #f36; }
#hs-signup form input { border: 1px solid rgb(212, 215, 218); margin-right: 0; width: calc(100% – 35px) }
#hs-signup form input.error { border: 1px solid #f36; }
#hs-signup form .hs-error-msgs { display: none !important; position: absolute; color: #f36; }
#hs-signup form input[type=”submit”]{
width: calc(100% – 40px); height: 40px; margin: 0;
color: #f36; background-color: #ffffff; border: 1px solid #f36; font-size: 14px; text-shadow: 0;
background-image: none; text-shadow: none; box-shadow: none; font-weight: 500; transition: all .1s linear;
}
#hs-signup form input[type=”submit”]:hover {
color: #ffffff; background-color: #f36;
}
.hs-form-required { display: none !important; }

The post The benefits of shared design systems appeared first on InVision Blog.

Leave a Reply

Close Menu