Flat UI Colors

[davidw]

You guys just aren't old enough to remember twm, the original flat design.

http://upload.wikimedia.org/wikipedia/commons/6/67/Twm.PNG

[vidarh]

Here's AmigaOS 1.x:

http://www.gregdonner.org/workbench/wb_13.html

(2.x went bevelled, and none of us looked back)

[rootbear]

Whoa! That brings back memories. Even more than the NeWS interface I brought up on one of our Suns recently, just for fun.

[brute]

It always bothered me, that the colors of twm are so ugly.

Here is a recolored screenshot using the UI colors cited above: http://oi60.tinypic.com/140yiqr.jpg

Now it only needs some font aliasing and it is fit for a revival.

[frozenport]

The Jabberwock, with eyes of flame...

[teddyh]

“Remember”? I still use it.

[icantthinkofone]

You don't have to be older. twm is available on FreeBSD and I'm sure it can be installed on Linux.

[sdegutis]

I always preferred Windows 95's "flat design", even if it did have occasional bevels.

[Semaphor]

No need to be old, used blackbox on Linux for a while

http://xwinman.org/screenshots/blackbox.jpg

http://fc01.deviantart.net/fs70/i/2011/235/4/8/darko_blackbo...

[afandian]

I find the current trendy 'flat' UI pastel-y colours, honestly, disgusting. Design is a matter of taste, and there's no accounting for other peoples' taste, but I am genuinely baffled about how anyone could like them.

Obviously someone does.

I wonder whether this is because flat design does away with all the helpful instinctive visual cues that were developed over the last decades (e.g. shadows, faux-3d borders etc) and needs to find new colours because there's no other way of expressing relationships?

Is it the case that designers have been forced to come up with 'more' colours under duress because of this, and have to try out new colours? Or is it that people genuinely like them? Or does 'like' not come into it? Or is there just one very influential designer at e.g. Google who has a different aesthetic to me?

EDIT: I'm commenting on the colours on the page linked to this discussion. Not colours in general.

[etimberg]

I'm a programmer not a designer but here's my $.02. As a user I like the flat UI concept not because of the flatness, but because of the colours. I'm tired of looking at grey all day and these provide a welcome change.

[Kequc]

I don't think minimalism is going to be a trend. There are plenty of reasons why bevels, overuse of gradients, drop shadows and on and on turns users off. Though you might be used to something different flat design is easy on the eyes. Flat design is relatively consistent. There was never any consensus for example on how much drop shadow a button should have. Removing the shadow entirely eliminates one more point of inconsistency between experiences.

Older people are a great example of why consistency matters. Whenever I show my ageing mother a new website and it isn't incredibly clean + simple to look at it. Her brain shuts right off, she stares at it and waits for me to do something with it.

The first time she saw Android on her new Nexus she immediately was able to start tinkering with it. Flat design, limited colour and gradients, fewer distractions.

I don't understand the complaint about the colours being used on flat designs. Do you have your screen brightness turned all the way up? Turn it down you might notice how bland and grey a lot of older websites look - bevels don't save them.

[charlesism]

On the internet, nobody knows you're a dog. With flat design, nobody knows you use MS Paint.

[silverbax88]

Hear, hear. Flat design is an awful trend. Removing functionality for simplicity - too many times 'flat design' has rendered applications almost unusable.

[blueskin_]

Couldn't agree more. It's just designers trying to justify their own salary.

I like interfaces that have nice 3D effects, especially on a window manager. I like high information density. I like being in control and having a customisable experience. Metro flies in the face of all of those.

[tomp]

It looks like UI design is becoming like fashion; you need to completely revamp your visual presentation every few years, unless you want to look ancient. Personally, I much prefer OSX and iOS before it became flat - I understand why Google jumped on the FlatUI bandwagon (to differentiate themselves from Apple), but I really don't understand why Apple did too - do this people really think that there 5 year old's drawings are the height of visual experience?

[tomelders]

I'm with you on this. iOS did go too far with all the skeumorphism that served no purpose (Podcast app being the biggest offender), but "flat design" throws the baby out with the bathwater in my opinion.

I'm already tired of guessing what is and isn't a button.

[mattgreenrocks]

Idea: someone should create a slightly snarky design site that tells you all the fonts, styles, and colors you should be using now to look 'modern'.

Bonus points if you mention the last time a particular trend surfaced.

[GFK_of_xmaspast]

"It looks like UI design is becoming like fashion;"

How could it possibly be anything else?

[nkozyra]

