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.
> 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.
It is not irrational to want your device and the software you use on it to be as high-performance as possible. In my opinion, unless we're talking about a game, software should always avoid wasting the user's time, no matter how briefly. Of course, if an animation is playing while something else is happening, that is acceptable. But in many cases, applications wait for the animations to complete (because it's "only" 300 milliseconds) before proceeding with the requested action. Disrespecting the user's time is disrespecting the user, full stop.
While nobody likes excessive animation, it is very important to let the user know their input was received. It's why the cursor changes on mouseover. It's how you know if the app is crashed, or merely processing something you requested.
I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
At one time this was one of Apple's UI priorities — feedback. Unfortunately, Apple has gotten away from a lot of its core UI values without a strong personality to enforce them.
>full stop
In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
> I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
Not just ordinary people. I see the same behavior daily on older tech people, who fail to notice the (ever shrinking) browser loading indicator.
Honestly, it seems like Safari is the only browser that still cares to show a visible loading indicator, that takes up the whole address bar in a bright blue color, last time I checked.
Chrome and Firefox seem bent on a war to see who can infuriate their users the most, by removing one of the most important pieces of feedback on which the web experience is based.
As a result, we (the devs) need to add a ton of server-side checks to discard the multiple clicks that users invariably make, because they can't see that their first click went through.
Some times I'd like to know what the browser people smoke.
It's not like you can just skip writing those checks even if the browser indicator was more visible, people will still spam click and you still need to handle it correctly.
I don't know about 'older' devs, in my experience just about everyone else except the developer who wrote a particular slow function will spam-click if nothing happens after a little while when clicking on something.
> While nobody likes excessive animation, it is very important to let the user know their input was received. It's why the cursor changes on mouseover. It's how you know if the app is crashed, or merely processing something you requested.
I said, "Of course, if an animation is playing while something else is happening, that is acceptable." Yes, play an animation while actual work is happening. That provides the feedback you are describing, which is useful if and when the application cannot respond to user input immediately.
However, my point was that many applications, due to laziness of designers and/or programmers, play an animation and then begin to execute the work requested. The facile argument made by these designers is that the animation is relatively brief—say 300ms—so it's not a "big deal." But I contend that delaying the initiation of requested execution is disrespecting the user's time, regardless of how long the delay is.
To reiterate: beginning the work effort and then concurrently playing an animation is good and should be encouraged. Playing an animation to completion and then beginning the work effort is bad and should be avoided.
The theoretical ideal is to respond in 0ms. If the work takes 50ms, it's best to start the work immediately then start playing an interruptible animation. The user may see a couple frames of the animation. Far worse to play a 300ms animation to completion, then start the 50ms of work.
> I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
Agreed! While doing lengthy operations, play an animation and disable the button. But don't delay beginning the work until after the animation completes, even if that animation is only 300ms.
> In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
I said "Disrespecting the user's time is disrespecting the user, full stop."
I stand by the decisiveness of that statement. In my opinion, disrespecting the user's time is equivalent to disrespecting the user. I will retain the phrase in my lexicon, thank you.
The RAIL* model for user-perceived performance does a really nice job of distilling rules of thumb for latency into a handful of specific metrics / perf targets.
Seeing as this subthread has already derailed into a discussion of expression, I'll take this opportunity to express my disrespect for the new trend of using the word "disrespect" as a verb.
> In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
Not to get further off topic, but: Huh? "Full stop" just means "end of message". It's an amusing leftover from telegraph technologies that people sometimes use for emphasis, but it doesn't have a literal meaning more than just "end of message".
It is interesting how the phrase's meaning has transformed. Nowadays people generally use it to add emphasis such that the previous statement is an absolute truth with no valid argument to the contrary.
Yep, it's a bit of verbal color to add emphasis to a statement. Much like declaring things that are actually quite ordinary and did not fill you with awe but are otherwise positive as "awesome."
In this context, I took "full stop" to mean "end of discussion." As if to dismiss all dissenting opinions and stifle further discussion.
As for the telegraph use, I'm aware of that. I have a background in amateur radio and in college a crusty old engineer taught me morse code to communicate over the maintenance department's secret building-to-building campus telegraph network.
It sounds strange to hear 'full stop' described as a leftover from telegraph technologies. To me, it's just what I call the dot at the end of a sentence.
In American English, 'period' is used in the same ways (indicating the end of a sentence and, like in the above case, to indicate that a matter is closed for further discussion).
It's the same as ending a statement with "period." As in, "We connect people. Period." said by a Facebook exec to justify their use of dark patterns. It's for emphasis.
Not only that, "period" is the American English word for the very same punctuation mark the other side of the English speaking world calls a "full stop".
Microsoft's UI toolkit in Windows 95/98/2000/ME/NT4/XP did a fine job of letting me know that I clicked on a button, and it added no latency to the interaction.
On mobile, this is more difficult - the user's finger is obscuring whatever button they hit from view, so I kind of understand the "ripple" after the button is released (and ostensibly the user's finger has moved away, thus allowing them to actually see the ripple).
Still, unnecessary delay is infuriating on desktop apps. I agree feedback is important, but I don't accept the premise that latency is required to provide feedback.
For me I'm ok with this in certain situations. If the time taken increases the clarity about what is going on or what has just happened (in the case of the ripple effect confirming a button was clicked or tapped), I don't find it disrespectful. I'm more irritated by flashes of loaders or messages that disappears before we can evaluate whether they are relevant. Different strokes, I guess.
I agree, like most things, it's contextual. Making a user wait for a ripple effect every button press is ridiculous. Mind you, that most certainly isn't part of the Material Design spec.
However, if I've performed a destructive action, that is perhaps only reversible temporarily, then I absolutely don't mind being briefly interrupted to see a "trash" animation.
Cannot agree more. one of the default settings I used to set my windows computers on is "adjust for best performance". that used to really remove all sorts of nonsensical animations. I would suggest UI designers include this option in their apps. the first 2 times the menu bar progressively shows its items may look cute, but after 500 times it's really an annoyance.
Another pet peeve I have is when web pages shows very little content because:
1. the fonts are too big
2. there are too many sidebar (top/bottom/etc) items
3. the graphics or icons take too much room
i have some ideas about optimization but will reserve that rant for another time.
Yes, this is why the iPhone keeps getting hardware that's double the speed but the actual UX has remains the same.
My iPhone 8 still takes me just as frustratingly long to navigate apps as it did on my iPhone 4, because there's no way to skip the useless animations and effects.
One way to give a user feedback that they’ve tapped something without wasting their time is a to start an effect onTouch, but don’t necessarily wait for it to finish all the way if the you get a touchComplete. That way the user knows what they’re tapping on, and if they’re making a mistake they’ll move their finger to a safer zone before lifting. And no extra time is wasted.
The ripple effect doesn't end when I finish the touch though, the app waits for it to complete the animation before doing the thing that I asked. That's the infuriating part.
Another thing that really bothers me: They've got all kinds of iOS-specific stuff in the app - Apple Pay, 3D Touch previews, Touch ID for login. They clearly went to a lot of effort to support stuff that's specific to Apple devices, why didn't they just go the extra mile and actually make it look and feel like an iOS application?
This is one of the big five Canadian banks. Their net income is over $1B every quarter. Surely they can afford to hire an iOS dev to do the app natively.
I'm wondering if the dislike of animation an the delay by half a second thing is more specific to programmers/highly technical people. Meaning that if your app is tech focused it should avoid animation as much as possible.
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.
The alternative is to start with basic HTML UI. Almost no styling. And build from there.
Understandably, few people like that advice because it doesn't make life easier. It does make your product better though, which is really all that matters.
But there's not alternative to starting from first principles. Material UI and all other Ui libs are a premature optimisation that will paint you into a corner.
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.
Remind you, most of those stars gained while it was still horrifically bad engineered react framework. It was one of the early in the game and gained popularity solely because of that and its hefty existence hurt the react ecosystem a lot. They just recently rewrote it.
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 understand where the idea came from that Material Design is flat. It's just about the only design language out there that includes official guidelines specifically regarding elevation.
I suppose it's not completely flat because some elements have subtle shadows, and some weirdly raise when pressed. It was strongly influenced by the flat themes from Microsoft (Metro/Modern) and Apple. It's more minimalist with low contrast and gratuitous spacing.
That is my biggest complaint with Material Design. It’s great if you already know what all the icons mean and what you are supposed to click. Apple design, by contrast is generally very obvious and instantly understandable. Look at the Apple Music app on iOS: pretty much every icon is labeled. You don’t have to guess where “My Library” is or fumble around trying to figure it out. Google Hangouts on the other hand.. I have used that thousands of times and still have a cognitive interruption every time I try to share screen, see the sidebar chat or any other common tasks.
I frankly don’t understand the appeal of Material Design. If it came from anyone but Google, it wouldn’t be a thing except in the back alleys of Dribble.
However, this dashboard project — thanks to whomever made it. It does look very nice — just not a fan of the typical Google design language because of serious usability flaws. This dashboard does seem to mitigate some of my main complaints (ambiguity and uncertainty.)
> Apple design, by contrast is generally very obvious and instantly understandable
That’s only true if you’re already accustomed to how Apple does things.
Consider the iPhone a perfect example: 300 different ways to single-click, double-click, triple-click(!), 3D-touch (whatever that is) and use random swiping gestures from all screen directions outside the screen, and different swiping gestures within the screen.
Absolutely madness and probably makes at least 80% of the phone’s functionality completely undiscoverable and inaccessible unless you already know it is there.
How is anyone supposed to know about all that? It breaks every design book’s rules by providing zero affordances. Nothing about this is obvious or intuitive. It’s all 100% learned behavior.
> Absolutely madness and probably makes at least 80% of the phone’s functionality completely undiscoverable and inaccessible unless you already know it is there.
Well, that can't be strictly true, since no one is born knowing these things, yet people do learn about them. I don't think it's crazy to expect people to desire to read a quick guide or watch a quick video about UI paradigms/tricks/shortcuts for what is likely to be one of the most complex and most frequently used electronic devices in their lives.
I do agree that 3d touch is a bad idea, because there's no pattern to learn other than very specific per-application places it can be used. If there was some visible UI hint that an element was 3d touchable, perhaps I would be more of a fan.
As for the double-click and triple-click stuff, I can't really think of that many examples on iPhone. I believe triple-clicking a physical button can be used to enable accessibility features? I think it's pretty acceptable to have accessibility features that drastically transform the phone's user experience fairly hidden, as long as they're well documented for the people who need them.
I don’t know how common “accidental discovery” is, but it doesn’t even sound that bad to me. Learning through exploration is a pretty natural and enjoyable way to become familiar with technology.
I think it may be that "affordances" are hard on small touch screens. I mean, the "affordance" is that you can touch it, that's about it.
Really, even on desktop, we know how to use it cause we've spent years learning how to use it. The first GUI's had _much_ simpler UX's with many fewer interaction modalities, cause it was hard enough to get people to learn those. (I remember classes on how to use a mouse -- it was not obvious). They got more complicated as generalized "society" learned to use the simple ones.
If Apple had something for the web I'd almost certainly be using that instead. But in my case, I'm just trying to write JavaScript and avoid the other stuff as much as possible -- I'm more of a backend dev who's doing frontend work out of necessity. Material libraries (Angular Material, Material-UI, Vuetify, etc) have been great for me in that use case.
There's nothing really stopping anyone from implementing the human interface guidelines into a UI library. I wonder what's keeping people from building one.
I suck at front end design, but I personally would pay money for a Bootstrap-type setup based on Apple HIG. In my (admittedly biased) opinion, Apple Human Interface Guidelines seem like common sense. I am speaking from the perspective of someone who has a web application that has “normal” people as their primary user and thus have spent countless hours providing support for simple things that might seem obvious to the more technically literate. Let’s not insult users, but let’s not assume they’re all web natives either.
Jeff Raskin has a great essay on why “intuitive” usually means “familiar”, and while we think something like the mouse is intuitive, people were baffled by it when it was first employed. [1]
It’s a good read — one of my favorites on human computer interaction.
Why the hell does this get downvoted? It seems like it was a very valid opinion. Does anyone out there actually think Google Hangouts is a good design? Has anyone ever had to click something in a Google product to figure out what it actually does? Put Hangouts or even Gmail in front of a normal, non-tech user and watch them use it. It isn’t intuitive. Skeuomorphism was definitely overused, but the metaphor made products vastly more intuitive.
Gmail is by far the most popular email service in the world. I assure you that plenty of "non-tech users" have no trouble using it. But while I, too, am sad that skeuomorphic design has been abandoned, Apple has abandoned it too.
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 :).
Just had to reboot my computer for the first time in weeks due to running Chrome's Lighthouse audit on one of those awful themes. I was guessing '7%' performance rating but did not expect to have to reboot!
If you run the same audit tools on any Wix website you can expect the same sort of nonsense, maybe a megabyte of scripts at the top, CSS where it runs to 10000 lines of which 97% unused, images flagged for being bloated.
The newer thinking that I find most making sense is to not use any framework at all and to also ignore people using Opera Mini/Internet Explorer. Clearly Google and organisations like the BBC cannot dismiss those people and have to make their websites work on the legacy browsers too. But, if making money matters more than pandering for people that shouldn't be online then the no-framework option makes a lot of sense.
No-framework is also getting a name as 'intrinsic web design' and the idea is to use built in things such as CSS Grid, Progressive Web App, HTML5 form validation and vanilla javascript to hold it all together.
With this way of working you can make the document pure content with semantic tags, e.g. 'Article', 'Section', 'Main/Aside/Header/Footer/Nav' and dispense with the many, many, many nested divs and spans with everything having a gazillion class tags. Going for the 'perfect outline' can be done too with a few hundred CSS lines instead of the tens of thousands you get if using some lame framework.
Building this way and using native browser features instead of the old cruft ways results in sites that load 10x quicker as you don't have the megabyte of scripts/stylesheets that the likes of Wix bloat sites with.
The thing is that to do frontend this way requires throwing out all knowledge of 'floats', 'margin/padding hacks' and even that tedious design process where someone that can't code designs something in a desktop publishing type of program for it to be handed off to frontend developers that tinker with the bloated theme their CMS comes with to make it look like whatever the designer got signed off with the client (without speaking to them first). Even 'Responsive Web Design' is old hat, with CSS grid there is no need to think in those ways, you can make everything content driven with fluid typography plus a few CSS grid rules making it work whatever the screen size.
In summary - forget about frameworks and enjoy the web as it should be.
This kind of misses the point and I don't think really disagrees with what I'm saying. First off, as I mentioned I it's been discussed here and most agree the Wix/Squarespace sites can get deficient pretty quickly.
Secondly, if there were an easy way for designers who are not extremely technical to attribute their code, it actually could greatly help some of the problems you're referring to. For example, if a pre-processor knew what the intent was it could replaced a bad or bloated decision automatically without changing the semantic meaning.
Finally, as for the suggestion around keeping it simple with basic constructs and are predictable and easy to work with, there is no reason that couldn't be part of some type of effort like this that attempted to extract more value from artists than their technical knowledge may allow and realize the potential of many more designs.
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.
>And when something like this has a connection to a company like Google, people simply don't question it.
Yep. It's the "Nobody ever got fired for buying IBM" mentality that pervades the modern IT industry.
You get one so-called "thought leader" to scribble a blog post about how skeuomorphism is a bad thing, and the next thing you know every screen looks like pastel confetti.
I was reading an old computer magazine last night and one of the ads was for a 6809 box that had a red keyboard. RED! With white function keys and blue action keys!
If anyone tried to produce a computer like that today, they'd be laughed right out of HN, even if there were a dozen studies backing the color scheme's utility.
Until one day someone from Facebook or Big G or some random blogger with the correct Twitter followers says it's good. Then suddenly, it's red keyboards all around.
Working in the IT industry, and knowing people who work in the fashion industry, you'd be surprised how alike the two camps are.
Consistency is what draws me to material design, despite its usability shortcomings.
Unless the goal is to create art, consistency is a great thing for both users, who can eventually learn what's going on, no matter how bad the metaphors, as for developers, who can grow beyond checkbox-of-the-week towards well tested patterns.
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 see it as less "well thought out" and more "designed into meaningless oblivion."
I don't know anything about how Material was put together, but from an outsider's view it looks like something that came out of a committee of committees of committees.
I think in technology circles people just love to complain. They think it makes themselves look smart for some reason.
Personally I'm a fan of MD and other minimalist styles.
But it doesn't matter what technies think. What matters are the users. Google did extensive usability testing on MD but just to be sure we did our own testing because we weren't sure how it would go over in Asia and Google is less focused on the Asian markets. Turns out the users fucking love it. We're talking about a hugely positive response across the board: men, women, children, poor, rich, artists and police officers. Three most common comments: (1) clean like Apple! (2) it's cute, not too serious (c) it's simple, easy.
Yes this is subjective. It's not even clear how a design language can be "easy" but that's what the users feel. Given that kind of feedback and considering all the hardwork Goog has already done it'd be crazy not to leverage it.
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..
I don't know which material library you are using, but literally the exact opposite of that is spelled out explicitly in the material design documents.
The thing is you can have a simple aesthetic and have it look nice. Not that this looks bad, but I mean, it can suit a product and stay performant, easy to maintain for designers, very little cognitive overhead to work with the design system, etc.
Sometimes I feel like people lean on a lush and complex design system to draw eyes and attention away from how thin their product/data/whatever is. Welp, this is boring. Let's slap some lipstick on it.
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?
This comment is how all suggestions/comments/constructive criticism should be given when someone shares something they worked on (online or elsewhere).
1. Acknowledge the positives.
2. Acknowledge the effort/work put in.
3. Introduce your idea as something to consider, with the knowledge that they may have already considered it, and have a good reason for going a different direction.
> Widgets are cool, but mostly we need tables and forms.
This (though I agree with sibling comment about a few more being useful).
I reviewed 20 popular admin themes last month for our startup, and was v disappointed with them. Either due to code quality, or throwing in loads of useless widgets which are more consumer rather than business oriented.
There's a gap for a theme that's more like Stripe's dashboard, not these heavy-left-hand-menu dashboard themes. Or something like VMWare's Clarity Design System (https://vmware.github.io/clarity/)
Wow, thanks for the link to Clarity. That looks like something we could get a lot of use out of.
We're currently using Looper[0], but even that is a little too opinionated and visually "heavy" for business apps where productivity and clarity are paramount.
I disagree. Admins are complex. See https://marmelab.com/react-admin-demo/, it's a (fully working) admin built with material design and it uses about 30 specialized styled components. Think notifications, toolbars, menus, grids, etc.
Maybe it’s because I’m on mobile but that UI is awful. Things are oversized when there’s no reason for them to be. Lists can only show like 2 items on the screen without having to scroll. Useless.
The segments and categories sections have a more sane design for an Admin.
* 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)
> * 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
if only there some some sort of style sheet which was easily modifiable so that its changes cascaded down into every selector you had a problem with.
making such a system seems like a lot of work, it would be even better if someone already placed the selectors, configured it to reposition them on desktop and mobile, and released all that work for free
We use ngx-admin currently and are enjoying it what it offers. I wish the corporate theme existed project start but I'm glad to see there are more options now.
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/
Hi Carol, thank you for the kind words and congrats on the latest themes. I really like what I see there with the "copy code" straight from the interface. We will start "cooking" something together soon. Talking on email!
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.
yep, I see that now, you are right. Probably it would be better to disable the default scroller for all the devices and then: on Mac/Ubuntu/iOS/Android we activate the system scroll (which looks better) and on Windows, we activate the perfectScrollbar library. We will do an update soon.
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?
Interesting, the Vue version feels significantly faster then the React version(drops frames at the beginning of the animations just after a click) and the Angular version feels much more website-like than app-like
It looks like the Angular version doesn't have the fade in/out transitions, so it feels more like navigating conventional websites via links than just transitioning states in a javascript SPA.
I’m confused. I’m on my phone so I haven’t looked at the repo. But if this material done in bootstrap or is this a ui using material? Why is bootstrap mentioned...
Does this actually conform to Material Design guidelines? The use of shadow/depth seems gratuitous, for example, in the selected item in the left menu.
Get a grid widget from some actual widget toolkit? no seriously, that's why I don't really values these dashboards. Because let's be honest they don't come with actual useful stuff for someone who is developing a LOB that doesn't need to look like a mobile website.
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.
[0] https://material.io/design/components/selection-controls.htm...
[1] https://material.io/design/interaction/states.html#pressed
> 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.
It is not irrational to want your device and the software you use on it to be as high-performance as possible. In my opinion, unless we're talking about a game, software should always avoid wasting the user's time, no matter how briefly. Of course, if an animation is playing while something else is happening, that is acceptable. But in many cases, applications wait for the animations to complete (because it's "only" 300 milliseconds) before proceeding with the requested action. Disrespecting the user's time is disrespecting the user, full stop.
Yes, and no.
While nobody likes excessive animation, it is very important to let the user know their input was received. It's why the cursor changes on mouseover. It's how you know if the app is crashed, or merely processing something you requested.
I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
At one time this was one of Apple's UI priorities — feedback. Unfortunately, Apple has gotten away from a lot of its core UI values without a strong personality to enforce them.
>full stop
In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
> I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
Not just ordinary people. I see the same behavior daily on older tech people, who fail to notice the (ever shrinking) browser loading indicator.
Honestly, it seems like Safari is the only browser that still cares to show a visible loading indicator, that takes up the whole address bar in a bright blue color, last time I checked.
Chrome and Firefox seem bent on a war to see who can infuriate their users the most, by removing one of the most important pieces of feedback on which the web experience is based.
As a result, we (the devs) need to add a ton of server-side checks to discard the multiple clicks that users invariably make, because they can't see that their first click went through.
Some times I'd like to know what the browser people smoke.
It's not like you can just skip writing those checks even if the browser indicator was more visible, people will still spam click and you still need to handle it correctly.
I don't know about 'older' devs, in my experience just about everyone else except the developer who wrote a particular slow function will spam-click if nothing happens after a little while when clicking on something.
> While nobody likes excessive animation, it is very important to let the user know their input was received. It's why the cursor changes on mouseover. It's how you know if the app is crashed, or merely processing something you requested.
I said, "Of course, if an animation is playing while something else is happening, that is acceptable." Yes, play an animation while actual work is happening. That provides the feedback you are describing, which is useful if and when the application cannot respond to user input immediately.
However, my point was that many applications, due to laziness of designers and/or programmers, play an animation and then begin to execute the work requested. The facile argument made by these designers is that the animation is relatively brief—say 300ms—so it's not a "big deal." But I contend that delaying the initiation of requested execution is disrespecting the user's time, regardless of how long the delay is.
To reiterate: beginning the work effort and then concurrently playing an animation is good and should be encouraged. Playing an animation to completion and then beginning the work effort is bad and should be avoided.
The theoretical ideal is to respond in 0ms. If the work takes 50ms, it's best to start the work immediately then start playing an interruptible animation. The user may see a couple frames of the animation. Far worse to play a 300ms animation to completion, then start the 50ms of work.
> I've seen a million times in UX testing where ordinary people go click... wait... click click click click click because they didn't receive any feedback to an action.
Agreed! While doing lengthy operations, play an animation and disable the button. But don't delay beginning the work until after the animation completes, even if that animation is only 300ms.
> In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
I said "Disrespecting the user's time is disrespecting the user, full stop."
I stand by the decisiveness of that statement. In my opinion, disrespecting the user's time is equivalent to disrespecting the user. I will retain the phrase in my lexicon, thank you.
The RAIL* model for user-perceived performance does a really nice job of distilling rules of thumb for latency into a handful of specific metrics / perf targets.
*https://developers.google.com/web/fundamentals/performance/r...
of the Doherty threshold? 400ms
Seeing as this subthread has already derailed into a discussion of expression, I'll take this opportunity to express my disrespect for the new trend of using the word "disrespect" as a verb.
> In the real world, nothing is ever "full stop." You should purge that phrase from your lexicon.
Not to get further off topic, but: Huh? "Full stop" just means "end of message". It's an amusing leftover from telegraph technologies that people sometimes use for emphasis, but it doesn't have a literal meaning more than just "end of message".
It is interesting how the phrase's meaning has transformed. Nowadays people generally use it to add emphasis such that the previous statement is an absolute truth with no valid argument to the contrary.
end of statement. nothing more to be said. no exceptions or reasonable argument to the contrary.
Yep, it's a bit of verbal color to add emphasis to a statement. Much like declaring things that are actually quite ordinary and did not fill you with awe but are otherwise positive as "awesome."
In this context, I took "full stop" to mean "end of discussion." As if to dismiss all dissenting opinions and stifle further discussion.
As for the telegraph use, I'm aware of that. I have a background in amateur radio and in college a crusty old engineer taught me morse code to communicate over the maintenance department's secret building-to-building campus telegraph network.
It sounds strange to hear 'full stop' described as a leftover from telegraph technologies. To me, it's just what I call the dot at the end of a sentence.
In American English, 'period' is used in the same ways (indicating the end of a sentence and, like in the above case, to indicate that a matter is closed for further discussion).
It's the same as ending a statement with "period." As in, "We connect people. Period." said by a Facebook exec to justify their use of dark patterns. It's for emphasis.
Not only that, "period" is the American English word for the very same punctuation mark the other side of the English speaking world calls a "full stop".
Microsoft's UI toolkit in Windows 95/98/2000/ME/NT4/XP did a fine job of letting me know that I clicked on a button, and it added no latency to the interaction.
On mobile, this is more difficult - the user's finger is obscuring whatever button they hit from view, so I kind of understand the "ripple" after the button is released (and ostensibly the user's finger has moved away, thus allowing them to actually see the ripple).
Still, unnecessary delay is infuriating on desktop apps. I agree feedback is important, but I don't accept the premise that latency is required to provide feedback.
For me I'm ok with this in certain situations. If the time taken increases the clarity about what is going on or what has just happened (in the case of the ripple effect confirming a button was clicked or tapped), I don't find it disrespectful. I'm more irritated by flashes of loaders or messages that disappears before we can evaluate whether they are relevant. Different strokes, I guess.
I agree, like most things, it's contextual. Making a user wait for a ripple effect every button press is ridiculous. Mind you, that most certainly isn't part of the Material Design spec.
However, if I've performed a destructive action, that is perhaps only reversible temporarily, then I absolutely don't mind being briefly interrupted to see a "trash" animation.
Cannot agree more. one of the default settings I used to set my windows computers on is "adjust for best performance". that used to really remove all sorts of nonsensical animations. I would suggest UI designers include this option in their apps. the first 2 times the menu bar progressively shows its items may look cute, but after 500 times it's really an annoyance.
Another pet peeve I have is when web pages shows very little content because: 1. the fonts are too big 2. there are too many sidebar (top/bottom/etc) items 3. the graphics or icons take too much room
i have some ideas about optimization but will reserve that rant for another time.
Yes, this is why the iPhone keeps getting hardware that's double the speed but the actual UX has remains the same.
My iPhone 8 still takes me just as frustratingly long to navigate apps as it did on my iPhone 4, because there's no way to skip the useless animations and effects.
Minimizing UI pageantry is critical when growing through the 1st to 1000th use of an interface.
I'm not here to work for my device, it's here to work for me.
Interface feedback on making a selection is possible in many ways.
One way to give a user feedback that they’ve tapped something without wasting their time is a to start an effect onTouch, but don’t necessarily wait for it to finish all the way if the you get a touchComplete. That way the user knows what they’re tapping on, and if they’re making a mistake they’ll move their finger to a safer zone before lifting. And no extra time is wasted.
The ripple effect doesn't end when I finish the touch though, the app waits for it to complete the animation before doing the thing that I asked. That's the infuriating part.
Another thing that really bothers me: They've got all kinds of iOS-specific stuff in the app - Apple Pay, 3D Touch previews, Touch ID for login. They clearly went to a lot of effort to support stuff that's specific to Apple devices, why didn't they just go the extra mile and actually make it look and feel like an iOS application?
This is one of the big five Canadian banks. Their net income is over $1B every quarter. Surely they can afford to hire an iOS dev to do the app natively.
I'm wondering if the dislike of animation an the delay by half a second thing is more specific to programmers/highly technical people. Meaning that if your app is tech focused it should avoid animation as much as possible.
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.
I hear this critique a lot but I don't often see alternative paradigms/examples offered.
I don't think material design is very pretty either and I'm very interested in alternatives, if only I knew what they were!
Material a little Playskool for my tastes.
But then I still think the original iPhone icons were awesome. Even the little television for the YouTube app.
Back then, icons communicated far more information than most icons today, which have become little more than bland corporate logos.
The alternative is to start with basic HTML UI. Almost no styling. And build from there.
Understandably, few people like that advice because it doesn't make life easier. It does make your product better though, which is really all that matters.
There are definitely alternatives to material design that is not just un-styled HTML.
But there's not alternative to starting from first principles. Material UI and all other Ui libs are a premature optimisation that will paint you into a corner.
Or because just few people can call untouched HTML elements design "beautiful".
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.
Remind you, most of those stars gained while it was still horrifically bad engineered react framework. It was one of the early in the game and gained popularity solely because of that and its hefty existence hurt the react ecosystem a lot. They just recently rewrote it.
So, star count isn't a good measure.
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 understand where the idea came from that Material Design is flat. It's just about the only design language out there that includes official guidelines specifically regarding elevation.
https://material.io/design/environment/elevation.html
I suppose it's not completely flat because some elements have subtle shadows, and some weirdly raise when pressed. It was strongly influenced by the flat themes from Microsoft (Metro/Modern) and Apple. It's more minimalist with low contrast and gratuitous spacing.
That is my biggest complaint with Material Design. It’s great if you already know what all the icons mean and what you are supposed to click. Apple design, by contrast is generally very obvious and instantly understandable. Look at the Apple Music app on iOS: pretty much every icon is labeled. You don’t have to guess where “My Library” is or fumble around trying to figure it out. Google Hangouts on the other hand.. I have used that thousands of times and still have a cognitive interruption every time I try to share screen, see the sidebar chat or any other common tasks.
I frankly don’t understand the appeal of Material Design. If it came from anyone but Google, it wouldn’t be a thing except in the back alleys of Dribble.
However, this dashboard project — thanks to whomever made it. It does look very nice — just not a fan of the typical Google design language because of serious usability flaws. This dashboard does seem to mitigate some of my main complaints (ambiguity and uncertainty.)
> Apple design, by contrast is generally very obvious and instantly understandable
That’s only true if you’re already accustomed to how Apple does things.
Consider the iPhone a perfect example: 300 different ways to single-click, double-click, triple-click(!), 3D-touch (whatever that is) and use random swiping gestures from all screen directions outside the screen, and different swiping gestures within the screen.
Absolutely madness and probably makes at least 80% of the phone’s functionality completely undiscoverable and inaccessible unless you already know it is there.
How is anyone supposed to know about all that? It breaks every design book’s rules by providing zero affordances. Nothing about this is obvious or intuitive. It’s all 100% learned behavior.
And I say that as an iPhone owner.
> Absolutely madness and probably makes at least 80% of the phone’s functionality completely undiscoverable and inaccessible unless you already know it is there.
Well, that can't be strictly true, since no one is born knowing these things, yet people do learn about them. I don't think it's crazy to expect people to desire to read a quick guide or watch a quick video about UI paradigms/tricks/shortcuts for what is likely to be one of the most complex and most frequently used electronic devices in their lives.
I do agree that 3d touch is a bad idea, because there's no pattern to learn other than very specific per-application places it can be used. If there was some visible UI hint that an element was 3d touchable, perhaps I would be more of a fan.
As for the double-click and triple-click stuff, I can't really think of that many examples on iPhone. I believe triple-clicking a physical button can be used to enable accessibility features? I think it's pretty acceptable to have accessibility features that drastically transform the phone's user experience fairly hidden, as long as they're well documented for the people who need them.
> yet people do learn about them
Is 'accidental discovery' part of the superiority of Apple's design ethos?
I don’t know how common “accidental discovery” is, but it doesn’t even sound that bad to me. Learning through exploration is a pretty natural and enjoyable way to become familiar with technology.
Do you find Android better?
I think it may be that "affordances" are hard on small touch screens. I mean, the "affordance" is that you can touch it, that's about it.
Really, even on desktop, we know how to use it cause we've spent years learning how to use it. The first GUI's had _much_ simpler UX's with many fewer interaction modalities, cause it was hard enough to get people to learn those. (I remember classes on how to use a mouse -- it was not obvious). They got more complicated as generalized "society" learned to use the simple ones.
Many Apple users wish there were "back" button in iOS. Right now back button in top left corner looks alien and ridiculous.
If Apple had something for the web I'd almost certainly be using that instead. But in my case, I'm just trying to write JavaScript and avoid the other stuff as much as possible -- I'm more of a backend dev who's doing frontend work out of necessity. Material libraries (Angular Material, Material-UI, Vuetify, etc) have been great for me in that use case.
There's nothing really stopping anyone from implementing the human interface guidelines into a UI library. I wonder what's keeping people from building one.
I suck at front end design, but I personally would pay money for a Bootstrap-type setup based on Apple HIG. In my (admittedly biased) opinion, Apple Human Interface Guidelines seem like common sense. I am speaking from the perspective of someone who has a web application that has “normal” people as their primary user and thus have spent countless hours providing support for simple things that might seem obvious to the more technically literate. Let’s not insult users, but let’s not assume they’re all web natives either.
> Apple design, by contrast is generally very obvious
Hand an iPhone X to someone who is familiar with other iPhones, but not it.
Watch their first frustrated attempts.
Talk more about obvious design.
Jeff Raskin has a great essay on why “intuitive” usually means “familiar”, and while we think something like the mouse is intuitive, people were baffled by it when it was first employed. [1]
It’s a good read — one of my favorites on human computer interaction.
1: https://www.asktog.com/papers/raskinintuit.html
> Apple design, by contrast is very obvious.
Surely this is a joke? The million different gestures are just the tip of the iceberg when it comes to Apple and interface discoverability.
Why the hell does this get downvoted? It seems like it was a very valid opinion. Does anyone out there actually think Google Hangouts is a good design? Has anyone ever had to click something in a Google product to figure out what it actually does? Put Hangouts or even Gmail in front of a normal, non-tech user and watch them use it. It isn’t intuitive. Skeuomorphism was definitely overused, but the metaphor made products vastly more intuitive.
Gmail is by far the most popular email service in the world. I assure you that plenty of "non-tech users" have no trouble using it. But while I, too, am sad that skeuomorphic design has been abandoned, Apple has abandoned it too.
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.
You've probably noticed artists develop thousands and thousands of themes/mockups/designs for every possible use including admin. For example, https://themeforest.net/category/site-templates/admin-templa....
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 :).
Just had to reboot my computer for the first time in weeks due to running Chrome's Lighthouse audit on one of those awful themes. I was guessing '7%' performance rating but did not expect to have to reboot!
If you run the same audit tools on any Wix website you can expect the same sort of nonsense, maybe a megabyte of scripts at the top, CSS where it runs to 10000 lines of which 97% unused, images flagged for being bloated.
The newer thinking that I find most making sense is to not use any framework at all and to also ignore people using Opera Mini/Internet Explorer. Clearly Google and organisations like the BBC cannot dismiss those people and have to make their websites work on the legacy browsers too. But, if making money matters more than pandering for people that shouldn't be online then the no-framework option makes a lot of sense.
No-framework is also getting a name as 'intrinsic web design' and the idea is to use built in things such as CSS Grid, Progressive Web App, HTML5 form validation and vanilla javascript to hold it all together.
With this way of working you can make the document pure content with semantic tags, e.g. 'Article', 'Section', 'Main/Aside/Header/Footer/Nav' and dispense with the many, many, many nested divs and spans with everything having a gazillion class tags. Going for the 'perfect outline' can be done too with a few hundred CSS lines instead of the tens of thousands you get if using some lame framework.
Building this way and using native browser features instead of the old cruft ways results in sites that load 10x quicker as you don't have the megabyte of scripts/stylesheets that the likes of Wix bloat sites with.
The thing is that to do frontend this way requires throwing out all knowledge of 'floats', 'margin/padding hacks' and even that tedious design process where someone that can't code designs something in a desktop publishing type of program for it to be handed off to frontend developers that tinker with the bloated theme their CMS comes with to make it look like whatever the designer got signed off with the client (without speaking to them first). Even 'Responsive Web Design' is old hat, with CSS grid there is no need to think in those ways, you can make everything content driven with fluid typography plus a few CSS grid rules making it work whatever the screen size.
In summary - forget about frameworks and enjoy the web as it should be.
This kind of misses the point and I don't think really disagrees with what I'm saying. First off, as I mentioned I it's been discussed here and most agree the Wix/Squarespace sites can get deficient pretty quickly.
Secondly, if there were an easy way for designers who are not extremely technical to attribute their code, it actually could greatly help some of the problems you're referring to. For example, if a pre-processor knew what the intent was it could replaced a bad or bloated decision automatically without changing the semantic meaning.
Finally, as for the suggestion around keeping it simple with basic constructs and are predictable and easy to work with, there is no reason that couldn't be part of some type of effort like this that attempted to extract more value from artists than their technical knowledge may allow and realize the potential of many more designs.
The majority of the world is mobile-first.
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-...
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.
>And when something like this has a connection to a company like Google, people simply don't question it.
Yep. It's the "Nobody ever got fired for buying IBM" mentality that pervades the modern IT industry.
You get one so-called "thought leader" to scribble a blog post about how skeuomorphism is a bad thing, and the next thing you know every screen looks like pastel confetti.
I was reading an old computer magazine last night and one of the ads was for a 6809 box that had a red keyboard. RED! With white function keys and blue action keys!
If anyone tried to produce a computer like that today, they'd be laughed right out of HN, even if there were a dozen studies backing the color scheme's utility.
Until one day someone from Facebook or Big G or some random blogger with the correct Twitter followers says it's good. Then suddenly, it's red keyboards all around.
Working in the IT industry, and knowing people who work in the fashion industry, you'd be surprised how alike the two camps are.
A consulting company I worked at a few years ago had an "Interactive" team whose "UX" designers used exclusively Material Design for everything.
It was...something special. Everything was just sort of cobbled together with zero creativity about it.
Consistency is what draws me to material design, despite its usability shortcomings.
Unless the goal is to create art, consistency is a great thing for both users, who can eventually learn what's going on, no matter how bad the metaphors, as for developers, who can grow beyond checkbox-of-the-week towards well tested patterns.
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.
Now the desktop browser web apps...
Material forms (with the floating labels) are so unreadable if not all fields are filled in, just look at this mess: https://codepen.io/sebakerckhof/pen/aKGMWv
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.
>well thought out design language
I see it as less "well thought out" and more "designed into meaningless oblivion."
I don't know anything about how Material was put together, but from an outsider's view it looks like something that came out of a committee of committees of committees.
I think in technology circles people just love to complain. They think it makes themselves look smart for some reason.
Personally I'm a fan of MD and other minimalist styles.
But it doesn't matter what technies think. What matters are the users. Google did extensive usability testing on MD but just to be sure we did our own testing because we weren't sure how it would go over in Asia and Google is less focused on the Asian markets. Turns out the users fucking love it. We're talking about a hugely positive response across the board: men, women, children, poor, rich, artists and police officers. Three most common comments: (1) clean like Apple! (2) it's cute, not too serious (c) it's simple, easy.
Yes this is subjective. It's not even clear how a design language can be "easy" but that's what the users feel. Given that kind of feedback and considering all the hardwork Goog has already done it'd be crazy not to leverage it.
Thanks for the great reply. This is exactly the sort of information that I was looking for.
Do you have a page or document you can link to for more information, or is this just internal meeting stuff?
Were your user tests measuring perception or performance?
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.
Do people actually like Material for browsers on desktops?
I like Home Assistant and don't hate the Google Cloud Console.
Depends on the UI density/layout. The design language itself is actually very nice.
Well, Google is forcing it on ChromeOS users though.
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.
4-5 seconds on your machine? Check for a button usually next to the power button on the CPU labeled “turbo” and give it a click. Might help.
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..
Material is a design language. There are many different implementations of it (for the web at least)
Yes! I find that button clicks feel slow because (it appears that) the action does not start until the ripple animation completes.
I don't know which material library you are using, but literally the exact opposite of that is spelled out explicitly in the material design documents.
Actions shouldn't wait on animations ever.
It could be just the perceived time in my head.
I remember seeing studies about progress bar lines can make the user perceive that progress is happening faster.
Either way, it’s a deterrent for me.
This is funny.
I have the feeling mostly Google employees are running around telling the world how slow their pages are.
I feel the same way, most of the actions on the 'world cup' feed/info (when you search for world cup) is slower than it needs to be.
The new Flights is infuriating. The fade-in on the source/destination results in the incorrect airport if you start typing too quickly.
what designs do you consider fast?
hacker news aesthetic
The thing is you can have a simple aesthetic and have it look nice. Not that this looks bad, but I mean, it can suit a product and stay performant, easy to maintain for designers, very little cognitive overhead to work with the design system, etc.
Sometimes I feel like people lean on a lush and complex design system to draw eyes and attention away from how thin their product/data/whatever is. Welp, this is boring. Let's slap some lipstick on it.
minimalist, like craigslist
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?
This comment is how all suggestions/comments/constructive criticism should be given when someone shares something they worked on (online or elsewhere).
1. Acknowledge the positives.
2. Acknowledge the effort/work put in.
3. Introduce your idea as something to consider, with the knowledge that they may have already considered it, and have a good reason for going a different direction.
Kudos!
I dunno, looks slick but I do wonder how much of this is actually useful for building an admin interface.
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.
> Widgets are cool, but mostly we need tables and forms.
This (though I agree with sibling comment about a few more being useful).
I reviewed 20 popular admin themes last month for our startup, and was v disappointed with them. Either due to code quality, or throwing in loads of useless widgets which are more consumer rather than business oriented.
There's a gap for a theme that's more like Stripe's dashboard, not these heavy-left-hand-menu dashboard themes. Or something like VMWare's Clarity Design System (https://vmware.github.io/clarity/)
Something corporate.
Wow, thanks for the link to Clarity. That looks like something we could get a lot of use out of.
We're currently using Looper[0], but even that is a little too opinionated and visually "heavy" for business apps where productivity and clarity are paramount.
[0] https://themes.getbootstrap.com/product/looper-responsive-ad...
I've had exactly the same experience, only I hadn't ever seen VMWare's Clarity. I cannot say Thank You enough.
I would definitely use clarity, if only it where React.
Or Vue. I used Angular 2 for a mobile app (Cordova/Ionic) and while it was OK, I'd rather not use it again.
I disagree. Admins are complex. See https://marmelab.com/react-admin-demo/, it's a (fully working) admin built with material design and it uses about 30 specialized styled components. Think notifications, toolbars, menus, grids, etc.
Maybe it’s because I’m on mobile but that UI is awful. Things are oversized when there’s no reason for them to be. Lists can only show like 2 items on the screen without having to scroll. Useless.
The segments and categories sections have a more sane design for an Admin.
That's a horrible admin. Sure, you can stuff an admin full of cards and tiles and widgets like that one does, but it doesn't make it better!
Information density suffers, scannability goes out the door!
and modals and drop downs.
I strongly do not like the design. To my taste:
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)
[1] https://p.w3layouts.com/demos_new/template_demo/06-01-2018/g...
> * 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
if only there some some sort of style sheet which was easily modifiable so that its changes cascaded down into every selector you had a problem with.
making such a system seems like a lot of work, it would be even better if someone already placed the selectors, configured it to reposition them on desktop and mobile, and released all that work for free
Nice theme. I like how it uses the big 3 FE frameworks.
Big shout out to Ngx-Admin as well. https://github.com/akveo/ngx-admin
Congrats! Are you the owner of that dashboard? Maybe we can join our forces :D
Nope, but I wish I was.
We use ngx-admin currently and are enjoying it what it offers. I wish the corporate theme existed project start but I'm glad to see there are more options now.
But not Ember sadly.
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
Thanks, man! Appreciate.
Appreciate you! Here is one project I used Creative Tim dashboard for https://github.com/qorrect/sisy , screenshots at bottom.
Yeah, it's really nice! Good job.
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/
Hi Carol, thank you for the kind words and congrats on the latest themes. I really like what I see there with the "copy code" straight from the interface. We will start "cooking" something together soon. Talking on email!
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.
yep, I see that now, you are right. Probably it would be better to disable the default scroller for all the devices and then: on Mac/Ubuntu/iOS/Android we activate the system scroll (which looks better) and on Windows, we activate the perfectScrollbar library. We will do an update soon.
I can confirm, and its annoying.
Probably easy to fix. Otherwise this is pretty cool looking.
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.
[0]: http://element.eleme.io
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.
Really Happy to hear that. If you have further feedback on how to improve it please let us know!
Tangential: is it (in)appropriate to use an "admin" theme for a consumer app?
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.).
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...
I think this is why folks give Material UI so much grief.
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.
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.
1: https://demos.creative-tim.com/material-dashboard/examples/i...
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
what is the relationship of this to Material-UI? https://material-ui.com/
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?
I'm using Firefox and the "Material Icons" icons are never displayed properly... Any idea why?
https://i.imgur.com/Y06PbsL.png
strange, it works on my Firefox, maybe you have disabled some custom font loading settings for privacy?
Even in safe mode, with all add-ons disabled, it still doesn't work... I should try a clean install maybe.
Also work on our side. Please Open an issue with all the details so we can check simulating your environment. Thanks!
It's not a problem on your side. It happens on all sites with material icons... But thanks.
I'm just trying to use the smart people on Hacker News to help me with my issue! :-P
Hahaha I see what you do :))
My Privacy Badger was blocking design.google.com
Interesting, the Vue version feels significantly faster then the React version(drops frames at the beginning of the animations just after a click) and the Angular version feels much more website-like than app-like
It looks like the Angular version doesn't have the fade in/out transitions, so it feels more like navigating conventional websites via links than just transitioning states in a javascript SPA.
I’m confused. I’m on my phone so I haven’t looked at the repo. But if this material done in bootstrap or is this a ui using material? Why is bootstrap mentioned...
Nothing stops you from implementing material design using Bootstrap.
Great job implementing material design principles to Bootstrap. I would say I haven't seen it done this well except for I haven't seen it done at all.
Does this actually conform to Material Design guidelines? The use of shadow/depth seems gratuitous, for example, in the selected item in the left menu.
Everyone is bashing the admin panel. Which one is the best according to HN based on functionality and design?
A while ago someone posted https://tabler.github.io/tabler/docs/index.html which I quite like. But in most of my work I've used UI kits like https://ant.design/ and http://element.eleme.io/#/en-US.
What's the easiest way to through a Firebase database behind this?
Get a grid widget from some actual widget toolkit? no seriously, that's why I don't really values these dashboards. Because let's be honest they don't come with actual useful stuff for someone who is developing a LOB that doesn't need to look like a mobile website.
Great feedback man! Do you have any examples that we can check so we can add some better tables/data structures?
i've been a creative tim customer for a while, great product, fair price. no complaints :)
not a fan of Material tho, victim of Google's success really.
This is really ugly
Constructive feedback would be useful.
I really don't like light (300 weight) fonts on web. Most of them on most screens are illegible.