The world of design systems is vast and complex. To navigate it effectively and create outstanding products, it’s essential to understand the foundational concepts
A system is a set of interconnected elements that form a unified whole (Checkland, 1999). It comprises three main components:
1. Elements.
2. Interconnections.
3. Function or Purpose.
Using a systemic approach allows for a holistic understanding of behavior and human factors intervention (Jones, 2014).
Although systemic design and systems thinking share similarities, they are distinct concepts.
Systemic design is an interdisciplinary approach that integrates the relationships and connections between various agents. It’s a process aime solving problems to achieve sustainable impact on a large scale. This approach recognizes that the context is complex and dynamic, and that the environment influences elements, interconnections, and functions in user experience. Systemic design thinking can be applied throughout the design process, resulting in complex models interconnected among different agents, as demonstrated in the following example.
Understanding systemic design is crucial for creating design systems, as it forms the foundation. However, design systems are primarily implemented in visual and interaction design practices. They consist of a set of standards for managing and scaling designs using reusable components, thereby achieving consistency and efficiency across a company's digital products.
Standardizing elements such as input boxes, dropdown lists, menustructures, breadcrumbs, and brand colors can significantly reduce the time required to create high-fidelity wireframes. This standardization fosters better synergy with the development team. Effective communication between design and development teams can transform the design and development process, enabling faster delivery.
By embracing a systemic approach and implementing robust design systems, you can create exceptional products that are efficient, consistent, and impactful.
Creating design systems involves a systematic approach to ensure consistency and efficiency in design. I always begin by understanding the overarching goals and needs of the organization. I try to collaborate with stakeholders to define what the design system should achieve, considering factors such as brand identity, user experience, and scalability. This process includes researching best practices and analyzing existing systems for inspiration. It's crucial to establish a solid foundation by outlining the scope, setting clear objectives, and aligning with the broader vision of the project or company.
Understand which are the main components
Identifying the main components of the design system is essential. These typically include typography, color palettes, spacing, grid systems, and UI elements like buttons, forms, and icons. Consider both atomic elements and more complex patterns that frequently appear across digital products. By categorizing and documenting these components, I create acomprehensive inventory that serves as the building blocks for my designs. This step ensures that every element is standardized, promoting consistency andease of use.
Organize and evaluate
Once you have identified the key components, the next step is to organize and evaluate them. Create a structured framework that categorizes each component logically. I use design tools and documentation platforms to catalog these elements, making them easily accessible to the team. Regularly I evaluate the components to ensure they meet the design and functionality requirements.
Choose the approach
Choosing the right approach for the design system involves deciding between a top-down or bottom-up methodology. A top-down approach starts with high-level design principles and gradually breaks them down into smaller components. In contrast, a bottom-up approach begins with detailed elements and integrates them into a cohesive system. Consider the size of your team, the complexity of your products, and the existing design culture when selecting an approach.
Define principles
Defining principles is a critical step in creating a design system. These principles serve as the guiding tenets that inform every design decision. Principles may encompass aspects such as accessibility, inclusivity, simplicity, and consistency. They help maintain a coherent vision and ensure that all components adhere to the same standards. I always document these principles clearly and I share them with my team to foster a shared understanding and commitment to the design philosophy. Strong principles act as the backbone of asuccessful design system.
Design components
Designing components involves creating detailed, reusable UI elements based on the defined principles. I Use design tools to create each component, ensuring they align with the established guidelines. I Focus on creating versatile elements that can be adapted to various contexts while maintaining consistency. I also pay attention to details such as states, interactions, and responsiveness.
Build and maintain the library
Building the library involves compiling all designed components into a centralized repository. I use version control and design management tools to organize and maintain the library. The most important thing is to ensure it is easily accessible to all team members, providing clear documentation and usage guidelines for each component. The library should be a living resource, regularly updated with new elements and improvements. Maintaining the library is an ongoing process that ensures the design system remains relevant and effective. Regularly review and update components to reflect changes in technology, design trends, and user needs. I frequently encourage feedback from users and team members to identify areas for improvement. Maintenance also involves monitoring the adoption and usage of thedesign system, providing training and support as needed. A robust maintenance strategy ensures the longevity and success of the design system.
