Material Design

Material Design

Material Design (https://material.google.com/) is a design language or philosophy that was developed by Google in 2014.   Its purpose was to create a visual language that utilizes classic principles of good design and incorporates technology and science. It allows users to have a unified experience regardless of the size of the device and treats all input methods like touch, voice, mouse and keyboard as first class citizens.  Material Design is also a three-dimensional environment that contains light, material and cast shadows.  The use of all three dimensions, bright colors, larger images and animation that imitates the natural world really separates this design language from others. 

Core Principles of Material Design

Material is the metaphor Unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink.
Bold, graphic, intentional Based on print design principles, the use of imagery guide visuals, do more than just please the eye.  They create hierarchy, meaning and focus.
Motion provides meaning

Motion respects and reinforces the user as the prime mover.  Primary user actions are inflection points that initiate motion, transforming the whole design.

 

 

 

 

 

 

 

 

Using Material Design guidelines in web projects is extremely easy.  By using these guidelines, you will create uniformity throughout your site, which will lead to a much better user experience.  Creating sites that are both aesthetically pleasing and intuitive for the user is always the goal of any web project and with Material Design this becomes natural.   Also, this technology is being pushed aggressively from Google.  It is implementing the design principles to all Android applications and hopes this becomes a standard throughout the web.  Using Material Design principles, will help your website appear more modern and in-line with current trends.

Material Design

Design guidelines for creating modern, responsive websites.

Material Design Lite Implementation of material design philosophy.
BEM (Block, Element and Modifier) Naming convention used in Material Design lite.

 

 

 

 

 

Material Design Lite or MDL lets you implement Material Design principles and does not rely on any JavaScript frameworks. Getting started is easy, you can either download the files from (https://getmdl.io/started/index.html)  or use the files hosted on their CDN.  Here is an example:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.light_blue-green.min.css">

<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>

 

You can also pick a color scheme for your site.  You will notice on the second line the CSS file is called  /material.light_blue-green.min.css.  You can pick a primary (light_blue) color and accent (green) color that will be used throughout the site.  MDL allows you to customize the color scheme by going to https://getmdl.io/customize/index.html and previewing the different schemes.

 

Now that the files are downloaded we can look at an example of a button.  Buttons have several different display types like flat (default), raised, fab (floating action button), mini-fab and icon. Material Design Lite loosely uses the naming convention set by the BEM principles to construct components, this can apply to almost any HTML element.  There are examples where MDL does not follow all of the BEM suggestions.  We will get into more detail about BEM (Block, Element, Modifier Naming Convention) soon.  When constructing a button, you use the standard HTML button tag (

© 2020 IT Solutions Consulting, Inc. All rights reserved... Privacy Statement  |  Site Map