Uhm interesting. Seems like a good tool but either I'm using it wrong or it's very weird that it doesn't seem to provide an option for the accent color.
here's some other similar tools that I collected over time
Shameless plug: http://0xrgb.com (similar to flatuicolors, which was using Flash by that time), 0xrgb also includes ios, tango, solarized and material color schemes.
HHGTTG. Excellent reference, if you're going to spend time on picking the 'right' colors rather than just any set of half decent colors and then move on you might miss out on that important little thing called functionality without which it really doesn't matter what color it will be.
Once you're established and you're tuning the last 0.3% of the market that you might catch if only you used the 'right' colors you can spend time on this.
It's another nice example of premature optimization.
Rational, practical people have always been quick to dismiss aesthetics in favour of functionality, but it turns out it's actually pretty important. People will use the ugly, functional thing if they have to, but they'll leave if they get a chance. I think this dynamic alone explains a large part of the success of a number of SaaS apps priced as is often advocated here to allow individual managers to buy it on a corporate credit card without going through procurement.
As an extreme worst-case scenario, consider post-war high-density architecture. With a few exceptions, they are various degrees of slum today, not because they lacked functionality (that came later when they were left to deteriorate), because anyone with the resources to left.
Back to software, I have had the pleasure of replacing a good number of ugly but functional line-of-business systems, and the eagerness with which users will adopt the new thing, almost entirely because it's pretty (it often doesn't much new for many users, the main improvements are on the backend and for power users), always catches me a bit off guard.
On the personal level, I've found that investing a bit of time up front in making a new thing pretty increases my personal level of happiness working on the thing, even if I end up changing entirely away from the original look as features evolve.
I've seen the opposite as well: ugly looking terminal or DOS based but very productive software was replaced with spiffy looking windows or web based software that was slightly slower or unable to keep up with the type-ahead of the users and this led to huge disappointment.
I'm firmly believe if it doesn't work it doesn't matter how good it looks and if it works but looks bad that's better than the reverse.
Then once you've figured out what to build you can always make it look pretty.
It's not a dichotomy. I'm arguing for the importance of both, not either-or. Obviously, a thing that doesn't work, doesn't work, regardless of how pretty it might be.
> Then once you've figured out what to build you can always make it look pretty.
That's a lot harder than it sounds. No, of course you don't commission a big fancy design before you know what the thing should do, but you equally can't just build an ugly, but functional thing and throw lipstick on it five minutes before shipping (or after - activities schedules for when the thing is 'done' have a nasty tendency to not happen). Both, in parallel, at its time, not either-or.
Terminal/DOS-based software isn't ugly, it's just a different interface (GUI vs. non-GUI).
Of course some technical people that know what they're doing will enjoy using the command line because you don't have a GUI that gets in the way, but using this fact to "prove" that people like ugly software better doesn't make sense—it's just a bad example.
I worked for a very large corp that wanted to convert an application that we used to process applications. It took less than a second to process 99 percent of applications. They wanted to switch from a cli app to web. I told them they were nuts. We could currently process the days queue in minutes. Sure the company could have loaded all the data and used js to feed them out quickly, but the programmers had no idea what we were doing and certainly wouldn't have designed it correctly. The company wasn't changing it to be trendy, they were changing it to make things easier. It would have had the opposite effect.
Not blind, but I had eye surgery about a year and a half ago, followed by a recovery period about 4 weeks longer than I was told to expect, during which I came to appreciate things like contrast. Not coincidentally, I also realized my software was literally* painful to use for someone in my condition.
I have learned to give a shit about color choices.
*That's the literal 'literally', not the figurative one.
It hugely depends on the target user group: admins don't mind about an 'ugly looking ... but productive software', but non-IT users mind a lot, and for them it has a significant effect on usability. It can only be '_very_ productive' for the target group, when it is also well-designed for them.
The legibility tab is more generally applicable though. " tuning the 0.3%" could be significant then that 0.3% are people with significant vision problems.
You still don't want to be spending more than a moment on that in early design, but with a tool like this covering the issue might only take that moment so you don't have to make alterations later when early design decisions/accidents are baked in and harder to change.
Yes, and it would be enough to have one set of styleguides to cover all apps. In fact, I would very much prefer that. All the 'cool' looking stuff can be extremely confusing because you need to re-learn at least that part of the UI over and over again. It's a kind of mental form of lock-in.
Try to be serious. Wine that costs 1000's of $ per bottle is in exactly the same bottle as wine that costs next to nothing. The only difference is the label.
Of course there are marketing whizzes that package crap wine in fancy bottles to sell it at inflated rates but that's nothing to do with what I was trying to illustrate.
Winebottle: glass enclosure usually topped off with a cork, usually made of green glass. That there is wine that is so cheap it isn't even sold in bottles is an optimization, the fact that there are very fancy bottles with wine that usually isn't all that good is marketing.
You're implying that if one uses the color tool, he's going to spend hours playing with it and forget about implementing important features. The tool will save you time instead of waste it, since you don't have to make up a color combination yourself, giving you more time for implementing stuff.
I also disagree than making an app look good will make it more appealing to only 0.3% of users. People are very design-oriented nowadays, and non-technical people will judge the quality and reliability of an app mostly by the way it looks. Personally, I _always_ try the better-looking app first, and if it works I stick with it and never even try the ugly one.
Paletton is really good. It also allows you to simulate Color Blindness of various types so you can plan for those users in your color selection as well.
Those are accent colors - A for accent. The number refers to the darkness level of the color variant. Not sure what better way to describe it, but it goes from:
Low Saturation Light (50) --> Very Saturated (500) --> Low Saturation Dark (900)
Nice to see that Google picked up a specific use-case, material design on mobile apps, and built a guide tool. For color guide on more generic design requirements, https://color.adobe.com/create/color-wheel/ is something you might want to look at.
I'm not a color expert, but is there a color tool which would narrow down available color options for the Secondary color palette? Primary palette is cool, but I can still make it all look ugly by choosing random colors for the Secondary palette, which is exactly what I would want to avoid.
I don't think it's as much a design for designers but a design for users. It's a guideline that all apps can follow so that the user doesn't have to relearn every single app and is more likely to know where to find stuff. As far as aesthetics go it's not the greatest yes, but it doesn't have to be. Having a good looking foundation on which to base your app is great. If you really want it can always be innovated. There's plenty of nice changes you can find in different apps and it's always evolving.
As a user it's super un-intuitive, though. At least how gmail, calendar, maps and other google apps are on Android at the moment. I mostly click and pray.
It's interesting that lots of people on HN say the same thing: I don't know how to perform an action; there are no affordances in the UI.
But Google is a data driven company and they must, surely, have scads of data on this. They must know what their users are trying to do and how they're trying to do it, so why are Google interfaces so hard to use?
As a tech enthusiast, I occasionally get surveys to possibly sign up to try out a new version of a Google UI. I've never actually done it because the time windows don't usually work out, but signing up for these user studies is definitely something I ended up in by being in the tech crowd.
But I also have done a lot of tech support for senior citizens, who don't have the innate ability to stumble through bad UI like a lot of us millenial-types do. I feel like Google is talking to the wrong people.
I suspect that if Google UI designers spent some time in senior citizen communities watching people use their email, almost everything about how Google designs web pages would be thrown away.
I think you are exaggerating a bit but there is some truth in what you say but that's not Material design's fault. It's Google's that doesn't follow their own guidelines.
Do not confuse "Material" with "Anything made by Google".
I wonder if people say these same things when there's a bootstrap related post, or do people just get that it's a jumping off point? I get it if you just don't like it, but we shouldn't need to explain boilerplate.
I like to look at the apps google builds with their own frameworks as a guideline for good examples. Like https://material.angular.io/ using angular material 2. I like it simple, clean, and easy to read.
I think it's been a misfire precisely because it was bad for users.
They couldn't get buttons right! The one button to rule them all thing was a flop that even their own apps have ditched, the only place I still see it is in myfitnesspal (and it's super annoying). It's surprising you can launch what's supposed to be UI/UX guidelines and get buttons wrong.
It was obviously untested and had no basis in actual UX satisfaction. They had an unproven theory at what a good UX would be and presented it as fact. I think because of that, the Material guidelines should be regarded as irrelevant. They were at best a designer's bad guess at what a good UX is.
In my opinion, there's loads of other components in there that are bad, for example the side menu, the experience of all material apps on desktops, it's a bad UX.
> The one button to rule them all thing was a flop that even their own apps have ditched, the only place I still see it is in myfitnesspal (and it's super annoying)
I have just opened 4 random Google apps on Android (Search, Docs, Plus, Drive) and they all have the floating action button. Which Google apps have ditched it? The FAB makes a lot of sense on small screens like smartphones.
You can look at it in much the same way that the early versions of Windows enabled programmers to build applications that looked exactly alike.
In much the same vein, Material's "paper" concepts are designed to minimise confusion for lay users - i.e. "What does clicking the '+' button do?". Once you standardise the symbols and appearance of certain widgets, it removes the "have to think about it" barrier. You could argue that EVERYONE who uses a Windows computer knows what the [x] on the top right corner of every window does.
And like Windows, I think you will eventually see developers modify and extend Material to make applications stand apart from each other while maintaining some sort of consistency of the UI.
But like windows, you will eventually get to the stage that developers corrupt simple things like checkboxes to operate in non logical ways (e.g. as radio buttons), or you end up with a screen where every conceivable square millimetre of the window is a 'hot point' that does something when you touch/click on it! (I/m looking at you Excel etc.)
As someone who helps seniors use their computers, if Material is designed to minimize confusion for lay users, Material is a complete failure. I once tried to help someone through the new Material Google Contacts app, and eventually gave up and sent them back to Comcast.net.
Simple is not necessarily better when making UI. A '+' symbol will always be worse than 'Add contact'.
Personally, I find a bottom navigation of primary functionality to be far more pleasing than having to tap twice. For example, on iOS Spotify was quite arduous to navigate when they tried simplifying the aesthetic by having all the navigation within side menus. Their later re-design to move content back into the bottom navigation was met with a lot of praise amongst users.
Not sure why your comment gets downvoted. It's a fair point, especially since non-geek people don't have a clue who produces the apps they have installed on their smartphone.
In general people don't have a clue, but they obviously know the source of some Google apps like Gmail and search. But then they associate all apps with that design pattern with Google, since they do know Google apps.
I'm not convinced it's their ultimate goal, or even one of their goals at all, since poor implementations could water down their branding. But it is definitely a side effect.
That's a very cynical view. I think their ultimate goal is getting nice looking and functioning apps on their platform.
Material is an Interaction Design play first, a design play second and maaaaybe a branding play third but whatever. If it makes apps and the web a better place because every Joe Schmoe dev can focus on functionality instead of design (which a lot of people simply suck at) that's great.
But also not strictly on their platform. There's top-down "encouragement" from management to use Material Design in all their iOS apps too, which isn't really being a good citizen of the platform.
This is the thing. You need to invest not only in completely understanding how every aspect of material design works, you also have to understand that visual languages enforce strong opinion and aren't an expression of creative freedom.
So if you understand it well enough and if you have enough weight to ensure what you are designing fits into it then it might work for you and your users.
It seems to mostly be used like bootstrap thought and ends up being tedious and inconsistent. The worst kind of inconsistent as well, the one where you are mislead by familiarity that then doesn't turn out to be real.
I think that's the main issue: We're talking about"apps" here, where a unified HCI guide always was an important goal. Material design is basically using the Android's platform's UI in the browser.
This application POV clashes with "web pages" being more a domain of print designers gone digital.
It's most impressive trait is that it is a holistic approach to UI and design. There aren't many "systems" out there for that.
However I agree, there isn't much new and impressive in it and the evangelistic design chatter it created, much like the Flat Design trend, gets very stale and can stifle good conversation on the topic.
What's sad is that people see it as an endpoint. While the thing is obviously meant to be a starting point, a baseline of "good design" that you can expand on if you wish, or stick to if you have better things to do.
It moves the baseline from zero design to "good" .
Which was the great thing about flat design too. It brought basic good design principles to the discussion. Whether you liked the asthetic or not, the core guiding principles were the real win.
I feel like the creators of the Material Design site simply sought to formalize those principles and build upon them, which I think they have done a good job of.
Great tool. Especially for people without a lot of design or color theory experience. As someone with both, I find the palette a bit too saturated for my tastes.
I've tried to only use the colors listed in the material design docs, but usually make my own palettes in the long run.
Are there some good resources you could recommend for color theory? I've come across lots of palette tools but little indication of what makes colors work, aside from contrast indications. I feel very much like someone in a workshop with every tool imaginable and no idea of how to use them.
The only problem I have with material design is that lots of apps just look the same, and some people _do_ confuse Google stuff with apps that use material design, thinking they're from Google.
Much better than all apps looking like Bootstrap's default theme, though, which is a popular alternative to loading a material design theme with a palette you picked.
The other side of this is that it helps usability when things look and feel familiar. It's interesting how it's accepted that desktop applications generally look the same, but mobile apps are supposed to be more unique. Maybe just the nature of mobile being generally more consumer oriented?
Isn't it weird that when it comes to desktop apps and particularly UI toolkits, we freak out when things don't match the OS style perfectly, but with applications on the web --- many of which are more UI-intensive than native apps --- we're constantly looking for the CSS Zen Garden?
So long as desktop apps don't mimic kai's power tool interface, I think a little variety on the desktop side is nice, so long as it fits function to a meaningful degree.
So an audio mixing applic might do something in a different way than office's ribbon ui.
I don't agree that desktop apps look the same, but it depends on the platform I think.
Apps that use native controls will definitely look the same, but the apps I've been using in the past few months—and yes some are Electron-based—all look very different on macOS.
here's some other similar tools that I collected over time
https://www.sankk.in/material-mixer/
http://flatuicolors.com
https://www.materialpalette.com