
The Flat Design Aesthetic - sethbannon
http://speckyboy.com/2012/12/11/the-flat-design-aesthetic/
======
mortenjorck

      Allen Grinshtein of Layervault may have coined the term “flat design” originally.
    

Oh dear. This is what happens when your design perspective is limited to the
past few years of popular UI design.

“Flat design” was not invented by designers at tech startups. The concept was
not popularized by Microsoft. Yes, there has been a recent trend away from the
use of shading, texturing, and depth cues. It is a resurgence of something
that began much, much longer ago.

Who invented “flat design”? Maybe Josef Müller-Brockmann, 1951? El Lissitzky,
1932? Dribbble users may not care about these names, but the current seasonal
trend toward formal simplicity is little more than a rediscovery of the 20th
Century's defining graphic design aesthetic, Swiss Modern.

If you're interested in the history of design, and understanding modern visual
design in a broader context, I'd suggest Philip B. Meggs' A History of Graphic
Design. For something a little more readily available, you might also want to
take a look at Guity Novin's History of Graphic Design. Here's the relevant
chapter on the Swiss Grid: [http://guity-
novin.blogspot.com/2011/07/chapter-42-swiss-gra...](http://guity-
novin.blogspot.com/2011/07/chapter-42-swiss-grade-style-and-dutch.html)

~~~
jff
Here's some brilliant flat design, right guys?

<http://rand-mh.sourceforge.net/book/xmh/figs/ormarwsr.jpg>

~~~
agumonkey
I'd be curious to see these old wm rendered using a modern graphic stack. With
a little bit of anti-aliasing and some tweaking it could be beautiful.

~~~
sil3ntmac
<http://en.wikipedia.org/wiki/Raster_graphics>

------
hcarvalhoalves
Minimalism and skeumorphism are not mutually exclusive.

Skeumorphisms are adopted on UIs, _a priori_ , to give hints about the
function and ease the interaction with new users. It's a metaphor to reuse
prior knowledge of how things work in the real world.

What Apple did with the calendar app is not skeumorphism: it's just kitsch.
While the app _looks_ like a calendar, it doesn't _work_ like a calendar (you
don't flip between months, for example), so it completely misses the point.

On the other hand, you could design a calendar that _works_ like the real
thing, using minimal lines and flat colors, and you could argue that it's
minimalist _and_ skeumoprhic (because it still carries assumptions about
another object, the paper calendar, even thought flipping pages is not a
metaphor of digital media).

BTW, the definition of skeumorphism in the Wikipedia article is too narrow,
and at some points downright wrong.

~~~
mortenjorck
Actually, both the OS X and iOS calendars do support flipping between months
with a swipe. Arguably, the leather effect at the top aids in this by
reinforcing the physical-analog affordance, though the torn edges are a bit
much.

Now the address book, that's a nearly perfect counterexample. Once again, on
both iOS and OS X, it has "pages" that invite a swipe – except here, swiping
does nothing. A dead affordance that only serves to frustrate and confuse the
user.

~~~
Groxx
The new address book is an absolute usability disaster, IMO. Though to my
great joy, Mountain Lion at least restores a large part by bringing back the
three-pane setup.

------
ChrisNorstrom
Oh Jesus, UI Design has turned into fashion.

Follow a fad, get sick of it, follow another fad, get sick of it. Over-do
skeumorphism, proclaim "I'm heading in the extreme opposite direction", over-
do flat design, go into extreme opposite direction. After everything's been
"flat"ened we'll move into 3D design where divs and containers have a raised
3D look.

===== The problems with flat design =====

\- It can give off a hospital white, cold, emotionless, colorless, boring,
bland, sterile look.

\- Looks like it was exported from a UI drafting app.

\- Looks unfinished.

\- You can't always tell which elements are clickable (see new YouTube
redesign) because everything is so blocky (see windows metro).

\- Has an extremely unhealthy obsession with white-space as a separator.

\- Elements that where once grouped together are now just floating around in
white-ness.

\- Looks like randomly arranged icons and text. (see the new unnecessary, god-
awful YouTube re-design)

===== The problems with Skeumorphism =====

\- Inefficient, lots of css, lots of images.

\- Follows what used to be familiar 10 years ago rather than what's proper
today.

\- Stuck in the past, old fashion, outdated.

\- Doesn't make room for new UI elements.

\- Old UI clashing with New UI.

===== The problems with Web 2.0 look =====

\- Design and UI are loud and attract more attention than the content they
hold.

\- Super shiney buttons, unnecessary gradients.

\- Distracting colors.

===== WHAT DESIGN SHOULD BE CENTERED AROUND =====

\- Predictability, familiarity, usability, ease, retention, signups.

\- Gradients are fine as long as they're subtle and not distracting.

\- Buttons should have rounded corners to emphasize their clickability.

\- Important elements should stand-out / pop-out more. You can use shadows and
gradients and color to do this.

\- Typography should be easily readable and go with the theme of the site.

\- Design elements should not be loud, the elements that contain the content
should not stand out more than the content itself.

\- Rather than use eye bleeding white on everything, using subtle soft colors
is best.

~~~
54mf
Design has always been about aesthetic preference. While you're absolutely
right about the core concepts (typography, color, contrast, etc), I find it
amusing that you say that buttons "should" have rounded corners, or that
gradients "are fine". Both of those concepts have merit, but are centered
around a specific design metaphor (creating virtual objects with real-world
qualities; round, "safe" corners for touching) that is by no means _required_
for good UI design.

I'd be happy if we could just all agree and acknowledge that design is fashion
and is almost entirely open to personal preference, instead of cyclically
praising then destroying our golden calves du jour.

~~~
rimantas
The word "affordance" was mentioned in this thread a lot and for a reason: it
is not a thing of fashion, it is essential for good UI design. If you want to
engage user in interaction you must make it pretty clear what can be
interacted with.

~~~
pfortuny
Yes: the problem with all the minimalist approaches to anything (starting with
architecture) is that "we, the people" are confronted with something with
which we do not know what to do.

Is this a conference hall, a chapel or a dining room? Is this the main room,
the entrance or just the aisle to the toilets?

Design, whatever designers may say, is just a means to convey a message:
either it succeeds or it is bad design.

It cannot be like modern poetry or modern 'art', where either you know the
code or you understand nothing. If this happens, it is not good design, it is
a different thing (which may be valuable in itself but not 'design' in this
context).

You can write a newspaper with telegrams. It certainly would be cheaper. It
would also be unreadable.

Edit: sorry cannot help mentioning it. Minimalists are usually as 'dogmatic'
as any baroque artist might be. But at least, when you see baroque art you
appreciate the harmony instantly. Not so with minimalism.

------
jkw
I am generally against skeuomorphism, and prefer what this article refers to
as "flat"" design. However, one of the difficulties I've come across with flat
design is the ability to communicate the affordance of actionable items (i.e.,
buttons) vs. non-actionable items (i.e., content and images).

As an example, I would classify the Windows Phone as an OS that has fully
embraced flat design. However, after using it for 6 months, I constantly find
myself confused on where I can click vs. not. Other apps have trained me to
recognize buttons through gradients and bezels. This becomes even more
important on the phone as there is no "hover" state that helps one explore
click-able areas. I found it helpful is to introduce hints of skeuomorphism
when communicating affordance of actionable items, while keeping the rest
minimal.

Am I the only one, or are others also experiencing this issue as well with
totally "flat" designs?

~~~
monochromatic
> Am I the only one, or are others also experiencing this issue as well with
> totally "flat" designs?

I was under the impression that this was _the_ main gripe about flat
interfaces. It sure seems pretty compelling to me. Flat may be pretty, but it
is demonstrably less intuitive, less functional.

It seems to me that the people advocating flat interfaces have completely
missed the point of form following function, having chosen a less usable
interface for what are essentially aesthetic reasons.

------
ubercore
Is skeuomorphism being diluted to the point of irrelevance? I understood it to
be _clear_ translations of design elements from one object to another. So,
making a computer calendar look like a physical calendar that you would flip
through on your wall.

As used in the article, it's so vague as to be unhelpful: gradients are
skeuomorphism? What were they copied from? What other object are they trying
to imitate?

Using the example of nest illustrates this well -- the interface shows an
exact replica of the UI on the physical device to control it. Does the rotary
control make as much sense on a computer screen? Probably not. Is it still a
good design decision? Yes. Is it flat? No.

~~~
sp332
_we often apply gradients and drop shadows to elements that are meant to be
buttons, because buttons in the real world have these features, even though
they are unnecessary in the setting of a computer user interface._

