What IS “Flat Design” and Why Should We Use It?

flatdesign
After seeing several webdesign blogs mention “flat design” as a still-up-and-coming design trend for 2014, I was intrigued. “What do you mean, ‘flat’ design? Ain’t the screen flat already?” I thought, jokingly.

At first, I wondered if perhaps the CSS box shadows, pretty text bevels, and all of that had started going out of style–you know, the stuff I worked really hard to master and have just now begun implementing into my new designs. But the answer is a lot more subtle than that.

Flat Design: A Feeling Rather than a Set of Rules

The Ultimate Guide to Flat Web Design is where I began my research, and after perusing the screenshots of several different “flat design” layouts, I began to understand. Not only was flat design already a “thing” on the Web, but it wasn’t necessarily just “flat” as in boring. It was, instead, a certain minimalist approach, a “less-is-more” feeling…and it was EVERYWHERE.

A few examples:

flatdesign_tumblr
Tumblr’s login form, for instance, has elements of flat design; the fonts are simple, the text boxes are only very slightly rounded (VERY slightly!), and the colors are basic (white, blue, and a touch of gray here and there). And yet, there’s an elegance in this simplicity–there is no high-gloss “Web 2.0” feeling, but it still looks “finished.”

flatdesign_wordpress
My WordPress login screen is treated very similarly–subtle variations between colors, pictorial icon rather than text logo, and clear, readable fonts. Notice on the right and bottom sides of the form, there is the very faintest shadow, just barely there.

flatdesign_wmworg
Here’s the most surprising example of flat design, at least to me–this comes from Version 13 of my own domain’s layout! In my search to give my layout a new, icon-heavy/pictorial feel, I quite by accident wove in some flat design aesthetics. You can’t call my color choices “subtle” (LOL), but the simplicity of the icons and fonts still fit.

Basically: Flat Design = Natural Makeup

Flat design is to webpages as “natural” makeup is to faces. I know that’s a weird analogy, but it’s accurate. When you choose natural makeup, the point is to not LOOK made-up–it’s all about enhancing the bone structure and features that are already there, with skin-like shades and very careful, subtle color placement. Flat design does the same thing, with 1px strokes of faint shadows, minimal color choices and simple icons, and only the very subtlest shaping and rounding of page elements.

Where Can You Use Flat Design?

Thankfully, like all web trends, you can choose to hop aboard the “Flat Design Train” or not. The look can be too boring for some and too cold for others, especially if used all over the page. Some projects just don’t need that much minimalism (as weird as that sounds!).

That’s why I personally advocate using flat design for your basic page functions, such as navigation and web forms, and perhaps use a more striking graphic or design aesthetic for news, updates, or anything else which needs immediate user attention. Just as a makeup artist balances a strong red lip with just the barest touches of eyeliner, flat design’s concepts can provide just enough styling to your page to make it look polished, without detracting from your most important content.

Summary

Give flat design a try with your next design–toy around with shading things just right, picking simple yet effective icons and fonts, etc. Who knows, you might find your next idea hiding amid your musings!

2 thoughts on “What IS “Flat Design” and Why Should We Use It?”

  1. The long and the short of it, pardon the pun unintended, is that there has
    been no real follow through selling. Digital Journal reported on Thursday that Jim
    Rogers, Chairman of Rogers Holdings, strongly criticized Jim Chanos’ prediction that the Chinese
    economy will collapse. With CCC Inventory numbers at zero
    with a former high of 791.

Leave a Reply

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