How many times have you felt inefficient while building a digital product? Have you ever felt inconsistency in the design workflow of your product team?
Sometimes, We find ourselves doing inefficient work over and over again, looking for better solutions for problems we have while we’re building a digital product.
There is a new sheriff in town and it’s called a “design system”. It allows us to build a ruleset for our product design.
But what exactly is a design system?
Table Of Content
- What is a design system?
- Does it fit your company?
- Great examples of real world design systems
What Is A Design System?
A design system is a ruleset that defines the design and interaction of a product.
It’s built on components and patterns.
A component is similar to a lego brick that is a part of a bigger lego castle. it’s a term taken from the development world which means a building block of software.
A pattern is similar to the lego castle itself. It’s a structure built from components.
A design system is built upon repeated patterns. These patterns construct the visual design and UX of the product.
Using a system, the team can solve usability, functionality and design problems with reused patterns. Just like building with lego bricks.
That way, teams work efficiently and develop products faster, much faster.
Here’s an example for you.
A product team is working on a new feature. The new requirements that came from the stakeholders are to make it more accessible to new audiences.
Since it’s a big company, with millions of users, the product team has to make innovation on the product while maintaining the same language and design – that users already love.
What a conflict.
They can’t make dramatic changes on the product otherwise they’d confuse the users and ruin the product’s user experience.
Furthermore, maintaining the same design and UX across all of the company’s products is a hard work by itself.
A design system is a solution for this problem. Where all the building blocks of your product design are at one place.
Design systems have become a necessity, as companies such as google, Airbnb and IBM started using them.
You might think that building a design system from repeated patterns is a boring task.
But is it a complete creation buzzkill? Definitely not. We use the repeated patterns so we could have more time to spend on the look and feel of the new feature which makes the process even more creative than before.
The beautiful part of it is that any changes in the system would automatically change the entire product. For the first time in design history, we have a semi-automated design workflow. exciting!
Does It Fit Your Company?
Creating a design system is an investment.
It takes time and effort to establish one but eventually it could pay off.
I can already imagine how in a few years we would see tech companies start hiring positions such as “Design System Lead” or “Design System Developer” for talents who’s their only mission is to create and optimize a design system.
What a beautiful time to be alive!
But, does that mean any company needs a system? not necessarily.
If a design system does not solve design, UX or development problems. There isn’t a point making one. The goal is not to have a design system at all costs. The goal is to make the product team work in his most efficient state.
On small start-up companies, for instance, developing a design system could take longer than building the product itself. That could be a problem.
Great Examples Of Real World Systems
Material Design is a design system developed in 2014 by Google. Expanding upon the “card” motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
It is a collection of design patterns, components, and guidelines for creating unified UI in the Salesforce ecosystem. It makes a good use of the Grid System, which helps construct responsive layouts that scale elegantly across screen sizes.
Polaris is a React component library designed to help developers create the best experience for merchants who use Shopify. Visit the Polaris style guide to learn more.
WeWork is a US based company that creates inspiring shared workspaces, with an emphasis on community. They design and build their own internal digital tools to meet their business needs and to manage their global network of buildings and members. ‘Plasma’ is a design system created for these internal business tools.
It is a collection of components, color schemes, and typography used by MailChimp design system. It makes a good use of the Grid System, which helps construct responsive layouts that scale elegantly across screen sizes.
The styleguide is a resource for designers, product managers, and developers, providing a common language around Yelp’s UI patterns. They use it to maintain modular front-end code and visual consistency across the web app. Learn about why and how they made the styleguide over on the Engineering Blog.
A unified design language that defines the experience and design of Airbnb. It’s an evolving ecosystem that follows Airbnb’s innovation on its products.
Lonely Planet has a huge collection of components and this ultimately dictates many of the decisions they make around the front end architecture and day-to-day feature development.
Carbon Design System is a complete set of visual, user experience, and code guidelines and standards for IBM’s Cloud Platform and the 120+ services offered on the platform.
Ubuntu has a huge library of design patterns and components aiming to seamlessly have the same experience and design across all devices.
We live in the golden age of design.
Product teams are the ultimate problem solvers and have to be the best at what they do.
Today, product teams across the world have great tools to automate old solutions.
They have the opportunity to build fascinating and innovative products.
With the rise of design systems, better products are going to show up.
I invite you to join me to spread this idea and make the world a better place for users and product teams.
Bookmark and share this article your team.
Let’s make better products together.