Design System: Explained, Explored, and Evaluated

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

• 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:

• Understanding the role of culture in website and app localization
• Language barriers: How we localize UX content in Asia Pacific Region

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

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

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

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:

• Service Design - How does it differ from CX and UX design?
• What is Responsive Design? How to optimize Responsive Web Design?

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.