State of the Web: Flat UI

theblogazine-apple-skeuomorphism-4-20120918

It’s hard to not notice the major shift in design style over last past two years. Before 2013 or possibly 2012 depending on sources, the popular design trend was skeuomorphism. Designers and illustrators crafted beautiful vector objects that looked so real you could almost touch it (on a high enough resolution screen that is). Personally, I greeted skeuomorphism with open arms, because it put an end to the sad era of “Web 2.0” and what an eye sore that was, if I had to make one more bubble looking gradient… But I’m not here to talk about those two trends.

image from http://www.theblogazine.com/

The styles of web and mobile have once again shifted away from this more often then not intense style of user interface to a more visually simplified UI. We refer to this as Flat Design or UI. I like to think that this UI treatment pulls inspiration from the Bauhaus Movement. Josef Albers is a great example if you look at his work here he uses strong geometric shapes and bold colors. If you browse this collection of art and furniture you can start to see how Flat UI could have possibly pulled inspiration from this era. Like any art form are many interpretations of how this style should be used or represented. These styles could be separated into two simple groupings, true flat and flat inspired.

True Flat

969e1160-e9a2-4757-9945-4b8840e1ecee_17Microsoft takes Flat UI to the literal sense and created an interface that has no depth, gradients or shadows to speak of. The elements on the screen sit directly on the containers behind them. Windows used bold colors to imply where to user should press or click, where other designs might use shadows or strokes to represent hit zones. We first got a glimpse of this UI when Microsoft redesigned the windows 8 experience. It’s pretty clear that the design team wanted a UI that could work on any platform or screen size. By using geometric, inviting colors, and large fonts they crafted an interface that scales up from the palm of your hand to the large TV seen on the Xbox One.

Flat Inspired

flat-inspiredThis tends to be where the majority of designs fall outside of Windows realm of true flat. Google and Apple took this approach and it gave them the freedom to innovate on the principles of Flat UI. Google and Apple have a tendency to use strokes, borders, shadows, and very subtle gradients. This doesn’t go to say they’re using them heavily across the experience though. These additions to true flat are used to avoid the pitfalls of elements blending into each other. This blended interface uses the best of both trends in my opinion. Users familiar with the older skeuomorphic design interaction understand that a shadow or gradient (think buttons popping off the page) potentially imply an action can be taken on this element. Buttons don’t necessarily come to life in flat but using these subtle elements from the older trend help give that extra bit of emphasis.

The benefits of using any style of flat rely in the content of the page. By using a visually minimalistic approach, suddenly the content becomes a major player on the screen. This intentional shift in hierarchy works in the customers favor naturally. They’re here for the content, the UI is just a tool for them to get the content they want and move on and hopefully come back. Using Flat UI the right way with a well thought out navigation and relevant content creates the perfect storm of user experience.

 

 

perfect

 

 

but… with a happier ending.

Tags:

2 Responses to “State of the Web: Flat UI”

  1. Karol Czyrka →
    March 10, 2014 at 12:09 pm #

    I am not a fan of the flat UI. I think it was more of a visual shift and less about making something more usable or effective. Too many things blending together and making it more effort to think about what to interact with.

  2. West Rhodes
    March 10, 2014 at 12:55 pm #

    Yes, that’s why i like the flat inspired approach. Having those extra hints at what’s available to interact with is very helpful.