Material Design for Bootstrap
fezvrasta.github.io
fezvrasta.github.io
I'm curious about your choice of license[0]. I've been considering the use of a non-commercial license for a project I'm working on. Would you mind discussing:
1. Your motivation for the choice. Is it to prevent people from reselling the theme?
2. The impact, if any, that the choice has had on adoption. With the popularity of the project, it doesn’t seem to be an issue. In your experience are users not using your project to built commercial application? Or are they violation the terms (un)intentionally?
3. Your longterm objectives for the project. Do you plan on making this into a business by selling commercial licenses? Do you plan on having a standard commercial license fee, or do you believe it works better to negotiate each license independently?
Thanks!
0: https://github.com/FezVrasta/bootstrap-material-design/blob/...
Edit: grammar, added license
That aside, this looks really well-done! I already have a lot of sites built around Bootstrap, so I may give this a test drive later today.
[0] Free-as-in-freedom, which includes the freedom to use software for any purpose (so a non-commercial use requirement makes the software non-free).
1. I've used this license because I wanted to give something for free for people that was looking for this kind of theme. The restriction about commercial projects is because I don't want people to resell my theme and because I think that if someone is going to earn something using my work I should get something in exchange.
2. This license seems not a problem, users use it anyway following the terms.
3. Usually I negotiate individually.
This is absolutely gorgeous and fluid smooth , atleast on Desktop. I can see this becoming very popular in the months ahead.
And why all the hate for the animations ? They are well thought out and provide context .
Design is continuously evolving and Material Design will also evolve to overcome some of its shortcomings such as a lack of information density and a rather flat look.
Of course you can see this becoming popular in the months ahead. There's always some stupid trend that makes headlines for a few years, then fades away. Remember when gradients and reflections were in? Remember when everyone had to have a splash page? The best design ignores trends and builds upon all we've learned about user behavior since the first command line. There's always room for improvement and experimentation. But as long as we're locked in the fad-of-the-year hype cycle, we turn the whole web into a poorly designed experiment, with users as our unwilling test subjects.
I'm disappointed that this project didn't start as a fork of bootstrap, then the changes applied. It really seems like a designer trying to make a money play off of other's efforts. I can't be certain that is the case, but that is definitely the feel I get, and even then it seems to be only halfway there with the shadows applied to elements they don't belong in.
This repo is still very infantile, I'm sure your issues will eventually be addressed.
Ideally on a narrow-width device, the menu on the left would show/hide with a layered animation. While this is a good material design implementation for desktop and tablet users, it looks like small-form-factor design was forwent.
I will be using your repo later this month, and will be more than happy to help contribute to your library.
Google’s Web Starter Kit (https://developers.google.com/web/starter-kit/) uses the Apache License 2.0
Polymer is implementing Material Design for its Paper Elements collection (https://www.polymer-project.org/docs/elements/paper-elements...) under a BSD license.
Angular is implementing it (https://material.angularjs.org/) under the MIT license.
Is Material Design for Google and Android apps only? Can anyone implement it on the Web?
This program is free software: you can redistribute it and/or modify it under the terms you can find below.
You can use this software for free only for no-profit projects. If you'd like to use this software in a commercial project you may contact the author (Federico Zivolo) of the software and ask for his permission and fulfill his conditions.
Edit- I also think the license should be noted much more prominently otherwise its going to bite people.
The click animation for most elements is too strong, though, at least on the desktop. I haven't tried on touchscreens, they may be good enough feedback for direct finger touch, but they are distracting when using the mouse for clicks.
Is the exact highlight animation mandated by Material guidelines, or can it be tweaked? I believe a fast, simultaneous "fade" effect that made the animated circle/rectangle lighter while its moving would be enough to make it subtler and less aggressive.
I know it's probably utopic but it looks like there's a lot of "wasted" energy in these kind of projetcs.
Google has released this, for those brave enough to use web components.
The navigation feels like when I was 12 and wrote my first c++ program adding "cool loading animations" for no reason.
I just can't help but feel that many of these new design ideas and frameworks that are constantly posted are completely missing the mark by valuing "this looks pretty" over "this actually works".
They break the back button. They break scrolling. They slow down the loading of new content by animating it. All these things while pretty create a worse user experience, and by including it in examples they make it inevitable it will find its way into the wild. I'm not asking for everything to work in lynx, I just want to not feel like my browsing has been handicapped.
I'd been thinking that it would be nice to see a material design theme go into bootstrap.. I like that VezVrasta has integrated the color pallet but not sure how well integrated it is.
I would say that the Jumbotron, wells, etc shouldn't be raised materially, and that the shadow effect should probably simple be a sub-class used by the JS based overlays, which should then follow the material design guidelines.
Nice effort, but I think it's not quite right.
The input boxes rather lack affordance/discoverability or whatever you want to call it. Basically - they don't look inputty enough.
Everyone stop with this material design bullshit. Just because Google released a new design language with a fancy name doesn't mean you have to mindlessly copy the most shallow parts of it. The fundamentals of UI design didn't change. Carry on.
But stop? I disagree because Google's material design is not about the animations. Its about using minimal appearance chrome to strengthen UI context. Is it part of something, or is it "laying" on top of it? Is it approaching me, or laying back? Its 2,5D.
For example note how the button shadow intuively distinguishes it from a card or other UI-panel.
I see good things for Material Design whenever we have 2,5D or 3D displays in our devices. And so wil iOS with its icon/background parallax effect, which for now is only a gimmick. These where basically made with that in mind.
Keeping chrome to a minimum and adding context are great design principles. But I wouldn't call it material design. It's called good design. I don't think we need a new name for fundamental design principles that have been known for years. Just calling it "material design" attracts the copycats, who would rather copy the look than understand the fundamentals. We should simply talk about good design, and encourage people to study timeless design principles.
Animation for animation's sake. Design for design's sake. This is just tacky.
An interface should be snappy and get out of your way, not try to impress with pointless animations. That screams graphic designer trying and failing to do UX. Which is material in a nutshell really.
Sure, it may be prone to abuse, but the base theory is sound. By tapping into the perceptual abilities of movement and shadows, some parts of the inner structure and layout of the interface (which are usually only known to the dialog's developer) are exposed to the user in an intuitive way.
For us developers, a command line and vim (or emacs, not trying to start a war) can be the epitome of UX -- once we learn all those shortcuts.
But for users, there's a lot more that comes into play. Indicating to a user when something can be interacted with and - more importantly, many times - how it can be interacted with is very important. Usually such indications will also inform about what kind of result will happen from the interaction: will the form submit, will the page reload, will I see a list of additional options?
Just as important is indicating to the user that yes - you just interacted with something that can be interacted with. Depending on the action, this can be something as subtle as an underline - or as obvious as showing a loading indicator.
The Material animations aren't just eyecandy for the sake of eyecandy. While touch screens are getting better, there are still situations where a touch doesn't necessarily register as a touch. It's super important to indicate to the user that a touch has been registered. It's just as important that this happens immediately, instead of after - say - a round-trip request to a server somewhere.
If you've built and designed a user interface that has amazing affordances, a general perception of 'speediness' even if the server is being slow, and treats touch users as a first-class citizen ... I'd really like to see your work!
having content areas fly in for almost a whole second is overkill
In the Material design, animations are also intended to increase affordance by showing what areas are interactive, without requiring the extra chrome of everything having 3D borders.
There's no need to use the most extreme animations for minor actions in the interface, and the linked page is obviously a showcase, not a real application.
I like that they make me think about things like depth to differentiate what's active , I like the little line in inputs ,it encourages users(me included) to fill the input,
the ripple effect is small and cheap animation and communicates to the user a click .as is with checkbox etc
the morphing transitions is their best idea , As a user I hate flickers , if you blink you miss them overlay are even worse unless you are alerting.
Web browser engines are not particularly good in animation. I was viewing this with (not quite latest) Firefox and the animations were really choppy (with my less than 3GHz PC). As in really annoying and made user interaction next to impossible. Other browsers may work better.
Secondly, animation (especially in browsers) is very power consuming if you target mobile devices. Of course, this isn't something a web designer would have to care about, because unlike for "native" apps, you can't tell which web site was consuming all the battery. (and battery consumption means bad reviews in app stores)
I work for a mobile device company and I can tell you, for every minute a major web designer spends adding animation on a popular web site, a systems engineer spends an hour trying to optimize the power consumption (with changes to WebKit/Blink, device drivers and the kernel).
Web browsing power consumption is a major benchmark how device manufacturers choose their parts vendors. One of the key benchmarks is picojoules required to render nytimes.com front page. (this is ridiculous but that's how the industry works)
Quite simply: your design would be a lot better if you'd remove most (if not all) of the animations. Especially the mouse click circle (which appears so late it's distracting) and the things that scroll from the bottom (which scroll so choppily that it's annoying). They don't add anything to the usability of this site, on the contrary they make it work slowly.
Otherwise I like the aesthetic of your design.
This is one of the most senseless things I've read in a long, long time. I guess you think "design" means "decoration".
Actually design is a very ambiguous word for me as a developer. I use it to include application architecture, and user workflows amongst other things, while many other people seem to think its all about the shinny pictures on the front page.
I have had the opposite experience and it seems to me that design articles posted here tend to be focused on user experience improvements, research based explorations into best practices, and calls to stop gimmicky mumbo jumbo like scrolljacking.
According to you. I think it's beautiful.
Over the next year I expect it to mature quite a bit. Once I start using it on my current project, I will even contribute to the code base.
Beauty for beauty's sake. Art for art's sake. This is just tacky.
It also makes the ui seem very sluggish, because the traditional pressed state of a button is instant feedback, and this is an animation that takes a couple hundred ms or so to complete.
Other than that, this looks pretty cool; I particularly like the floating label animations. I may have to give it a try in my next project!
The CSS is huge though - over 250k. This is expensive for mobile devices :(
But given that it fails dramatically on small-screen touch devices, the point is moot.
Kudos to FezVrasta for building thing. Clearly it is not perfect but I am sure he will work on ironing out the issues. Also if the license is MIT I would use it in my projects too.
I think Material works very well on touch surfaces. There are a ton of good design principles that it champions, but the interactions are strange on desktop.
Is this by design, or is it on my end?
Shouldn't the wells – being "wells" – be inset instead of outset?
But this remains best implementation
Maybe a solution would be a library to make these animations easier to create.
This looks pretty awesome as well, thanks for sharing.