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.
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.
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:
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.”
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.
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:
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.
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.
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.
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, event poster, 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 and Simone Lippolis (first image below) and Luis Vaz (second) both feature basic geometric shapes overlaid with white, sans-serif text. They even use a similar color scheme:
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 and Erik Malmsköld 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.
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:
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.
Having many characteristics in common with almost-flat design, material design is a visual language developed by Google 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.
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 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.
Check out MaterialUp 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 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 for Fast Co. Design
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: