Building a UI Component Design System
Learn how Uber, Pinterest, Shopify and Airbnb are leveraging components to build a consistent UI/UX design system.
Creating and maintaining a consistent UI and UX across every part of your product helps your users intuitively navigate and successfully interact with different sections of your applications without confusion.
Keeping your UI consistent between multiple sections of your product and across apps creates something even much more valuable: your brand. Branding your UX and UI is the key to making users “feel at home” while interacting with new product, increasing their loyalty and satisfaction.
Functional consistency makes your product more predictable. Users know how an element behave, and therefore will also feel more safe and secure to interact with it even on a page / screen they visit for the first time.
Visual consistency includes the colors, fonts, sizes, positions and other visual aspects of your UI which help your users cognitively identify and classify UI elements. A certain font color, for example, could be strategically used to help your users understand what they will get if they push a specific button.
In today’s ecosystem, UI components can also function as UX components, combining the power to create both functional and visual consistency.
A component-based design system can grant your applications both visual and functional consistency, helping to make your users feel at home and easily navigating their way to complete the desired interactions with your product.
Components are a great way to design and develop your UI using smaller, reusable pieces with better consistency.
Companies like Uber, Pinterest, Airbnb, Walmart, Atlasssian and many more achieve consistency in their UI through a component-based design system.
Airbnb’s Design Studio used this approach when building their design system: “Our designs should be unified platforms that drive greater efficiency through well-defined and reusable components”.
Here are some of the key advanatges of a component-based design system.
So far so good. But, how can you actually create a component-based design system on which UI/UX designers and developers can collaborate?
A UI design system is more than a component library. It’s more than the colors of your components. It’s an ever-growing and ever-evolving source of truth for the basic parts from which your entire product experience is made of.
Therefore, before implementing the first component you would have to set the styleguide and design language ruling these components. Here is a good start.
Then, these design principles should be translated into a code implementation of your components, from smaller Atoms to larger compositions.
Ideally, all your components should be organized in a single place which both designers and developers can access. This way, designers can plan and monitor the design language as it evolves over time, while developers can choose and use the right components knowing they won’t break consistency.
Bit (GitHub) is a powerful way to organize components into a visual collection where designers and developers can share and discover them.
Every components is shared into a UI catalog, and can be discovered and played with online in a live playground.
Using Bit components aren’t only made discoverable: developers can also instantly install the components in different projects with NPM and Yarn.
To breed collaboration, Bit components can also be developed right from any project using them and changes can be managed and synced across projects to make sure your UI is kept consistent without compromising dev-velocity.
Bit is open source and used by many organization to establish a component design system based on a shared catalog which is both visual and usable. Bit is open source and free for 3 collections, so feel free to jump in and give it a try.
Shopify uses Polaris, a design system that includes a react component library internally used to create a more consistent experience for merchants using Shopify. Airbnb’s component library led to a huge leap in productivity.
Pinterest uses Gestalt, a React UI component library which “enforces Pinterest’s design language.. streamline communication between designers and developers by enforcing a bunch of fundamental UI components…”.
A shared component library is an effective tool to enforce consistency across your UI. In my view, consistency shouldn’t be enforced but rather achieved.
A component-library is basically a way to enforce a bunch of UI components across every app or app-part your team is building. But, developers are limited not only to the library’s visual language, but also to its on-going development.
When a component is needed in a specific part of a specific app, it might need some adjustments and modifications. The designer and developer together should find the right balance between flexibility and consistency.
A shared library often breaks this balance and slows down development, which in turn impairs the adoption of the library itself by the development team. It also makes very little sense to enforce a huge heavy library wherever a single component is needed (let’s not go into the tree-shaking debate).
To enable designer-developer collaboration you would also have to maintain a live docs site for the components, and somehow make it editable for designers and developers (tools such as Airbnb’s react-sketchapp and Figma can help).
Here are 23 popular React UI libraries you can use out of the box, in case you choose this option. If you implement your own library, remember to leave enough design room for developers to play, without breaking the rules.
Components in a UI library can also be shared to Bit to unify component discoverability, playground and consumption, or added with tools like StoryBook to create a discoverable portal for the components.
Churchill once said that “to change is to improve” and “to be perfect is to change often”. If we enforce too strict consistency, we will stop to innovate.
As we build new things we’ll have to bend the rules just enough to allow some room for growth, but not let things slip into chaos.
Although there’s no magic here, the right philosophy, methodology and tools can help you achieve this balance between UI consistency and innovation. Here are a few useful tips.
From design perspective, not every style should be reusbale and pre-defined.
For example, a certain component (nav-bar, item etc) could have a relative size or margin compared the rest of the application. In different instances these variables might change, so it’s ok to leave some room to play.
Another useful methodology used by Uber and other teams is to separate basic / global / foundation components from “secondary” components.
For example, Uber uses primary and secondary components with more than 22 different colors and 22 values, 484 unique hues in total. More than 70 unique patterns were created — one for each of the countries Uber serves.
Designer-developer collaboration is the key to finding this balance. Some teams (like Walmart Labs) put effort into increasing the reusability of UI components themselves, bridging the gap from the developer’s end as well.
The right tooling and workflow can also go a very long way for your UI. Tools like Bit and Storybook can help to facilitate this balance.
Where there’s no choice but to break consistency, Patterns, visuals and words are a great way to give users a familiar feeling and reduce confusion. Consistent patterns, recognizable visuals and a consistent tone of voice can help your users feel safe and intuitively interact with your product.
Building a UI Component Design System
Research & References of Building a UI Component Design System|A&C Accounting And Tax Services
Source
0 Comments
Trackbacks/Pingbacks