Flat Design: Can You Benefit from the Trend?

Flat design – a concept popular many years ago in design – is making a comeback.

With many redesigns and new websites employing a flat design scheme, the trend is appearing almost everywhere, both on websites and in app design.

Its popularity has been made even more popular by the releases of Windows 8 and the new Google design, which includes a completely flat aesthetic. And other popular sites use this theme as well.

Can you make it work for your project? Does this more simple design scheme work for you?

Flat design can be both beautiful and charming. Without lots of added embellishments, it can be a clean and simple way to communicate a message or promote a product or idea. It’s time to get in on the trend now before the next new wave happens.

What is Flat Design?

leeks

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

negative

windows phone

thenounproject

spelltower

sagmeister

Flat design is a method that does not use any extra effects to create a scheme that does not include any three-dimensional attributes. There are no drop shadows, bevels, embossing, gradients or other tools used that help lift elements off the screen or create added depth. Icons and UI elements are crisp and without feathered edges and shadows.

Flat design is just that – flat.

Flat design is not completely without effects, it just lacks added extras to create “artificial” depth and dimension. Even more designs fall into the category of “almost flat,” where the overall look and concept contains very few effects.

Techniques

svpply

jetsetter

experiential

Forget all the decorations. That’s just not what flat design is all about.

Focus on the color. Flat design schemes often use a lot of vivid color. From colorblocking and shapes and bars to tints, color is a key component to making it work. Consider using colors from your logo to really make the site pop. Flat schemes will work on all black and white, but you will get a greater impact from using more color.

Focus on typography. Words are essential – they communicate a message, provide navigational tools and tells users what to do on your site. Play up the words with interesting and different typography – no Arial here. Opt for typefaces that work with your message. Remember the flat scheme is often simple and minimalistic, so think about how typography goes with that. Stay in the theme with simple sans serif typefaces that have plenty of variations and weights. Or consider doing something a little more unexpected by pairing a flat design scheme with one novelty font as an art element, accented by simple typefaces.

Focus on the words. Many flat designs also include few words to maintain a simple flow and feel. So make sure every word counts.

Simple user interface and UI elements. Buttons don’t need to be over-designed and complicated to be clicked. As long as elements are definable and have a clear use, they will be effective. This can come in the form of color, outlining, boxing or even with the use of a different typeface or shape.

Create hierarchy. As with any website it is vitally important to create a distinct sense of hierarchy. In flat design, some argue obvious places to click – signified by shadows, gradients, bevels or other effects – are less obvious. Make sure users can tell how to navigate and use your site without having to really think too much about it. Links should be clear, whether they are a different color or contained in a box, and clickable.

Naming Flat Design

There is a lot of debate surrounding the moniker “flat design.”

The problem, many argue, is that the name does not truly represent what you are looking it.

Different companies and groups have tried other names – minimal design, honest design and even “authentically digital” has been used by Microsoft.

What do you think? Check out all the ideas on the great thread over at Branch.

Flat Design Inspiration

There’s a lot of talk about flat design happening in the developer/designer community right now. Check out these resources on Pinterest and Dribbble for a few great examples of flat design to get you thinking about how to use it in your next project. (Note Pinterest itself does not employ a flat design scheme.)

Flat UI Design Pinterest board by War Marc

pinterest flat

Flat UI Pinterest board by Marco Heutink

pinterest2 flat

Square UI elements on Dribbble

square ui

Santa tracker icons on Dribbble

Flat UI on Dribbble

Flat UI Dribbble

Square UI on Dribbble

Square UI

Haraldur Thorleifsson on Dribbble

Bobby McKenna on Dribbble

Bobby McKenna

Griffin Moore on Dribbble

Griffin Moore

Kyee on Dribbble

Conclusion

Because of its simple nature, flat design schemes work best with messages or products that emphasize that same thought.

Simple, clean and minimalistic. Small, lean and honest.

This style works great for smaller screens, particularly app or mobile design, but many are finding that it is beautiful for large screens as well. The Android platform and the Windows Phone both use flat design for their operating platforms. (iPhone, on the other hand, uses a skeuomorphic scheme.)

