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.
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.
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
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.
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.
0 comments:
Post a Comment