The Flat Design Aesthetic

http://speckyboy.com/2012/12/11/the-flat-design-aesthetic/

by sethbannon • 14 years ago

107 60 14 years ago

artursapek2• 14 years ago

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.

fumar• 14 years ago

> Flat design is here to stay.

I think web design is an art form. Like all art forms it is in a constant flux. We definitely are headed to a more flat era. However, I can not discount trends, it is their nature to change with the times.

Steve Coogan states in 24 Hour Party People, "the history of popular music is like a double helix." Everything is always a reaction the last trend. http://youtu.be/GhpezhJxUYU?t=44s

ed209• 14 years ago

UI Design is a type of language and as such has to communicate a symbol with a meaning (or action in most cases).

If you can use a language element that your user already understands, why would you rule it out?

I also wonder why you compare Skeuomorphism with flat design when you can have a flat skeuomorphic design anyway.

And I'd also be careful with stating that any design trend is here to stay. Most design trends have been here before and will be back again in the future. It just happens that the flat-look is on trend.

rimantas3• 14 years ago

  > 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.

artursapek2• 14 years ago

What the fuck are you talking about?

bcoates2• 14 years ago

To bring up the affordance angle again, that doorway is extremely unsubtle about being a doorway, and gets high marks for usability, while the Le Corbusier building looks like a military pillbox with no way to enter or leave. All that ornamentation serves to guide the eye and give you a visual shorthand for what you're looking at, whereas the sharp textureless lines of modern objects and UIs makes me think it's all aspiring to be dazzle camouflage http://en.wikipedia.org/wiki/File:USS_West_Mahomet_(ID-3681)...

Besides, in the real world flat surfaces carry a gradient from their lightsource, truly uniformly lit, flat-texture surfaces are extremely rare and hard to orient visually.

ubercore2• 14 years ago

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• 14 years ago

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.

ubercore2• 14 years ago

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

mikec3k• 14 years ago

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• 14 years ago

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.

jkw• 14 years ago

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?

polyfractal• 14 years ago

Gotta say, I've never had a problem with WP7. All things clickable:

- Big colorful squares

- Round icons at the bottom of the screen

- Ellipses

- Most text that is white and largish

Can you give an example of something difficult? I just flipped through my phone and couldn't find anything that might be confusing.

ianstormtaylor• 14 years ago

Yup I've had this problem as well. I think consistency and generous use of white space helps to alleviate this. As well as eliminating non-clickable items as much as possible. Ideally the content itself would be actionable without the need for buttons everywhere.

Realistically if something isn't actionable on mobile you should really be questioning what it is doing there, or whether you can simplify the interface by making it interactive.

pan69• 14 years ago

Maybe a balanced combination of the two design philosophies can exist together where skeuomorphism is only used for actionable elements such as buttons etc. but not other elements.

It sort of reminds me of old pixelated video games where sprites stood out from the background making it almost instantly clear which elements could be interacted with.

monochromatic• 14 years ago

> 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.

jongold• 14 years ago

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• 14 years ago

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.

jinushaun• 14 years ago

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.

bcoates2• 14 years ago

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• 14 years ago

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).

hcarvalhoalves• 14 years ago

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.

shmageggy• 14 years ago

I think Don Norman's book "The Design of Everyday Things" is largely about exactly this, and it could even provide a simple heuristic for whether or not a specific skeumorphism is worth keeping or just kitsch:

Does the additional design (whether a gradient, bevel, shadow, etc) indicate an affordance? That is to say, does the extra stuff that is being layered on serve to tell the user something about what the UI element is for. For example, a slight gradient and bevel on a button informs the users that it is meant to be pushed, as it looks a bit raised up relative to its surroundings.

This, to me, is the biggest thing missing from these flat designs. There's nothing left to indicate whether something is a button, a panel, or whatever else. It's been stripped down so far that crucial UI hints have disappeared. As other commenters have pointed out, I think moderation is the key.

mortenjorck2• 14 years ago

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• 14 years ago

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.

goblin89• 14 years ago

> 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.

Indeed. It gives hints and makes elements stand out. Take the Nest presentation from the examples in the original post—it uses realistically looking elements to make them more noticeable in contrast to ‘flat’ surroundings. This helps highlight the design of the Nest thing and link to the store, for example.

juiceandjuice• 14 years ago

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

ChrisNorstrom• 14 years ago

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• 14 years ago

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.

rimantas3• 14 years ago

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.

ozgung• 14 years ago

Design in broad sense can be related with fashion. But when we talk about UI design we use the term more in engineering sense rather than the artistic one. We can use the term design not only as in Fashion Design, but also as in Circuit Design. When we say UI Design we actually mean both senses. Aesthetic preference can be a factor, but it's never the essence of the act.

h2s2• 14 years ago

    > UI Design has turned into fashion
    > ===== The problems with Skeumorphism =====
    > - Stuck in the past, old fashion, outdated

talmir• 14 years ago

The words "in my opinion", "I think", "I cant" and "For me it seems" are sorely lacking in your post.

The beauty of flat design is in many ways counter to the points you made. For example they can look warm, inviting and polished. Of course they look unfinished when done improperly, just like anything else.

Skeumoprhism as well can be done with very little CSS, lots of efficiency and in a modern way, and if done properly it does not have to be "stuck in the past". The part about that it does not leave room for new UI elements comes down to design. If designed properly the website should accomodate alterations in the same way ant other style might. "Old UI clashing with New UI" comes down to design again. No style can help a bad design.

Your points on what design should be centered around seems to be purely your own opinion. I like my buttons with sharp corners. I like strong gradients where appropriate, I like loud design elements as they help grab attention, and I very much like strong colors. There is nothing wrong with using pure white, as it is in many instances the appropriate thing to use for content, style and design. If the whites hurt your eyes, may I suggest you adjust your screen?

90% of what you said boils down to design. If a design starts out terrible, it will most often stay terrible. It does not matter if it is flat design or skeumorphism.

B-Con2• 14 years ago

> Oh Jesus, UI Design has turned into fashion.

Yes. It's been obvious since at least the Web 2.0 push. Rounded corners where everywhere, gradients, 3-D effects, shadows, etc.

IMO, it was like the industry realized that they had the technology to appear less simple and the one message they wanted to shove down everyone's throat was "OMG we're not simple looking!" Then everyone grew up a bit and realized that's a silly approach to take and now we have UIs that are more oriented at being clear and usable.

elijahmurray• 14 years ago

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?

tptacek• 14 years ago

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• 14 years ago

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).

runawaybottle• 14 years ago

It's ok, and heavily inspired by the zune windows app (which had some more interesting UI/precursor to metro): http://cdn.appstorm.net/windows.appstorm.net/files/2011/04/s...

Rdio: http://assets.gearlive.com/blogimages/rdio-white-redesign.jp...

I think a good argument against too much flat design is just how similar things end up looking.

rimantas3• 14 years ago

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.

cageface• 14 years ago

When I first saw the UI I thought there was a stylesheet missing or something. After several force reloads it started to dawn on me that they were serious.

I am generally very pro-minimalism and hate skeuo design but this is not only taking minimalism too far but failing to understand that a blinding white screen is visually exhausting. There's a reason almost all "pro" apps have a muted, grayscale palette.

anthemcg• 14 years ago

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.

dreamdu5t• 14 years ago

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

TommyDANGerous• 14 years ago

I love flat design!

sekou• 14 years ago

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.

lnanek2• 14 years ago

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.

mortenjorck2• 14 years ago

  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...

state• 14 years ago

I cringed when I read that sentence. Thanks for helping to make this clear.

jff• 14 years ago

Here's some brilliant flat design, right guys?

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

agumonkey• 14 years ago

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.

gruseom• 14 years ago

The quote you cited was about the term "flat design", not the thing itself. Seems unfair to dismiss it and then not refute what it actually said.

But those historical references are interesting and stand on their own.

h2s2• 14 years ago

Nice, thanks for the book recommendation. Im on the lookout for this exact type of material lately after the realisation that for the amount of design work I do ive really failed to put in a proportionate amount of learning effort compared with programming. Any other recommendations?

amolsarva• 14 years ago

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• 14 years ago

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".

jmathai• 14 years ago

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...

Mordor2• 14 years ago

There are two o's in skeuomorphism!

Mordor2• 14 years ago

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?

B-Con2• 14 years ago

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.

The Flat Design Aesthetic

Related Stories