September 5th, 2013

A New Look

There’s been a sudden rise in “flat design” the past twelve months. From the new iOS7 update to Twitter Bootstrap, you can’t avoid it.

Applove.se

“Flat design” began life as a response against “skeumorphic design”, or the trend that says things on our screens should look like things we use in real life. To get a better understanding of what caused the shift, let’s look back a couple years.

The rise and fall of skeumorphism

Skeumorphism isn’t inherently bad– the thinking was that if interfaces look like their analog counterparts, users would intuitively know how to interact without much help.

Apple

The problem now is that there’s a whole new generation of users who have never interacted with the old analogs (when was the last time you owned a leather-bound address book?). The “intuition” component of skeumorphism is becoming less relevant and so designers are now faced with inventing a new vocabulary for design.

Everything looks like a nail

Another factor that led towards a new trend came from the success of CSS3.

CSS3 gave designers on the web a huge new set of tools to work with. Gradients? Shadows? Rounded corners? When you have a hammer, everything looks like a nail. And so designers hammered as much as possible. It was MySpace all over again.

It became too much after a while, the glossy buttons and gratuitous inner-shadows became old, distracting even, and the web began to look elsewhere for a new trend.

Flat is not simple

This explains the sudden return to minimalism and content-focused design.

The apparent minimalism is only a side effect of a careful study in usability…

An important thing to understand about flat design is that, while it looks simpler, it should actually be more complex.

Great design is more than just rounded-corners and well-chosen colors. The apparent minimalism is only a side effect of a careful study in usability and the psychology of human interaction. The goal is to focus, not simplify.

Flat is interactive print

Content-focused design is not new, we’ve just been calling it “print” for the past century. Lessons learned from magazine layout and the psychology of reading are going through a renaissance on the screen.

Mailchimp

What’s more, with retina displays and powerful design languages on the web, we now have the freedom to design around the human instead of around the computer.

How flat is too flat?

But flat is more than just print, the goal of a well-designed page is not just to be an interesting read but to actually make the user do something.

Take a look at the two interface elements below:

Flat UI

Based on previous experience, you have probably already guessed “Awesome” to be a button, but what about the box on the right? Is that a box of buttons?

Nope. Those are tags. Clicking on them would remove them from the box.

Skeumorphism is dead, long live skeumorphism

This is bad because the two elements look similar but have different behaviors. A way to resolve this would be to improve the affordances of each element.

From Wikipedia:

An affordance is a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and pushing, while a cord affords pulling.

To cast aside everything that resembles skeumorphism would be folly. Sure, faux leather is out of style however buttons should still be satisfying and intuitive to use.

Just as we are now reapplying many design lessons from print, maybe we should also take a look towards artisans of yore for hints on crafting better interactions.

Putting it into practice

We’ve just rolled out a flat-inspired redesign of our website and think that it better communicates our vision to bring web-based interfaces everywhere.

Like the new design? Love the post? Let us know on Twitter: @awesomium

 
86
Hold
still!