A New Design Trend: Flat Design Gets Layered

September 16, 2013 • By Joe Howard • In Design

If you are a designer or developer, or just a design savvy creative, it’s almost certain you have come across the term ‘Flat Design’ at some point. But what you might not realize, is that flat design has been around for a very long time.

How long exactly? Well windows Phone 7, is considered arguably the first mass popularized flat UI and it was first released way back in October of 2010. So that would make flat design at least 3 years old now.

So it shouldn’t come as any surprise that a 3 year old design theme has already reached the peak of its existence. Flat design has practically flooded design circles, Dribble, Behance and other popular design blogs, feature so much flat design content, it’s enough to sore even the most loyal flat design enthusiast’s eyes.

Since the inception of flat design, there have been other tributaries that have developed, such as ‘Long Shadow Design’. But none that have the potential to grow into a fully formed trend. Long Shadow Design is nice, and can be thought of as the little brother of flat design, but it doesn’t have the visual potential to carry a whole interface or website for example. Can you imagine whole websites based on long shadow design? I didn’t think so.

Design trends and themes develop in an organic fashion. When trends catch on, they are developed, tweaked and ultimately over-used until something that is considered ‘new’ is created.

So what’s next? Through much research and observation, I have created the term ‘Layered Design’. We will get into exactly what this is later on in this article, but for now let’s focus on flat design.


Flat Design

Strictly speaking, there is a lot of design work being created that is not, and should not be considered ‘flat’. I’m going to do the improper act of quoting myself here, for the purposes of clearing up some of the ambiguity that surrounds flat design.

Flat Design is somewhat difficult to define as it doesn’t really refer to one single concept or practice. Instead it can be thought of as number of concepts and practices that together, makeup a design theme.

Ok so now we have cleared that up a little let’s look at what flat design is. Below are two examples; A set of flat style icons and a flat design website. These are both considered flat design. There are no gradients, no depth, no drop shadows, no layers and they use flat colors.

flat-design-examples

This is flat design, it’s simple and effective.


Layered Design

I believe Apple – with iOS 7, has created what will develop into a new design trend, and that trend I am calling ‘Layered Design’. Layered design uses flat design elements to form a foundation for its visuals, but then uses semi-transparent layers to add depth.

So let’s break down what layered design includes, and what it doesn’t.

  • Flat elements and styling are used to create a base.
  • Contrasting layers and depth are created by using semi-transparent elements.
  • Layering is used to give the user a sense of depth.
  • Focus on functionality is created by contrasting these elements from the rest of the design.
  • Drop shadows, gloss, borders and embossing are not used.
  • Simple, clean sans serif based typography is used.
  • Simple icons are used instead of buttons and other elements.

I believe that this design trend will start to develop a lot further throughout the rest of 2013 and into 2014, leaving flat design as a relic. I also can bet you that when Apple releases its next desktop operating system, this design theme will be featured heavily.

When iOS 7 was released in beta a few months ago and all the flat design enthusiasts cried out that it wasn’t flat enough. They should have looked deeper into it and realized that once again, Apple was pioneering not copying.

‘I think there is a profound and enduring beauty in simplicity. In clarity. In efficiency.

True simplicity is derived from so much more than just the absence of clutter and ornamentation; it’s about bringing order to complexity.

Distinct, functional layers, help establish hierarchy and order… The use of translucency gives you a sense of your context. These planes, combined with new approaches to animation and motion, create a sense of depth and vitality.

- Jonathon Ive

This is really the definition of layered design. It is a solution to the lack of visual and functional hierarchy in flat design.

Wrapping Things Up

In summary, layered design is a lot more difficult to achieve than flat design. In flat design, visual simplicity is exactly what it says it is. It’s simple. But in layered design, visual and functional simplicity is created through careful and precise considerations to functionality and aesthetics, resulting in depth.

If you look at how flat design has evolved thus far and how it emerged, you will notice , like many things in design, it was the solution to a problem. That problem being over complex UX and UI, with too many conflicting visual themes. Originally, Flat Design was a true minimalist approach and Microsoft’s Metro Design Language remains true to that today.

That being said, Flat Design has evolved out OS UX and UI into app and web design. So it seems logical for iOS 7′s Layered Design theme to develop in a similar fashion.

I would like to see a lot more websites adopt Layered Design, and I’m really excited to see how they look. At the moment, there are a few examples of layered design in apps and UI but not so much in web design.

There are already a number of Layered Design examples being created on the web, and honestly I’m a little surprised that no one has caught on yet. Below I have collected a list of examples of Layered Design. I have also included a video featuring Johny Ive, the mastermind behind Layered Design giving his thoughts. Enjoy.

layered-design-examples-5 layered-design-examples-4 layered-design-examples-2 layered-design-examples-1 layered-design-examples-3 layered-design-examples-6 flat-vs-layered-design


Lastly on a note, if you would like to reference or write about ‘Layered Design’, I ask that you kindly link back to my article here as your reference point. Thanks.


What do you think of Layered Design? How long will it be before our websites start using it? Let us know your thoughts in the comments section below.

About The Author

Joe Howard

Joe Howard is a hybrid designer, front-end developer and graphic designer. He's also the founder and editor of Pencil Scoop. You can follow him on your preferred social media platform.

Comments

  • jeanpaulstander2

    I love the new design style…jut don’t like iOS that much

  • Pingback: The A-Ha Moment | Jessica Herron

  • Allie Kingsley

    Lovely post and your site has nice design.

  • Keren Nissim

    Thank you for this inspiring post!

  • http://www.isharearena.com/ M.Aswad Mehtab

    But The examples you presented are just the mockups of Apps , No way it can be called a deisgn trend , Each layer depicts a diffrent screen App has.. while on each page deisgn is flat … So This is NOT A TREND !

    • http://www.pencilscoop.com/ Joseph Howard

      Hi Mehtab, Thanks for the comment.
      Last time I checked flat design didn’t use semi-opaque layers and visual depth. If iOS7 is not flat, then what else is it? It’s layered. Like Jonathan said above, it’s merely the next progression from flat design.

  • http://www.lethbianlove.ca/ Jonathan Ruzek

    Thanks for this article. I’d like to see some website examples that demonstrate this concept, if you got them. And I definitely feel like this is a nice progression from flat design.