Flat design is a popular design style that is defined by the absence of glossy or three-dimensional visual effects in the graphical elements of a web page. Many designers consider it to be an offshoot of minimalist web design.

Three-Dimensional Effects, Skeuomorphism, and Realism

To define flat design, we must define what flat design isn’t. Flat design is commonly interpreted as a reactionary movement against 3D, skeuomorphic, and realistic design styles. A fully flat interface doesn’t use any of these styles.

Three-Dimensional Effects

Three-dimensional effects give an illusion of depth to an interface, which can help users interpret visual hierarchy and understand which elements are interactive.

  • Elements that appear raised look like they could be pressed down (clicked with the mouse). This technique is often used as a signifier for digital buttons.
  • Elements that appear sunken or hollow look like they could be filled. This technique is often used as a signifier for input fields, like search tools.

Since the early days of graphical user interfaces, screens have employed pseudo-three-dimensional effects (shadows, gradients, highlights) to help users understand the available actions at a glance. However, the pseudo-3D effect in these early GUIs tended to be aggressive, overdone, and visually distracting.

Windows 95 dialog box
This Windows 95 dialog box made use of heavy shadows and highlights to create 3D effects. Notice how the buttons appear raised and the input fields appear sunken. It’s also clear which of the three tabs is on top of the other two. However, heavy shadows can easily make an interface visually unappealing.

Skeuomorphism

In digital design, a skeuomorphic design is an object that has unnecessary, ornamental design features that mimic a real-world precedent. Skeuomorphic designs are intended to help users understand how to use a new interface by allowing them to apply some prior knowledge about that precedent.

Kindle Fire
In earlier models of Amazon’s Kindle Fire tablet, the Android-based operating system used a skeuomorphic bookshelf design, complete with 3D shelves and wood textures. The bookshelf metaphor was intended to help users transfer previous knowledge about bookshelves (as a place to store and organize physical media) to the digital environment.The shelves and wood textures are irrelevant to the system’s functionality but were supposed to reinforce the metaphor. Amazon later removed the skeuomorphic bookshelf design from the UI.

Realism

Realism is a design style that mimics physical items or textures for aesthetic reasons.

Skeuomorphism is often confused with realism. In web design, the two styles are usually found together. The primary distinction is that realism is a visual style that uses design elements and textures that mimic the physical world for purely aesthetic purposes, while skeuomorphism supports a metaphor to help users understand the interface.

Sprouts homepage
Like the earlier Kindle Fire tablets, Sprouts grocery website uses 3D wood textures, but the realism in this design is only for aesthetic appeal. It does not serve to support any kind of metaphor to help users understand how to use the interface, nor does it mimic any real-world predecessor.

The Origins of Flat Design

The release of Microsoft’s Metro design language and Windows 8 in 2011 was particularly influential in popularizing flat design. Microsoft’s design documentation referred to its new style as "authentically digital" — a phrase that neatly captures the appeal of flat design for many designers. Unlike skeuomorphic design, flat design was seen as a way to explore the digital medium without trying to reproduce the appearance of the physical world.

The flattening of Apple’s homepage provides a useful benchmark for the growth of the trend’s popularity. Skeuomorphism and realism had long been trademarks of Apple design, and its homepage resisted the flat trend until around 2013.

Apple, 2007
Apple’s homepage in 2007 (via WayBack Machine). The navigation bar is styled to appear as glossy, 3D tabs.
Apple, 2012
Apple’s homepage in 2012 (via WayBack Machine). The tabs metaphor is gone, but the navigation bar still appears glossy and rounded (an example of realism rather than skeuomorphism). The new search tool has inset shadows to make it appear hollow (a more elegant visual effect than the appearance of the Windows input fields 17 years earlier, but conceptually the same idea). The icons visible in the lower-right corner are so glossy that they almost interfere with the viewer’s ability to understand what they are. These buttons almost appear to be glowing, rather than raised.
Apple, 2015
Apple’s homepage in 2015. The entire navigation bar, including the logo, is entirely flat — no detectable shadows, textures, or highlights. There are no 3D, realistic, or skeuomorphic effects here. The only way users know that the navigation options are clickable is by convention: a strongly colored stripe across the top of a web page tends to be a navigation bar (except when it’s an ad, but this one is too thin to fall victim to banner blindness).

