Flat Design: 17 Examples Of Flat Web & App UI Designs
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
I think I might
Pixel Plant
Invoisse
LayerVault
Etch Apps
Hum Creative
Lorenzo Verzini
This Is Land
Team Tree House
Allen Yu
Big Human
Spell Tower
Negative Labs
Concrete Matter
Inky
Kyle Conrad
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.
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.
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
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.