So it's skeuomorphism because it's trying to look like a physical push-button.

~~~
ubercore
A gradient can be used as a design element (in buttons or elsewhere), without
skeuomorphic intent.

~~~
Kerrick
A gradient from one tone/tint/shade to another of the same hue implies one
thing: directional light. If directional light is visible on an object, that
object exists in 3D space, at least in the mind. If that object exists in 3D
space, then it has tangible form. If a UI element has tangible form, instead
of only function, then it is skeumorphic.

At least, that's what the article seems to be saying.

------
tptacek
Rdio is I think an example of the aesthetic taken too far; when I first got it
in an update, I thought it might have been a bug. It looks not drawn _enough_
, like the product of a UI framework that deferred look-feel and died due to
an uncaught exception.

A lot of UI styling is just cosmetic, but some of it is there to create
affordances.

~~~
ryanglasgow
Their designers stripped away everything that was unnecessary, and allowed the
content to become the design. It's a very difficult aesthetic to pull off
because it relies entirely on the most challenging aspects of UI design:
spacing, grids, and typography.

At first, I didn't like it either, but over time have come to love it (and
have become inspired by it in my own designs).

~~~
rimantas
Alas, it is possible to strip too much and I think Google is guilty of that.

    
    
      > aspects of UI design: spacing, grids, and typography
    

I'd say these are more aspects of content design, albeit still very important
in UI, but less so, for a simple reason: typically there is less content. You
still have to have some visual hierarchy, make important things prominent and
less important less so, mark interactive elements as such. When you strip too
much you are forced to use whatever left for that and it can be a stretch,
like excessive use of white space.

------
anthemcg
This whole argument is starting to feel really old. Neither "flat design" or
skeumorphism is necessarily the right path. They are both great techniques
which can solve different problems. Gradients and texture bring dimensionality
and personality. Flat design feels more modern and focuses certain
functionality. Look at Apple v. Microsoft right now. Skeumorphism IS solving
Apple's design problems and Windows 8 is struggling to make meaningful
strides. In my opinion This whole purist backlash against skeumorphism is bad.
This new approach implies that ornamentation and style is not important or
useless. I find this implication ridiculous, designers must solve problems
with form and emotionally appeal to users. Personality is equally important to
solving the problems. The fact the designers are attacking or shunning one
over the other is upsetting.

------
artursapek
I always hated everyone's (especially Apple's) skeumorphism. I wrote this
<http://nnife.com/inouveau.html> about it, to me imitative digital design has
always been horrible and it reminds me of the imitative architecture and
furniture design that was popular about 120 years ago, like this article also
mentions. It's such a dumb way of designing.

"Let's just make it look like this other completely different thing! It's
familiar, so people will be drawn to it."

Pixels are flat. Screens are flat. Flat design is here to stay.

~~~
rimantas

      > Pixels are flat. Screens are flat.
    

Pixels are also RGB. Does it mean that designs should use only those three
colors?

    
    
      > Flat design is here to stay.
    

Total non sequitur.

~~~
artursapek
What the fuck are you talking about?

------
jongold
As with everything on that blog: total BS.

Flat design isn't an 'aesthetic'; it's the result of considered design
thinking. Picking 'flat design style' instead of x or y 'design style' is to
cheapen yourself as a designer to the level of an 11 year old on DeviantArt.

~~~
mnicole
Some of these design blogs need to be put in the same bucket as W3Schools on
HN so people know not to bother. So much misinformation.

------
lnanek2
It would be nice to see some usability studies to see if users actually find
the actions on a page as easily despite the lack of 3D, bevels, shadows,
gloss, gradients, etc.. We programers often reason things out, like the above
article did, just to watch users try to use the app and prove us completely
wrong.

At one company where we had flat buttons we made the most commonly desired
action on the screen really huge and had a block of smaller buttons below it.
In usability tests, no user ever hit that huge button. They all thought it was
just a page title or something. We even tried giving them tasks that required
using it, but they would go into a different section of the app like the
settings and never figure it out.

------
juiceandjuice
Sort of off topic, but there are physical examples of "flat" design applied to
objects. One notable example could be the Quad 33 preamp:

<http://en.wikipedia.org/wiki/File:Quad_33_Front.jpg>

------
jinushaun
Skeumorphism isn't inherently bad. But problems commonly follow when designers
aspire for authenticity over sanity, which leads to bad user experiences.
Apple's Contacts and Calendar apps are cumbersome to use because they try too
much to replicate real world objects.

More alarmingly, it limits our creative thinking. When the iPhone was first
presented in 2007, Jobs kept on reminding us that these user experiences were
only possible because of touch screens. We were no longer limited by static
physical keyboards. The iPhone doesn't even have a shutter button in
Camera.app! There are countless other examples of digitally authentic user
experiences which are only possible if we think outside the box and beyond
real world objects.

------
amolsarva
In this book Interface Culture, Steven Johnson argues that Apple's OS X (back
in 1999 or so) was as significant a cultural contribution as.... Sgt. Pepper
by the Beatles

That's back when Apple made everything 3-Dish and liquid and transparent. It
did indeed change a whole 5-year chunk of UI designs. Maybe it was even the
first skeumorphism...it looks like water

<http://en.wikipedia.org/wiki/Aqua_(user_interface)>

~~~
cturner
I can't see a comparison to Sergeant Pepper. Sergeant Pepper was both mass
culture, and genuinely innovative through the use of sampling techniques that
ultimately changed the nature of pop. And it did progressions between
movements which was not new but still unusual in pop.

What innovations were new to OS X? In several cases it copied features from
other systems and then did a worse job of implementing them than the original.
GUI search was copied from BeOS and less powerful and more cumbersome.
Workspaces were copied from unix UIs, and feel roughly bolted-on because the
system is application centric not window centric. The strength in OSX was in
bread and butter stuff like consistent UI and drivers that work.

The only thing that was mildly new was the traffic light and horizontal
stripes. We'll have to see if people still respect that in a few decades. I
suspect we will instead look back at it as influential in the way in the way
that flares or the Ford Anglia 105E were influential, perhaps asking "what was
wrong with the world that so many people thought this kitsch to be a good
idea".

------
B-Con
I love it. I like the flat look, and I like simplicity in UIs. I was afraid
that flat and simplicity was going to die with Web 2.0, but now with Google
and Microsoft pushing simpler, largely flat UIs, that seems to be less
worrisome.

There will always be trends, and I'm sure eventually we'll trend away from
flat, but I'll enjoy it while it lasts.

------
bcoates
I think the only thing I'll miss from the unmourned previous design era were
gradients. They served a very practical function: the boundary between almost
any two gradients, even subtle ones, triggers the edge-detection algorithm in
the brain and creates a border while using up hardly any of your budget for
space and contrast.

~~~
jpdevereaux
I like the happy medium that the Squarespace screenshot suggests - flat list
navigation elements that are implicitly clickable due to their arrangement,
and lightly-gradiented buttons that pop out as actionable items. Moderation is
ideal (as usual).

------
elijahmurray
One thing that comes to mind is the updated www.outlook.com design and Windows
8 in general. While I personally am a fan as a designer, I'm more interested
in what non-techy people think of skeumorphism vs flat.

Anyone have input from relatives / friends or anyone not associated with
technology?

------
Mordor
If skeuomorphs are designed to transition from the physical to the virtual,
and we're now getting beyond them to a 'flat design', new virtual materials
should be the next topic for discussion. What sort of virtual world is it that
uses entirely new material forms?

------
jmathai
This page on LayerVault is a lot of subconscious work to know what's a button
and what's a form field.

[https://layervault.com/payments?plancode=small_team&sign...](https://layervault.com/payments?plancode=small_team&signup=true)

------
sekou
I'm surprised Windows wasn't mentioned in the article. Although the latest
version has been met with mixed reactions, I think the fact that Microsoft has
embraced "flat" design will have a measure of influence on the future of the
aesthetic.

------
dreamdu5t
None of the points listed about flat design are specific to flat design, but
are simply good design practices.

------
Mordor
There are two o's in skeuomorphism!

------
TommyDANGerous
I love flat design!

------
mikec3k
I _HATE_ the flat look. I prefer to see gradients, drop shadows, and rounded
corners. That's why I can't stand Android & Windows 8.

~~~
cheald
Android has plenty of gradients, drop shadows, and rounded corners. They
aren't garish hard-candy-style buttons like on iOS, but they're certainly
there. Subtlety in execution is an important part of design.

