I don't understand why anyone wants to use MD by choice. I don't have an opinion about the web looking similar (has pros and cons) but what I know is that MD looks just not right and at times very weird. I understand that everyone has a different taste but, for example:
We recently redesigned a customer's website from an older, uglier custom format, to one that uses a Bootstrap Material style template (similar to the OP's).
User feedback was that the newer one was much easier to understand. Layout was somewhat the same, but we just used the Material specs to place and colour the buttons etc. It just made things more intuitive for non technical users.
I don't think I am a particular good front end designer, but I was able to get the screens to look reasonable while conforming to Material's design principles (note: some information blurred in these screenshots as it is live client data).
Same here. All Material Design webpages I've seen so far feel too "blur" to me - I'm not sure if "blur" is a correct wording, but what I mean is that, with MD, the buttons, sections, and so on, are no longer clear on my eyes...
It is a bad example. They've made choices with the button placement, icon size and alignment, links below form that aren't not part of MD and I agree look terrible. There are other examples of MD that look great.
Was going to make a similar comment. I don't think it is necessarily MD forms in general, but these examples leave a bad impression. The icons are not aligned and are improperly sized for the form.
It looks like the first (hero) element on the page breaks Material conventions. You have a photo with a large z-index somehow below a panel with a smaller z-index.
The idea of Material design was not just pretty shadows and drip animations on click. It was about providing a metaphor for digital content on screens.
Still, great job on the technical effort of converting everything to Material!
I'd suggest you check out Google's philosophy on Material Design [1] - it explains it quite well.
HN readers are probably not the intended audience for MD. It was basically intended so that layperson users would intuitively understand how to use an interface without thinking too hard about it - e.g. which areas are clickable? Did I really press that button (The ripple and/or bounce effect gives them a visual confirmation that yes, they indeed did). Items appear to float above each other to give the idea that there is more content underneath, or that they can drill down further etc.
Hasn't (at least what I interpret to be) "material design" removed the ability of the user to determine what is clickable today? It feels like a flat colored box suffices as a "button" … sometimes. Sometimes it is really just a flat colored box, and you can't tell up until the point you click it. Buttons used to have a nice bevel around them, giving them the appearance of being … a button. Being a bump on the page that could be pushed inwards. Everything is flat now.
> Items appear to float above each other to give the idea that there is more content underneath, or that they can drill down further etc.
If I've ever seen drops shadows used to indicate anything other than just being there for looks, then it went well over my head. That seems like the most subtle, impossible to discover UI aspect. Can you show me one recent "material design" UI that uses drop shadows to convey information about the workings of the UI?
"Material Design" and Google's Material Design are different things.
The former is a label generally applied to flat, square design with minimal flourishes. The latter is a set of principles and standards for how digital interfaces should behave, along with a sample implementation.
In Google's MD, the clickable items are supposed to be identified either by their elevation (drop shadows) or an all-caps, secondary-color treatment and position at the bottom of elements.
It's true, icons and some text links could use some improvement.
Too bad its doesnt feel like material. The fonts are wrong. The icons are not material, and the effects animations are too fast... Buts its close to what material is.
I actually love MD, I hate how people focus more on the click-animation of the button (the "pulse" animation originating from where someone clicks/taps) and less about the rest of the guidelines.
Proper z-indexing, proper drop shadows, proper typography, proper colors, etc.
People typically use "flat colors" with "Material-esque animations" and call it Material Design...
Actually, the font is "Roboto" from Google Material Design guidelines, so I think we've got it right. As for the speed of animations - we'll surely look into it. Thanks for the feedback!
What are the limitations of the free license from the perspective of someone using "Free" package on a website (comercial or not)?
The "free" license seems permissive enough for commercial (or non-commercial) use and I while there are "premium" components, these could be trivially be re-created using the "free" packaged css/js.
PS. I'm not talking about "repackaging" the code in some secondary tool/template/theme, but to use it on a website like an e-commerce website.
This is exactly what I was looking for since mid 2015 for a static site. MDL didn't cut it for me, and Polyner was overkill. I will certainly looking into this for some projects I am working on.
Thanks for sharing!
The navbar comes with Bootstrap. I created pages with MDBootstrap that have a navbar and the look is integrated. Maybe you are seeing some of their customized navs?
Out of curiosity, what were the shortcomings of MDL? I personally roll my own CSS/JS per project but I've got a project lined up which requires Material Design and I was considering MDL.
MDL is pretty decent as long as you follow their logic of building material designish principles. I used it only once, but would go back again if it fits the use-case.
Feedback: live demo page eats almost all of my core i7 cpu (70% avg, 100% 2/3 of time, Win10/Chrome).
I understand the page is very large and loaded with js but that was my first experience with your site, I clicked on Live Demo link and all of a sudden my mouse cursors became unresponsive/slow.
I don't really get all these material design kits and themes. For me the material design look is very closely tied to google products, so anything that is not a google product that makes use of these material design themes comes across as pretty derivative.
material design from google looks good - any idea on effort it will take to write a bootstrap wrapper around this ? use bootstrap class (+additional class) but underneath use styling and animation of google-material-design-lite.
There are some issues here. The others will highlight them in the comments, but I want to say something positive. I wanted to browse through your examples page and wonder why I'd ever use this but you have really put great effort into illustrating practical examples of how this library can be used. Great job!
Edit: I'd like you to talk on the homepage, open and honestly about how much extra download size this will add on top of standard bootstrap.
While I am sort on the fence about Material Design itself, I do love MDBootstrap. I just saw it about a month ago and have been playing with it ever since. Specifically, I really like having the component prebuilt.
I will say that the way the folks behind this project design their pages and lay them out is not to my taste, having the prebuilt components it a time saver, and tweaking their look or layout isn't that hard.
The demo looks great! When I think of Google's material design, however, I always picture Android's rather flat and blockish UI. Am I the only person who doesn't think material design is attractive? Maybe this is what material design really should be! Congrats!!
This is really cool, I'm surprised at how many variations you have of some of these components.
One thing I noticed, your before/after confused me about which side was before/after, I would suggest switching the panels so that after is on the same side as the after button.
On Safari on iOS 9, iPhone 6s, the buttons along the bottom of your date picker (e.g. Close) are very difficult to click because touching that area brings up safari's bottom menu bar.
http://mdbootstrap.com/components/forms/ I can't imagine any designer let alone regular user liking the way these forms look.