Principles of Flat Design

Flat design – the design community just can’t stop talking about it.

And feelings are strong. Most designers either can’t get enough of this trend, or absolutely hate it.

I am somewhere in the middle. Good design is about creating something useful that works. If the answer is designed in the fashion of flatness, so be it. But the trend may not work for all projects, so it should not be forced.

So let’s examine what makes something flat. There are five pretty distinct characteristics. Here’s a look at each, plus an introduction to “almost” flat design.

No Added Effects

TriplAgent

Into the Arctic

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

Task app

Flat design gets its name from the shapes used. Flat design employs a distinct two-dimensional style that is simply flat.

The concept works without embellishment – drop shadows, bevels, embossing, gradients or other tools that add depth. Every element or box, from image frames to buttons to navigational tools, is crisp and lacks feathered edges or shadows.

Nothing is added to make elements look more realistic, such as tricks designed to make items appear 3D in skeuomorphic design projects. Layers used in flat design mirror those in other projects, but the planes do not intersect leaving a distinct background image, foreground images or buttons, text and navigation.

So what makes it work? Flat design has a distinct look and feel without all the extras. It relies on a clear sense of hierarchy in the design and placement of elements to make successful projects easy for users to understand and interact with. While more and more websites are using flat design principles, it is maybe even more popular for app and mobile design. With small screens, there are fewer buttons and options, making a flat interface fairly easy to use.

Simple Elements

iPad Calendar Login

Filetypes

Square UI

Simone Marcarino

Flat design uses many simple user interface elements, such as buttons and icons. Designers often stick to simple shapes, such as rectangles, circles or squares and allow each shape to stand alone. Shape edges can be perfectly angular and square or include curvature.

Each UI element should be simple and easy to click or tap. Interaction should be intuitive for users without a lot of in-design explanation.

In addition to simple styling, go bold with color on clickable buttons to encourage use. But don’t confuse simple elements with simple design, flat design concepts can be just as complex as any other type of design scheme.

Need help getting started? Designmodo offers a variety of UI kits using flat styles – from the Square UI Free and Flat UI Free, a simple PSD/HTML UI kit with basic components, to Square UI and Flat UI Pro, a complete PSD/HTML UI pack for website and app design projects.

Focus on Typography

Courtney & Andrew

Plover

Flatmate

Because of the simple nature of element in flat design, typography is extremely important.

The tone of typefaces should match the overall design scheme – a highly embellished font might look odd against a super-simple design. Type should also be bold and worded simply and efficiently, in an effort for the final product to have a consistent tone visually and textually.

Consider a simple sans serif type family with plenty of variations and weights for the primary typography on a site using flat design. Add a touch of the unexpected with one novelty font as an art element, but be careful not to go overboard with use of the specialty typeface.

Type should also tell users how to use the design. Label buttons and other elements for increased ease of use and interactivity.

Focus on Color

Close landing page

Online Radio

Squirrel Settings

Color is a large part of flat design. Flat design color palettes are often much brighter and more colorful than those for other sites.

Color palettes for flat design projects often contain many more hues as well. While most color palettes focus on two or three colors at most, flat design palettes may use six to eight colors equally.

The hues tend to be vibrant – think about the purest colors from the color wheel – without tints or tones. Primary and secondary colors are popular. In addition certain types of colors are also used frequently; in this iteration of the flat design trend, retro colors – including salmon, purple, green and blue – are especially popular.

Minimalist Approach

Personal Site

DBX - Dropbox

Mud

Flat design is simple by nature and works well with an overall minimalist design approach.

Avoid too many bells and whistles in the overall site design. Simple color and text may be enough. If you want to add visuals, opt for simple photography.

Some retail sites, such as Svpply (above), using flat design have done a good job placing items on a simple background to do this. (It should be noted that the photos do have some natural depth but still fit into the overall flatness of the design.)

“Almost” Flat Design

Nagging popup

Calc

SimpleMail

Coming project

Music Web Application

A style more designers tend to agree on is “almost” flat design.

In almost flat design, the basic theme of the flat style is used but some effects are added to the design scheme. Buttons, for example, may contain slight gradients or drop shadows. Designers typically pick one effect and use it exclusively in an almost flat project.

This style allows for a little more flexibility than some of the rigidness of the no effects thought behind flat design.

Designers like it because of the added depth and texture. Users like it because the style is a little less sharp and can help guide proper interaction. On the flip side, designers don’t like it because it marries two styles in a way that can lack definition of a true style.

More on Flat Design

Designmodo has been a leader in the flat design trend discussion. Read our previous articles for more on flat design.

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

39 Comments
  1. Stuart Cookney May 28, 1:39 pm

    great article again!! I have just redesigned my portfolio to a new flat design.

    Love this new trend!

    Reply
    +19
  2. Hrishikesh May 28, 1:56 pm

    Nice explanation!

    Reply
    +9
  3. Chris Howard May 28, 2:54 pm

    Great article. I like flat and almost-flat design, it is really beautiful and elegant. I just hate being expected to follow the latest trends (Not this article or site as creating that pressure).

    Design should always be about what is right for the project, not what is trendy.

    It will annoy me if Apple does go for a flat design for iOS7 (if thought I know they will do a good job of it) because it seems that is being driven more by some people’s dislike for 3D design and skeuomorphic design.

    And to change to flat or almost design really will look like Apple following rather than leading.

    Now iOS rant aside, the interesting thing about flat design is it seems to age fast.

    When I first saw and experienced Windows Metro, I liked it (visually, not functionally). But I’m already over it, it’s bland and limited now. It’s passè already.

    I think flat design will have a much shorter lifespan than 3d did.

    But dont’ worry, I have noticed in Star Trek it is trendy again in the 23rd century (google Star trek console)

    Reply
    +31
    • MacSmiley May 28, 5:52 pm

      “Design should always be about what is right for the project, not what is trendy.

      It will annoy me if Apple does go for a flat design for iOS7 (if thought I know they will do a good job of it) because it seems that is being driven more by some people’s dislike for 3D design and skeuomorphic design.

      And to change to flat or almost design really will look like Apple following rather than leading.”

      Thank you very much, Chris. Well said.

      Remember, Star Trek reflects the present as much as it does what we may want of the future, which eventually becomes the past.

      Reply
      +11
    • Demetrio May 29, 8:02 am

      Chris, it’s funny you say flat design ages quickly. So called flat design has been around since way before skeuomorphism, so hardly think that is accurate. All flat design is is colorful-or the use of color in minimalism. I would say it’s much more than a trend, and definitely way outdates windows metro.. Infact a lot of the original( if there is such a thing) graphic design, can be said to have been flat design.

      Reply
      +17
  4. Francis shivone May 28, 4:37 pm

    An excellent explanation, thank you.

    Reply
    +4
  5. Carrie May 28, 5:19 pm

    Just wanted to thank everyone for the great feedback! You guys are awesome.

    Reply
    +13
  6. Fred May 28, 5:59 pm

    Focus on Content instead of Focus on Typography

    Reply
    +4
    • Joe May 29, 12:20 am

      Content is important, but it has to be readable, that’s why designers should focus on the way the will present it. Visual hierarchy, line height, kerning, etc. Typography for screen is different than typography for paper and can’t be classified as secondary thing. It is important as much as content is. If they are both great, then it’s going to be a pleasure for any users reading useful information. Otherwise it would either be just boring finding no major info (lack of content) or hard to find what you’re looking for (lack of typography).

      Reply
      +7
  7. Tomasz Zagórski May 28, 6:02 pm

    Thanks guys for showed my project :)

    Reply
    +8
  8. Leo May 28, 6:49 pm

    Really enjoyed this article. People will either love or hate new trends in design. That’s inevitable. I for one have always leaned on the side of simplicity and minimalist designs.

    Reply
    +4
  9. John Cooper May 28, 7:28 pm

    Great stuff. Have always been a fan of flat design, being in the strategic branding side of the industry. In the past, gradients generated through Freehand and Illustrator were clunky and didn’t print well; but now with the advent of digital, better design applications and the need for more online use, gradients have become popular. I still believe that the top end of Corporate Identity needs flat design (logos) due to intensive production variation – much easier to control consistency.

    Flat design also works extremely well for information graphics (infographics), giving icons, graphs and large colour areas a punchy vibrant feel.

    Reply
    +4
  10. Zara May 28, 11:05 pm

    I’m only interested how long this trend will last

    Reply
    +1
  11. Mike Feuer May 28, 11:25 pm

    Flat design is a trend we’ve embraced in the design and development of our site. We have been touting this style for several years and feel that the simplicity is what make users so drawn to it. There is not opportunity for confusion. The color and the hierarchy in the layout tells the story very clearly and the user is left with a very comforting feeling when navigating.

    Reply
    0
  12. Francis shivone May 28, 11:29 pm

    Zara, from my perspective it’s been a long, slow trend and it will continue the other way in same fashion. We all went crazy over the first GUI (well old guys like me) and wanted texture everywhere. Google and Craigslist proved you didn’t need it for everything and the flat interfaces, like Google’s latest, are a happy medium. In my view this post made cogent points for how and why it could be here a while. I hope so, I like it, especially the emphasis on good typography, and reader-friendly design. Maybe you don’t agree?

    Reply
    +2
  13. Nir Benita May 29, 12:29 pm

    Really nice article!
    I would also think the new Google Plus is worth mentioning in “Almost Flat Design” as it’s down right gorgeous!

    Reply
    +3
  14. Given Edward May 29, 12:39 pm

    Apple dropping Skeuomorphism (Skeuomorphic Design) for Flat Design in iOS7 shows how Flat Design is “the thing” right now.

    I hope the next article will cover what fonts are best for flat design.

    Reply
    +2
  15. Mike Roselius May 29, 5:54 pm

    Loved the article. Is the Task App that you show a production app? What’s it called – it looks very nice.

    Reply
    0
  16. Mike Roselius May 29, 6:11 pm

    Disregard – tracked down – Taasky

    Reply
    0
  17. Sarah Bauer May 30, 1:05 am

    On the content side of things, flat design sure does a powerful textual message good. The simplicity of the design begs for thoughtful choices in typography (as mentioned), and message. I’m always interested to see how content and design respond and rely upon each other – flat design, trendy or not, is a motivator for great content.

    Reply
    0
  18. Terence Desclain May 30, 6:03 pm

    Wow.

    What a great list !

    Please have a look at http://who-wanna.com our flat landing website for our flat upcoming application :)

    Keep the good work !

    Ternece

    Reply
    +1
  19. Taras May 30, 6:38 pm

    Thanks for featuring us Carrie!

    You can view the whole app design under my Behancé : http://www.behance.net/gallery/TriplAgent-Branding-and-Design/9012713

    Cheers.

    Reply
    +2
    • Carrie Jul 24, 3:22 pm

      I am looking forward to checking out the full app when it is released!

      Reply
      0
  20. Alvalyn Lundgren Jun 1, 9:58 pm

    I think your greatest point in the article is that design solutions should address the function first. Style is simply style. Where flat design is appropriate, go for it. But when the purpose of the design requires a wholly new or different approach, do that.

    Good article.

    Reply
    +2
  21. Alex Devero Jun 2, 11:11 am

    This is great article!

    Reply
    +1
  22. Chetan Shridhar Jun 3, 12:20 pm

    Good Article! But there is another important aspect of flat design which is white space. I see that there is a big role for spacing in flat design.

    Reply
    +4
  23. Oriol Mendivil Jun 4, 3:10 am

    It’s an amazing POST, I love it…

    Plain colors are great, is a simple fancy, clean and beaty. I begin to work on this wave!

    Reply
    0
  24. Alex Jun 4, 8:04 pm

    Flat design is not going anywhere you nit wits. It’s clean, elegant, and simple; exactly what design should be at it’s core.

    The only problem I have with it is that some people see Microsoft/Windows/Metro as the pioneer yet all they really did is adopt the ‘Swiss style’ design.

    Reply
    -1
    • MacSmiley Jun 5, 3:51 pm

      All Microsoft did was design within the limitations of their own OS that could not handle the performance hits of shadows and gradients. I give them props for doing something different, unlike the Android camp, but one wonders what would have happened if Microsoft’s code had more functionality.

      Reply
      -2
    • Mick Jul 18, 9:27 am

      They saw where the trend was going before it happened, that seems like a fair ‘pioneer’ quality.

      Credit where credit is due IMO.

      They pushed responsive flat design across their sites so that it looks great on all devices whilst Apple are still stuck in 2005 (don’t believe me? Check their homepage then try resizing and see what happens (or rather doesn’t happen)).

      Reply
      +3
  25. Tom Muller Jun 5, 12:12 pm

    I wrote a response to this whole “phenomenon”: http://hellomuller.tumblr.com/post/51561855030/flat-design

    Reply
    0
  26. Mohammed Shehata Jun 9, 7:47 pm

    Wonderful …, flat design is a trend now but people says it will not live longer, I still find potential on one of the applied concepts in the Metro UI as example of experience based on flat-design .

    Reply
    -1
  27. Martin Tolley Jul 10, 3:21 pm

    Good piece. But along with a few other comments here I think that function and implementation ought to be first. Design needs to follow, else it’s only decoration. As an older person, I find smaller screens on tablets and phones more challenging, along with higher res displays on desktops, and that can become worse when icons become smaller and more homogeneous, and don’t have sufficient contrast with backgrounds to make them distinguishable from one another. The latest generation of gmail icons have good contrast but are really pretty similar black squares at even a moderate viewing distance for some of us.

    Reply
    +2
  28. H.E.A.T. Aug 16, 6:48 am

    As with any information shared by those who know to those who don’t know (like me), this is a very good and highly informative article.

    There’s a lot of debate surrounding flat design (FD) as being a trend or something that is here to stay. As with a lot of new trends, such as Responsive Web Design, folks will accept it as a “only-this-or-only-that” way to web design.

    I do not see FD this way. I see it as yet another tool to apply the principles of Progressive Enhancement (PE) to the design process.

    PE focuses on the content, which is the goal or most designers. FD simply focuses on the inherent functionality of a site; if your site is interactive, then make sure that fact is fully understood and perceivable.

    FD, as well as PE, does not prevent aesthetic enhancements to a website’s design, FD simply forces you to make sure the most important aspect of the content and interfaces are well defined.

    I have visited so many websites where the importance of the flashiness was made clear to me. Colorful graphics, adverts, fancy buttons, gimmicky icons, and animations overshadowed what I wanted to do; use the interfaces. The interfaces were crammed into whatever space was left over.

    Look at FD as a layer-on that compliments PE and supports accessibility and the benefits may become clear. FD does not take away from creating unique and explosive websites. FD simply provides a level of focus that can make any site better.

    Reply
    0
  29. Peter Mathews Aug 30, 5:51 pm

    Flat is not new, it has just been rediscovered. Flashback, early 1900’s, say 1913-30’s, Bauhaus designs. Strong, flat graphic shapes, let the typography speak. Even the Bauhaus style of architecture boasted strong, clean facades, that featured an emphasis of form over function.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters