Prototyping for Android with Material Design

Google caused a lot of publicity when it released its new design language, "Material Design" in 2014. Its inception in Android 5.0 Lollipop aimed to cross bridges between various devices and create a consistent user experience. As it turned out, Material Design gained more ground than Lollipop, used by more websites, apps and services not related to Google. Considering that up to a year ago, KitKat's Holo design language was still used and recommended, Material Design's rise in popularity is astonishing.

On SitePoint, we provided an analysis of Material Design and its design influences through the years. It illustrated the design aspects behind the Material Design language.

Whilst the official Google Reference is a good place to start with Material Design experiments, those who prefer prototyping before going deep into development might find Proto.io useful. We covered Proto.io last year, but the company recently announced the launch of their new Material Design library, which will allow you to jumpstart prototyping using Material Design assets, effects and guidelines.

In this article we will focus on the tools Proto.io offers to create qualitative Material Design Prototypes, instead of Step by Step instructions.

Getting Started

If you haven't registered an account, do so here. New users can enjoy a premium account for 15 days for free, after that you can still prototype with certain limitations. Read about the available plans and see if any suit your needs and budget.
The premium features allow you a greater number of active projects, publishing your prototypes and unlimited reviewers.

If you have created your account and reserved your space, you are ready to create a new project. As we are dealing with Material Design, let's go ahead with an Android Google Nexus 5 device screen with a blank template.

The editor is where you undertake most tasks. Ensure you have the Material Design Library selected in the upper right corner, so the right assets will be displayed.

Feel free to adjust the canvas zoom using the toolbar at the top so you can have a proper overview of your projects. You can also hide or resize various toolbars on your screen.

Proto.io automatically saves your prototype (look in the upper right corner), but you are also able to save manually whenever you need to. Backups of your prototypes are available whenever you need to return to a specific version.

Playing with Material

Now let's get some assets into our working space.

I started with a basic interface, adding elements such as a Fixed Tab-bar, a Toolbar and 3 buttons (among them the famous morphing hamburger > arrow icon).

Feel free to add assets from the assets library and populate your canvas. Don't be too much of a perfectionist at this point, you will be able to tweak various settings later on. I added a list and a checklist, aiming to create a quick prototype of a shopping list app.

If you are satisfied with the screen, you can then tweak element attributes individually.

Material Design specific effects, such as ripples or round avatars can be configured. You are able to modify your image assets, allowing for flexibility and to minimize the use of external image processing tools.

The complete selection of Google's Material Design icons are available, useable immediately in the Proto.io editor.

Google has released the Material Design Icons under a Creative Commons Attribution 4.0 License, meaning that you are free to use them even commercially, as long as you give attribution. You can find them on GitHub with a helpful reference of the icon names (also handy while prototyping in Proto.io )

Sharing Is Caring

From here you can add new screens, link them, change orientations and much more. We leave this to you to explore possibilities, although the ripple effects are addictive!

If you want to share prototypes with the world, you are able to create a space for your creations under Proto,io Spaces (this is also available to users with a free plan). You can find the example I created for this article here.

Import the example into your own Proto.io account by clicking the import button underneath the preview on the right.

If you have a paid plan you are able to publish or export your prototypes to various formats, such as HTML or PDF.

Bonus: Free Material Design Resources

Already in the Material Design mood? Below are some solid resources for beginners with Material Design that you can use commercially in your projects.

IconShock Material Design Icons

Based on the original Material Design Icons, these icons offer a more colorful alternative to the original. With over 1400 icons in various sizes and formats, this is a good place to start if you are searching for icons. They are licensed under a Creative Commons Attribution 4.0 License.

Material Design UI Kit

Although not official, the UI Kit PSD is a good reference if you lack inspiration or are stuck with the UX of your prototype. It's not only focused on mobile so you can see what Material Design offers on other devices/mediums too.

Sketch ready Material Design Icons

If you use Sketch you can take advantage of these altered Material Design icons which already include bounds.

CSS Material Design Buttons

Here you can grab the CSS code of various Material Design Buttons.

Conclusion

Material Design opens up a whole new world of possibilities, across a wide range of devices and screens. Now you can prototype with Material Design to understand its potential and how its principles might work in your designs. Let us know your thoughts and experiences in the comments, your thoughts on Material Design are especially welcome.