creating apps with material design

Design systems can streamline the design and development process by providing a set of reusable components alongside principles for styling, branding, interaction, and motion.

At FullStack Labs, we leverage Google's Material Design system to design and build most of our custom web and mobile app projects. We're partial to Material Design in particular because:

It has been thoroughly researched
It is well documented
It is easily customizable
Component libraries are available for most design tools and code frameworks

Research

In early 2014, Google's top designers were tasked with creating a design language to unify the user experience across the company's product suite. In June of that year, after months of research and testing, the team released early specifications for Material Design ⁠— a paper-inspired design system, originally named Quantum Paper.

To keep up with modern user behaviors and the ever-changing device landscape, Google's Material Design team has continued to iterate and update the system since it's initial release. This is an incredibly valuable time saver for teams - like ours - who employ Material Design. Instead of devoting resources to research and spec-writing, we are able to take advantage of the research and spec-maintenance manpower of a company of Google's size.

Documentation

Today, Material Design has arguably become the most well-documented, publicly-available design system in the world. At material.io there are detailed guidelines describing everything from the styling of button hover states, to the handling of data visualization. Components are thoroughly documented in plain English, and many descriptions include visual references and best practices. The comprehensive documentation of components allows designers and developers to discuss UI with shared language, and ultimately leads a project implementation to more closely match the prototyped design.

An example Material Design spec with information on the behavior of dialogs.

In addition to component descriptions, the documentation provides the design principles and philosophies that guide the overall system. Designers are able to use this information to create new components that still fall within the spec guidelines.

Customization

Many designers and business owners are concerned that adopting a design system will unnecessarily constrain an app's aesthetic or it's feature set. We have rarely found this to be the case with Material Design, as it's components are flexible enough to support almost all branding and feature requests.‍

Theming and Branding‍

Worried your app will look like a Google product? Although Material Design's guidelines provide theming suggestions, ultimately the fonts, colors and icon styles are left up to the designer, and can be customized to give your app a unique look and feel.

Customized Components

There is a high level of flexibility built into Material Design's components, but occasionally an app will require a specific page element that cannot be easily created with a Material base component. When this happens, our team is able to reference the system's overall design principles to supplement the existing component set with custom components.

Take a look at some of the projects our team has designed and built using Material Design.

A transportation management platform making it easier for shippers to rate, tender, track and invoice shipments.

An app providing lenders and borrowers the opportunity to manage loans on-the-go.

A continuing education app allowing medical professionals to efficiently complete coursework on their mobile device.

Compatible Libraries

As the popularity of the Material Design system has grown, so has the collection of design and code libraries with components pre-built to Material Design specs. Some of the most popular are:‍

Design Libraries and Resources

Figma: https://www.figma.com/resources/assets/material-design-themeing-ui-kit/
Sketch: https://materialdesignkit.com/
Adobe XD: https://xdresources.co/resources/material-ui-kit
Axure: https://forum.axure.com/t/material-design-widget-library-for-axure-9/56296
Framer X: https://store.framer.com/package/google/material-design
Adobe After Effects: https://material.io/resources/motion-sticker-sheet/#02

Code Libraries and Resources

Google's Official Material Web Components: https://material.io/develop/web/
React: https://material-ui.com/
React Native: https://github.com/codypearce/material-bread
Vue: https://github.com/vuematerial/vue-material
Angular: https://material.angular.io/components/categories
View More: awesome-material-design

We leverage a variety of these libraries in both our design and development processes to significantly increase the efficiency of our workflow. Instead of painstakingly creating each Material Design component from scratch, our design team is able to reference a library of pre-built components. Designs can then be handed off efficiently, as both the design and development teams are able to use the same language to discuss UI elements, and can reference a single source of truth - the Material Design spec. After handoff, our developers can rapidly build out the frontend with the help of a Material Design code library. Because the components already adhere to the spec, the customization required to implement the designs is minimal.

---

At FullStack Labs, we use Google's Material Design system to efficiently design and build custom software. Interested in learning more about speeding up design and development time on your project? Contact us.

Samantha Spargo

Written by

Samantha Spargo

I'm a mission-driven, multidisciplinary designer with an innate aesthetic sense, and a curiosity for people and their problems. At FullStack Labs I spend time helping clients bring their ideas to life, using our proven, step-by-step design sprint process. I hold a BA in Design from UC Davis.