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.
Read more
Read less
All content
Courses
Tutorials

All Material Design content:

  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. Quick Tip: Pick ‘n’ Mix MDL Components with Gulp

    Quick Tip: Pick ‘n’ Mix MDL Components with Gulp

    Tutorial • Intermediate

    Material Design Lite (MDL), as we have learned from previous tutorials, comes with plenty of UI components including navigation, cards, and buttons, which...

  9. 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...

  10. 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...

  11. 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...

  12. 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...

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories