A few months ago we were presented with a challenge to create a detailed matching service. The route chosen was to match a human to a pet that truly fit their lifestyle needs in terms of data points that are often overlooked such as time constraints, training abilities, or monetary limits. The start of this work coincided with the release of Google’s new Material Design visual language. We jumped on the chance to create this matching platform using Google’s Material Design as it demonstrated a consistent and visually pleasing design language and we were intrigued by the tools it provided.
We then built Pet Story with Google’s Material Design and got to see first hands its strengths and current limitations. The result was something we were excited about.
Google’s Material Design uses Sketch’s plugin and library features to its fullest extent
I’ve used plugins and libraries in Sketch before. They have always been incredibly useful for creating a unified design over multiple platforms and projects or exploring others’ UI breakthroughs. The Material Design plugin for Sketch is one of the most extensive systems I’ve seen so far. Honestly, it’s huge. There are hundreds of assets that are easily editable. Being able to use their theme editor to easily change the color palettes and typography is incredibly useful. Seeing these updates live in Sketch using their Theme Editor under the “Material Theme” page makes figuring out how all your design decisions flow together a rather nice experience.
While an extensive experience, these Material Theme edits are still limited. The Material Design website showcases their “Material Studies,” various examples of how the same platform can create a wide variety of sites and apps, with varied goals and focuses. While beautiful, some of these designs are not yet attainable. Rally in particular has a primary color theme that uses an additional 5 infographic colors. Easily adding these colors through the Theme Editor are not yet possible. Rally also showcases data tables, which are not yet available either, but should be in the future.
Another current limitation is paragraph formatting. While changing fonts is easy, changing their alignment, layout, and format is not. While frustrating for the nitpicky, this actually ensures that each design element is as readable as possible. This is fantastic for mobile design, you don’t have to worry about ensuring that you have the proper text size for your app, it’s built in. This is a limitation for desktop design, as the needs for layout and formatting are different. Sometimes a specific font needs a different leading to be as readable as possible. When you’re working with as much space as you are in desktop design, you need that flexibility.
There’s more to come as well. I’m sure that as google continues to update their plugin these libraries will expand significantly. When it comes to sifting through the many options they include a nice layout within their symbol library under “Material Components”, breaking down each subcategory for easy reference. Really take your time to look at these so that you aren’t overwhelmed when you try to look for what you need to insert from your symbol library.
Using mobile assets for desktop design
The Material Design plugin for Sketch has shown to be extensive and pliable, however it’s not done yet. The current iteration is obviously only for mobile design. Despite this and with quite a bit of edits to the library symbols, we were able to create a desktop website using material.io to create a design we were quite happy with. On their site, Material Design showcases how well their materials transition between mobile and desktop, but those assets don’t exist yet. To create our site design, I went in and edited all the the symbols based on the specs listed on their site to fit a desktop design. This took time, but having the specs listed made the process straight forward once I figured out that it was necessary. I imagine that future iterations won’t have this issue.
Google’s Material Design in the future
Google’s Material Design is currently a wonderful visual language with easily accessible tools for creating clear and aesthetically pleasing mobile UI. To create something that is truly unique and creative, or to even create something for desktop, takes a little bit of elbow grease. However, this is an early version of the plugin and more updates are on the way.
In time, this may become an industry standard tool that makes creating apps and programs a streamlined and accessible process. Check out Google’s Material Design here!