Call Us: 866.PICK.ITS or Have Us Contact You:
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.
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.|
<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 (
Here’s an example of a HTML button tag:
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Button</button>
Here is the result:
Breakdown of some of the class attributes:
|mdl-button||Attribute included with all buttons *Required|
|mdl-js-button||Assigns basic MDL behavior to button *Required|
|mdl-button-raised||Adds shadows to buttons edges|
|mdl-js-ripple-effect||Displays ripple effect when button is clicked|
|mdl-button-primary||Added primary color to button|
|mdl-button-accent||Adds accent color to button|
The BEM (https://en.bem.info/methodology/) methodology which stands for Block, Element, Modifier was developed by Yandex to help develop websites faster and in a way to that promotes reuse through naming conventions. It’s based on creating components for the user interface that are extendable, reusable and easy to determine their functionality, by their names.
The BEM methodology begins with Blocks that are an independent page components that are reusable. They are defined by their class name or block name which should describe their purpose like “page-header” or “menu-options”. Blocks should be self-contained and not affect any surrounding elements, but they can be nested to allow for more complex components. HTML tags like