Defining what a Design System is isn't the easiest thing to do. A design system depends on the purpose and goals of a team and brand.
"A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product." -Alla Kholmatova
This quote by, Alla Knolmatova is a great overall definition of a Design System. We also get a pretty good idea of what a design system is simply by the definition of a system, which is a set of principles or procedures according to which something is done; an organized framework or method.
My interest in Design Systems came naturally due to my love for organization, meaningful documentation, and scalable solutions. I took a deep dive this past year and also presented a talk distinguishing similarities and differences of design systems for the Kansas City Developer Conference titled: "Web-Centric and Native Design Systems: How Different Are They?"
Part of this talk touched on elements of a Design System. Being an introduction and overview talk, I wanted to create a relatable comparison to these elements with something everyone already knows and loves - PIZZA!
Before we get started on the pizza analogies, let's touch on some design system benefits.
Benefits of a Design System
These are just a few benefits of using a Design System.
Design Systems bring order and consistency to your product and team.
- Establishing patterns and principles to prevent reinventing the wheel and solve problems consistently.
- Ensures collaboration between designers and developers with a single source of truth.
- Provides clarity on design principles, purpose, and iterative improvements.
Consistency
Consistent style guides across different apps strengthen brand recognition. Users associate the same style with the brand, enhancing usability and recognition.
Scaling
They are also crucial for maintaining consistency and efficiency as products scale. Design Systems create a centralized location for UI and other design elements
Quality
Testing code, components, and tokens within a Design System ensure that there will be fewer quality issues when those elements are used for your products.
Resource Saving
Design systems help by saving development time by utilizing reusable components. They aid developers by helping them focus on complex problems, avoiding disorder and bugs.
New team members can explore established Design Systems for inspiration and learning.
Building upon existing ideas while creating a unique identity for your product.
Streamline Processes
Having shared terminology and vision for an entire product team including design, copy, development, program managers, etc is incredibly important. This ensures that as a team there's no question as to what our brand values and expected outcome are for our product.
Documentation
Good documentation is crucial for any project. Design systems ensure comprehensive documentation. This helps new project members onboard quickly and understand your system and processes.
Build Upon Existing Design Systems
Design Systems are iterative and versioned to create a system that can be improved upon, enhanced, and up-to-date with the newest technologies available.
Governance
A design system gives you guidelines on what you can and cannot do with your brand identity.
Now it's PIZZA TIME!
Design System Elements
When considering the order of design system elements, it's important to note that there is no one-size-fits-all approach, and the order may vary based on the specific needs and priorities of your design system.
Throughout these definitions and comparisons to pizza, I'll also add links to IBM's Carbon Design System for examples for each section.
When defining each of these design system elements, I'll compare it to a pizza-making analogy.
Brand Values
For our first example, Brand Values could shape the unique characteristics and flavors associated with a particular pizzeria. For example, a pizzeria that values authenticity might focus on traditional Italian ingredients and cooking techniques - while a pizzeria with a modern brand might experiment with innovative toppings and flavor combinations such as this pineapple, onion, olive, and corn pizza.
Start your Design System by establishing and defining the Brand Values. These values serve as the foundation for the design system and inform the overall visual identity, tone, and personality of the brand. Brand Values give our design system its unique character, setting it apart from others and providing us with a clear direction.
They aid in creating a Visual Identity. Brand Values guide the selection of colors, typography, and imagery, creating a consistent and cohesive look and feel.
Brand Values define how we communicate with users, whether it's playful, sophisticated, or a mix of both by setting a tone and voice.
Helps to establish a meaningful connection with users, evoking the desired emotions using the before mentioned tones and voice to build a purposeful bond.
Brand Values set us apart from the competition, making our design system strong, unique, and memorable.
IBM Carbon Design System Brand Values (Typography Example)
Accessibility
In the context of pizza, Accessibility guidelines would involve considering dietary restrictions or the preferences of customers.
For example, offering gluten-free or vegan options ensures that individuals with specific dietary needs can enjoy pizza without limitations. It involves catering to a diverse range of customers, just like Accessibility considerations in design systems aim to provide an inclusive user experience.
It's important to consider Accessibility early in the design system process. Accessibility should be integrated throughout a design system to ensure that it meets the needs of all users, regardless of disabilities or impairments.
When designing and developing a design system with Accessibility in mind, here are some common Accessibility guidelines and considerations that should be incorporated:
- Making all interactive elements keyboard accessible for seamless navigation and interaction.
- Proper HTML structure and headings for Accessibility. For example, utilize heading elements such as H1, H2, and H3 headers in order, to establish a logical hierarchy.
- Using ARIA labels helps to improve a user's comprehension of custom components and interactive elements when using tech assistance.
- Include descriptive alt text for images, icons, and other visuals that aren’t solely decorative to convey their purpose or meaning to users who cannot see them.
- Maintain readable content for users with visual impairments by ensuring adequate color contrast between text and background elements.
- Include captions or transcripts for multimedia content like videos and audio files.
- Ensure a consistent and predictable layout and navigation structure.
- Provide a visible focus indicator for interactive elements when they are active.
IBM Carbon Design System Accessibility Considerations
Design Tokens
Design Tokens in our pizza analogy would be the standardized measurements and ratios used in our secret recipes.
Just like Design Tokens define the visual properties in a design system, tokens in pizza-making could include specific measurements for ingredients such as cups of flour, teaspoons of yeast, grams of cheese, and dashes of spices. These tokens ensure consistent proportions and flavors in the pizza.
Design Tokens are the foundational building blocks of our design system. They are small, reusable pieces of design information that represent visual properties such as colors, typography, and spacing.
IBM Carbon Design System Design Tokens
Components
In the context of making pizza, Components would be similar to the individual ingredients that come together to create the final pizza product.
Design Components and Mise en place are surprisingly very similar!
Just as a chef prepares ingredients ahead of time to make building the pizza more seamless - We use design tokens to build Components.
Examples of Components for pizza could include dough, sauce, cheese mixes, and toppings. Each component plays a specific role and can be combined in many different ways to create various types of pizza.
Components are reusable UI elements that ensure consistent design and functionality across the product. Examples include buttons, forms, navigation bars, cards, and other building blocks. They promote efficiency, reduce redundancy, and maintain design and interaction consistency and predictability. Components streamline collaboration, enable scalability, and uphold brand identity.
By utilizing design Components within a design system, designers and developers can create interfaces more efficiently, maintain consistency, and improve collaboration across teams working on the same project or brand.
IBM Carbon Design System Components
Patterns
Pizza-making also involves Patterns that help achieve consistent results.
For instance, the process of stretching and shaping the dough into a round shape, spreading sauce evenly, and layering toppings in a specific order can be considered Patterns. These Patterns ensure a consistent pizza-making process and a predictable outcome.
Patterns are reusable design solutions that can be applied to different parts of a product or sections of a page.
Using established Patterns saves time and effort by providing ready-made solutions to common design challenges. Designers can streamline their processes and create efficient designs.
Patterns are informed by user research and testing, ensuring they meet user needs and preferences. By incorporating proven Patterns, designers can enhance the overall user experience.
IBM Carbon Design System Patterns
Style Guide
The last step in our pizza analogy is a Style Guide. This would be similar to a recipe book or a set of instructions that provides guidelines for making pizza.
It would include details such as the preferred type of dough, recommended cooking temperature and time, specific sauce recipes, and guidelines for selecting toppings.
Your recipe book or pizza Style Guide helps maintain consistency in the pizza-making process and ensures that pizzas adhere to an expected style or brand.
Think of a Style Guide as the blueprint for a specific building, it provides a framework for maintaining consistency in the visual identity and user experience across various applications, platforms, and touchpoints.
Overall, a Style Guide serves as a reference and resource for designers and developers working with a Design System. It ensures consistency, clarity, and efficiency in the implementation of the visual and design aspects of a product or brand.
IBM Carbon Design System Style Guide
This is just a taste (no pun intended) of what Design Systems have to offer.
I hope that this comparison has helped Design System elements resonate with you and helps kick off your own deep dive into Design Systems!
Top comments (0)