Material Design in Webflow (could do with your input/feedback!)

Hi All

So i decided to start working on some Material Design elements in webflow this morning…here’s where i’m at so far:

http://material-design.webflow.io/

It’s been a bit of a hit & miss affair to get things looking somewhat “material-like” so i’d be grateful if for any feedback on what i’ve done so far…and anything else you think I should add! No mobile styling on this yet as i’m trying to get the basic bits & pieces together first :smile:

(The plan is to keep building elements & components over the next few weeks, so I have a library of material elements to use in future projects…)

A couple of things that might be helpful if you’re planning on getting your material design steez on in webflow:

  1. For the waves effect on the buttons I just patched in a couple of elements from the Materialize framework (materializecss.com). It was as easy as adding a little css in the header, linking to the materialize JS file and adding a couple of classes to my buttons. 10 minute job tops (though I spent the previous 2 hours trying to code it myself!!!)

  2. For shadows I used 2 drop shadows on each element: one set to 25% opacity with 5px of blur and one set to 16% opacity with 10px of blur. I couldn’t quite get the right effect using one!

Cheers
Evan

1 Like

I have the same ongoing experiment but I gradually lose any incentive to continue… The material design guidelines are incredibly arbitrary and if they don’t contradict theselves, the use Google itself makes for material design does. A lot.

MD seems to be Googles politic to be on par with Apple design wise. It seems to be its purpose, not building a universal UI language. It’s made of grand rules and it’s extremely complicated to apply on a real life project with real life specifications.

And I’m not even talking about the fact any design needs a serious touch of uniqueness in design and that MD tends to render things uniform. It’s also lacking some evident things that you can do with paper, and folding is the first. Google still have tons and tons of lists in their app, that you need to manually stop when you scroll… they could solve that with folding, but they never do. It’s one of the things that puzzles me the most with their approach of mobile design.

If you want to play by the rules, you need to (mentally) transpose your design into a physical one and see if it makes sense. For example, your first two CTAs have a shadow, it means the can float above the image. But the text hasn’t and it’s not in a block with shadows. So your background can’t have a parallax or fixed effect regarding the text title, as it makes no sense with MD. And really it’s not a critique of your design but rather of MD.

It’s cool to experiement things and I learnt a couple of things along the way, but I’ll let MD for Google self products from now on.

1 Like

@vincent couldn’t agree more! There’s a lot of things in the MD guidelines that are ridiculously complicated for the needs of a basic site…things like the different DPs for shadow elements are far too complex to implement if you follow them to the letter.

I get your point about uniformity too - with a “set” pallette and design guidelines it renders it no more useful than any other design framework out there. If we all follow the rules then we’ll all create identical looking sites and apps (the Bootstrap effect!!).

Also: the paper folding thing!! Its one of MD’s main rules that “paper never bends”…surely that’s the most limiting thing for a designer? If we were “allowed” to fold and reform the paper so to speak it would open up a whole realm of possibilities.

The more I work with it the more i’m starting to think about taking some of the over-arcing ideas of MD (implying physical space with shadows, thinking more about meaningful interactions etc) and leaving the unnecessary stuff behind. There’s some great ideas in there, it just seems to be bogged down in unneeded technicalities.

Always good to have your input man!

I remember the conference at Google I/O. Guy saying “it’s simple, it’s really like paper, it’s natural.” I was hooked, then the shadow things that would definitely be a CSS nightmare, then the “it doesn’t bend” and I was really pissed at them wasting our time (:

I have to admit their apps start to look better and the design gap between them and Apple is shrinking. But their apps were totally awful before so it’s easy to do just better, and at present time there is nothing exceptional, at all, where I have to admit too Apple is doing tremendous since 2009 on that.

Google has a really good paper product but it’s not MD, it’s cardboard (:

2 Likes

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.