Howells.

On the “flat design” aesthetic

I’ve recently enjoyed two excellent articles by two guys (intriguingly both called Allan) celebrating a new era of “flat design”, and ultimately about how—as interactive designers—we should embrace the medium with which we work, and steadily reject the skeumorphic, dropshadow-y hellhole we’ve found ourselves in. While I like a touch of dropshadow as much as the next man, when overdown with leather textures and heavy gradients, they get a little nauseating. These posts are the best I’ve read at offering a reason why.

From Allan Grinshtein of LayerVault’s post, “The Flat Design Era”:

Well-loved products on the web share a similar design aesthetic, with roughly the same kinds of bevels, inset shadows, and drop shadows. For designers, achieving this level of “lickable” interface is a point of pride. For us, and for a minority of UI designers out there, it feels wrong.

We interpret recent shots taken at skeumorphism as a sign of the coming of “Honest Design.” Much like we were not too long ago, designers working for the web are getting fed up with the irrational, ugly shortcuts being praised as good design.

If your product philosophy is to create small, lean, products why doesn’t your design follow?

…to Svpply’s eBay’s Allan Yu who composed a terrific (and hilarious) response:

I think the use of skeuomorphism definitely helped bridge our connection between the tangible and the intangible. It’s been a huge catalyst in maturing our relationship with the web, however, when I look at that relationship now I find that the majority of people understand the web as the web. We no longer need that analogy to make it tangible. The web has earned its own sense of tangibility especially with the use of smartphones and tablets where we can literally hold the web in our hands. With that being said, skeuomorphism now has lost its purpose and seems more like a cheap trick that masks the true quality of an UI

Remember in college where one of the first lessons they teach you is to understand your medium? Well our medium isn’t the “screen” its really…glass.

And because we’re designing on glass, at least for me, designing a button that creates a sense of reflection and depth using reflective properties not only seem redundant since your glass is already reflective, but dishonest. In real life, when a button is pushed, you can feel its give and its bounce, but on a phone or on the screen, there is a lack of that physical feedback. A physicality that your mind knows exists but in skeuomorphic reality it doesn’t. So for me at least, it becomes one of those moments where reality doesn’t meet expectations and that disappoints me.

Skeumorphism is as much of an UI as the frosting is as a cupcake. Yes, the frosting is delicious, its the part that says “you should eat this”, but we all know it’s the cake part itself that’s doing all the grunt work. It’s the part that you hold, it’s the part that you actually eat, it’s the part that fills you, and it’s the part where you can slather that copious amount of frosting on. The cupcake is the UI, the frosting is just the bells and whistles, the pointless skeurmorphism that is slathered on top.

Comments — 8

Abdel on September 27 — 2:01 pm #

I find the interest in Flat Design very exciting. When building our latest app my co-founder dogmatically opted for a flat design.

She was inspired by Calvetica and hated the weird life like imitation found in products like Mac OSX’s iCal. I had my reservations but we went with it. Now, I think the app looks great and in my opinion more usable. It doesn’t hide its digital-ness and that’s refreshing.

An unanticipated feature was that the time saved making all those drop shadows helped us concentrate on the core design and development moved a lot faster :)

James Young on September 28 — 7:35 am #

It’s an interesting conversation and aesthetic. Certainly one where we can see a clear split in the direction of Windows “Metro” and the Apple OS/apps.

A lot of the fallout and discussion seems to me to centre around the leather and paper effects in some Apple apps but as a Windows user I’ve never been exposed to these things and to me as a minority in the design world I sometimes struggle to understand why it’s such a massive deal because in the wider world beyond design I’m not sure the exposure to leather textures and paper is quite as high percentage wise as in design.

J.

thebeeobee on September 28 — 8:59 am #

I feel like nobody is giving Android / Holo Theme’d look / Matius Duarte any credit in these discussions. He pushed the flat design look to 10’s of millions of people to use all throughout their day this year and is a big reason why it is being adopted everywhere.

Roy Quilor on September 28 — 12:52 pm #

You will feel liberated when you adopt flat design.

Greig on September 28 — 1:39 pm #

I think it’s easy for the architects of the web, who spend 10 hours a day traversing “flatland” at high speed, to forget that normal people need way-finding systems and landmarks to navigate their digital landscapes.

How does a user know what is clickable? When does a button stop being a button?

UI conventions exist because they aide usability, so I would hesitate to initiate a mass cull.

Or as a physicist once said…

“It can scarcely be denied that the supreme goal of all theory is to make the irreducible basic elements as simple and as few as possible without having to surrender the adequate representation of a single datum of experience.”

Damian Herrington on October 02 — 10:57 am #

I agree with Greig, we are not the average web user and sometimes that can be forgotten with the amount of industry trends and information we consume. Stepping back and watching a regular user is a good indication of whether you need more or less way-finding.

I disagree with “skeuomorphism being pointless”, I find it exciting and appreciative of the time and effort the designer has gone to make it as realistic as possible. Aside from aesthetics as a whole when done correctly you feel submerged into the content and that aids the story or message of the site or app its promoting.

Julius on October 07 — 5:04 pm #

“In real life, when a button is pushed, you can feel its give and its bounce, but on a phone or on the screen, there is a lack of that physical feedback.”

Haha, my Nokia C7 touchscreen smartphone actually makes a very short vibration, like a mini-“click”, when i touch a virtual “button” on the touchscreen.

Is this is a skeumorphism for a real button? In a way yes. At the same time, it’s a very practical UI feature as i can literally feel that the phone reacts to what i’m doing, i directly FEEL if something’s clickabel. It’s something I miss on other touch screens on e.g. my iPad.

I wouldn’t compare this feature to drop shadows or “unflat” design. Riiight?

lawrence on November 13 — 3:03 am #

to the previous comment…erm “where can we know where the links are if we dont use these awful drop shadow nastinesses?” Simple, its called design, by the repetition, colour coding, ordering of information in relation “design is relationships” a user will know where the button is. Users still clicked back in the day when everything was just a blue underlined link. What I feel is the bigger nastiness of skeurmorphisms is the assumption of ‘what the 3d space is like’ in the design, rather than creating the 3d space /line /shape / plane relation through design fundamentals..if you put a shiney button on a transparent rectangleit will always be ‘forward’ but perhaps you want the ‘pusher’ to go in….etc. I hate these assumptions in todays ways, another example is in video games, every single game for the xbox is in 3d, what happened to axometric, damn it lets all get back to herbert Bayer :) etc etc

Commenting is not available in this channel entry.