Designing and Building Apps with Material Design

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.

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.

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.