The evolution of Flat design

Pietro Schirano
Apr 21, 2014 · 3 min read

Intro

I still remember the time when people talk about flat design like some weird trend, adopted only by Microsoft, and that would never really become a thing. I even made one first attempt back then, which happened to be really popular.

Now at 2 year since its first show up, we can say Flat design is basically everywhere.

But as every new approach or tool, it takes time to reach the right point and the line between a product that look lazy and unpolished, and a minimal one, sadly is very thin. We have seen tons of product start to looks just as wireframe version of itself, loosing all these details that we were used to.

A different approach

Now flat design, not necessarily has to mean lack of details, as pure example I made this UI, a simple chat app, which we are going to compare in its 2 variations.

One of the thing that I found really refreshing and also that add a nice touch is to play softly with gradients. On the navbar a light gradient is applied, with an opacity that generally never goes more than 25/30%, same for the background. So the trick is basically create an effect which is not too strong and prominent but still not too weak to not being visable. So is really a game of balance.

Is up to you of course find the numbers you prefer. Same concept can be applied for shadows, which, if is better to do not use in their blurred form, can be represented as a solid 2px line.

It’s also important explore and trying new things, here for example, you see that a gradient is applied to all the division lines which give a sort of cinematic effect in the second shot.


Off course a good rule for a successful design is to respect the graphic design principles, keeping an eye especially on typography, which in flat design plays a queen role.

What’s next

One of the purpose of flat design was to delete everything that felt unnecessary. So if we want to move forward we have to start to think again on what we need and what we not, trying to understand what patterns are consolidate in users mind.

In this last example I questioned if we still need the navbar in mobile apps. Almost everyone knows that the top of the screen is generally related to the navigation, so would that hurt to make the navbar less visual present?

In this example I merged the navbar with its environment, keeping the color of itself different. The result is somehow fresh and special at the same time.

Interesting is also the effect created in case of lighter visuals

So in conclusion, this article was not meant to be a guide on how to design, but just a collections of thoughts I have made.

What I suggest you is to explore, explore and again explore new ways, don’t let yourself to be too attached to a style.

Once you free your mind about a concept of harmony and music being correct, you can do whatever you want.

As always thanks for reading.


If you enjoy this article don’t forget to follow me on dribbble or twitter.

    Pietro Schirano

    Written by

    Italian by accident, designer by choice. I met DiCaprio once. Senior Product Designer at Uber Elevate.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade