The Pros, Cons, and Future of Flat Design

We came across this article by Janie Kliever which seemed timely and relevant. Hope you’ll agree.

What is flat design, anyway?

You’ve likely heard its praises sung on blogs and in lists of design trends. This visually simplistic style has its roots in minimalism and can take a variety of forms, but is better defined by what it isn’t.

It isn’t 3D. The style’s name comes from its two-dimensional qualities, including flat shapes and the absence of details that create depth and dimension — such as shadows, highlights, and textures.

It isn’t skeuomorphic. Flat design started as reaction against skeuomorphism, an embellished style intended to suggest or resemble real-world objects or processes. Skeuomorphism makes generous use of effects like drop shadows, realistic textures, reflections, beveling and embossing, etc.
Flat Design’s Popularity Spikes

Flat design really started becoming a recognizable style in 2012 and 2013. Those were the years this trend became highly visible (and easier to emulate) thanks to the release of Windows 8 and iOS 7.

flat1

Upper, used with permission from Microsoft
Lower, ios 7iOS 7 (left) vs. iOS 6 (right). Via OS X Daily

From Windows’ modular layout with vivid blocks of color to Apple’s use of clean shapes and simplified icons, you can see some of the influences that shaped development of flat design and the evolution of the trend that followed suit.

The staff at UXPin, writing for Fast Co. Design, points out that “The ‘sweet spot’ in the evolution of flat design is somewhere between the original trend and the skeuomorphic ideals that were abandoned.”

But since flat design has been around for several years now and is still going strong, it’s likely more than just a passing trend. So let’s look at its pros and cons and where it might be headed in the future.

The Pros

Compatibility With Responsive Design

Since Microsoft and Apple jumped on board with flat design, the style was quickly adopted as a fresh approach to user experience. It was and continues to be popular for web and mobile design — and for good reason.

Flat design’s principles can be applied to other design categories, but its grid-based layouts and simple graphics are particularly suited to web and mobile design since they’re easily able to be resized or rearranged to display on different devices and screen sizes.

This example from Sergey Valiukh shows an example of simplifying and rearranging a design to provide a consistent experience between web and mobile:

flat2

web and mobile Sergey Valiukh

On the other hand, skeuomorphism’s highly detailed style with lots of shadows and textures, along with fixed-size imagery, often doesn’t translate well when shrunk down or enlarged to fit various viewing methods.

As Ryan Allen at design agency Dapper Gentlemen puts it in his article titled Flat 2.0,

“Flat design can be built to dynamically scale to a content-appropriate size much simpler than a pixel-perfect design.”

Flexible Framework

Call it what you like — a grid, cards, modules, or blocks — many designs going for the flat look tend to have compositions organized by uniform geometric shapes. This type of layout, where every design element has its place, is easy to scan and navigate quickly.

Grids are also a flexible framework that can be shaped into many configurations. This allows designers to create an arrangement that best suits and showcases their content, rather than squeezing content into a limiting pre-determined layout.

For example, this grid-based brochure design by the Bureau of Betterment features different sized squares and rectangles to highlight various design elements such as typography and icons. The blocks of uniform color and simple illustrations add to the flat effect.

Flat3

grid Bureau of Betterment

This website, on the other hands, uses grids in a variety of ways, from the menu to the staff photos to the list of services:

flat4
flat5

Clean, Readable Typography

Flat qualities also extend to designers’ approach to typesetting, which often results in larger, more streamlined typography. The absence of shadows and other effects makes text easier to read.

flat6

There is much more to this article — including the “Cons”. Check out it’s original publication here at Canva. And join us June 9th for more design discussions at re:think design conference in San Francisco during SF Design Week.

logo_vmastoryboard
logo_vma_c
logo_sfdw
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.