The Flat Design Aesthetic
speckyboy.com
speckyboy.com
Allen Grinshtein of Layervault may have coined the term “flat design” originally.
“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...
But those historical references are interesting and stand on their own.
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.
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.
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.
> 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.
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.
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.
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.
> UI Design has turned into fashion
> ===== The problems with Skeumorphism =====
> - Stuck in the past, old fashion, outdatedThe 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.
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.
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?
- 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.
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.
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.
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.
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.
So it's skeuomorphism because it's trying to look like a physical push-button.
At least, that's what the article seems to be saying.
A lot of UI styling is just cosmetic, but some of it is there to create affordances.
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).
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.
> aspects of UI design: spacing, grids, and typography
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.
"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.
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
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.
> Pixels are flat. Screens are flat.
> Flat design is here to stay.
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.
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.
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.
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.
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
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".
There will always be trends, and I'm sure eventually we'll trend away from flat, but I'll enjoy it while it lasts.
Anyone have input from relatives / friends or anyone not associated with technology?