Do people actually like Material for browsers on desktops?
I tried it - as it would be great to have an opinionated design language with good framework implementations but it seems to make the same mistake as Windows 8 in trying to treat everything like a phone.
That really isn't nice on a desktop.
One of the banks I used "updated" their iOS app and used Material Design. It's infuriating.
The thing that bothers me the most is the "switches" (3rd example here[0]). My first thought upon updating the app was "Why did they reinvent the toggle switch when iOS has a perfectly good one built in?" Being bothered by this is irrational, yet I'm bothered by it all the same.
I also find the ripple effect[1] when pressing things to be infuriating. Just do the action I've asked, don't do this animation and delay the action by half a second. Again, this is somewhat irrational, but it still bothers me.
Perhaps the thing that bugs me the most is that it feels like I have a really well-designed Android app on my phone. The problem though is that I have an iPhone. If I wanted to use Android apps, I would have bought an Android phone.
It is absolutely horrendous. The Windows 8 debacle should've proven conclusively that a single UI doesn't work across all usage modes and the big chunky buttons that are useful on mobile are terribly slow and inefficient on large screens.
It's rather amazing how little information can fit on a screen with these designs even with modern high-res 4k retina displays. It's a failure of following trendy UI instead of focusing on true UX.
So I was actually just about to write a cross-platform app using https://material-ui.com/ purely because it is the most comprehensively fully developed and React-first toolkit for React out there. Plus it has 11k (edit: oh it's 37k, wow) stars on Github, more than twice as much as the next most starred React toolkit.
Semantic and Bootstrap have been "ported" to React and are missing features or do things non-idiomatically, whereas MUI was built with React in mind (twice if you count the rewrite). There are other React-first toolkits but none are nearly as comprehensive and "healthy".
But I've been on the fence because it feels really weird to write a cross-platform app (mobile and desktop) using components that are clearly designed to look like just one platform (Android). Technically I could make a custom theme for it, but that looks extremely complex, and OP's linked theme is practically the only free one I could find.
I'd love to just abandon toolkits like this and write my own React components specific to my app, but honestly I don't know how to make half the stuff that's in these toolkits. My JS/CSS is just not that strong.
I, for one, do not. Material Design, and the other flat themes are horrible on the web because they ignore established conventions and disregard affordance. Even on mobile I don't know what's click... tappable.
I don't even like it on mobile, but it really is horrible on a desktop - it's just so flat and dull that my eyes are constantly hunting round for whatever I need next.
Would there be any practical way to provide them with some simple markup that allowed marking up their designs such that some sort of scaffolding tool could be used to convert it into a starter project for various frameworks/languages/etc?
Yes some of them come with bootstrap or whatever framework files, but if it were generalized it would be possible create a configurator/generator/scaffolder that would allow many more options and combinations.
It seems like Wix and SquareSpace have some sort of proprietary version of this. Where you pick a template, customize it, and then directly use it for development, but of course only using their tools, which as has been discussed here quickly run into limitations for non-trivial sites/apps.
This is all off the cuff thinking, I haven't put much though into what potential markup or a DSL would look like. However, maybe even a small set of options available as an open standard could provide a great deal of flexibility and be easy to use for artists and designer who are not that technical.
Maybe it could also be possible a start for an ecosystem of tooling to make use of it across a variety of development environments, not just "bootstrap and gulp included".
If it's plausible, hasn't been done, and has enough interest I'd be willing to take a pass at a draft spec that could at least help people realize what not to do :).
Material's desktop experience definitely needs to continue improving. I'm trying to see Material's design as how desktop users of the future might work, who grew up mobile-first, unlike most of today's desktop users who grew up in a desktop first world.
Material has a number of headstarts a headstart due to it's "card" lineage coming from the designer of Palm, and WebOS.
Design is hard and the value of it is difficult for most peolpe to quantify. So Material, and all other UI component libs, claim to offer an easy solution to a difficult, expensive, and seemlingly aestethic problem.
They don't. And when something like this has a connection to a company like Google, people simply don't question it.
As a long time Android developer I find material design to be actually good, esp. since Google offers a lot of it out of the box for us. What I find disappointing is the world jumping on it and then clinging to it as if this is it and that's it. I have noticed a lot of apps have kind of stopped (not universally though) going for new, unique and innovative designs.
I think its a well thought out design language, but anyone who thinks its anything but Google branding is deceiving themselves. I couldn't imagine using it for anything other than a proof of concept or internal tool.
I do and the development experience of working with something like Angular Material is pretty great. If you're building relatively simple interfaces it's not that bad. Most of what I do is data tables and CRUD, I just want nice and relatively well styled components that are also well integrated with my framework.
I basically associate material design with "slow" now, especially ever since Google has began to move all their services (flights, analytics) to material design. It's all becoming slow and annoying to use, anyone else feel the same?
I feel the same way - especially with Google Drive. It takes a good 2 or 3 seconds to get a response from the UI when right-clicking. Also, it takes 4-5 seconds for Drive to realize when I'm dropping files or folders. Not sure if these issues are new or specific to Material per say, though.
I feel the same, and have the impression that Material Design is bloated and opinionated (not in a good way). I actually liked the presentation of its concepts, design language, style guide, etc. but not a fan of the technical implementation. Just one user's opinion..
Hi. This is really cool and I can tell you put a lot of work into it.
I noticed when tabbing through the dashboard that many of the elements have disabled focus styles. This can make the dashboard less accessible to users who need visual indication of what element is focused. Would you consider including focus styles on the non-form elements?
* colors are too bright and saturated
* Low text-vs-background contrast: white letters on bright yellow-orange for example
* Font strokes are way too thin which is especially bad compounded with dark-ish gray on light-ish gray low contrast (see above)
Viewing this on a usual normal-resolution 24" Dell monitor. It could be that it looks better on retina phones and monitors - can someone opine?
I would prefer something like [1] (not ideal, but found this just after 5 seconds of googling)
Looking much better and easier than many paid admin themes. I was checking it yesterday after reading about it on a website and was really impressed. All the best
Nice work happening at Creative Tim! Congrats to Alex and company. I'm looking forward to collaborating on Codeply. Please check out my latest too : https://themesguide.github.io/top-hat/dist/
Nice work. There is a tiny glitch on first load on windows with chrome. The content shakes in order to fit screen. It may be about hiding the default scroller.
On the topic of UI libraries, I've used and enjoyed Element UI[0].
Someone really needs to make a search engine for components -- React, Vue, Mithril and a few other frameworks out there are making it so easy to build and share small isolated pieces of functionality but I still don't know of a site where I can easily search for components.
I'm using this for my upcoming SaaS, and I'm disappointed with the performance on mobile.
I thought it's due to React, but after Googling "react material UI slow" I found that it's the problem with the UI framework. Don't get me wrong, I like the design, I just regretful of not testing it on my phone much earlier.
Great work on the template. I actually bought the pro version as it has the most reasonable SaaS license I’ve seen in a lot of these templates where they pull you in with a 30-40$ license and then want 800-1400$ if you wanna use it on a product.
So this is an example of how to use Bootstrap Material Design in different web frameworks? Why use Bootstrap Material Design instead of the Google supported Material Component library that works in any framework and without the added noise of class="foo"? https://github.com/material-components/material-components-w...
And I would not be so quick to pat Apple on the back, as I feel they have on gone backwards vis a vis the above principle when they largely abandonded skeuomorphism.
The demo page section for icons[1] is buggy on Firefox. If you scroll the icon categories, the icon next to each category doesn't move with the category name.
Has anyone worked with this or similar starter themes?
Are they easy to work with? Adjust to your own circumstances?
I ask because, while easy on the eyes, they strike me as somewhat complicated and you wonder if you'd be better off starting from scratch or something simpler.
Why this works for a dashboard but not for anything else:
-design is inheriently unique. You want your brand and your site to standout from the rest. A one size fits all design methology actually goes against design. A design framework for the web is like saying all stores should look the same. Even restaurants dont look the same and they are in the same usecase. Design matters and cannont be churned out like a factory product (or good design at least). There are 2 80/20 rules here. You can get 80% of your good design by adhering to 20% of the standards, yet its the last 20% of good design that makes your site stand out and the first 80% is just basic usability.
-dashboards are purely functional and not user facing (at least the admin dashboards I hope this framework is talking about). This is a great place to use a standard framework and get all the reuse out of it so you can focus on making your user facing site unique
On the Material-UI website it shows CreativeTim (the creators of Material Dashboard) as being a major contributor, additionally there is a Material Dashboard "Premium Theme" for Material-UI that's created by CreativeTim. In the MaterialUI site's thumbnail comments it says created with MaterialUI, but on the MaterialDashboard site it does not say this.
Very confusing. did CreativeTim move away from MaterialUI to a bootstrap4 foundation? or something else?
[+] [-] TimMurnaghan|7 years ago|reply
[+] [-] Mister_Snuggles|7 years ago|reply
The thing that bothers me the most is the "switches" (3rd example here[0]). My first thought upon updating the app was "Why did they reinvent the toggle switch when iOS has a perfectly good one built in?" Being bothered by this is irrational, yet I'm bothered by it all the same.
I also find the ripple effect[1] when pressing things to be infuriating. Just do the action I've asked, don't do this animation and delay the action by half a second. Again, this is somewhat irrational, but it still bothers me.
Perhaps the thing that bugs me the most is that it feels like I have a really well-designed Android app on my phone. The problem though is that I have an iPhone. If I wanted to use Android apps, I would have bought an Android phone.
[0] https://material.io/design/components/selection-controls.htm...
[1] https://material.io/design/interaction/states.html#pressed
[+] [-] manigandham|7 years ago|reply
It's rather amazing how little information can fit on a screen with these designs even with modern high-res 4k retina displays. It's a failure of following trendy UI instead of focusing on true UX.
[+] [-] samirillian|7 years ago|reply
I don't think material design is very pretty either and I'm very interested in alternatives, if only I knew what they were!
[+] [-] _diyu|7 years ago|reply
Semantic and Bootstrap have been "ported" to React and are missing features or do things non-idiomatically, whereas MUI was built with React in mind (twice if you count the rewrite). There are other React-first toolkits but none are nearly as comprehensive and "healthy".
But I've been on the fence because it feels really weird to write a cross-platform app (mobile and desktop) using components that are clearly designed to look like just one platform (Android). Technically I could make a custom theme for it, but that looks extremely complex, and OP's linked theme is practically the only free one I could find.
I'd love to just abandon toolkits like this and write my own React components specific to my app, but honestly I don't know how to make half the stuff that's in these toolkits. My JS/CSS is just not that strong.
[+] [-] cpburns2009|7 years ago|reply
[+] [-] GordonS|7 years ago|reply
[+] [-] WhitneyLand|7 years ago|reply
Would there be any practical way to provide them with some simple markup that allowed marking up their designs such that some sort of scaffolding tool could be used to convert it into a starter project for various frameworks/languages/etc?
Yes some of them come with bootstrap or whatever framework files, but if it were generalized it would be possible create a configurator/generator/scaffolder that would allow many more options and combinations.
It seems like Wix and SquareSpace have some sort of proprietary version of this. Where you pick a template, customize it, and then directly use it for development, but of course only using their tools, which as has been discussed here quickly run into limitations for non-trivial sites/apps.
This is all off the cuff thinking, I haven't put much though into what potential markup or a DSL would look like. However, maybe even a small set of options available as an open standard could provide a great deal of flexibility and be easy to use for artists and designer who are not that technical.
Maybe it could also be possible a start for an ecosystem of tooling to make use of it across a variety of development environments, not just "bootstrap and gulp included".
If it's plausible, hasn't been done, and has enough interest I'd be willing to take a pass at a draft spec that could at least help people realize what not to do :).
[+] [-] j45|7 years ago|reply
Material's desktop experience definitely needs to continue improving. I'm trying to see Material's design as how desktop users of the future might work, who grew up mobile-first, unlike most of today's desktop users who grew up in a desktop first world.
Material has a number of headstarts a headstart due to it's "card" lineage coming from the designer of Palm, and WebOS.
https://www.surfacemag.com/articles/matias-duarte-google-is-...
[+] [-] tomelders|7 years ago|reply
They don't. And when something like this has a connection to a company like Google, people simply don't question it.
[+] [-] vanadium|7 years ago|reply
It was...something special. Everything was just sort of cobbled together with zero creativity about it.
[+] [-] balladeer|7 years ago|reply
Now the desktop browser web apps...
[+] [-] kabes|7 years ago|reply
[+] [-] mcrider|7 years ago|reply
[+] [-] jrs95|7 years ago|reply
[+] [-] otterlicious|7 years ago|reply
I like Home Assistant and don't hate the Google Cloud Console.
[+] [-] deltron3030|7 years ago|reply
[+] [-] pjmlp|7 years ago|reply
[+] [-] dom96|7 years ago|reply
[+] [-] citrusui|7 years ago|reply
[+] [-] lioeters|7 years ago|reply
[+] [-] styfle|7 years ago|reply
[+] [-] k__|7 years ago|reply
I have the feeling mostly Google employees are running around telling the world how slow their pages are.
[+] [-] sv12l|7 years ago|reply
[+] [-] switch007|7 years ago|reply
[+] [-] Dowwie|7 years ago|reply
[+] [-] dqv|7 years ago|reply
I noticed when tabbing through the dashboard that many of the elements have disabled focus styles. This can make the dashboard less accessible to users who need visual indication of what element is focused. Would you consider including focus styles on the non-form elements?
[+] [-] thomasfedb|7 years ago|reply
Once I've got decent form styles and a navbar I find that most of the rest is either very simple, or very application specific.
Widgets are cool, but mostly we need tables and forms.
[+] [-] mynegation|7 years ago|reply
I would prefer something like [1] (not ideal, but found this just after 5 seconds of googling)
[1] https://p.w3layouts.com/demos_new/template_demo/06-01-2018/g...
[+] [-] burnt1ce|7 years ago|reply
Big shout out to Ngx-Admin as well. https://github.com/akveo/ngx-admin
[+] [-] axelut|7 years ago|reply
[+] [-] Oras|7 years ago|reply
[+] [-] axelut|7 years ago|reply
[+] [-] iatek|7 years ago|reply
[+] [-] buraksarica|7 years ago|reply
[+] [-] hardwaresofton|7 years ago|reply
Someone really needs to make a search engine for components -- React, Vue, Mithril and a few other frameworks out there are making it so easy to build and share small isolated pieces of functionality but I still don't know of a site where I can easily search for components.
[0]: http://element.eleme.io
[+] [-] wiradikusuma|7 years ago|reply
I thought it's due to React, but after Googling "react material UI slow" I found that it's the problem with the UI framework. Don't get me wrong, I like the design, I just regretful of not testing it on my phone much earlier.
[+] [-] somada141|7 years ago|reply
[+] [-] axelut|7 years ago|reply
[+] [-] dfee|7 years ago|reply
Maybe it's semantics, but I see the "feel" of admin pop up on many / most evolved consumer applications (e.g. GMail, Kayak, Reddit, Feedly, etc.).
[+] [-] staticvar|7 years ago|reply
[+] [-] jgalt212|7 years ago|reply
https://en.wikipedia.org/wiki/Principle_of_least_astonishmen...
And I would not be so quick to pat Apple on the back, as I feel they have on gone backwards vis a vis the above principle when they largely abandonded skeuomorphism.
[+] [-] kbenson|7 years ago|reply
1: https://demos.creative-tim.com/material-dashboard/examples/i...
[+] [-] pbreit|7 years ago|reply
Are they easy to work with? Adjust to your own circumstances?
I ask because, while easy on the eyes, they strike me as somewhat complicated and you wonder if you'd be better off starting from scratch or something simpler.
[+] [-] consumethreads|7 years ago|reply
-design is inheriently unique. You want your brand and your site to standout from the rest. A one size fits all design methology actually goes against design. A design framework for the web is like saying all stores should look the same. Even restaurants dont look the same and they are in the same usecase. Design matters and cannont be churned out like a factory product (or good design at least). There are 2 80/20 rules here. You can get 80% of your good design by adhering to 20% of the standards, yet its the last 20% of good design that makes your site stand out and the first 80% is just basic usability.
-dashboards are purely functional and not user facing (at least the admin dashboards I hope this framework is talking about). This is a great place to use a standard framework and get all the reuse out of it so you can focus on making your user facing site unique
[+] [-] novaleaf|7 years ago|reply
On the Material-UI website it shows CreativeTim (the creators of Material Dashboard) as being a major contributor, additionally there is a Material Dashboard "Premium Theme" for Material-UI that's created by CreativeTim. In the MaterialUI site's thumbnail comments it says created with MaterialUI, but on the MaterialDashboard site it does not say this.
Very confusing. did CreativeTim move away from MaterialUI to a bootstrap4 foundation? or something else?
[+] [-] electrotype|7 years ago|reply
https://i.imgur.com/Y06PbsL.png
[+] [-] realusername|7 years ago|reply
[+] [-] axelut|7 years ago|reply
[+] [-] dandare|7 years ago|reply