This has been the case for the web since day 1. I can remember all sorts of trends that everyone followed, some of them examples of terrible UI. Anybody remember the super-tiny and/or monospace text phenomenon of the early 00s?

[Raphmedia]

It's because flat UI looks good on retina / 5k.

[mmahemoff]

This is nothing new. As long as there have been GUIs, platforms have issued style guides to developers and expected them to emulate the look-and-feel of the platform's own OS and flagship apps. Remember "lickable" OSX?

Flat itself is a design fad like any other, and the reality is the app's appearance and adherence to trends is a real signal of quality to most users.

[stronglikedan]

> UI design is becoming like fashion

I think it's always been fashionable to have a modern UI. Just look at windows (the concept). I think the trends are just moving faster nowadays, as the tools to related to developing UIs become more accessible.

[orbifold]

With the new higher dpi displays, they now follow modern print design conventions instead of some pseudo 3d look, which does not look all that good when viewed at high resolution.

[jasey]

It's because skeuomorphism worked when you had screens of a consistent size. Ie, iPhone 4s and below. Because skeuomorphism is so bitmap heavy it doesn't scale to different screen sizes.

Imo flat design came largely from responsive web design. It's just easier to build nice looking ui which adapts to any screen size when it's flat. This of course was why it suited android, because they have hundreds of diff screen sizes to cater for...

[blueskin_]

I have to agree - I predict that in 3 years, metro will look very dated and design will be focusing on actual information density and nice effects again. It's just sad we have to sit through this wave of crap before that happens.

[v512]

Honestly I too felt that current OSx redesign is pointless though I like Google material design...kind of strange taste I have.

[moron4hire]

Yet the terminal never changes :)

[bitL]

I think it comes from trying to make screens appear like paper prints - some people love the feel of reading books/magazines and skeumorphic design elements feel disturbing to them.

[sspiff]

Kind of annoying every tile becomes a Flash object when you hover over it. This makes it much harder for people without Flash to access (like me) to get the color codes. Even the people with Flash can't see the color code until they paste it somewhere.

[adregan]

I've become partial to the "trello style" clipboard solution where on hover, a hidden input's text is selected and all you need to do it command-c and you've selected the text.

It's a pretty good intermediary until — one mythic day — we can access the clipboard via js.

EDIT. Link to relevant stack overflow answer describing the flow: http://stackoverflow.com/a/17528590/2236561

[jbrooksuk]

It provides an interface to the clipboard.

[scottcanoni]

What am I missing? Isn't this just a hardcoded set of 20 colors that doesn't change? What if I don't like those particular 20 colors?

[bionsuba]

Then don't use them?

[lpsz]

What makes these colors "flat UI colors"? (Not trying to be snarky, actual question from someone who spends much time in Sketch.) Is it just a palette of somewhat matching colors or is there an underlying theme that I'm missing?

[thisjepisje]

So why does the colour change on mouseover? Which colour am I copying when I click a rectangle while my mouse is hovering over it?

[ahmetsulek]

you should also check the flat ui terminal theme I've made https://dribbble.com/shots/1021755-Flat-UI-Terminal-Theme?li...

[codebeaker]

Hasn't this been reposted often enough? https://hn.algolia.com/?q=flatuicolors.com#!/story/forever/0...

[jbrooksuk]

I find that http://flatuicolorpicker.com provides a better interface.

This site never seems to copy the colour code first time.

[NicoJuicy]

I knew i came accross this somewhere : http://codepen.io/noahblon/pen/EGbCs

But who was first?

[chetangole]

Made with Flash! are you kidding me?

[laex]

Great colours. If you'd like to use them in OSX, you can use the palette that I made. https://github.com/hemantasapkota/FlatUIColorPaletteXCode

[normloman]

5 must have colors for fall, plus 11 hot fashion trends.

Hey dummies: Flat design is a concept. It's not a fashion trend with specific "in" colors.

Some time ago, a bunch of idiots got their hands on UI design, and are turning into a fashion show.

[oltmang]

Reading the color names, I thought Nephritis (#27ae60) sounded like something else…

http://en.wikipedia.org/wiki/Nephritis

[calgoo]

looks good, but the animated icon in the tab title is really annoying. My brain is wired to connect movement in small tab icons as notification indicators these days. Its catching my eye every few seconds while reading the comments here.

[odoodesign]

Love it! I used it a lot.

[vblord]

This site is really easy to use. I like it. I just wish there were more colors!

[mro95]

+1 but old.