PSDFan Extra

How to Nail the Coveted Flat Design Look (9 Actionable Tips)

How to Nail the Coveted Flat Design Look (9 Actionable Tips)

As a design savvy person you’ve most likely come across the flat design trend.

From Windows 8 to the blogging community, flat design is HUGE. And it’s only getting bigger…

As designers it’s important to stay on top of design trends. Good designers don’t stay stationary. We learn, evolve and master new skills and trends.

There have been a few articles circulating giving some solid examples of flat design. However, I felt it was important to explain exactly how to achieve the coveted flat design look.

Keep reading to learn the 9 key principles that will help you master flat design:

1. Bold Colors

A signature element of flat design is bright, bold colors.

Take a look at the examples below. Large, brightly colored panels of color are a key element of flat design:

flat design trend

flat design trend

So how do you choose a suitable color palette?

Well you can always play around in Photoshop, but to make your life easier, DesignModo have put together FlatUIColors.com. The site provides a series of color swatches that you can easily click on to have the hex code copied for your usage.

The site has become so popular that these colors have come to define the trend. Check them out by clicking the image below:

flat design trend

2. Multi-Color Panels

To extend the bold color technique, you can get a little more varied with your color palette.

Generally speaking I like to limit my website’s color palettes to a minimal number of colors.

However, flat design often uses a variety of bright colors, often in the form of background panels.

As long as the colors are complimentary, you can combine multiple colors and background panels in a beautiful series:

flat design trend

3. Typography

Typography is a huge part of successful flat design. Often elegant typography will become the centerpiece of the design, as the flat background colors don’t detract from the textual elements.

Uppercase Lettering

It’s interesting to note that many successful flat design sites use uppercase lettering.

Take a look at the example below. Many sites are using uppercase text for navigation items and key headlines.

flat design trend

White Text Over Background

It’s also very popular to use white text over either a flat background color or a photographic background.

flat design trend

flat design trend

4. Use Vector Illustrations

As we’re dealing with flat colors, this is perfectly suited for vector artwork. Vectors are inherently constructed by flat shapes and clearly distinct areas of color.

By adding some simple vector style illustrations you can accentuate the flat nature of your site.

Check out The Noun Project for some great flat style icons and illustrations.

flat design trend

flat design trend

flat design trend

5. Subtle Background Patterns

If you’re a fan of great design being in the details, then don’t worry, you can still have these awesome details within your flat design.

Often flat designs add extra details to the panels of flat background color. These can often be more visually impactful than a basic gradient.

The important thing is to make these extra details or patterns flat in themselves. This way your background will still be very clean.

flat design trend

flat design trend

6. Large Elements, Lots of Padding

This technique is nothing new, but it’s very prevalent in flat design.

Make your page elements large and give them a lot of padding.

This way you avoid a cluttered, busy look and give your page a clean, minimal look, which perfectly fits with the flat design trend.

flat design trend

flat design trend

7. HTML 5 and CSS3 Awesome Transitions

Another common feature of flat design is taking advantage of advancements in HTML and CSS.

Flat designed websites may be typically very simple, but the visual spectacle is often achieved by inspired transitions and other page effects.

Click through to the site below and scroll down to see a great example:

flat design trend

8. Panoramic Background Photos

Whilst it’s not strictly ‘flat’, many flat designs are using panoramic photos.

Not only are these a strong visual centerpiece, but they often make the overlaid elements of your design (such as the headline text) look even flatter through contrast.

flat design trend

flat design trend

flat design trend

9. Flat Design UI Kit

I’ve personally been using DesignModo’s Flat UI kit for some of my recent designs.

It takes a ton of the hassle out of designing from scratch, but is versatile enough to allow you to create highly original, professional designs.

DesignModo are absolute god’s in the UI design world, and are the go to place for huge, practical UI kits.

Check out some of the features included with this UI kit:

  • Both .psd and HTML versions of the UI kit
  • Built using a responsive, mobile friendly framework
  • Over 50 icons and glyphs are included
  • Perfect for rapid prototyping
  • Build with color swatches included, to make changing color palettes a breeze

Click here or on the image below to check out their Flat UI kit.

flat design UI kit

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

9 Comments:

  1. MarkT says:

    Great summary of the current state of play, Tom, and well-selected examples too.

    I suppose the huge rise in use of flat colours in web design has come out of the need to create responsive websites, as flat elements scale much more readily than gradients and complex imagery.

    Most of the discussions I’ve seen around flat vs skeuomorphic design tend to land in a ‘like vs hate’ argument, which I’m going to try and swerve. In fact I’m deliberately going to sit on the fence and say that BOTH can be beautiful if done correctly. :)

    • Tom Ross says:

      Thanks a lot Mark, I thought it was about time someone broke down the principles of flat design in a guide form.

      I really like flat design, but I’m a bit on the fence with you. As with any trend it can be overdone, or done badly. I also don’t think it’s an absolute necessity that people follow trends, as individual style is equally important.

      I agree about responsive design being a leading cause though. It’s much easier than slicing up some over-detailed .psd to emulate flat design in code form.

  2. Dianne says:

    It’s nice that this is trendy, but take a look at some of your examples and notice that it is difficult to read the text with some of those palettes. I don’t see the point of being trendy if it turns off someone trying to get information from the website. Tiny white letters on pastel backgrounds or on busy backgrounds are a huge turnoff to me because of the difficulty of reading the text (the white or yellow or red lettering on black backgrounds that vibrate horribly was another trend I hated). I’m not the target audience, obviously, but am I the only one who won’t return to websites whose designers are insensitive to the fact that their decorative urges overwhelm common sense in the ability to communicate?

    • Tom Ross says:

      I totally agree Dianne, which is why I was trying to be fairly neutral in my article by just pointing out how to mimic the trend.

      I’ve seen a few bright yellow sites with bright white text over them and it really turns me off.

      I do think usability should always come first, although saying this, I think we can push our typography a little further with their being less distractions. Previously white text on a bright background would have been impossible, but now it can look attractive (and be legible) once all other distractions are stripped away.

  3. Brittany says:

    This is a great intro into the world of flat design. Thanks, Tom!

  4. Mike says:

    Hi Tom,

    It help me make my website look better and more flat. Keep up the good work!

    Thx

  5. Flat design is getting more popular by the day, although it’s not a great fit for every website, but for my website it was a natural choice!

  6. Linus Mary says:

    This is what I’ve been looking for. Thanks! This is a sort of Flat Design 101. I am an amateur graphic designer and a fan of flat design and UI interface.

Leave a Comment:

Related Posts

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY