Hurry Up! Vote for your favorites this month in the Awwwards Honors!

Jul 4, 2013

Flat Design: An In-Depth Look

Flat Design: An In-Depth Look

Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year. It has frequently been compared with skeuomorphic design, because of its completely opposite principles and style.

Designers have voiced questions over whether this is a lasting trend or just another passing fad. Regardless of the future and the voices against flat, most designers have been tempted to try implementing this trend in some of their work. Here we’ll delve a little deeper into the style, its historical roots and how to start designing in the flat style right away.

A warning before we begin: flat design can be used to create really beautiful, simple interfaces, but it’s not necessarily appropriate for every project. Be mindful of what you’re trying to achieve visually and what you want to communicate.

So, what is Flat Design?

As the name indicates, flat design is defined by flatness of style: simplifying an interface by removing extra elements such as shadows, bevels, textures and gradients that create a 3D look.

The idea is to create a finished design that lives in only two dimensions, without losing any of the functionality that a “regular” interface provides. This creates a new challenge for the designer, because by stripping an interface of its decorations and effects, it becomes harder to define the main actions and elements in a design.

Flat design comes from the wish to create more digital interfaces, and an open canvas for interface innovation in digital devices. A good example of flat design is this icon design collection for Mac OSX, where some of the most famous Mac icons are re-imagined as flat versions of themselves. You can easily see how the icons maintain their style and form even though they’re stripped of details, shadows and textures.