What's MD?


What's Material Design?

Created and designed by Google, material design is a design language that combines the classic principles of successful design along with innovation and technology. The goal is to develop a system of design that allows for a unified user experience across any platform.


Material = Metaphor

Material is a metaphor for the unifying theory of rationalized space and a system of motion. Grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to innovation. Surfaces and edges of the material provide visual cues that are grounded in reality, and inspire the user to interact.

Intentionally Bold

The foundational elements of print-based design – typography, grids, space, scale, color, and use of imagery – guide visual treatments. These elements create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, clear typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.

Meaningful Motion

Primary user actions are inflection points that initiate motion, transforming the whole design. All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize. Motion is meaningful and appropriate, serving to focus attention and maintain continuity.


Material design frameworks

  • Materialize

    A modern responsive front-end framework based on Material Design

  • Material Design Lite

    A lightweight material design framework with no javascript dependencies.

  • Material Foundation

    Material Design version of Foundation Framework by Zurb.

  • Material-UI

    A Set of React Components that Implement Google's Material Design.

  • MUI

    MUI is a lightweight CSS framework that follows Google's Material Design guidelines

  • Angular Material

    A UI component framework and a reference implementation of Google's Material Design specification.

  • Ionic Material

    A material design extension library for the Ionic hybrid mobile app framework.

  • Surface

    A CSS-only framework inspired by material design

  • LumX

    A front-end framework based on Google Material Design.

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.


Unsplashed background img 1


Let us know about Material Design resources!