Discover the best material-design websites created by professional designers. Get inspired and start planning your perfect material-design web design today!

Playing around with Material Design navigation pieces.

Expanding Circle Navigation

A simple one page site about me and my work. Experience innovative design with interesting interactions.

rvkrishna

R.V.Krishna - Art Direction, Design & User Experience

A Google Material Design Sandbox, thats based on the official Material Design Guidelines.

Google Material Design (UI Kit)

Google Material Design - UI Kit

Fully responsive Google Material Design Dashboard App

mobidash Analytics

mobidash Material Design Analytics Dashboard

Add custom Material Design text inputs to your next project, using a combination of native Webflow components and some simple HTML and CSS.

Material Design Text Input

Here's a clonable google material design form. When you write your name in one of the fields, the label stays right above the input.

Google Material Design Form

materialform

Playground

Thinking-Twins Webflow Playground

This is the Webflow version of the 2015 Material Design Lite from Google developers as found here:
http://www.getmdl.io

I plan to use this template to show on the forum how it can be converted to Wordpress. Cloning will be allowed once page is optimized.

Version history:
20150812-V1.0 First version with simple layout. 2 Pager. 

Plans for updates:
1. Better & more interactions
2. Custom CSS 
3. Form styling
4. Symbols
5. Additional Navigation.

20151114 
6. Add CMS functionality, make posts, and authors.
7. Dynamic home page, based on last 4 articles
8. Added the orginal (static) pages as symbols
9. Cloning is now possible

To Do:
- Fix navigation on pages
- Improve footer
- Do something usefull with the comment-section
- Add like, save, and share button functionality

material-design-lite

Material Design Lite

Using the JS & CSS Library, Materialize.css allows you to create the crazy cool Google Material click interaction, check it out, then clone the project to use it in your next project.

Materialize.css

Chainlift's modified version of Material Design 3 for desktop web applications. Use this to quick start your next project! 

Chainlift Design System v4

Material 3 Inspired: Design System (Chainlift Design v4)

This Google Material inspired button uses a little extra CSS and JS - Don't be afraid! It's super easy to implement

009 Button

"Lavanda" — Landscape Design Services in Saint Petersburg

Lavanda | Студия ландшафтного дизайна в Санкт-Петербурге

Landing Page | Landscape Design Services

The question that inspired this project was "How much alcohol am I getting for my money?" So I created a website for people to browse alchohol by the price per standard drink.

Right now the content is static and the calculator doesn't work properly, but it is just a mockup.

I focused on the mobile experience with this website, so let me know how it works on your phone!

AlcoholMate

alcoholmate

Memberstack

Like the effect of material design inputs? So do I! That's why I made this example of how you can animate the labels based on combo classes and a simple script. Enjoy!

Animated Inset Label

Animated Inset Label (Like Google Material Design)

Note: Theme colours don't display on WF's previewer because this project uses css variables. Click "live site" to see the site with colours. This project is not affiliated in any way with Google or their Material Design team.

A Webflow port of Google's Material Design 3 components. All using:
- Native WF components
- WF colour tokens
- Persistent light & dark mode
- CSS variables for colours
There's lots of custom styles in each component, so be sure to select the entire wrapper when copying and pasting components!

The navigation component contains the site's theme. Colours across most elements won't work without the nav somewhere on the page, even if it's hidden in a wrapper.

I'm still actively working on this to clean up rough edges, and need to run around crediting libraries where I've used them.

If you've got any feedback, need help or if there's anything you'd like to see, please drop me a note via team@ephyna.co.uk!

Material Design 3

Material Design 3: Theme template + components

Building this interaction with Webflow interactions comes with a few drawbacks. Let's explore how to improve upon our original design with a little bit of custom code.

Improved Google Material Button with GSAP

MSB is a new learning medium for software engineers.
With interactive content, real infrastructure, overlaid with rich visual dashboards, we are rethinking the developer training experience.

Together with our platform re-design and Hacker News launch we published new website made fully on Webflow!

Enjoy and don't forget to like!