Flat+1 Design

Flat+1 Design

Flat design is a recent trend that swept the web and graphic design worlds. It comes on the heels of the defunct trend of skeumorphism. If you want to know more about flat and skeumorphic design there are loads of great articles to check out. I like the idea behind flat design, it’s essentially about reducing visual noise, keeping things as simple as possible, and focusing on usability over aesthetics, but still pleasing aesthetically. I am going to fork flat design and create flat+1 design.

What is Flat+1?

In a nuteshell flat+1 is about applying the main principles of flat design and strategically adding a layer of depth. This added layer could be to enhance the user experience, or simply for aesthetic reasons. Where a skeuomorphic design element is a derivative of a tangible object for ornamental or psychological reasons, a Flat+1 design element is a derivitive of a tangible enviroment, applied only when and where needed. A basic example of this might be designing a banner with 3D objects, that cast real shadows but keeping other elements like text, calls to action, navigation flat in style instead of applying a 3D effect to everything.

Themes Kingdom uses a very flat style for most of their website except for the physical elements featured in each banner slide which give the sense of depth and 3 dimensions

The issue with some completely skeumorphic designs is that they only go part of the way. Let’s take dropshadows as an example. A dropshadow, which is something you can easily apply to an object in many graphic programs, is a skeuomorphic idea. It creates artificial depth to make it look like something is hovering above or resting on top of another thing. Unfortunately the dropshadows that many designs use rarely look like a real shadow. Real shadows are very complex, they depend on light source (which there could be several), distance from light source(s), shape of the object, its orientation, its relation to other objects, and a multitude of other factors. Some designs take skeumorphism to another level and create an enviroment that looks incredibly real, those are just impressive, but they are the exception.

Flat+1, using flat design principles, cuts out the visual noise by removing things like dropshadows, artificial textures, and other skeuomorphic ideas, but if an object does need a shadow, for example, then we implement real shadows, or as close to realistic as possible. This will require at least some understanding of how shadows fall and react, but as designers this is something we should be thinking about any way. Shadows are just an example, there are other scenarios like Apple’s parallax effext on the iOS7 home screen. This would also be Flat+1 but instead of adding something (like shadows) they are using something called parallax to create depth. So while iOS is still, in essence, flat (no dropshadows, no textures, no stiching or brushed metal), there is a layer of realism and a 3D effect.

iOS 7 parallax effect gives a sense of depth

Essentially we are taking flat (2D) design and adding a layer of depth (the +1) ending up with something a little more 3 dimensional but still flat, if that makes any sense. Flat+1 is also about being strategic. Where skeuomorphic applied a partial “realness” to the entire design, Flat+1 is about examining and strategically adding depth to solve a design problem as well as adding some aesthetic flair.

Optimo Hats builds a more realistic shadow rather than a standard dropshadow but still maintains an otherwise flat UI

What are some examples of this style that you have come accross? Are there any other offshoots of flat design you have developed or seen?