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:

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.”

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.

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!