When you had a team of five people, you more likely didn’t think about a design system. You could communicate style direction to everybody on your team, making sure you were all on the same page. But when your business scaled, it became next to impossible to instruct every new member how to adhere to a company’s design principles and coding standards to keep a high level of product consistency.
If this is the case, then the UI design system is what you should consider, develop, and gradually establish. Here at Eleken our skilled designers are ready to apply their in-depth expertise and help you with creating your unique design system.
Why do companies create design systems?
In a nutshell, they want to make their life easier. The design system became an omniscient source of truth and the primary reference for everyone who works on the product. As a result of the designers, programmers, engineers, and product managers' joint work appear a holistic system made up of many reusable components - guides, patterns, and elements.
When designers need to create a new web page, all visual design components are ready to be used. Programmers can reuse a code snippet just by copy and pasting. Overall, the design system helps the product team be more efficient and reach a higher product consistency level.
Creating the design system requires a lot of work, being a long iterative process. However, it also brings multiple benefits, which recoup all the efforts.
Eventually, you will get and make the most out of:
- Faster design process
- Better cross-department collaboration
- Higher product quality
- Clear brand guidelines
The design system being a reusable components collection is not equal to a style guide or a pattern library.
Design system, pattern library and style guide- what’s the difference?
First and foremost, the design system is a brand’s philosophy embodiment. The system has structure and concept behind it and the elements subordinated to the main idea. However, most of the design systems can look like really just the patterns libraries with hundreds of components, which, without holistic vision, can be assembled in limitless ways yet not making a unified user experience.
With a clear guide on properly using the design system elements, all the UI components will adhere to a company’s standards.
To give you a bit of inspiration for creating your design system, we assembled the best design systems examples you can learn from.
1. Atlassian design language
Atlassian is a famous Australian enterprise software company known for its product - an issue & project tracking application Jira. The company’s focus is on agile tools development to help agile teams track their progress from product planning to delivery.
Atlassian’s mission is to “unleash the potential in every team.”
The Atlassian design system consists of several sections:
- Brand - covers the company’s mission, personality, promise, and values
- Foundations - the visual elements for creating an engaging end-to-end user experience. This section includes iconography, typography, layout, structure, accessibility elements, logos, and illustrations
- Content - the content guidance covers voice and tone, vocabulary, grammar, and style
- Components - the reusable design system blocks. Each of them meets the specific UI need and work together to create assembled patterns
- Patterns - the reusable combinations of components to help users achieve their goals and ensure user experience consistency
- Resources - the tools, kits, and plugins collection that includes color palettes, fonts, illustration and logo library, and templates
Overall, the Atlassian design system is very detailed, with clear reasoning behind each element’s choice.
2. Uber design system
Uber is an American technology company providing ride-hailing, food delivery (Uber Eats), package delivery, freight transportation services, and a micro-mobility system with electric bikes and scooters.
Uber’s mission and philosophy are “about moving people to where they want to be. In their day, in their lives, in the moment.”
Here is what Uber says about its design platform:
We need tools that help designers stay in sync, common design libraries that provide them with our growing body of learnings and the means to recognize and apply our patterns to a diversity of user experiences. By grounding design at its basic level, we built a flexible system that empowers designers with the freedom to explore while keeping consistency and quality at the core.
Uber style guide where all design system elements are assembled includes:
- Logo
- Brand Architecture
- Color
- Composition
- Iconography
- Illustration
- Motion
- Photography
- Tone of voice
- Typography
Besides design elements, in its style guide, Uber showcases the examples of branding in different points of contact with potential customers starting from printed materials to digital billboards and posters.
3. Polaris design system by Shopify
Shopify is a cloud-based SaaS shopping cart solution that allows businesses to set up an online store. The company offers its proprietary platform for online stores and retail POS systems. Polaris design system aims to help both Shopify and the Shopify merchants to establish a better user experience.
Shopify builds “products, tools, and services for people to start, manage, and scale their businesses.”
The company’s values underlie the user experience Shopify builds:
- Considerate - we show care for the people who use our tools and products
- Empowering - we want people to feel like they can accomplish whatever they’re trying to do.
- Crafted - Shopify experiences should feel like they were created with the highest level of craftsmanship
- Efficient - Shopify experiences should help people achieve their goals quickly, accurately, and with less effort
- Trustworthy - we constantly work to recharge our users’ trust batteries.
- Familiar - we want people to feel comfortable using our products, whether it’s their first time using them or their hundredth
Polaris design system serves as an extensive guide for designing your online shop based on Shopify’s platform. It provides inspiration and various visual elements and UI components to create a better user experience for ecommerce projects.
Design system elements:
- Colors
- Accessibility
- Resources
- Typography
- Illustrations
- Sounds
- Icons
- Interaction states
- Spacing
- Data visualizations
4. Helpscout design system
Help Scout is a pure-play SaaS help desk solution that helps small businesses manage their customer relationships. The solution allows users to create multiple mailboxes for each shared email address, enabling them to work across departments or manage several products from a single account.
Help Scout aims to follow its brand values being:
- Helpful
- Trustworthy
- Human & Organic
- Energetic
- Curious
Design system elements:
Helpscout design system is one of the most compact yet nicely designed systems.
It consists of 3 sections:
- Visual Elements
- Content Style
- Product Design
These sections contain everything you need to design your help desk, ticketing system, knowledgebase, or the support forum.
5. Canvas design system by Hubspot
HubSpot is a cloud-based CRM and inbound sales & marketing software that provides tools to help companies with blogging, SEO, social media, email, landing pages, marketing automation, and web analytics.
Here is what Hubspot says about Canvas, their design system: “This library is a window into how we build our products here at HubSpot and what it’s like to build the HubSpot product. We’re sharing it because we’re proud of the time and effort we’ve put into creating our design system and optimizing it for developers and designers so that we can keep it evergreen.”
The system elements:
- Components
- Graphs
- Patterns
- Styles
- Editor
Canvas design system is a comprehensive library of the building blocks that Hubspot uses to build its products. It’s a set of various elements and styles, starting from “colors and typography to React-based components and data visualization tools.”
6. Mailchimp design system
Mailchimp, an email and marketing automation platform, developed their design system long before other brands started establishing design libraries.
“One main goal of this new brand identity is to provide a consistent structure to our design language. We have a lot of creative people with unique voices under one roof, which can be inspiring — and messy. To keep the system from feeling disjointed, we have introduced a framework of core components, so that the elements existing inside of it can be as free and expressive as we want.”
Mailchimp’s design system is simple yet robust and easy to use, including only two sections - Foundations and Components.
7. Zendesk design system
Zendesk, is a SaaS help desk solution offering support, sales, and customer engagement software and serving as an API platform and marketplace for various apps.
Zendesk claims their design system Garden is “The source of truth for tools, standards, and best practices when building products at Zendesk.”
They also consider Garden as “an evolving library of shared knowledge that intentionally blurs the line between design, content strategy, and engineering to reinforce a cohesive user experience throughout Zendesk’s product suite.”
Design system elements:
- Content - voice and tone, grammar, punctuation, and word list
- Design - colors and icons
- Components - theming, buttons, dropdowns, forms, loaders, notifications, typography
And now, when you saw the most popular design systems examples, you may have already started considering how to establish yours.
Here are the key steps to building a design system:
How to create the design system
- Think over your design language.
Your visual design language consists of four main categories you should consider:
- color - one to three colors that represent your brand
- typography - usually, one font is used for headings and one for a body copy
- sizing and spacing - it looks best when you have visual rhythm and balance
- imagery - set guidelines for illustrations and icons
- Create a pattern library.
You should collect all the UI elements you currently have in production, merge them, and remove what doesn’t match your brand design concept.
- Document where to use each component.
Documentation and standards differ a well-established design system from a pattern library or a style guide.
You may also find it interesting to learn about the product design process and how to build a successful product.
.png)