Since Microsoft’s Metro UI was introduced to the world, flat design has been rising in prominence, and since the launch of iOS7, has officially redefined how we think about UI design today.
Its minimalistic no-nonsense approach using vivid colors, clean typography and elegant 2D icons got everyone wanting more – us at IT Consultis included! Soon, any website and mobile app that wanted to be relevant and “cool” adopted this new trend – the coolest of them all being Apple, who for so long embraced skeumorphism, but couldn’t help being inspired when it released iOS7 last year.
This year our own website is going through a flat design revamp and we can’t wait to show the final results!
So what exactly is Flat Design?
Besides being minimalistic and brightly colored, flat design uses a combination of simple boxes, clearly delimited buttons and dynamic tiles to produce clear, crisp and intuitive interfaces.
It is the opposite of skeumorphism. Instead of trying to make the UI look like it does in real life – for example, making a calculator that looks like a physical calculator – flat design embraces simplicity. We have gone beyond the days of Apple Lisa and Windows 3.1 where computers were still a novelty and we needed visual representations of real life objects to be able to understand what icons stood for.
Skeumorphism needlessly calls attention to itself (“Hey, look at me, I’m a calculator!), while flat design is content with being subtle yet sleek. The result is efficient, modern and very classic. In fact, according to Microsoft’s design team, the inspiration for flat design was the simple signage in public transport systems, specifically the King County Metro (hence, Metro). Those signs were very basic, but they did the job.
This trend is more than just good looks though. It’s all about functionality. Any details that don’t support the design’s functionality are left out – no shadows, no textures, no gloss, no extra layers; all that’s left is a clean, lightweight UI that focuses on content and usability – something especially important on the limited size of a smartphone screen.
A great example of flat design is the evolution of the Windows logo, from its first iteration to the current version.
From flat and simple, to 3D, glossy and colorful, and back to simple again. We guess there’s no better proof that more isn’t always better and that you can’t go wrong with simplicity!
Creating flat design: Not an easy task
Just because something looks simple, doesn’t mean it is simple to create. Flat design looks effortless, like something a web designer did out of laziness, because, hey, look at all that simplified UI and layerless design!
But as we’ve said, flat design is more than just aesthetics. No matter how good looking your UI is, if it is a pain to navigate, you failed. Usability means you have to pay attention to the structure and organization of the various elements too; you have to design the hierarchy and flow of information, as well as differentiate between static and clickable elements on your website so that users will find their way around.
Flat design might look easy and low-tech, but it takes a lot of creativity to make it truly intuitive and functional.
The limitations of flat design
Flat design is great but not perfect and no matter how beautiful or cool it looks, it won’t work for every website or app out there. Websites and single-use apps that have a clearly defined purpose are the perfect candidates for a flat design UI. Although in theory it can be applied to any website or application, those which are more complex or need to perform multiple tasks are harder to design effectively.
Flat design isn’t quite just flat anymore
As with anything, being a couple years old now, this trend has slightly evolved and become, well…less flat. Gradients have been making the rounds since Apple launched of iOS7 and are a great way to add some texture without going un-flat.
However, the next big thing in the flat design evolution is no doubt long shadows. As the name suggests, this trend includes objects with long shadows at 45-degree angles, which for reasons we are still investigating, look great!
Long shadows are the perfect way to give flat design a bit of drama and depth. They work beautifully for icons and branding! Use sparingly though, you don’t want to go overboard!
Tip!
Want to create your own long shadow? Make sure to create a flat, 2D shadow that extends at a 45-degree angle (preferably towards the right) and it’s 2.5 times the diagonal of the object.
So what’s next?
As always, trends come and go, so we are not really certain what the future brings for flat design. Maybe we’ll eventually settle into a happy medium between flat and skeumorphism, as we gradually add more elements such as the shadows and gradients mentioned above.
Or maybe, since the upcoming platform is one that’s hinged on Augmented Reality (AR), we’ll be seeing a new radical design language that will leave us wanting more once again.