How I Build Design Systems
In my approach to building design systems, I find the LEGO® analogy particularly effective. It vividly highlights the importance of following guidelines and leveraging modular components to achieve consistency across multiple devices, brands, and platforms.
Super Mario Design System
In the example below, I used Super Mario characters to illustrate how I construct a multi-brand Design System. The Design System follows the Atomic Design process, allowing all elements (akin to “Legos®”) to adapt to different brand colors, typography, breakpoints, devices, and more. These “Legos®” serve as the foundational building blocks for components, which can then be customized to create larger molecules and organisms that eventually become reusable components “characters” that inherit the brand’s specific attributes.
What Guides My Design
-
Consistency is Key
Consistency is a fundamental principle of my UX design process. From my experience, it helps users navigate and interact with the product more easily. Below are some guidelines I follow to ensure a consistent user experience:
Color: Use a consistent color palette and typography throughout your product.Pattern: Follow established design patterns and conventions. (NNG Group & Baymard)
Spacing: Ensure consistent spacing and alignment of elements.
Copy: Use consistent terminology, labels, and copy to ensure users recognize your brand.
Responsive Design
With the increasing use of mobile devices, responsive design is crucial. It ensures that the product adapts to different screen sizes and devices. Here are some guidelines for responsive design that I practice daily:
Fluid Grids: Use fluid grid layouts that adapt to different screen sizes.Flexible Images: Ensure images scale and adjust within their containers.
Touch-Friendly: Design touch-friendly interfaces with appropriate touch targets.
Viewport Meta Tag: Use the viewport meta tag to control layout on mobile browsers.
Breakpoints: Define breakpoints where the layout changes to accommodate different screen sizes.
Typography: Use scalable typography that adjusts to different screen sizes for readability.
Testing: Test designs on multiple devices and screen sizes to ensure responsiveness.
-
I follow these key principles of effective UI design which helps me contribute to creating visually appealing and user-friendly interfaces.
Consistency: Ensure consistency in visual elements, typography, and interaction patterns throughout the interface.
Simplicity: Keep the interface simple and intuitive, avoiding unnecessary complexity and clutter.
Hierarchy: Establish a clear visual hierarchy to guide users' attention and prioritize important elements.
Color and Contrast: Use color and contrast effectively to create visual interest and enhance readability.
Whitespace: Utilize whitespace strategically to create breathing room and improve visual clarity.
Accessibility: Ensure the interface is accessible to users with disabilities, following WCAG guidelines.
Feedback: Provide clear and timely feedback to users to confirm their actions and guide them through the interface.
Responsive Design: Design interfaces that adapt seamlessly to different screen sizes and devices. -
Design for Everyone
Accessibility is at the foundation of my design process. It is important to me to ensure inclusivity for all users and keep the company safe from fines and legal action.
• Provide alternative text for images
• Ensure color contrast meets accessibility standards
• Provide keyboard navigation
• Color contrast checkers: WebAIM Contrast Checker, Color Contrast Analyzer
• Utilize AI tools to scan my designs in Figma -
Throughout my design career, it's been helpful to follow other design advocates who are experts in the field and share their knowledge, insights, and best practices to help improve the craft. By subscribing to design advocates, I’ve gained access to a wealth of resources and guidance that has enhanced my design process and elevated the quality of my work far beyond my imagination. I can stay current with the latest UX/UI design trends and advancements.
