Building a product with a small Team? Use Material UI
Building up a design system from scratch is a daunting task, and especially in early stages where time, money and other resources are scarce. To move fast and get your idea out there quickly, you might rely on an open source library that can speed up the design and development process tremendously. There are plenty of libraries out there, but in this article, I am going to talk about the well thought through Material Design System from Google — and why to bet on them.
When I started my new job as a product designer earlier this year, I joined a startup that didn’t had a designer yet. They were building their software by best means with one product manager and four developers. A good choice they made early on was — to use the open source Material UI library. So, on an atomic level, they already had solid foundation. Let’s dive into the advantages of this library.
But first — what is Material Design? It is Google’s design language introduced in 2014. It is inspired by real world behaviour like light, elevation and shadows. All these elements are reflected in Material’s design language. Google quotes it as: ”Material surfaces reimagine the mediums of paper and ink.”. There are 2 parts when it comes to Material. The first one is Google’s design documentation, guidelines, resources, plugins and their open source code for various platforms. Everything that comes from Google, can be found on their official website.
Besides that, there is the crowd-funded open-source project that is building and maintaining a UI component library in react. All of their components are based on Material’s design language and published under the MIT License. So let’s dig deeper into the main advantages of the library and the resources.
1. Save Time
As I already mentioned, building up a design system from the ground up, consumes a lot of time. Before joining the small startup I am currently working in, I worked for a much larger organisation that was designing and maintaining their own system — and it wasn’t easy. Getting all stakeholders together and craft a cohesive language across multiple teams, requires a lot of organisation and communication. All these inconveniences can be spared by using an already designed and developed system. By the way, Adobe has a very good article on how they are maintaining their system at scale: Jamie Myrold of Adobe: Design Systems Are a Journey | Adobe XD Ideas
2. It’s Holistic
Material UI not only comes with a set of react components, but also with icons, colours, type and so forth. All these resources were released by Google under the Apache 2.0 license, that means — they are also free to use. Having a already huge set of icons, a modern typeface like Roboto and a huge colour set at hand, gives you the ability to jump right into designing and building your product.
3. Tools and Assets
All these Material resources I was talking about, come with assets for Sketch, Figma and Adobe XD. Back then, I used the Theme Editor Plugin from Google. It was developed for Sketch and gave you the ability to directly generate your Material Component library and adjust it to your brand. Google retired the Plugin and created the Gallery Plugin, that lets you publish your themed library and share it with your peers. Quite similar to the capabilities of Sketch Cloud. Nonetheless, the asset files for your favourite design software are well organised and give you everything at hand to focus on designing the product. On the Material page, you can also find tools to generate your type scale or your personalised color palette, so that you can easily bring your unique brand identity into the library.
4. Design and Component Guidelines
Google Design already has a huge impact on the design community, and with their sophisticated documentation and guidelines, they are providing a goldmine of knowledge to every aspiring designer. When I was new to product design, I read through their entire documentation. It starts from foundational knowledge to every component in their system. Whenever I got stuck or was not sure about some best practises, I always come back and take a look at their guidelines. I just recently read an article of how they once tested their input fields with staggering 600 participants. So, all their guidelines and components are based on in-depth research and can be confidently applied to your project. You can read the study here.
5. The React Library
There are also some major technical advantages to the react library as well. React is a Javascript library maintained by Facebook. The components are self-supporting, they don’t rely on global styles and they can easily be themed. The foundation is continuously updating their library and providing a well written documentation. The foundation laid out their vision for the library like this:
- Deliver on fully encapsulated and composable React components.
- Support theming and customization.
- Cross browser compatible and accessible.
- Promote a developer community and an environment where you can learn from each other.
The full vision behind this project and more about the foundation can be found here:
Conclusion
Whether you’re working in a small startup or you’re developing and designing a side project, Material’s UI Library is always a good choice. Not only small startups, but also big names like Bethesda are betting on the library. Material’s UI is a great way to speed up the product development process, not only from a technical standpoint, but also from a designer’s standpoint. All the components and guidelines were developed thoughtfully and are free to use. What do you think about Google’s design language and the react library? Please let me know your thoughts.
Let’s connect:
