Are Flat Designs becoming “Too Flat”

Published: May 24, 2014

Lately, I’ve seen a big surge of web designs that have fallen a bit short. Layouts that have somehow failed to impress me.

Yes I see it’s modern. Yes it’s minimal – but it’s a little “too flat”. I fully understand the concept and am actually glad that people have actually caught up to the idea. I also get that simplicity is beauty – and I couldn’t agree more.

But sometimes, especially in web design – too little is not enough (Yes, pun intended).

artwork_images_706_684658_tony-smith-525x452

“Free Ride” by Tony Smith and is displayed in the museum of Modern Art in New York. – It’s minimal and it’s simple. Note the space that the object is filling up. The sculpture forces the viewer to appreciate it’s dimensions. In other words – it’s not flat.

So What do I mean by “Too Flat”?

Just as it sounds, “Too Flat” being boring. No design. Not enough style.

We have gone a long way since pen and typewriter. We use our phone, mobile devices and desktop computers on a daily basis to do complex and simple tasks. These devices are multi-dimensional by nature.

They are not flat. So why should our websites and applications be?

glanceable

Above is a screenshot of Peek Calendar’s user interface. At first glance it’s not easy to tell which part you can click, which is a link, a button or even a swipe. I’m sure it’s a good application – it just doesn’t look that intuitive.

Trailspring

This is Tailspring.org‘s contact page. Just a tad too plain? Button 1 is no different from button 2. Or did you even know that there were buttons? Or note that none of the elements are different from each other.

Yes I get that it’s consistent. It just looks like a wireframe to me.

Themify

A section of Themify‘s redesigned homepage – real flat and simple. The icons have that monotone feel. Font and colors are definitely minimal. Now even though I’m a big fan of this designer, but this new style is quite dull in contrast to his previous works.

Sign Up Now Bluehost

We have Bluehost’s Sign up page which is nothing more than white containers with blue borders. Single color throughout. I get the minimalism effect they’re trying to achieve, but it lacks “punch” – especially for a high impact page such as the sign up form don’t you think?

Just because Skeuomorphism is dead – doesn’t mean it has to be “Too Flat”

Yes, we don’t have to design our calendar app – to look like a real life calendar – with torn paper edges and such (yes even you Mac fans). We don’t have to design our media player – to look like a real life jukebox. Yes we get it.

skeumorph

Flatter designs makes us appreciate the space that is used for our UI. In the case of the book shelf above, A flat design will ditch the background graphic and leave the cover’s of the books as thumbnails for selection. Okay that’s reasonable.

But “Too flat” is still not the answer. Take both calendars below as an example. The flat “Metro” calendar on the left is just not impressive.

calendar-compare

On the other hand, the skeumorphed calendar on the right is just real nice to look at. I appreciate the details and the time the designer took to make all the gradients and shadows – to make it a more pleasant interface overall. I choose this design over the flat one any day.

Just because it’s responsive – it doesn’t have to be “Too Flat”

So was it just coincidence that responsive and flat design both became popular around the same time? I think not. Responsive is the way to go for sure. But with responsive functionality being in its infancy stages – designers had no choice but to keep their designs pure code. Meaning – they had to simplify. Since this “responsive thing” is so new.

Microsoft

No images for borders, no grapic backgrounds or even repeating .gif for gradients. This will not work well when you’re dealing with multiple browser sizes. The layouts had to be all CSS driven – thus, leaving the designs a bit incomplete. Literally – with no “real” design.

To me it looks a bit unfinished. It’s just a bunch of DIVs with background color. Especially when the colors are so uniform (like Microsoft’s Internet Explorer home page) – it’s a too “matchy”.

As responsive design is now becoming more advanced, web designers have found ways to stray away from the older “flat desings”. Look at the homepage of Forefathers Group. It’s hard to believe that this is a responsive layout. Notice the textures, background images and graphic elements for the buttons and such.

Forefathers Group

Forefather Group’s designers have found ways to combine the usability of a responsive layout, yet not lose the style that they wanted their site to portray. Yes to repeating images, yes to textures and diagonal shapes. In other words – f*ck Flat Design!

Forefathers Group - resizd

So Am I alone in this?

Apparently not. I have encountered several posts of authors that are not impressed with the “too flat” design trend.

I myself have fallen into this “Too Flat” trap. Take a look at my older designs such as the “Realty” WordPress theme and Fearlessflyer.com. I know that when I was coding – I was “keeping it safe” by making the elements flat. Now I look back and realize – I could definitely do better.

So what’s the real answer?

Don’t get me wrong, flat design is definitely a step into the right direction. But flat taken to the extreme – falls short of inspiration and style. So let’s get those gradients back in our containers. Find those textures add put them back in place. Let’s add some reflection and shadow effects into our designs.

A little more “style” in web design won’t hurt.

This article is written by Michael Soriano. Michael is a Front End Developer based in La Crescenta California. He specializes in CSS, JavaScript and UI. When not developing sites, Michael likes to play handyman and wrestles his kids.

5 thoughts on “Are Flat Designs becoming “Too Flat”

    Nodws says:

    yes you are super alone mate 😛

    Michael J. Lux says:

    The examples you picked are clearly “too flat”. But I want to point at your conclusion that flat design was taken to an extreme. In my opinion these examples are lacking another mayor thing: hirachie. If you image the forefathers design without any textures, it would work just as well, because all design elements are easily distinguishable. A clear typographic order is needed to get flat design to work like it should. The internet explorer page tells me its faster an safer, but the call to action to download microsofts browser falls behind in the overall design. The calendar app focuses on the month in it’s typographic hirachie, but im interested in the days where i have important, or a lot of appointments to handle. Unfortunately all days look the same, are small, and hard to figure out how to interact with. Bluehosts attempt to make the login / register prozess as easy an non distractive as possible falls into the trap to unify. By simply invert one the boxes (blue background and white type) you could make the login prozess for future visits more guided and clearer for your customer. “I am at bluehost … to log in i use the blue form”.
    So in conclusion the primary task of flat Design is not to simplify and reduce but to focus on important things and guide to a “finish line” without graphical noise, I think.

    mechrisreed says:

    “Design needs to be more complex and require more skill”said the designer.

Leave a Reply

Your email address will not be published. Required fields are marked *