Design System: Explained, Explored, and Evaluated

更新於 2024/08/29閱讀時間約 22 分鐘


raw-image


In recent years, the world of digital design has been booming! There are tons of apps and websites out there, and even more are being created all the time. These apps and websites can be complex, with hundreds or even thousands of different screens.

This raises a crucial question: “How can global businesses manage to design all this stuff efficiently, especially when they have so many employees working on different projects? Here's the secret: they use something called “Design system”!

This blog post by Lollypop will explain the design system definition, the pros and cons of using it, and even show some examples from big brands, like Apple, Google, and Microsoft. 

So, if you've ever wondered how companies keep their apps and websites looking consistent, you've come to the right place! Let's dive in! 

What is a design system?

Design system is a library of components guided by a clear set of standards, principles, and design assets. These components can be used across different interfaces and channels, eliminating the need for repetitive design work and saving time and resources on each project.  

History of design system

The root of design systems can be traced back to the early days of graphic design and print media. Back then, style guides and typographic standards were the first steps towards establishing systematic design. As branding became increasingly important in the mid-20th century, the need for a consistent brand identity led to the creation of comprehensive brand guidelines.

With the digital revolution, these early design systems were translated from paper to pixels to keep pace with the sprawling web and the burgeoning app market. Tech giants like Apple in 1987, followed by Google, IBM, and Microsoft, became pioneers in this space. They developed comprehensive design languages that would dictate the look and feel of countless user interfaces.

Elements of a Design System


raw-image


  • Component Library: Reusable UI elements like buttons, menus, and input fields that ensure a consistent user interface.
  • Pattern Library: Design system patterns for common user flows, such as sign-up, checkout, or content management.
  • Brand Style Guide: Outlines the visual representation of a brand, including Logo variations and guidelines for usage, typography system, color schemes,...
  • Brand Values: The core principles that define a brand's identity, culture, and purpose, which serve as a guiding light for all design decisions, ensuring consistency in how the brand is perceived across various touchpoints
  • Design Principles: The foundational ideas that shape the design process, ensuring functionality, aesthetics, and usability.
  • Icon Library: A collection of reusable icons in various sizes and file formats to enhance usability and interface navigation.
  • Content Guidelines: Rules for tone, style, and language of textual content, maintaining consistent and clear brand communication.
  • Accessibility Guidelines: Guidelines to ensure that products are usable by everyone, including people with disabilities, by addressing aspects like color contrast, spacing, and interactive elements.
  • Design Tokens: A shared language between design and engineering to communicate detailed information about building user interfaces. They represent design decisions, such as spacing, color, typography, object styles, animation, and other values, translated into structured data.

Check out these blogs:

Pros and Cons of Using Design Systems

Pros of using design systems

  • Streamlined Design and Development: Design system UI enables teams to quickly create and replicate UI components, reducing the need to reinvent the wheel and ensuring consistent experiences.
  • Optimized Design Resources: By leveraging pre-built elements, designers can focus on tackling more complex problems like optimizing information architecture or user flows rather than sweating the small stuff.
  • Unified Language and Collaboration: A shared design system establishes a common vocabulary and guidelines, facilitating seamless communication and coordination across cross-functional teams, even when they're geographically dispersed.
  • Consistent Brand Experience: Design systems unify the visual appearance and user experiences across an organization's products, channels, and departments, ensuring a cohesive brand ecosystem.
  • Educational and Onboarding Resource: The system's usage guidelines and style documentation serve as a valuable reference for onboarding new designers and content contributors, streamlining their understanding and implementation of the brand's design language.

Cons of using design systems

  • Upfront Investment: Implementing a design system requires a significant upfront investment of time, effort, and resources to establish the initial components, patterns, and guidelines. This can be a barrier, especially for smaller organizations or projects with limited budgets.
  • Costing time and effort: Creating and maintaining a design system is not a one-time solution. It is a time-intensive activity that requires a dedicated team and constantly evolves based on user feedback.
  • Inflexibility and Constraints: Design systems aim to provide a standardized set of components and rules. This can potentially limit design flexibility and creativity, as teams may feel constrained by the predefined elements.

