A Guide To Google Material design
According to Google
Focus on the user and all else will follow. With this in mind, we seek to design experiences that inspire and enlighten our users.
As quoted above Google came up with visual language that benefits the user, after combining some of the good design principles. They named it as material design ( codenamed as “Quantum Paper”) and introduced it in 2014 Google I/O conference.
Material design is a single system which acts as the unified resource among the devices of different size like Laptop, Mobile devices etc. It also makes use of the transitions, padding, depth-effects like shadows.
Google’s Material Design considers “material” as a homogeneous digital fabric in which the material responds according to the user interaction . It provides the certain design standards for developing application across android , web and ios devices.
Philosophies in Material Design
Material is a metaphor:
Material is grounded in more tactile (connected with sense and touch ) reality and it is inspired based on the study of paper and ink. It is more open and also imaginative with behavior.
Unlike real paper , material can split, rearrange and can be moved when needed. At the time of interaction with the materials, it provides more realistic experience to users.
Attributes like shadows, edges , dimensionality provides more visual cue. The use of familiar tactile attributes helps users quickly understand affordances ( clues on how the object must be used ).
Bold, intentional and graphic:
The elements like typography,grids,space,scale and color creates hierarchy , meaning and focus. The User Experience increases because of the color choices , end to end imagery and also intentional white space.
Motion provides meaning:
Animation is the best part of the material design as they don’t interrupt the user-experience in any way. Animation strengthens the fact that user is prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
Motion cascades from touch points and the visual feedback feels really connected to what user have done. Animation makes the user experience more natural and immersive
Why Material Design?
Though there are many design like Flat Design , Skeuomorphism why I should choose material design ? Before diving into that let’s take peek about what lacks in Flat Design and Skeuomorphism. Speaking of Skeuomorphism, load time of the site is high and it also has limitations on how things supposed to look. Flat-design has limited amount of colors, iconography and shapes. Visual Cues are also complex. If you want to have richer animation content in your application then flat design is not the appropriate one to choose.
Following are some of the pros of using Material Design :
- Material design provides clear guidance for developing apps android , web and ios
- If you want to have animation in your site , Material provides many in-built things to make your life easier.
- Material design provides the clear guidelines for developing the app , so necessity of guess-work is not there.
Material Design Color and Icons:
Colour: Colour is the most important thing for the designer and also the users. It makes the look and feel of the application more great. Appropriate colours to the design makes it more better.
Material design has a great collection of colors which can made use by the designers for applying them to their User-interface. Material Design’s color-tool can also measure the accessibility level of the color combination which will make the look and feel of the user-interface more perfect.
Icons: Icons are universal. They are present everywhere and helps us to recognise about the product with “emoji” instead of any words. Icons when used correctly will enhance the usability and also the design of the software or web-pages.
Material design classifies icons as two sets, one is Product Icons which are bold, simple and friendly. They communicate the core-idea and the intent of the product.The Second is System icons represent a command, file, device, directory, or common actions. Sizing followed for Product icons are 48 dp and system icons are 24 dp.
Material Design Writing and Typography:
It’s hard to imagine a world without text. Concise and clear text makes the user-interface more usable. Text also plays the central role in SEO, being the only data we can say with certainty that search engines understand perfectly. Roboto and Noto are the standard typefaces on Android and Chrome. It has been clearly polished to handle the cross-platform usage. Material design provides clear guidelines to handle the writing for different UI elements.
Material Design Layout:
Layout in material design is based on the principles of print-based design. It uses some tools like baseline grids and structural templates to improve the consistency across the environments. These layouts are capable of creating the scalable apps as they can fit to any screen sizes.
Material Design Components:
All the elements in Material Design are detailed definition. Definitely, it is hard to imagine something that is not there.
Here are some of the components that are present in the material design
- Bottom-Navigation Bar: It makes easier to switch between the top level views app in a single tap
- Bottom-Sheets: They slide up from the bottom to reveal more content
- Buttons: Buttons communicate the action that will occur after the user touches it. There are two sets of buttons in material Design, one is flat and other is raised buttons.
- Cards: It is like an entry point for more information.
- Chips: Chips contain complex things in small blocks
- Dialogs: Dialogs contains specific information about the single or multiple task to be performed. Alerts , simple Dialog , simple menus are dialog types.
- Dividers: It is vertical rule which groups the content in page-layout or list.
- Expansion Panels: It allows edit the content. It can be either standalone or can combine with card.
- List: List are made of the continuous columns of each rows. Each row contain the tile and primary action are filled in the tile and supplemental actions are represented with image or text.
- Menus: They emerge from buttons which is used to choose the action or option
- Progress and Activity: It is a visual indication when the app is loading the content
- Sliders: They allow to select the value from the range of values by moving the slider thumb.
- Snack bars and Toast: They provide the feedback in the form of the message after the execution of operation. It can be either success or failure feedback.
- Tabs: They allow to switch between different views
- Tooltips: Tooltips are text-labels that appear when the user hovers over the particular elements.
Material Design Patterns :
In addition to UI components, material design also provides many patterns to improve the User-Interface. These patterns will improve the UI you created with Material’s components. Some of the patterns include navigation drawer, confirmation and acknowledgment, launch screen, scrolling technique, search, settings, loading images, swipe to refresh and more.
Material Design Animation :
Animation is the one of the best-part of the material design. The animation makes the material more real and intuitive. Every animation has a meaningful, consistent and right timing transitions.
How to use Material Design for Web?
In order to make use of material design in your web-application , Follow the step
- Include the material design css and js files. You can make use of cdn or download the files from material design lite
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet"
href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>After that start building your application with material design integrated. For more updated information, refer the docs of material design lite
Useful Resources for Material Design :
1. Material Design Lite
2. Material Design Docs
3. Material Design Deconstructed — chrome Dev Summit 2014
4. Polymer-project
5.Material Design using React
6. Material Design guideline
Conclusion :
Material Design is one of the nice design systems which have been made use by almost all the applications. If you think Material design suits your application, then why not give it a shot?
Finally thank you for spending your time, to read this article. Hope you got something from the article. Any suggestions and critics are most welcome.