Flat design can be more difficult to create for some because you really have to focus on every detail. There are no shadows or effects to hide imperfections here.

Flat design also works great in a variety of color schemes. It pops with a lot of bright color or hints of color among blacks, whites and grays. On the flip side, though, it can appear somewhat flat when used in a completely black and white setting.

And if going completely flat seems little intimidating, consider an almost flat scheme, keeping effects to a minimum.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

30 Comments
  1. kpjothivelu Jan 31, 1:02 pm

    Simple, clean and excellent !!!

    Reply
    +15
  2. Dams Jan 31, 1:52 pm

    “Flat design can be more difficult to create for some because you really have to focus on every detail. There are no shadows or effects to hide imperfections here.”

    I would say on the contrary that flat design could be less difficult because it is usually used by people that can’t create perfect looking, subtle design with textures, shadows, gradients, etc…

    This remind me people doing directly “modern / abstract art” and saying that the traditional art is from the past and useless … just because they failed at it and don’t want to work hard to catch it.

    If you can’t do it, then deny it… just like Microsoft and Google are doing after failing for years.

    Texture, shadow, gradient, etc. are all tools used to create more emotions, feelings, that offers you more possibilities in your design. Just check at the print history, and how designers just added textures to printing because they were so bored by helvetica flat and neutral style.

    Not to say that this article is assuming that people not doing flat design don’t give a clue to anything like typography, color theory, layout, etc … which is wrong.

    I am quite amazed about how people are binary thinking only: it’s either totally flat design opposed to bad taste skeuomorphism. Nothing in the middle which is where really lies good design.

    Life is texture. In few years, touch screen will be even able to create physical feedbacks of different kind of surfaces and increase the panel of designer tools to generate emotions.

    Reply
    +16
  3. John Jan 31, 3:22 pm

    From my personal experience flat design is much more difficult to create. You need to be well aware of color combinations, font matching, proper positioning etc, because these are the details now that will make it shine or completely destroy it. There is a very subtle line between success and failure.

    I love it btw.

    Reply
    +41
    • Jagan T Feb 1, 10:47 am

      I completely agree with you John. Flat design is not an easy to handle. We need to aware and control the overdoing.

      Reply
      +6
  4. Antonio P Jan 31, 5:53 pm

    I think that Flat design it’s more difficult to create because it not explore the technique skills with some software if not the design knowledge of one person.

    Reply
    +3
  5. Jarod Billingslea Jan 31, 8:49 pm

    Flat Design is my favorite trend of all trends. I actually admire it every time I see it. In fact, it’s a trend I’m current striving to incorporate into my portfolio.

    Reply
    +9
  6. Paweł Hawrylak Jan 31, 8:50 pm

    I have to agree on this with DEMS. World isn’t black or white and good design is somewhere in the middle. Overdoing anything, whether it’s “minimalism” or “gradientalism” is a bad approach and proves a lack of skill, good eye and heart of a creator. I, myself, prefere this flat approach, but adding a little shadow, texture or – god forbid – gradient to add some depth doesnt’t make one a bad person. When the content is rich, the flat design really flourishes – bringing out what is the most important matter – the message.

    Reply
    +7
  7. Haris Bacic Jan 31, 10:31 pm

    In some ways, flat design is easier because you do not have to create images. Especially with retina and hi-DPI displays where you have to create a normal and 2x image, it can get pretty time-consuming. With flat design, you can utilize CSS to create shapes and even use things like SVG images.

    Reply
    +5
  8. Jonathan Santiago Jan 31, 10:57 pm

    By the very nature of the style it seems to lend itself better to responsive design as well.

    Reply
    +10
  9. Alex Feb 1, 12:49 am

    I’m a massive fan, less loading, can do most with CSS rather than images and looks classy.

    More of this in 2013 please!

    Reply
    +6
  10. Skweekah Feb 1, 3:31 am

    Hidden due to low comment rating. Click here to see.

    Reply
    -9
  11. Zulhilmi Zainudin Feb 1, 3:41 am

    I love this style. Clean, simple and minimal.

    Reply
    +7
  12. Antonio Pratas Feb 1, 3:42 am

    I really like flat design, all in all I think that if overused, with flat illustrations and such will become a bit too flat, but I’ve seen great pieces in dribbble on flat design. My latest site is pretty much flat, and even though it’s easier on the photo comp and image work, it’s harder on the composition level, since you don’t have any textures or decorations to back you up and fill the grid. It’s all about typography, good grid and good alignment, and specially great color picking, to ensure you get a really great palette that works well between background vs content.

    Reply
    +4
  13. sankar Feb 1, 7:06 am

    Nice article… worth to read..

    Reply
    +1
  14. Ronald Mason Feb 1, 3:45 pm

    Straight to the point

    Reply
    0
  15. Darius Armour Feb 1, 4:27 pm

    I have to say that I love flat design, to be honest the current trend of interfaces utilize a lot gradients and effects to create depth and go for the HD-icon feel. Overall, I would say even though it can be a little more time consuming the create the flat design, it gives the team/designer a chance to focus more on the user experience, whether it be an app or web site. Which in my opinion matters the most.

    Reply
    -1
  16. Justinas Zilnys Feb 1, 6:55 pm

    I agree with those, saying that flat design is more difficult to handle. Things like color and type now must do all the work that textures/gradients/shadows did in bringing the message and guiding visitors through the site. And that means flat design is good for content, no unnecessary distracting details…

    And there’s no surprise that flat design became the trend only now, that’s web-fonts and responsive design fault. Without web-fonts flat design would be doomed.

    On the other hand it’s a shame, that when things like gradients and shadows became available through css, designers are trying to get away from it… :D

    Reply
    0
  17. chris Feb 1, 8:28 pm

    I had no idea that Flat Design is a trend. Good designers have always used iconic, graphical techniques to communicate important ideas without cluttering the interface with pseudo-3D / gradient effects that distract the viewer from the content of the matter. These effects are often used by poor designers and canned stock houses to look initially impressive, but ultimately mask a lack of design thought.

    This is not to say these effects are not welcome in design, simply that using them has an effect on how well content is expressed and the designer needs to decide when they are called for.

    Reply
    0
  18. dBlaze Feb 2, 12:05 am

    Clean design is extremely hard to do if you want it to be eye catching… When done the right way – it’s simply awesome.

    Reply
    0
  19. Lester Feb 2, 11:02 am

    Flat design is not a trend. It’s not something new, it’s not temporary, and there’s nothing great/bad inherently about flat design. It’s just design without some of the superfluous decorations, glossy bevels, shadows, textures, and other elements (that can be used positively, or as a crutch). It’s what a lot of designers (especially identity designers) have been insisting on for ages.

    Reply
    +5
  20. Ashraf Feb 5, 3:49 pm

    Interesting article. Flat (minimal) design has been coming on for a while now. It’s just boomed in popularity over the last year or so. Before the boom, it was only used by designers but it’s becoming more mainstream.

    Reply
    +1
  21. Earl Varona Feb 5, 7:45 pm

    Thanks for the article. I look forward to implement more flat designs in my projects. :)

    “authentically digital” – Microsoft ..smh

    Reply
    +1
  22. Hendrik Feb 5, 11:36 pm

    It seems that “flat” has it’s challenges since it automatically puts more emphasis on the proper white space balance respectively “golden ratio”. There is no decorating with textures etc as the author has already pointed out and the layout resembles print even closer where the above mentioned principles apply even more.

    Reply
    -1
  23. Alok Desai Feb 7, 11:01 am

    Yup you are right! Flat design can indeed be a tough work. It’s not as easy as it looks.

    Reply
    0
  24. Luiza Feb 12, 7:49 pm

    I love flat design. I dont design myself I just foloow your blog, to be honest. I assure the only web temapltes I buy are made with flat design. I love your blog by the way

    Reply
    +1
  25. Windo Mar 12, 3:42 am

    Thanks for sharing, now I know what makes me love google + more, beside getting new information there ( the article before this is one of them )

    Reply
    -3
  26. Nimesh Chheda Jul 29, 10:33 am

    Thanks! for sharing this, I am working on Designing an Web Application these days and following the Flat Design Concept and this article was quite helpful for me to know what is Flat Design.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters