- The pros, cons, and future of flat design
The pros, cons, and future of flat design
What is flat design, anyway?
You’ve likely heard its praises sung on blogs and in lists of design trends(opens in a new tab or window). 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.
Windows 8.1. Used with permission from Microsoft.
iOS 7 (left) vs. iOS 6 (right)
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(opens in a new tab or window), writing for Fast Co. Design(opens in a new tab or window), 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(opens in a new tab or window) to display on different devices and screen sizes.
This example from Sergey Valiukh(opens in a new tab or window) shows an example of simplifying and rearranging a design to provide a consistent experience between 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(opens in a new tab or window) at design agency Dapper Gentlemen(opens in a new tab or window) puts it in his article titled Flat 2.0(opens in a new tab or window), “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(opens in a new tab or window) 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.
Bureau of Betterment
This website, on the other hand, uses grids in a variety of ways, from the menu to the staff photos to the list of services:
Teamgeek
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 the text easier to read.
Radium Labs
Sans-serif typefaces are a popular choice and a good match for this style, but serifs and display typefaces that aren’t too elaborate in their design can also make a big statement as a headline or feature text.
True Digital
The cons
Compromised usability
In an effort to emphasize flat design’s clean, streamlined qualities, some designers fall into the trap of focusing too much on aesthetics — to the extent that it negatively impacts a design’s usability. This is a particular risk for web and mobile design.
It can be hard to tell what is or is not clickable (since everything is flat, on the same visual plane). Important features and actions can be hidden from view, or visual cues that users are accustomed to might be missing — all in the pursuit of simplicity.
Take this website as an example. Are all the boxes clickable? Only some of them? It’s hard to tell just by looking at it.
Mike Kus
Lack of distinctiveness
Every business, brand, or individual planning a design project wants results that represent their unique qualities — whether they’re looking for a website, app, business card(opens in a new tab or window), event poster(opens in a new tab or window), or something else.
One of the downsides of flat design is that sticking to a simplistic, narrowly defined visual style often results in designs that look very or somewhat similar. Designers working in a purely flat style have a limited choice of principles to apply to their projects.
For instance, these unrelated mobile interfaces designed by Marco La Mantia(opens in a new tab or window) and Simone Lippolis(opens in a new tab or window) (first image below) and Luis Vaz(opens in a new tab or window) (second) both feature basic geometric shapes overlaid with white, sans-serif text. They even use a similar color scheme:
Marco La Mantia and Simone Lippolis
Luis Vaz
Overly focused on trendy aesthetics
Flat design regularly shows up on design trend lists, as it continues to be a popular choice for designers who want their work to comes across as modern or reflective of current technology.
But one of the problems with trends is that some designers will apply them just to follow the crowd, without really thinking about their usefulness. This can result in purposeless design choices — for instance, early flat design’s fondness for long shadows.
These two examples from Alexander Lototsky(opens in a new tab or window) and Erik Malmsköld(opens in a new tab or window) are typical examples of the long shadows trend, which has been most commonly used with typography and icons. Both designs were created in 2013, during the early excitement over flat design as a new visual style.
Alexander Lototsky
Erik Malmsköld
Worse than designing just to create a trendy aesthetic are choices that negatively impact usability, as discussed earlier. One example is the use of very thin or light typefaces that may look clean and minimal, but sacrifice easy readability.
Neglecting to scale lightweight fonts to an optimal size for a given viewing method can be particularly problematic when designing for smaller dimensions, such as business cards or mobile apps and websites, as below:
Olivier Zattoni
The future
Flat 2.0
As designers have experimented with flat design over the past several years, many have noticed some of the pros and cons we’ve covered here, and decided to adjust the style accordingly.
While early iterations of flat design were characterized by a strict visual simplicity, recent developments have seen the subtle reintroduction of qualities like shadow and texture — for both aesthetic and functional reasons.
The result of these tweaks to a purely flat approach to design resulted in a style often referred to as “Flat 2.0” or “almost-flat” design.
This style is more of a compromise: you still get the clean simplicity of flat design, but add some subtly skeuomorphic qualities for visual variety and improved usability.
Some techniques include adding some depth and dimension to the flatness by layering elements or adding some color variation or shadows. Another commonly used hybrid approach is the addition of photography rather than just flat illustrations or icons.
In the example below, flat design’s grid layout and easy-to-read type remain, but layered elements and flat-but-texturized illustrations take it up a notch — a good example of the Flat 2.0 approach.
Quotes Magazine
Material design
Having many characteristics in common with almost-flat design, material design is a visual language developed by Google(opens in a new tab or window) that emphasizes grid-based layouts and features “deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space” for a bold, graphic look.
Material design principles via Google
The style uses a paper-inspired approach with “visual cues that are grounded in reality” and “familiar tactile attributes” to help users quickly understand and navigate designs — which sounds like a nod to skeuomorphism.
For example, notice how the subtle shadowing and colors on the buttons in this UI concept from Tubik Studio(opens in a new tab or window) make the navigation options instantly clear. The large script typeface in the background and the paper-like layering of surfaces to create a hierarchy can be attributed to material design.
Violetta for Tubik Studio
Check out MaterialUp(opens in a new tab or window) for more examples of material design.
Though material design clearly features elements of flat design, its attention to light and shadow, motion, and other details demonstrates that flat design can be adapted to be more useful and flexible.
That Google has made its highly detailed guide to material design(opens in a new tab or window) freely available makes it easy for designers to apply the style to their own work, whether by following the guidelines closely, or picking and choosing elements and techniques they like.
This has also encouraged designers to experiment with their own interpretations and modifications of both flat and material design, creating new takes on the trend.
So while big brands like Microsoft, Apple, and Google definitely have influence when it comes to popularizing design styles, it’s the designers that take trends and run with them to create something new — it’s the designers that help usher in the next “big thing.”
Join the discussion
“When you consider the spirit behind flat design (visual simplicity) and skeuomorphism (visual familiarity), you find that both concepts can certainly co-exist. The tricky part, as current years and the future will certainly prove, is finding the perfect balance between the two.”– UXPin(opens in a new tab or window) for Fast Co. Design(opens in a new tab or window)
Do you see flat design moving in a more balanced direction? Is it is here to stay, or maybe you’re more than ready to move on to something else? Feel free to share your thoughts and insights in the comments.
If you’re looking to brush up on some of the concepts behind flat design — from influences like Swiss design and minimalism to key features like responsiveness and grid-based layouts — you can find some related reading and resources at the links below:
