Design System
for UI styling guide
-
Articulating design decisions
-
Balancing consistency and flexibility
-
Adapting evolving trends
-
Ensuing scalability
Background
We've tackled each UI challenge by using various components that appeared suitable at the time. However, as the number of apps grows, the need for a UI guideline becomes crucial to ensure consistency and promote reusability.
Requirement
The system must offer clear styling guidelines while retaining flexibility for variations. It serves as a centralised resource, fostering collaboration between designers and developers for efficient and cohesive creation.
Challenges
Creating a UI design guideline system involves challenges such as articulating design decisions, balancing consistency with flexibility, staying adaptable to evolving UI trends, and ensuring scalability.
Concept Development & Validation
Design Goal
A comprehensive framework that is easy to follow and can aids designers and developers to find the right components for the projects.
Working closely with developers 👩💻
At the start of the project, I teamed up with developers to sift through the entire UI component library, identifying and distilling universal styling and patterns that could be applied across projects. After a few iterations, we came up with a set of base components that can be adjusted as needed.
Initial draft of data table
Articulating design decisions
Clearly communicating the reason behind design decision, such as the choice of specific UI components and styles. I came up with a few ideas helping designers and developers to find suitable components for specific UI requirements:
Checklist
We came across the Checklist Design and found it very helpful. We wanted to create something similar for each component to ensure that every component applied meets all the criteria.
Checklist for buttons
Decision Tree
I've found decision trees to be incredibly useful, especially when dealing with complex questions like whether to use a checkbox, radio button, dropdown select, or pills. Each component may be the best choice in certain situations but not ideal in others. My goal is to create a straightforward decision tree to assist designers and developers in easily finding the most suitable component for their needs.
Example of Component Finder
Balancing consistency and flexibility
We strive to maintain brand and styling consistency across UIs, while actively promoting flexibility to accommodate diverse design requirements and variations. Each component comes with styling guidelines, offering a framework that allows room for creativity. For instance, we've crafted various dropdown select styles tailored for different UIs based on specific requirements.
Various dropdown select styles
Adapting evolving trends
Keeping up with design trends is an ongoing challenge, requiring constant awareness to keep our guidelines up-to-date. We've chosen rounder edges for our components to make interfaces look friendlier and less cluttered. This change, especially noticeable in data tables, has received positive feedback from users, enhancing overall aesthetics and user experience.
Previous and current data tables
Results
Future Development & Takeaways
The styling guide is currently in prototype form and not a fully functional website. It would be beneficial to incorporate the following features:
-
Collaboration:
Enable every team member to create, edit, and comment. Include a link to the base components.
-
Search and AI:
Integrate a search function and AI for component recommendations.
🎓 What I've learned:
-
Provide clear guidance:
When users are presented with numerous components, providing aids to assist in finding the appropriate ones will be beneficial. Implementing a quiz is not only a fun approach but also a time-saving alternative to browsing through each component.
-
Make the experience fun and engaging:
Explaining when to use what component and why is easy, but making the experience efficient and engaging is tricky. We aim to create a tool that's both fun and helpful, guiding users to explore potential solutions through interactive questions. Both the checklist and decision tree-style quiz require user input to proceed and generate the results, adding the gamification touch has received positive feedback from users.