Last Updated on April 8, 2016
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:
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.
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.
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
Free Grid-based WordPress Theme
Free Cherry WordPress Theme with Cat Power
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.