Over the last several months, I’ve been reading post after post about “Flat Design”. It seems like every designer is adopting the trend of so-called “Flat Design” and applying it to their work. Even larger companies like Microsoft and Google have followed this “trend”.
So is “Flat Design” here to stay, or is it simply a passing trend that will be eclipsed by the next great thing to come up next year?
The elements of Flat Design
The difference between a time-honored style and a passing trend or fad is often hard to determine. In 2002, no one thought we’d ever be speaking out about the horrors of the Web 2.0 style – and yet here we are. If your site is still ridden with reflections, glossy buttons and floating marques, you are completely outdated. Anyone who followed something trendy has experienced that feeling when their site looked horrible just 2 years later.
So how do we ensure we are not just following a trend, or creating something that follows the time-honored principles of great design?
The first thing we can do is to break down the Flat Design style and see if its foundations are based on tried-and-true graphic principles. So before you start redesigning your site after the latest Flat Design mockup, let’s take some time to research this style and see whether or not it has some validity.
1. No more “eye-popping” gradients or shadows
The term “Flat Design” gets its origins from the fact that it removes most if not all traces of drop-shadows, flashy gradients and extraneous textures from the visual design. Everything looks “flat”, rather than beveled, bulged, clickable, or inset.
On one hand this is a good thing, because it forces designers to focus on the content as the most central part of our design. It forces us to think about how to present the content in such a simple and compelling way that really gets to the heart of the issues and needs of our users.
Where it can turn ugly is when a designer takes this style to an extreme and removes all user-guides and suggestions from an element. You can see this on some websites where it’s hard to tell what is a button, or a clickable link.
The worst example would be a button to buy a product, except there’s no way to tell it’s a button unless you actually start clicking around. When you hover or “press” the button, nothing happens – there is no visual indication that something is happening or will happen in response to your action.
This is very frustrating to users – it’s just all around bad usability.
Strong focus on color
Another important aspect of the Flat Design style is a strong focus on color. Rather than limiting colors to the long-overused tones of “business blue” and “metallic chrome”, designers are experimenting with newer shades like web green, peachy red, and lilac purple.
As you know, colors are very powerful, and can mean the difference between an engaging design and something that offends or puts off your users.
The one thing to remember here is to not use a color just because you see it on another “cool” site. You really need to think about the company or product you are designing for, and what their message is.
So don’t simply grab the hex value of the latest and greatest “web green” design and plug it into your design. Do some research, find out what you want to portray with your visual design and then choose your colors accordingly.
Your color guide should be a lot different if you are working with say JCP or Vogue verses a large construction or demolition firm.
Good typography is a key foundation of Flat Design. Because you have stripped away all the extra visual “fluff and shine”, there is a lot of room for really good typography to shine.
Webfonts have been around for several years, but we are only beginning to scratch the surface of what can be accomplished with them. More and more web designers are beginning to look to print for typographic inspiration. Web typography is getting better, but we still have a long way to go.
Typography is one of those things that when done well really exemplifies the message of the site. Instead of drawing attention to the fonts, you are drawn to the content and purpose of the article or app.
The disturbing fact about many websites is that good typography is often undervalued and tacked-on after the fact. Designers and clients alike have not given much attention to typography and taken advantage of its power.
In order to effectively communicate your message, as much time and effort must be spent on the typography as you spend on picking colors, and pushing-pixels to get things looking just right.
Animation is something that many “Flat” websites are placing more attention on. This is exciting, because for several years, we’ve all but ignored this feature for our websites. Either that, or its been so overdone that it totally took away from the message and purpose of the site – yes, I’m looking at you Adobe Flash!
Simple animations can go a long way to making your website or application more user-friendly and engaging for your customers/users.
Also be sure to check out Sara’s CSS3 demo of some creative Windows 8 animations.
So “Flat Design” could be a trend or it could be a revolution based on time-honored design principles – it all depends on how you as a designer implement your designs – and how well you understand design principles.
The problem we are seeing is that many designers are simply copying leaders in the field who actually understand the principles behind this style. This ultimately leads to overused colors, fonts, and other different elements and styles.
In reality, Flat Design is simply an implementation of “Minimalism”.
Your action step for this week is to read a book on some of the foundational principles of design, and then to create something “Flat” that is based on solid design principles – not just a current trend.
Make sure it’s super usable and that it looks amazing!
If you need a book recommendation, I’d recommend Mark Boulton’s “Designing for the Web” – it’s a must read for every designer and developer.
So what do you think? Is “Flat Design” a trend or is it more? I’d love to hear your thoughts, as well as any links to “Flat” things you’ve created.