🎉 Try Slides With Friends — Zoom Trivia, Live Polls, Icebreakers & more! Check it out →
Flat Design vs Usable Design

Flat Design vs Usable Design

It is the word of the moment in the UI World. Flat. But what does this term mean exactly? Is it really the style that must be adopted to keep up with the times? In this article we'll take a look at what is by far the most popular trend in graphic and web design and evaluate it from a few different perspectives. Further discussion will take place in the comments.

What is Flat design? Flat design is a 2-dimensional approach that eliminates almost any decoration so as to focus on typography, simple shapes and the surgical choice of the color palette. That’s it. Why is it so popular? Because it can make crazy admin panels look super easy to navigate, it speeds up the work of web designers and can make websites significantly faster to load. Flat vs. Usable img1 So why Flat vs. Usable? Because they are two different things and, as expected, when something gets as popular as flat design people start doing it without even considering if it is actually the right solution. This is wrong! So let’s say it loud: stop simply making things flat ti be popular and start thinking about usability. Last week I saw a friend of mine, a UI designer like I am, staring at his screen for about 30mins without doing anything else. He was just looking at the screen. This made me curious, and I found out he was dealing with this: Flat vs. Usable img2 “Does it look OK to you or should I use this #whatever darker color?” Isn’t that a waste of time? (Sorry mate). I’m not suggesting to add a fabric texture on top, maybe some stitches or a metal wheel, but how can someone who used to be a Skeuomorphism paladin make every new project look flat? On that note, Apple just redesigned their entire operating system to be Flat but made several key usability errors in the process. But this is another story ;)

It all started with responsiveness

Flat design is the designer’s answer to the usability necessity in the responsive era. With all these new devices and the high resolution spread, no doubts that we must design things that well behave regardless of the “circumstances”. At this point it was difficult - though not impossible - designing highly detailed elements and making them well behave on all devices. It became clearer every day that the main purpose of a user interface is showing the user the content and information he’s looking for in the quickest time possible, not impressing her/him with a pretty design. Flat vs. Usable img3

To Go Flat or Not?

Flat design is not the answer to all of your problems. You can make a user interface usable, simple and with responsiveness in mind, yet not flat. You can use flat elements for specific parts of your websites, yet not for the entire website (Yes I’m suggesting flat hybrids!). You can make flat icons and save them as .svg files, but you can also create bitmap crazy icons and make them retina ready with media queries. You should adopt the style according to the final goal of the project (we are not expecting to see textures on Facebook, but why not on a iPhone application?) You should get creative! The next web projects shouldn’t be necessarily a white 50px height navigation on top, plus a 100% width image below, plus 3 boxes with a flat icon each, some text and 3px solid border on one side. Here at Medialoot we are in the process of redesigning our website and, believe it or not, we never talked about doing something “flat”. We definitely wanted to make things more usable: our discussions were about search box placement, floating category menus, and the ideal width of our preview images. With the oal of usability in mind we created something awesome and new (that we can’t wait to show you). It is not flat, but is clean and usable. Flat vs. Usable img4

Lack in distinction

The main problem with Flat design is that things may look too similar. I know this sounds trivial, but imagine you want to download a camera icon, do you really wanna see a gallery of flat icons? Flat vs. Usable img5 Even worse, think of three of your favorite online stores. They have different personalities. Imagine if all of them decide to use a flat design. They are going to look similar. You may say: “That’s good, content and products will make the difference”. Well, that’s not entirely true in my opinion. I think the design is not just a container, it should say something about the brand personality. Same for the icons, I don’t want to see all flat icons because they must be so. I would rather see icons and designs that tell me about project identities, that speak for the owners.


Flat is not a bad trend, that is for sure. It’s a good thing, actually. But maybe we should push it further. We should think of simplicity when designing user interfaces because that’s what make users happy and willing to buy. At the same time we should let the design speak for ourselves, add those details that make each project a different one. No matter if there’s a shadow or not, if buttons have gradients or not. It’s all about making things recognizable. What do you think? Are you a flat lover or hater?



You've successfully logged in!