Top 3 design system examples

Curious to see what a robust design system looks like? Here are a few examples of comprehensive design systems from leading companies that you can reference for inspiration as you start building your own:

Note: While these robust systems are produced by large organizations with dedicated design teams, smaller companies may find it challenging to match this level of organization and documentation right away!

1. Google Material Design 3


raw-image

Google Material Design 3 is the latest version of Google’s open-source design system, which includes in-depth UX guidance and UI component implementations for Android, Flutter, and the Web.  It provides vast design libraries of UI elements, icons, styles, and starter kits, ensuring a consistent visual language for app designers and developers

2. Apple Human Interface Guidelines


raw-image

Apple Human Interface Guidelines are a set of design principles and guidelines for creating apps and user interfaces compatible with Apple products (iOS, macOS, watchOS, and tvOS).

The  HIG includes interface design, navigation, typography, and accessibility, with specific recommendations for different devices. The HIG is regularly updated design resources like templates, icons, and user interface design elements that developers can leverage during app design. By following these guidelines, UX designers and developers can create consistent, intuitive, and user-friendly interfaces for Apple devices.

3. Microsoft Fluent 2


raw-image

Microsoft Fluent 2 is an open-source design system that works across various platforms (like Windows, Android, and iOS).  It includes hundreds of free design elements like colors, layouts, animations, icons, and typography, and offers a structured framework for designers and developers to create engaging user experiences.

You may want to read more:

Final thought

A well-crafted design system is crucial for businesses of all sizes. It allows organizations to maintain a cohesive brand identity and deliver a consistent user experience. Moreover, design systems also save business time and money by codifying design decisions that can be easily replicated at scale.

As a leading UI/UX design agency, Lollypop always includes the development of a comprehensive design system as a core deliverable in our digital product projects. This ensures our clients can effortlessly reuse and consistently apply each design component.

If you need a reliable partner to handle your product design project, we’re ready to help! Contact us to schedule a free consultation!

Frequently Asked Questions (FAQ) 

1. What drives in-house design systems creation?

According to a Material Design survey on why companies create their in-house design systems, the top 3 reasons are: 1. Best represent the company’s brand (27%); 2. Address the product’s specific use cases (22%); 3. Framework or tech stack constraints (14%)

2. What are the top tools used for managing design systems?

Also in the above survey by Material Design, the top tools used for managing design systems are Figma (25%), followed by Sketch (21%), and Storybook (17%).

3. Is design system a UI kit?

In short, UI kit is only a subset of a broader design system. While UI kit is a collection of pre-designed interface elements like buttons, forms, and icons that can be used to build a user interface efficiently. In contrast, a design system is a more comprehensive set of guidelines that govern the overall design of an interface, including not only pre-designed elements but also rules for layout, typography, color, user experience, and accessibility.

avatar-img
1會員
18內容數
We are a dedicated UI/UX design agency in Vietnam, offering design services for clients in South East Asia and everywhere around the globe.
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Lollypop Vietnam 的其他內容
The six levels of the UX Pyramid, and how businesses can address each level to deliver a more meaningful and positive user experience.
What is an on-demand app, and what are the crucial characteristics that contribute to their growing popularity?
This blog presents the 7 key UI UX design principles of mobile app development based on the guidelines established by Microsoft.
What is Web Responsive Design ? What makes Responsive Websites so popular? How to design a responsive website?
What is the UX Audit definition? When should we perform a UX Site Audit? And how does this process take place?
The six levels of the UX Pyramid, and how businesses can address each level to deliver a more meaningful and positive user experience.
What is an on-demand app, and what are the crucial characteristics that contribute to their growing popularity?
This blog presents the 7 key UI UX design principles of mobile app development based on the guidelines established by Microsoft.
What is Web Responsive Design ? What makes Responsive Websites so popular? How to design a responsive website?
What is the UX Audit definition? When should we perform a UX Site Audit? And how does this process take place?
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
This blog presents the 7 key UI UX design principles of mobile app development based on the guidelines established by Microsoft.
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
This blog presents the 7 key UI UX design principles of mobile app development based on the guidelines established by Microsoft.