At Fishermen Labs, we are often tasked by clients to develop and design interactive experiences and products that support our clients’ vision by reaching target audiences and delivering business outcomes. In today’s fast-paced digital world, where user experience is paramount, creating a cohesive and consistent interface across your mobile app is essential. Design systems offer a structured and efficient approach to achieving this goal.
What is a Design System?
A design system is more than just a collection of UI elements. It’s a comprehensive library of reusable components, guidelines, and principles that guide the design and development of a digital product. It ensures consistency in visual style, interaction patterns, and overall user experience, a point underscored by Dentsu: “Consistency is king when it comes to design systems… Yet, it’s not about static consistency; design systems must be flexible in their approach and be able to evolve over time without unravelling.“
Why Design Systems are Crucial for Your Mobile App Project
- Consistency is Key: As the number of devices, browsers, and environments continues to increase at a staggering rate, Brad Frost’s words in “Atomic Design” ring truer than ever: “…the need to create thoughtful, deliberate interface design systems is becoming more apparent than ever.” A design system ensures your app has a unified look and feel across different screens and devices, enhancing user satisfaction.
- Efficiency & Speed: Reusable components and established guidelines streamline development, reducing redundancy and accelerating time-to-market.
- Scalability: Design systems make it easier to evolve your app over time. New features can be seamlessly integrated while maintaining overall consistency.
- Collaboration & Communication: Design systems bridge the gap between designers and developers, ensuring everyone is speaking the same language.
When to Question a Design System
While design systems are invaluable, they’re not always a one-size-fits-all solution. Here’s when you might think twice:
- Highly Unique Design: If your app’s aesthetic is exceptionally distinctive or experimental, a pre-built system might be restrictive.
- Small-Scale Project: For simple, one-off projects, the overhead of implementing a design system might outweigh the benefits.
Where to Find Your Perfect Fit
To start your search, explore the extensive collection of design systems on Adele: https://adele.uxpin.com/
Our Evaluation Criteria
For a recent project, we evaluated several systems based on these key criteria:
- Active Open Source Community: We looked for systems with a few thousand stars on GitHub, recent commits, and responsive maintainers.
- React Support: Our project required React compatibility.
- Permissive Licensing: MIT or Apache 2.0 licenses ensured usability.
- Trustworthy Backing: We prioritized systems with backing from reputable companies.
Open Source Licensing: Choose Wisely
Open source licenses (like the permissive MIT or Apache 2.0 licenses) are a cornerstone of the design system landscape. They allow you to freely use, modify, and distribute the software, making them an attractive option for many projects. However, it’s crucial to understand the specific terms of each license to ensure they align with your project’s requirements. Key points to consider include attribution requirements, permissions for modifications, and any limitations on commercial use.
The Finalists
After rigorous evaluation, these systems emerged as strong contenders for our recent project and survey of design systems
- Pinterest’s Gestalt: https://github.com/pinterest/gestalt
- Ant Financial’s Ant Design: https://github.com/ant-design/ant-design
- Material UI: https://github.com/mui/material-ui
- IBM’s Carbon: https://github.com/carbon-design-system/carbon
We further analyzed each system based on our specific aesthetic goals, component availability, documentation quality, Figma templates, and compatibility with our development stack.
Validating Your Choice
It’s essential to test-drive the system before committing. Implement a few user stories or a “tracer bullet” to validate its effectiveness in your context. Test on all targeted platforms, including older devices and even newer immersive environments like the web browsers on Meta Quest 3 or Apple Vision Pro.
The Discovery Process at Fishermen Labs
At Fishermen Labs, design system selection is often an outcome of our comprehensive Discovery process. We believe in crafting delightful interactive and immersive experiences for our clients, and as Dentsu highlights, “The benefits of a modern design system extend far beyond mere aesthetics… Serving as the language of the brand, design systems are a way to express identity and values across various digital platforms.” The right design system is a cornerstone of that approach.
Final Thoughts
It’s worth noting, as Forbes points out, that “The concept of a design system—once called a style guide or pattern library—has historically been undervalued and seen as optional.” However, the increasing complexity of the digital landscape has made design systems an essential tool for creating successful and scalable mobile applications.
