Web Design Trend Watch: Flat Design

No items found
| May 13, 2014

The Big Red Button, an icon of skeuomorphic design. Image courtesy sodahead.com.

The Big Red Button, an icon of skeuomorphic design. Image courtesy sodahead.com.

Have you ever heard the term “skeuomorphic design?” Skeuomorphism is a design practice in which graphics, buttons, and user interfaces are made to look like their real-world counterparts.

Examples of skeuomorphism can be found everywhere. A clickable button on a website, when clicked, may actually appear to move up and down. The button may also be surrounded by a convincing drop shadow that creates the illusion of depth. The pages on an e-reader may appear curled at the corners, inviting the reader to flip through the material as they might a real book.

For years, skeuomorphism dominated the world of digital design. But then, something changed. Across the web, gradients and shadows have been replaced with flat, minimal fills.

A major shift away from skeuomorphism occurred in September 2013, when Apple released iOS7. The 3-D icons were flattened down, the reflective tint was removed, and unnecessary design elements were stripped away. And when Apple made the switch, the rest of the digital world followed.

Left: iOS 6 interface. Right: iOS 7 interface.

Left: iOS 6 interface. Right: iOS 7 interface. Image courtesy extremetech.com

According to The Next Web Blog (TNW), designers have gravitated toward flat design “because it feels crisp and modern, and allows them to focus on what is the most important: the content and the message.”

TNW columnist Amber Leigh Turner says:

By removing design styles that can easily date their design (or that could quickly cause their design to become outdated), they are “future-proofing” their designs so that they become relevant for longer periods of time. Not to mention, flat design seems to make things more efficient and cuts out the “fluff.”

Flat websites emphasize clean lines and clear navigation. Now, examples of flat design can be seen across the web. Major sites like Kickstarter, Squarespace, and WordPress.com have made the shift:

Kickstarter.com

Kickstarter.com

wordpress-flat

WordPress.com

squarespace-flat

Squarespace.com

As have smaller sites like Munchery, a prepared meal delivery service in San Francisco, which uses flat graphics and 2-D buttons to keep the viewer’s focus on their meals. And Noisli, which uses simple white graphics and a plain background to provide visitors with a high-quality, distraction-free white noise generator and text editor.

If you’d like to delve into the world of flat design, various sites offer packages of flat icons that can be purchased online at an affordable price. Flaticons.co is one of many great examples.

“Flatness” has replaced skeuomorphism as the predominant trend in UI design. Is it a passing phase, or is flat design here to stay? What do you think?

No items found

NoD Newsletter

Enhance your inbox with our monthly newsletter.
NOD Newsletter - Divi Bar
Sending