Shares
Use arrow keys to navigate

Flat design is a staunch, no nonsense design philosophy which requires more in the way of performance, while omitting all the bells and whistles of its busier, gaudier, and aesthetic heavy counterparts. An appreciation of simplicity drives a flat design. Usability and functionality should be obvious, open, and immediate. Flat design stands in direct opposition to skeuomorphism, a design philosophy that uses digital art to simulate something from the real world.

It’s an old argument in the world of design, one that actually predates the internet entirely. An ongoing shif of preferences if you will. It seems as if the public pendulum swings back and forth between opulence and minimalism, depth and superficiality. It’s a classic rivalry that pits old against new, yet every generation the title of vintage slingshots back and forth between simplicity and complexity.

So while it’s not incorrect to think of flat design as a trend, it would be more accurate to call it a recurring theme. And right now we’re in a period where that theme is surging back towards prominence. So since this rough beast has slouched towards Bethlehem to be once again reborn, let’s take a closer look at some of flat design’s defining characteristics.

Foundations of Flat Design

Flat design is highly dependent on imagery and graphics. The idea is to elicit a conversation around an image/series of related images. Alternatively, the design could revolve around bold text graphics that pop from the page and grab the reader’s attention. Regardless, there is a simple and visually appealing focus that begins a conversation with the sites visitors. That conversation is moved forward by the accompanying content contained on the page. It’s this slow diffusion of content promoted and complimented by strong and singular imagery that gives flat design its strong aesthetic appeal.

Having a flat design doesn’t mean you can’t have a lot of content on the page, but it does mean you have to be careful about that content’s presentation. This content should be passive in comparison to the central focus, but still obvious and highlighted in its own way. What any flat design worth its salt must absolutely accomplish is provide obvious visual cues as to actionable items within the page. More than anything, flat design requires a strong focus on usability. To put it bluntly, if it doesn’t have a useful function on the web page, then there’s no reason to waste real estate on it, at least not from the minimalist perspective.

So by way of example a flat design would never include layered or three dimensional artwork. If it did, you couldn’t very well call it “flat” now could you? That means no shadows, no gradients, and no depth whatsoever. Instead to get certain elements to stand out you have a very clear structure of content. Your content is visually prioritized in terms of each item’s importance to the site visitors, as well as the designer. So pay particular attention to these flat design caveats:

Color

Effective flat designs can use a diverse color palette. Though since the idea is to keep it simple, too many loud colors can be a bit over the top. Use subdued colors in your backgrounds and brighter colors to emphasize elements you want to draw attention to.

Typography

The fonts and sizes of text on the page must match the overall theme. That means utilizing unembellished and for the most part modest typography. Though that isn’t to say all of your text should be unassuming. When picking out your typography, concentrate on the message you’re trying to get across, and use a font that compliments the tone of that message. And it hardly needs to be said, but never, ever, ever use COMIC SANS. It’s just bad manners.

Intuition

This is really what it’s all about. Effective flat design should eliminate all the guess work. Your visitors should be able to quickly and easily see how to navigate your page, and where the relevant content is that they’re seeking.

Here comes the bonus: 15 free WordPress themes that are perfect examples of flat design! 

Free Flat Personal Blog WordPress Theme

new-thumbnail[1]

Download

Blogly

blogly-large[1]

Download

Gridster

Gridster Portfolio Theme

Download

Oxygen

oxygen_wordpress_theme

Download

Free Grid-based WordPress Theme

photographer1[1]

Download

Point

Point-WordPress-Theme[1]

Download

Time

time_large[1]

Download

Post Theme

bposttheme[1]

Download

Free Cherry WordPress Theme with Cat Power

Free-Website-Template[1]

Download

Surfarama

surfarama-wordpress-theme-sm1[1]

Download

Bearded

bearded[1]

Download

Playbook

Playbook-WordPress-Theme[1]

Download

Asteria Lite

Asteria[1]

Download

Portafolio

portafolio-free-portfolio-wordpress-theme[1]

Download

Pronto

Pronto

Download

You may also want to check out Template Monster’s flat design gallery for more examples of how this philosophy looks when implemented. While browsing through these examples try to note the lack of depth on the pages, visual cues that direct the flow of your attention, bright colors that highlight important content, and all of the other important elements of flat design that we’ve discussed today.

Use arrow keys to navigate

Shares

Posted by Zack Rutherford

Zack Rutherford is a freelance copywriter. He contributes web content and especially snappy articles to TemplateMonster. Combat sports enthusiast and poetic soul, Zack endeavors to create beauty through syntax, sentence structure, and the liberal use of hyperbole. Follow him on Twitter (@zack_rutherford) or visit his website (Zackrex.com) to read all of his innermost thoughts and unfounded opinions.

Leave a reply

Your email address will not be published. Required fields are marked *