Flat Design - Trends in Web Design

Trends in Web Design: Flat Design is Just Efficient Design

By Thursday July 11th, 2013

Flat design is a recently popular term and a design style that is often described as the opposite of skeuomorphic design.

Web design is changing. Constantly.

Whether or not you buy into the idea that flat design is more than just the next trend, there are a couple sure things when it comes to flat design and flat website design specifically. With flat design, designers can create more efficient and intuitive systems and pare down to the essence of simple interactions and usability. And we can do it more quickly.

Like other design trends that have come before it, there are pitfalls to the flat design style, but in general, I consider flat design a welcome trend because flat design is efficient design.

What Does Flat Design Mean?

Flat design is a newly popular term and a design style that is often described as (confused with?) the opposite of skeuomorphic design.

Skeuomorphic design is design that emulates real life, like the leather textures on Apple’s Contacts app or the poker table look in its Game Center.

More generally, it’s the subtle shine on a button that represents ambient light or the use of a realistic toggle switch instead of a checkbox.

Since a lot of web designers now agree that it’s a mistake to recreate physical interactions digitally (unless it’s usability-driven), skeuomorphism is all of the sudden shunned in favor of geometric shapes and large flat sections of color. That’s flat design.

Flat design, however, is basically just a buzz term. It’s a new graphic design trend, or more specifically, a new trend in web design and application design.

There’s no real definition of what flat design is or its limits, although it definitely does not mimic real life interaction in a digital form.

It is, however, an efficient and smart trend in web design. Here are a few reasons why.

Better Systems

Flat design forces a designer to think about design and usability details like type, color and space. Because there are no shiny bars or realistic elements to cloud our visual minds, all we see are the essentials. Therefore, the design of each essential component becomes more… essential. Most of us learned this in design school: the less you have on a page, the more perfect each element needs to be.

I consider type, color and space to be essential components of design. With flat website design, these three elements affect more than just the look of a layout. They guide usability and offer clues to larger systems, which is equally as important as aesthetics.

Faster Design

When we remove all the “extra” design that we used to add to our web-based layouts, it turns out that we can have web projects up and running really quickly.

This is definitely the industry trend, with startups and established businesses alike toting “iterative design processes” and “agile development techniques.”

Since flat design allows us to keep our systems visually “simple,” layouts and products don’t just fall into place faster, they are also more easily expanded upon and built on as a product or brand evolves.

All the while, the decisions about design aren’t clouded by ego or achievement. (Sometimes we want to accurately recreate the sheen on a rotating dial so badly that we don’t realize that a rotating dial makes no sense on the web!)  Instead, decisions are focused on creating the best possible interactions and sticking to them.

This leads to the next advantage of flat design.

Focus on the User, Not the Design

My favorite thing about the flat design trend is that we’re finally focusing on the user and the user’s task. We can stop compensating for lack of usability with clever realism or worse yet, we can stop forgetting about usability because we’re so excited that we made a button that looks like you’d hear it click when you press it.

With flat design, we no longer think, “What would this element look like in real life?” Now we think, “What’s the most efficient and simple way for my user to achieve this task?”

Flat design isn’t without risk, though.

Be Flat, But Show Some Depth

Although we don’t have to emulate real life, we do need to make sure that nothing gets lost or confused on a flat computer or touchscreen. There’s no actual depth, so the subtle cues we take in real life from shadow and highlight are non-existent without some human intervention.

Usually, there is some dimension to a website or an application, and creating a physical space with depth is a great way to portray hierarchy and focus. Basically, a little shadow can go a long way.

Personally, I like to mix this new paradigm of flat design with some very subtle skeuomorphism.

The History

To wrap up my thoughts on flat design, I’d like to cite a little history. I’ll take you all the way back to just a few years ago, before Google’s products all had the cohesive and slick design that they do now.

Google used to have design that was efficient to a fault. It was before anyone had heard of flat design. I used to call it “code design,” because there were almost no image elements or advanced typography. Everything was designed as if a coder only laid in early kernels of a design system… just enough that a user could tell what’s going on.

I loved it! Everything was pared down to systems and efficiency. The status of my sending-in-progress email was in a yellow box at the top of my screen. No border, no shadow, not too much space around it… just a yellow color to stand out against the white background with gray type. Buttons were blue or red rectangles, and their hover state was a slightly lighter tint of the base color.

Admittedly, it was ugly. As a designer, I’m almost ashamed to admit how much I liked it. It wasn’t about the design, though. It was about usability.

Technically, design did exist, and it was very thoughtful. In fact, the design was the epitome of efficiency. But visually, it was basically a total failure. Non-techy people couldn’t discern hierarchy, and designers couldn’t stand the “ugly” layouts that lacked any visual adornment.

I’d argue that Google’s mentality is what eventually turned into today’s flat design trends in website design.

Thankfully, Google was able to transition into the beautiful layouts they currently boast, without sacrificing the core ideals of efficiency and usability.

The world just followed.

In the End, Flat Design is a Trend to Get Behind

Normally, I try to stay away from trendy design. It’s better to stick to the foundations. It’s better to remain solid and timeless (as if “timeless” is actually possible).

Flat design, once the “buzz” wears off, will undoubtedly become just “design.” Alright, maybe it will become just “web design” or “digital design,” but the point is that it’s one trend that I can get behind.

In the next few months, watch for a thoughtful implementation of flat design techniques in Apple’s new iOS 7. It will be flat, but not too flat. The current reaction to the new style is certainly mixed, but I’d predict that once everyone uses it, we’ll all appreciate the usability considerations in the new design.

As long as we don’t take flat design to its extreme (like some say Windows 8 did), we can benefit greatly from the ideas and efficiency it brings.

Like what you just read?

Sign up for updates whenever we post a new article. No spam. Promise.

About the Author

Drew Thomas is the CTO and co-founder of Brolik. He oversees Brolik's technology projects, including Leverage, Brolik’s proprietary technology platform. Drew spends most of his free time on side projects and prefers to blend work and life into a balanced, enjoyable experience. He lives in Austin, TX.
Twitter: @drewbrolik
LinkedIn: Drew Thomas
Google+: Drew Thomas