I’ve recently been building two prototype user interfaces, one for a mobile app the other a web-based dashboard. The mobile app prototype was built using a combination of Sketch and Apple’s Keynote presentation software. The dashboard had higher fidelity—a functional HTML/CSS/Javascript prototype interfacing with a light-weight JSON API.
I used this as an opportunity firstly to wrap my head around some of the design patterns for iOS 11, but also for trialling Google’s Material Design guidelines for this purpose.
There’s a lot to like about Material Design, especially for startups looking to develop a Minimum Viable Product.
What is Material Design?
Material Design is a responsive (meaning it works across different types and sizes of devices) user interface design style, approach, and guidelines. It has been developed and popularised by Google across their software products, but is widely used by other vendors also. If you’ve used an Android-based phone or tablet, or Gmail, Google Maps or G Suite products, you have experienced Material Design first hand.
[Google Inbox](https://inbox.google.com) is a product that employs the Material Design philosophy
Portable
When I designed the iOS-based version of the mobile app prototype, it quickly became clear that this wouldn’t translate onto an Android-based device, nor as a web application. We’d therefore be designing with iOS specifically in mind, and would have to come up with an alternate design for other platforms.
However, the Material Design variation looked great on iOS, but also translated well onto the web. In my opinion, Google has done a great job of designing something that not only looks good, but importantly feels at home across multiple platforms, which is no mean feat.
Apart from the visual “look & feel” there are other aspects of the Material Design approach that translate well across form factors. The cards component, and the “drawer” metaphor for navigation, are just two examples. These patterns are ideally suited to responsive layouts, enabling fairly rapid development of fully responsive designs.
Pattern-based
As part of my initial discovery process I took a moment to find some inspiration, searching for examples of iOS apps via Pinterest and Google image search. I found a huge amount of variability in how styling and UI devices are used across different apps. Even within Apple’s own examples, I felt there wasn’t a huge degree of consistency.
Looking at examples of Material Design UIs, however, I found there’s a much greater degree of consistency, and the Material Design Guidelines are actually very good at outlining many of the use cases the particular app I am developing needed.
This might be reflective of the fact that a lot of iOS apps don’t actually follow the default styles and guidelines that Apple has developed, instead opting for bespoke design solutions. This may also be in part due to app designer’s desire to create designs that work well across platforms too.
But in any case, for something like the prototypes I was developing, Material Design proved to be a lot more rapid in getting something up and running with a minimal amount of “head work” to determine what was the “right” way to do things.
Available resources
Sketch ships with both iOS and Material Design templates built in. But I was able to quickly locate additional templates and icon packs for Material Design assets to get me started.
There are multiple libraries and frameworks out there that allow a developer to get up to speed also, like MUI and Materialize, and Google’s own Material Design Lite.
Further down the production pipeline, there seem to be good libraries available for the React Javascript development framework, like Material UI.
Ideal for Lean
Both of these prototypes served to act as an early MVP to test in the market. The ability to build up Sketch mockups quickly, rapidly bring them into Keynote (or tools like Flinto), then migrate that to a basic web-based prototype, then potentially to an actual native app, is a real bonus. The fact that it will look at home, with minimal adjustments, on the two leading smartphone platforms as well as the web is an even bigger bonus.
Unless a novel interaction model or interface paradigm is essential to the value proposition for your product (which is rare), I think that working with Material Design as the basis for an MVP makes a lot of sense. It’s certainly been a great benefit and quite a time saver for these two projects, and I’m keen to see if this translates positively into future projects.
