What's MD?
Frameworks
Resources
Comment
Share

MaterialDesign.info

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.


Principles

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.

Frameworks

Material design frameworks

  • Materialize

    A modern responsive front-end framework based on Material Design
    MaterializeCSS.com

  • Material Design Lite

    A lightweight material design framework with no javascript dependencies.
    GetMDL.io

  • Material Foundation

    Material Design version of Foundation Framework by Zurb.
    Website

  • Material-UI

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

  • MUI

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

  • Angular Material

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

  • Ionic Material

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

  • Surface

    A CSS-only framework inspired by material design
    Website

  • LumX

    A front-end framework based on Google Material Design.
    ui.lumapps.com

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.



Resources



Unsplashed background img 1

Comments

Let us know about Material Design resources!