Design and Development

Flat Design: Trend or Revolution?

By

Filed under: Design Inspiration, Web Development.

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”.

Flat Design: Trend or Revolution?

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.

Beautiful Typography

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

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.

I’m thinking of the kind of animations we see on Windows 8 or different apps like Mailbox, Clear, Letterpress, or National Parks. You can view a demo of the animations here.

Also be sure to check out Sara’s CSS3 demo of some creative Windows 8 animations.

Conclusion

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”.

Action step

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.

Also, be sure to read our followup to this article – Flat Design some good, some bad.

Join the discussion below, we'd love to hear from you!

  1. Chris De Roux

    Hi Caleb

    Interesting article here. With rumours of Apple’s Jonny Ive bringing flat design to iOS7 it would appear that this design concept will continue to grow for now. I suppose the negative side you pointed out (where people don’t know where to click) could be addressed by subtle stylisation, but I agree that animation enriches the user experience and can help to navigate websites.

    I also think Flat Design lends itself well to RWD as more minimalistic approach is sure to make designing for different devices a more manageable task. Users certainly wont want to have too much ‘skeomorphic’ clutter on their small smart phone screens; the cleaner approach seems like the way forward.

    Typography has played it’s part in design for centuries so it’s probably good for Flat Design that more web fonts are coming to the fore and will prolong it’s popularity.

    I hope Flat Design isn’t a fad, but design trends change and fashions go full circle so we could be championing gradients and textures again in 10 years time!

    Reply
    • Caleb Mellas

      Yes, Chris it will be interesting to see what Apple does with IOS 7. Will they simply copy Microsoft and Google – or will they come up with something a lot more refined and user-friendly.

      If history proves itself, they will probably greatly improve on the “Flat Styling” that many other companies have created. Apple may not be the first at creating something, but when they do release it – it’s usually much better than the competition.

      btw, have you created anything with a “Flat Style” lately?

      Reply
      • Chris De Roux

        Unfortunately I’m pretty much constantly working on my dissertation and business plan at the moment so I haven’t had much time to be creative. I will try my hand at some Flat Design next month when I am free from my studies. My website takes on a pretty minimalistic approach though… http://chrisderoux.com

        Reply
  2. Jim Kinney

    I’ve seen some flat designs that I really liked but I prefer the application for sites that are trying to be goofy and playful. To me flat looks too cartoony for most sites. People will miss the visual cues that help us navigate.

    Microsoft Metro design has been a failure and already windows 8 has started to give users the option to bypass it.

    Apple is rumored to removing skeuomorphism. That doesn’t necessarily mean flat. Removing leather and fake paper rips can be achieved without making things look like cartoons. Apple’s design will still be elegant and beautiful.

    Reply
    • Caleb Mellas

      I agree Jim some of the Flat websites I’ve seen have been a little “cartoon-ey”, but some have been very well done. There has to be a good balance between simplifying things, and still having good design and visual cues for our users.

      Check out http://fltdsgn.com/ for some good examples “Flat” style websites.
      Here’s a few nice ones to get you started:
      http://www.nextr.info/
      http://onsite.io/
      http://www.geckoboard.com/lean-analytics-london/

      http://mapbox.com/ is nice as well, but that top graphic has a little bit of the “cartoon” feel you were talking about.

      Reply
    • Caleb Mellas

      Just remember that everything you design is communicating something – I can’t say this enough. Every color, gradient, word and font choose will affect what message your website is promoting.

      The “cartoon” feel may be perfect for some things, while a more polished “high-end” feel may be better for another project.

      Both of these styles can be communicated through a somewhat “Flat / Minimal” design. But I agree that when many people think of Flat design they think of pastel colors with illustrated graphics like https://layervault.com/

      Reply
  3. Dan

    “Just remember that everything you design is communicating something – I can’t say this enough. Every color, gradient, word and font choose will affect what message your website is promoting. ”

    With all due respect, maybe practice what you preach… The logo on this site is awful, the graphics look tacky and the bold font used in the articles doesn’t work. Even the ‘flat design’ graphic at the top of the post is an example of bad design. It doesn’t reflect the current styles of flat design you discuss, the alignment is off, the colours clash and it just looks wrong.

    Don’t mean to be rude, but it just seems strange to write an article on design standards when this whole site needs an overhaul and commits hundreds of design crimes.

    Reply
    • Caleb Mellas

      @Dan, I appreciate you sharing even though you throw some pretty tough criticism.

      The “Flat Design” header graphic at the top of this post was created to show how little thought some designers are giving to this design style. The peachy red and web green are some of the most over-used colors on the web right now.

      Reply
      • Rob

        Sorry Caleb but I was really thinking the same thing as Dan. I found this article on Google and was immediately put off but the logo at the top of the page and the entire site design really. I mean no offense by it, and after reading the article I was really sort of surprised that someone who created this site could have such a good theoretical grip on fundamentals of design. Why don’t you redo this website?

        Reply
        • Caleb Mellas

          Rob, thanks for your thoughts. You are right I really do need to make some updates and fixes to my site design. That is something I am tackling this year as I have spare time from my other projects.

          Reply
  4. Andy Delanoy

    Hmm, it’s a version of what good designers have been doing for years except it’s now available in chalky colours.

    Reply
  5. Tooliepanna

    Great article! I’ve been chosen to think about new, flat design of course, graphics for my company’s applications. Reading your text is really helpful, I won’t make it thoughtlessly :) thanks!

    Reply
    • Caleb Mellas

      Thanks for sharing @Tooliepanna – just follow established design principles that you know, and I am sure they will turn out great!

      Reply
  6. Ed

    Not a big fan of the Flat Website Design trend, but I think that is simply because of my love for Photoshop. Seems a horrible waste not to use all the awesome goodies in Photoshop and just create a flat design. I just recently decided to see what the real motivation was behind this trend and I expected to find that the real reason to go with a Flat design is to increase website performance by not using “heavy” graphics. To my surprise I see a lot of people actually find the Flat website design appealing and so far it looks like the only motivation is that appeal. Flat is well, flat to me and doesn’t do anything for me personally. When I look at a Flat website design I immediately see all the things that could be made really cool with shadows and depth. Oh well not a “flattie”. ;)

    Reply
    • Caleb Mellas

      @Ed Thanks for sharing your thoughts.

      You mentioned you feel like you are wasting the power of Photoshop by not creating a “heavy” graphic with lots of gradients and drop-shadows. There are many people that are starting to use Photoshop as more of an asset creation tool, rather than a “static site mockup” tool.

      So I would say when designing websites, stick to more simple/flatter overall layouts and page elements and save the “heavy shadows and gradients” for some page assets. Thinking of something similar to Alfred App: http://www.alfredapp.com/

      Reply
    • Caleb Mellas

      @Diana Yes, using trending colors will make your site look more “modern”. The thing I would say is that you should always be aware of what the colors you are using are communicating.

      For instance, red is associated with energy, war, danger, strength, power, determination as well as passion, desire, and love. So rather than simply using a color because you’ve seen it on other designs, choose a color that matches the feelings you want to portray with your design.

      This page will be helpful for color meanings: http://www.color-wheel-pro.com/color-meaning.html

      Reply
  7. James

    Great article. I’ve not read all of the comments so excuse me. Trend or revolution? – well it’s still here and growing 18 months after the first post so it could be moving beyond a trend. I think it’s an inevitable evolution. Web design is still young compared to other media and the rate of technology change (notably mobile) has placed new demands. Let’s hope it’s here to stay. As a user it is so much nicer and easier. And as a marketeer with designer aspirations I can achieve some great results within simple means.

    Reply

Leave a comment

  • (will not be published)