Material Design Color Tool
material.io
material.io
here's some other similar tools that I collected over time
"Ah," said the marketing girl, "Well, we're having a little difficulty there."
"Difficulty?" exclaimed Ford. "Difficulty? What do you mean, difficulty? It's the single simplest machine in the entire Universe!"
The marketing girl soured him with a look. "Alright, Mr. Wiseguy," she said, "if you're so clever, you tell us what colour it should 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.
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'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.
> 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.
Happiness comes from visual variety.
I have learned to give a shit about color choices.
*That's the literal 'literally', not the figurative one.
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.
It's perception.
If you have an ugly bottle it doesn't matter if your wine is good, because most people won't get to try it.
This is (one of?) the cheapest wine in Italy: http://www.horecare.it/imagesvinobrik/full013.jpg
This is a really good Italian wine: http://www.terredifirenze.it/sites/default/files/bottiglia%2...
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.
And the 50-900, what's this about? From the docs, I read: "pick 500 as primary color". But what does the number refer to?
Low Saturation Light (50) --> Very Saturated (500) --> Low Saturation Dark (900)
* Paletton - The Color Scheme Designer || http://paletton.com/
* Material Design Color Palette Generator - Material Palette || https://www.materialpalette.com/
* Flat UI Colors - Color Pallette from Flat UI Theme || http://flatuicolors.com/
* Coolors.co - The super fast color schemes generator || https://coolors.co/
* Spectrum - Chrome Web Store || https://chrome.google.com/webstore/detail/spectrum/ofclemegk...
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?
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.
Do not confuse "Material" with "Anything made by Google".
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.
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.
I don't think you should follow their guidelines.
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.
The original design was click the button and a load of small buttons appear.
Keep ditched it completely, Drive has a slide up, I think Clock used to use it, others have disappeared.
They've abandoned the original concept.
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.)
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.
Funny, that sounds to me like a counterargument to the idea that this makes things look like they come from google.
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.
Agreed. I will add that I have seen some impressive designs that used the material design framework.
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.
This application POV clashes with "web pages" being more a domain of print designers gone digital.
Tschichold or Tognazzini...
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.
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.
On techcrunch which has...yep, dark gray text on a light gray background!
I've tried to only use the colors listed in the material design docs, but usually make my own palettes in the long run.
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.
So an audio mixing applic might do something in a different way than office's ribbon ui.
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.
Not sure, though.