

Flat Design and Color Trends - SmeelBe
http://designmodo.com/flat-design-colors/
When it comes to color, flat design works with a variety of colors, but most commonly designers are choosing to go bold and bright.
======
monkeyfacebag
> What we are seeing more of with flat design and color though is the matching
> of tone and saturation.

As someone with practically no design skills, how would I accomplish this? For
example, let's say I had two or three colors in mind or already picked out.
What are the steps I could take to line up their tones and saturation? Is
there a formula or algorithm that applies?

I realize design skills are developed through practice, but I very often find
myself with something I've put together that looks just _OK_ and just sort of
aimlessly tinkering around with it until I've inevitably made it look washed
out. So obviously my _feel_ isn't working yet--where else can I turn?

~~~
ahknight
Open up any color palette tool and switch to HSB mode. Move H around and leave
S & B alone.

~~~
msutherl
No! Hue does not vary independently from perceived saturation and brightness
in the HSB color space.

You would need to use something like the Munsell system to achieve this.

------
nfoz
Usability failures include low contrast, no delineation of borders, and no
visual cues for the interactions that are permissible for different parts of
the interface (e.g. "clickable" button vs. bare text).

Sigh. I like the aesthetic but fad-monkeys overwhelmingly fail at the
engineering part of design. You can be simple and elegant without going
backwards on other usability principles.

~~~
juiceandjuice
Buttons didn't have gradients or 3D effects or often even colors for nearly
10-15+ years on Macs and PCs and people were able to use them just fine. The
did often have highlights and borders, however. A button in Classic Mac OS was
unmistakably a button without most of those cues.

It's possible to have a nice, useable flat design. However, great care must be
taken to use visual cues and be consistent in the UI. It's also possible to
have high contrast. Low contrast is not flat design, it's a poor
implementations of colors with a flat aesthetic.

~~~
keenerd
> Buttons didn't have ... 3D effects

Buttons on windows have always had 3D effects.

[http://www.guidebookgallery.org/pics/gui/desktop/full/win31....](http://www.guidebookgallery.org/pics/gui/desktop/full/win31.png)

Note the 24 instances of shadows cast from a north-west light source, as if
the buttons were objects with depth.

~~~
juiceandjuice
<http://en.wikipedia.org/wiki/File:Windows_2.1.png>

------
jzimdars
"Flat Design". "Responsive Design". These don't need proper names. Everything
does not have to be a movement, you don't have to pick a side.

If you start a project and wonder, "Hmm... should I use Flat Design for
this?", you're doing it wrong.

~~~
da_n
I understand where you're coming from but dismissing it as a 'thing' is a bit
cynical. I disliked the whole 'web 2.0' look, it was garish and rarely had any
relation to things in real life. With more designers embracing the flat
aesthetic, I think it shows a deeper development that design is becoming more
humanist, and this can only mean users are more aquatinted to digital
interfaces and no longer need high gloss buttons to understand an elements can
be clicked etc. The move towards flat to me a great thing, a turning point in
digital design.

~~~
andyharl
I don't think it is cynical. This is a new trendy style. In 3 years, everyone
will be complaining about flat design, hipster mustaches, and wishing we had
more gradients and glossy reflections.

Now i'm being cynical. ;)

~~~
da_n
I would mostly agree with you that flat design is a new style if we limit the
context to only web/application GUI's. No one can really disagree that flat
design is an already historically established visual aesthetic in the real
world.

So this is _digital_ flat design. With digital there are different metaphors
to consider, like user interaction, boundaries, display capabilities etc. This
is the web adopting some of the best things about established design
aesthetics in the real world (minimalism) and integrating them in an entirely
new way to incorporate those considerations.

I agree that it is inevitable there will be some new design trend in a few
years time (please hopefully not one that involves monstrous glossy buttons
and gradients), however this current flat design feels like it is laying the
groundwork, especially in how a design should be technically achieved. The
flat design is naturally more vector, which makes it inherently more native to
web technology (CSS, HTML). This is very different from previous web design
trends I can remember which were essentially hacks, initially involving
tables, and later divs compiled from static bitmapped assets exported from
Photoshop. This I believe is a new chapter in the evolution of design on the
web.

\-- Edited for clarity.

------
juiceandjuice
Designmodo and the Flat-UI is pretty mediocre to poor at contrast. I forked
the project and ended up ripping out a lot of the components which were low
contrast and modifying the palette to have high contrast, then modifying the
borders to my own inset/outset values to have a more muted level change on the
buttons but still have them look somewhere between flat and and normal
buttons. I did experiment with an inside white border on buttons for an
Classic Mac OS feel (the original monochrome "Flat UI" )

Much of the flat aesthetic is rooted in swiss graphic poster design, however
that doesn't translate so well to pages where dense text actually matters,
especially with poor color choices. Much of designmodo's color scheme actually
fails the contrast algorithm for small text, except at larger text it's
generally okay. Bootstrap itself is pretty abysmal as far as this goes as
well.

The flat aesthetic is nice, but those who continue on with it with disregard
to contrast will not succeed. Accessibility and the flat aesthetic is
possible, it takes more work and compromise, however.

~~~
soulclap
Is your fork public or are there any screens, etc. available? Sounds good.

------
cbeach
Am I the only one that thinks "flat design" looks bland, unengaging and
unoriginal? Are we, on the cutting edge of web trends, going to take our
design cues from Microsoft's Windows Phone marketing department?

~~~
d23
Judging by the increased popularity, I'd say that you are at least in the
minority. I find that it looks clean, elegant, and attractive.

~~~
PavlovsCat
_clean, elegant, and attractive_

I notice that these are not in contradiction with adjectives that come to my
mind first.. such as sterile, pretentious, mediocre, repetetive, heartless.
Though now I think I'm kinda projecting properties into "flat design" it might
not have, based on the properties I see becoming real hip in people.

------
kunai
To be honest, I'm really sick of "flat design." All it seems like is a fad
that should (hopefully) boil away soon.

When you make something flat, you make it more aesthetically pleasing, but at
the same time, you take away many visual cues that alert the user as to what
exactly a specific widget does.

I think the Windows XP interface (Bear with me on this) demonstrates how you
can be "matte," so to speak, but still usable. You could tone it down a bit
more, but to eliminate gradients completely out of a UI is ugly and a gigantic
hit to usability.

I think OS X has a great balance between flat and dynamic. They've toned down
the ridiculous levels of gimmicky glossiness, but they've kept in the stuff
that is important to the design. For example, the lightening of a shadow
behind a window is a visual cue that the window is inactive. The pulsating and
glowing water-filled Aqua push-button is an invitation to click on it, while
the matte de-focused button is less significant. The Traffic Lights are
smaller but the click-point remains the same.

Progress-bars slowly pulsate to indicate activity, and if they've stopped
pulsating you know that something is wrong. Borders are clearly defined
through shadows and solid lines.

Overall, it's a great UI. Ditto for iOS. Android also puts the flat design to
use properly.

Can't say the same about Windows 8, and I also can't say the same about
designmodo's flat toolkit either.

------
zacharyvoase
“One thing that really makes the flat design trend work is that it is new and
fun.”

Not ‘a good idea’ or ‘usable’ or ‘accessible’, just different.

EDIT: Just to take the snarky edge off, I want to mention that whilst this
might have been quite a good blog post if you've already decided to use Flat
Design™, I'd have appreciated a discussion of the merits. But of course not
all blog posts about anything are required to go into such a discussion.

~~~
monkeyfacebag
I don't necessarily disagree, but ( _unfortunately?_ ) there is a well-known
result that aesthetics affect perceived usability [1]. Clearly, making your
site look better does nothing for the underlying usability, but the perception
of usability is arguably just as important. I believe Apple has demonstrated
this with each iteration of OS X: aesthetic concerns always seem to trump
usability concerns (example include the Dock and the behavior of green window
button) but the OS is more popular than ever.

Of course, you're still left with the question of whether choosing a flat
design improves or detracts from the aesthetics of site. Here we're venturing
into the realm of the subjective, but I'd venture to say that, given the
current trends, it hardly seems like the worst thing you could do.

[1] <http://www.sigchi.org/chi97/proceedings/paper/nt.htm>

~~~
Silhouette
_there is a well-known result that aesthetics affect perceived usability_

Other things being equal, that is true, but in the case of flat design other
things are usually far from equal. The loss of affordance with flat design can
be crippling.

------
lewisflude
Absolutely love the colours that are associated with flat design. I think, we
as designers are defining a new set of rules for what we want flat design to
be. The applications in the context of mobile sites is obvious where space is
limited. As always, once you've learned the rules you then have the ability to
break them.

~~~
camus
flat design is a fad and will go away , like all trends. It's not bad , but
since it is used everywhere even where it should not be used , it is an abused
trend.

------
LarryMade2
Heh, the colors remind me of the 80s, TRS-80 Color Computer and the CGA hi-res
color palettes... Actually just about every 8-bit color palate from the time:

[http://en.wikipedia.org/wiki/List_of_8-bit_computer_hardware...](http://en.wikipedia.org/wiki/List_of_8-bit_computer_hardware_palettes)

