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 (<button>), but add one or more MDL classes to the class attribute. These classes are separated by spaces. You start with the basic mdl-button class, then add additional classes to get the effect you are looking for.
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 <form> and <div> are generally used for block components, since they can contain other elements.
<div class=”page-header” > </div>
An element is a composite part of a block that cannot be used separately from its block. The elements name should describe its purpose like text or input. Its full name should follow the format of “block-name”__”element-name”, this includes a double underscore between the block and element names. Elements can be nested inside each other, but it is always part of a block not another element. It’s important to remember that elements are dependent on their block, not other elements.
<div class = ”page-header” >
<label class = ”page-header__label” />
An entity that defines the appearance, state, or behavior of a block or element. A modifier’s name should describe its appearance like “_large” or “_small”, or it’s state like “_disabled” or “_hidden”, or it’s behavior like “_legend”. The modifiers name is separated from the block or element by a single underscore. You can also add the value of the modifier to its name, when that is important. For example, class = “block_button_disabled” or class = “block_input_visible”.
Here is an example:
<!—filter-items is a block and has 2 modifiers: one that describes size and the other that describes focus -->
<div class = ”filter-items filter-items_size-large filter-items_focused>
<!-- Element within block, don’t forget the double underscore -->
<input class = “filter-items__input” />
<!—Another element within a block that also has a modifier -->
<button class = “filter-items__button filter-items__button_visible”> Filter </button>
Using the BEM Methodology, can be extremely useful since it allows users to reuse code throughout a project. It reduces complexity since you build upon small blocks of code and it allows you to reduce copying and pasting since they are shared throughout a project. Also, by following the naming conversion of the classes, you self-document the blocks, elements and modifiers. It also allows new team members to quickly get up to speed since the naming conversion is logical.
Throughout the next few months we will be continuing our exploration of Material Design. Here are some of the topics we plan to cover.