Designing and Building Apps With Material Design

Brian Smith
3 min readSep 28, 2019

--

At FullStack Labs, we use Google’s Material Design spec to design and build most of the apps we work on. Material Design is a framework of design patterns and components that that unite style, branding, interaction, and motion with a common set of principles.

Google began developing the spec in 2014 using more man(or woman)power than any other company in the world possibly could, and based the spec on more real-life experience than you could imagine. With that in mind, Material has become one of the most well document and tested design specifications ever. We all know that what is new today will be old and dusty 5 years from now. Luckily, Google continually updates and enhances the spec to reflect modern user behaviors. (View Details of the 2018 MD updates)

When designing apps, we are able to create high-fidelity prototypes quickly by using a library of design components that comply with the Material Design specifications. Our development team uses code libraries that are built with the same principles that the design team is prototyping with. This unification of design patterns and web components allows for a highly efficient workflow. We regularly implement the “Material-UI” library because of its compatibility with React and React Native.

A sampling of Material Design components we use.

The principles of Material Design include iconography, typography, responsive layouts, onboarding, and how to introduce users to new features. Each principle is thoroughly documented with do’s and don’ts for a solid user experience.

Examples from the Material Design documentation.

But what if Material Design doesn’t support a feature you need? Well, we’ve found that rarely to be the case. The Material Design documentation is extensive already and continues to expand each year it is around. In the case that you truly need something that the spec doesn’t mention, we design a custom component using the overarching principles of Material Design.

But won’t my app just look like Google? If used properly, your app will look top notch, highly functional, and represent your brand well. Don’t believe us? Have a look for yourself at some of the designs we’ve created using Material Design.

An office space rental platform for SpaceMX.com
A dashboard for managing Ekso’s robotic exoskeleton use.
A marketing collateral design editor for LRESocial.com

Interested in building an app with Material Design? Drop us a line. We’d love to hear about your next project.

Link Dump:

--

--