Usability Problems with Flat Design

Since flat design’s emergence in 2011, Nielsen Norman Group has been a vocal critic of its inherent usability issues. Our primary objection to flat design is that it tends to sacrifice users’ needs for the sake of trendy aesthetics.

For years, users had been exposed to traditional signifiers of clickability, such as blue, underlined links and 3D effects on buttons. As design trends shift and users are exposed to new patterns, the average user’s ability to intuitively identify linked elements has evolved. But just because users are better at detecting linked elements doesn’t mean they don’t need any clues at all. In fact, we've noticed that long-term exposure to these flat yet clickable elements has been slowly reducing user efficiency by complicating their understanding of what's clickable and what isn't.

When we asked a 22-year-old Canadian how she knew what she could click on in websites, she gave the following answer:

“When it’s blue and underlined, that’s how you know initially. You see that even in Word and stuff. But really, especially when it’s underlined, that helps. Or if it’s a button, it doesn’t have to say Click Here, but if it says, Buy Now or Purchase or Add to Cart.”

This quote neatly illustrates the types of cues people use to determine clickability:

  • Traditional, externally consistent signifiers (such as the blue, underlined text or raised buttons)
  • Something reminiscent of a traditional signifier (such as underlined text of any color or boxed text)
  • Contextual clues (such as actionable text or placement at the top of the page)
Trader Joes homepage
The homepage of Trader Joe’s displays a variety of clickability signifiers. (1) The blue, underlined text of View All is a traditional signifier. (2) The flat, red background on the Find link is reminiscent of a button, even without 3D or realistic visual effects. (3) The black links in the main navigation bar communicate their clickability only by their placement and text. (Note that the mostly flat page does have one element of skeuomorphism — the wooden shelf under the featured product carousel.)

If your organization wants to transition to a flatter aesthetic, follow our guidelines for designing recognizably clickable elements to make sure you aren’t causing click uncertainty.

Fattening Flat Design

Recently, designers have begun to notice the usability issues of flat design. As a result, a more mature and balanced interpretation of flat design has emerged. Designers are finding they can be "authentically digital" and explore the unique opportunities of the medium without compromising usability.

This newer interpretation is sometimes referred to as "semi flat," "almost flat," or "flat 2.0." This design style is mostly flat, but it makes use of subtle shadows, highlights, and layers to create some depth in the UI.

A designer's portfolio using long shadow effects
Flat design elements with long shadows, as seen in this designer’s portfolio, became popular around 2013. Long shadows are one example of flat 2.0 gone wrong — the 3D effects are purely aesthetic and don’t add any meaningful information for users. Thankfully, their popularity has declined, but icons with long shadows are still in use in some flat interfaces.

Google’s Material design language is one example of flat 2.0 with the right priorities: it uses consistent metaphors and principles borrowed from physics to help users make sense of interfaces and interpret visual hierarchies in content.

Evernote Android application
The Evernote app for Android is a good example of the possible benefits of flat 2.0. Despite having a mostly flat UI, the app provides a few subtle shadows on the navigation bar and the floating + button (add new). It also makes use of the card metaphor to display content as flat, layerable panes in a 3D space.

As with any design trend, we advise balance and moderation. Don’t make design decisions that sacrifice usability for trendiness. Don’t forget that — unless you’re designing only for other designers — you are not the user. Your preferences and ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your own design is intended to do.

Early pseudo-3D GUIs and Steve-Jobs-esque skeuomorphism often produced heavy, clunky interfaces. Scaling back from those excesses is good for usability. But removing visual distinctions to produce fully flat designs with no signifiers can be an equally bad extreme. Flat 2.0 provides an opportunity for compromise — visual simplicity without sacrificing signifiers.

If your UI uses a flat design, make sure you follow the best practices to avoid its pitfalls.