Get our posts emailed to you with our monthly newsletter, subscribe here.

Early 2013 has seen a rise in some pretty interesting discussions on the use of ‘flat web design’. Flat design seems to be causing a slight stir amongst the design community right now, arguments for and against the flat design trend are often lively and heated.

Flat Web Design?

Firstly, flat design in the case of this article is referring to either app or UI web design – NOT housing or apartment decoration.

Flat design rather simply means your web or app design contains minimal use of heavy gradients, bevels, drop shadows or any form of element that would provide considerable depth to the user interface.

It is easy to get caught up in the debate, flat design has without a doubt been received both positively and negatively.

However, today I wanted to take a look at the positive examples of flat design, both in terms of web apps and mobile apps.

Remembering The Project Needs

As with any design trend, people can often overlook the project needs or requirements. The focus on any project should always be how best to convey and represent the clients needs and their brand.

In essence their is no such thing as one style or trend being better then another, it all comes down to what works best for the project in question.

Flat Design In The Wild

The best way explain what the term flat design means is to provide you with some examples.

Take a look at the respective sites or apps and spend some time interacting with the interface, how does it improve/lessen your user experience?

Vine

Flat Design: 17 Examples Of Flat Web & App UI Designs

I think I might

Flat Design: 17 Examples Of Flat Web & App UI Designs

Pixel Plant

Flat Design: 17 Examples Of Flat Web & App UI Designs

Invoisse

Flat Design: 17 Examples Of Flat Web & App UI Designs

LayerVault

Flat Design: 17 Examples Of Flat Web & App UI Designs

Etch Apps

Flat Design: 17 Examples Of Flat Web & App UI Designs

Hum Creative

Flat Design: 17 Examples Of Flat Web & App UI Designs

Lorenzo Verzini

Flat Design: 17 Examples Of Flat Web & App UI Designs

This Is Land

Flat Design: 17 Examples Of Flat Web & App UI Designs

Team Tree House

Flat Design: 17 Examples Of Flat Web & App UI Designs

Allen Yu

Flat Design: 17 Examples Of Flat Web & App UI Designs

Big Human

Flat Design: 17 Examples Of Flat Web & App UI Designs

Spell Tower

Flat Design: 17 Examples Of Flat Web & App UI Designs

Negative Labs

Flat Design: 17 Examples Of Flat Web & App UI Designs

Concrete Matter

Flat Design: 17 Examples Of Flat Web & App UI Designs

Inky

Flat Design: 17 Examples Of Flat Web & App UI Designs

Kyle Conrad

Flat Design: 17 Examples Of Flat Web & App UI Designs

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.

4 Comments

  1. I find that flat design really can only be successfully accomplished by the masters. For the rest of us, we probably need to look to those gurus for inspiration, and move in that direction, but we will likely need to rely on depth to help with usability.

    The main download “button” on the Inky site above, for example, does not look like something to click. I am still a bit stuck on buttons (and other interactions) providing a more definitive cue to be able to interact with them. However, I am in full agreement with the preivious posters that this is a refreshing trend, for sure.

    1. You mean to tell me you didn’t understand that a giant, prominent button with the text ‘download inky for mac’ was a button? This nonsense about flat design confusing people by obfuscating clickable areas is insulting to modern web users.

  2. Interesting article, didn’t know this was a trend and we’re happy that people recognize the value of flat design.

    It involves lighter images (less colour data)
    It allows more CSS design rather than image based design
    (Hence) It is faster to load
    You can create depth with flat shadows.
    It has a unique and appealing aesthetic
    It is very flexible in terms of visual style and can go from rustic to modern.

    I enjoyed reading this article :)

    P.S. We have a few websites that we created in flat design, 2 more are coming, including our own :D

  3. I personally like the flat-design trend. I think it makes things look a lot cleaner and user-friendly. But, it could just be the white space in many of the examples you listed.

Comments are closed.