5 Ways to Make Your Site Pop Using Flat Design

If your business needs to keep up with trends, listen up!

Flat design is a new(ish) trend that you can adopt to make sure your customers know that you are hip and happening and know what’s up when it comes to design and colour trends. It might also be a good fit for you if your brand portrays a contemporary, clean, simple aesthetic.

What is Flat Design?
Flat design is shorthand for a design philosophy that that argues for simplicity, clarity and authenticity.  It is characterised by strong and high-contrast colour palettes, large typography, large eye-catching above-the-fold imagery, panoramic backgrounds and alternate coloured panels. Flat design does not just look good but it also makes sense. It promotes a clean user interface that’s easy to use and understand.  Flat design places an emphasis on the content by removing elements that can be distracting (such as textures or gradients)

This trend is here to stay (for a while anyway). It has been adopted by Apple for their upcoming iOS 7 update as well as by Google in their 2013 revamp of their web applications (e.g. Gmail & Google+) and mobile applications (e.g. Maps and YouTube). Microsoft has also used flat colour design in the revamp of their websites (see Outlook Webmail for example), their gaming platforms (see Xbox 360 dashboard revamp) and their operating system (see Windows 8 revamped start screen).

Here are five ways to make your website stand out using flat design

1. Use solid and high-contrast colours

Use a strong and high-contrast colour palette to separate the content from the background

Build 2012 Screenshot
Build 2012
Profound Grid
Profound Grid
Wistia
Wistia

2. Use Large type

Large type is easy to read, and is attention grabbing.

Oak.is
Oak.is
Our Name is Mud
Our Name is Mud

3. Use an eye-catching tagline above the fold.

First impressions count! Use an eye-catching tagline above the fold that summarizes your brand.

Envato
Envato
Inc.
Inc.

4. Large and panoramic backgrounds

Playground
Playground
Frank Digital
Frank Digital
Nextr
Nextr

5. Alternate coloured panels
Use alternate coloured panels on the same page to delineate different sections. Websites are usually skimmed – this helps them find the information they need.

Courtney and Andrew
Courtney and Andrew
Inky
Inky