8
min read

Design System Basics: What You Need to Know

Design System Basics: What You Need to Know
IS IT VITAL FOR PROJECT SUCCESS? HOW CLIENTS, USERS, AND TEAMS WORKING ON THE PRODUCT CAN BENEFIT FROM IT? OUR EXPERIENCE IN USING DESIGN SYSTEMS.
OUTLINE

Sometimes clients say, "Do we really need to create a design system? We heard it's expensive, and the business won't benefit from it. Besides, isn't it an outdated idea? Previous designers we worked with said it would stifle their creativity and uniqueness."

These concerns seem logical, but let's analyze each one more closely. To begin with, we should establish a definition.

What are Design Systems?

They are frequently mistaken for UI kits. Putting it crudely, a design system is a developed UI kit with designed components of the latter. However, it also includes other important information about the product details.

Design system functions for both designers and developers in product creation.

UI Kit example

Design systems include:

  • A documentation site for resources and best practices.
  • A component library for reusable UI elements.
  • A developer sandbox for testing.
  • A design kit for visual assets.
  • A design language for creating a shared visual vocabulary.

They are sometimes referred to as "living libraries," which means that their content is continuously evolving, improving, and adapting to make the system usable and accessible for all those who engage with it.

Linkup studio design system example

Let's explore the use of design systems in live projects. We'll dispel widespread myths and demonstrate how they streamline product creation, save resources, and ultimately ensure more substantial project outcomes. We'll also discuss situations when a design system may not be appropriate for some projects.

Myth 1: Design Systems are Only for Designers

Truth: This is not the case. A design system benefits many parties, including designers, developers, clients, and product users.

benefits of design system

While it's true that designers can significantly benefit from having a design system, they're not just for designers. Frontend developers and stakeholders can save time on creating, coding, and reviewing the same old components and UI patterns each time a new page or feature gets added if they make and agree on them only once.

Equally, if not more significantly, design systems benefit users. It's no secret that customers don't like constantly learning and figuring out how things work within the same solution. Design systems contribute to making the user experience seamless and intuitive, allowing for easy navigation and interaction with the product.

In essence, design systems help teams not only develop and evolve their products but also provide a more cohesive and satisfying experience for end customers.

Myth 2: Design Systems Restrict Creativity

Truth: Design systems ensure consistency and cohesion in product design while freeing up designers to focus on unique elements. They can be customized to fit each product's needs and style, making them flexible tools that don't limit creativity.

creativity in design system

It is a common misconception that design systems stifle creativity, especially among novice designers.

Our own experience has many times affirmed that a design system is a flexible and customizable set of guidelines for product creation. The level of strictness in these guidelines varies based on factors such as the product, its size, industry, tasks, team size, and many other factors.

Examples of how guidelines for similar topics can be presented within a design system:

  1. The line width for all icons in the system must be 2 pixels.
  2. All icons in the system must have consistent line widths.

In the first case, designers are given a clear rule that all icons must have the same line width. There's no room for interpretation. In the second case, there may be more to it, and designers have more freedom to crack the guideline in a way that results in all icons being rounded, friendly, and approachable, for instance.

The fact is that design systems support creativity through the maintenance of a consistent style and appearance for live products. Without design systems, the user experience is usually poor and gives the impression that the product was built without considering the customer's needs. No matter how creative the so-called designer is.

For example, in one of our case studies, we worked on redesigning a digital product for a major US-based platform for mobilizing movements, which played a key role in the election of President Biden. The product's previous design version lacked a systematic approach. Still, with a well-defined design system in place, our designers were able to improve the usability of each CRM section while keeping creativeness in its interface elements to attract more target users. Read more in our case study.

Myth 3: Design Systems are Excessive

Truth: Many industry leaders, including Google, Microsoft, and others, use design systems as standard tools in their day-to-day work. Forrester's research result supports the idea that design systems are applicable to the vast majority of companies.

Percentage of Companies Using Design Systems

The evolution of design systems reveals the most forward-thinking companies have adopted this tool to enhance their product development. The trend of standardizing design language emerged in 2010. The digital solutions of big names like Google, Salesforce, Microsoft, and Apple quickly adopted this approach. It's no secret that they still rely on design systems for product growth and improvement.

A Forrester survey held in 2020 showed that 65% of companies use design systems in their product development process. It proves it's not just the industry leaders utilizing this tool. Given this widespread adoption, it makes sense to consider incorporating a design system into the company's development strategy to grow more efficiently.

A design system may not be a critical need for smaller and less lucrative products without current growth plans.

At Linkup Studio, we aspire to work with clients who are determined to become or remain market leaders. Even if your company is not at the top now, we still recommend investing in a well-crafted design system to drive its success.

Creating a simple design system is always an option.

Companies can start by focusing on vital elements, such as standardizing colors and creating guidelines for their use. This process can take several dozens of hours, especially for more oversized products undergoing a redesign. Prioritizing the current needs can guide the creation of essential parts of a design system.

Myth 4: Design Systems are Overpriced

Truth: Although it may cost around one-fifth of the initial budget price, it will be worthwhile in the long run. Once the basic model is created, new product components can be developed 34% faster, with a reduction of visual bugs by 70%. Establishing a design system early on is more cost-effective than rebuilding it later.

design system invoice

One common concern among clients is that establishing and developing a product with a design system takes a lot of time and, thus, money. Despite this undeniable fact, creating a design system at the right time provides a head start on benefits for businesses. It offsets all future expenses.

A study by Figma in 2019 found that when participants had access to a UI kit as a part of a design system, they completed their tasks 34% faster than without one. In the design team, we had a conference to discuss the importance and outcomes of integrating design systems into projects. Specialists shared that the number of visual bugs and inaccuracies was reduced by roughly 70%.

Additionally, a design system makes the design process more productive and allows designers to focus on the actual design work. Instead of making sure all the small details match, they can spend more time exploring new design options and coming up with innovative ideas.

Design system makes the early stages of development longer. But the final ones – faster.

At Linkup Studio, we've found that creating a design system from scratch can take up to 20-30% of the total project budget. This time investment is necessary, but we've streamlined it for efficiency. For a medium-sized product with 30-50 pages, a design system takes around 40-50 hours to create. For larger and more complex products with over 70 pages, designing and developing a design system can take about 100 hours.

It's important to know that the design system is not a one-time project. It's a living document that requires time expanses for contributing ongoing changes and maintenance to keep it up-to-date. But the benefits of such an approach are constantly realized over the product's lifespan.

Consider a design system as an intelligent investment for long-term product success.

The number of designs and product components will increase as your product grows and expands. Without a design system, the challenge of coordinating and integrating new elements with existing ones becomes more difficult. It can result in a confusing look and feel and may even require a costly and time-consuming rebuild from scratch.

With a design system, these challenges can be mitigated, and businesses can achieve better outcomes with less time and effort.

Summarizing the Reasons for Having a Design System

  • It makes creating designs and development faster and more efficient when scaling up.
  • It saves designers' and developers' time for more important issues.
  • Consistent elements boost brand identity and improve user experience
  • It allows making quick interface decisions without wasting time on unnecessary discussions and meetings.

Although end consumers may not know about such an internal document as a design system, its usage significantly impacts design and development process outcomes.

Right arrow

Frequently Asked Questions

No items found.
Share
Right arrow

Most relevant articles