Learn Material Design

Explore Google's Material Design language and learn how to apply its principles to your UI designs, creating beautiful and cohesive interfaces.
  1. How to Recreate Material Design Floating Labels

    How to Recreate Material Design Floating Labels

    Tutorial Beginner

    Labels-as-placeholders are a popular design choice for creating minimalist and accessible forms. In this tutorial, we’ll recreate the Material Design...

  2. How to Customize Contact Form 7 for WordPress: Floating Labels

    How to Customize Contact Form 7 for WordPress: Floating Labels

    Tutorial Intermediate

    You might have seen forms where the placeholder text is animated when you start typing into that input. This tutorial will explain how to implement floating...

  3. How to Build an Animated Bootstrap Landing Page With Material Kit

    How to Build an Animated Bootstrap Landing Page With Material Kit

    Tutorial Intermediate

    Today, we’ll learn how to create an animated landing page with Material Kit, a free Bootstrap 4 UI Kit based on Google’s Material Design.

  4. Google Material Design: Updates, Improvements, and New Tools

    Google Material Design: Updates, Improvements, and New Tools

    Tutorial Beginner

    Let’s talk about what’s new, what’s changed, and what’s been improved in Google’s newest Material Design.

  5. New Course: Building Websites With Materialize

    New Course: Building Websites With Materialize

    Tutorial Beginner

    In our new short course, Building Websites With Materialize, you will get a high-level overview of some of the major features of the Materialize framework.

  6. Designing an App Using the Material Design Sticker Sheet

    Designing an App Using the Material Design Sticker Sheet

    Tutorial Beginner

    In this tutorial, you’ll learn how to use Google’s Material Design sticker sheet and Adobe Photoshop to design the user interface of a simple Android...

  7. Timeline-Based Animation for the Web with Hype 3

    Timeline-Based Animation for the Web with Hype 3

    Tutorial Beginner

    Hype 3, by Tumult, is an OS X application for creating HTML5 animations. If you ever used Flash’s iconic timeline tools, Hype 3’s interface will seem very...

  8. Learning Material Design Lite: Customizing

    Learning Material Design Lite: Customizing

    Tutorial Beginner

    Up until now we have been looking into how to implement MDL components. The question remains: how do we customize these components so that they fit within...

  9. Learning Material Design Lite: The Menu

    Learning Material Design Lite: The Menu

    Tutorial Beginner

    In this instalment of our Learning Material Design Lite (MDL) series, we’re going to look into the Menu component. This is a component which you might...

  10. Learning Material Design Lite: Cards

    Learning Material Design Lite: Cards

    Tutorial Beginner

    Cards are quickly becoming a “goto” UI pattern, particularly on the mobile web. In this tutorial, we are going to look into the cards component in Material...

  11. Learning Material Design Lite: Text Fields

    Learning Material Design Lite: Text Fields

    Tutorial Beginner

    Next up in our series learning the ins and outs of Material Design Lite (MDL) we’re going to look into the Text Fields component. A text field could be used...

  12. Learning Material Design Lite: Buttons

    Learning Material Design Lite: Buttons

    Tutorial Beginner

    Buttons form an integral part of any functional website (plus designers love them!) In this part of our Learning Material Design Lite (MDL) series, we’ll...