In my last blogpost (read it here: How to prototype in the browser with Yeoman), I showed you how to create, run and setup an initial environment for browser prototyping. In this blogpost, I would like to encourage you to play with Material Design, explore its UI patterns library, and show how to scaffold a browser prototype with MD.
About Material Design
For those who don’t know, Material Design is new framework from the Google design team. MD is an elegant, simple yet sophisticated visual language. What I like in Material Design is that in many places authors base their design decisions on the science of human cognition, and physical properties of objects in real world. Those who like skeuomorphic Apple design patterns should be delighted.
MD in its core is about meaningful motion that draws users attention in certain way, bold vibrant palette colors, visual cues and material based layout. Motion and animations are essential parts of material design framework. Because animation and material based layout may have huge impact on experience it is very hard to prototype it using static wireframing tools. In the same time it is perfect to prototype it in a browser, with a direct access to CSS animations, and some predefined HTML directives. That is way Material Design is dedicated to prototype in browser.
Scaffold new prototype
From the previous article you should have a basic setup for browser prototyping. If not just go back to the previous article and learn how to setup an environment for browser prototyping. Let’s scaffold a prototype once again.
yo angular-fullstack [prototype-name]
Install Angular Material Design library
To play with MD, we cas use one of the open-source UI framework which is called https://material.angularjs.org/. This framework covers whole standard UI elements, like buttons, toolbars, tooltips, modals, lists and it is perfect for a prototyping purposes. To install material design library components, we will use Bower. To get the latest stable version, just type:
bower install angular-material --save
Prefix –save means, that the library will be written in bower.json file, in dependencies, so if you will publish changes on a Heroku it will be included in the production version of a prototype.
After installation, you should have all the components in the folder client > bower_compontents > angular-material. To use them in your project, you will need to add reference and dependencies files. Otherwise the application will not detect components and directives you will use in your HTML files. Paste CSS reference into index.html in head section:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
Paste as well JS references:
<script src="bower_components/angular-material/angular-material.js"></script> <script src="bower_components/angular-aria/angular-aria.js"></script> <script src="/bower_components/angular-animate/angular-animate.js"></script>
Last thing you should do is to tell your app, in file client > app > app.js what bower compontents app should use.
angular.module('materialdesignApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'ngMaterial',
'ngAnimate',
'ngAria'
])
And now, you can use components from Material Library. You can put them into your HTML file in main view.
You can always fork this github project and play with MD components.