It seems as though any time you hear about user interface design these days, you can’t help but come across the term flat design.
So, what exactly is flat design?
For those who haven’t heard of the term, flat design refers to a style of interface design in which elements lose any type of stylistic characters such as drop shadows, gradients, textures, or other type of design tools that add depth to illustrate a three dimensional illusion.
The transition to flat design – iOS7
The new iOS6 to iOS7 redesign is bold. It’s a radical shift towards a polar opposite direction from its felt, faux-leather, lifelike user interface aka Skeuomorphism. While many designers expected Apple to move towards flat design, not many expected what they saw.
Critics have assailed Apple by claiming that the iOS7 looks unpolished, something that Apple is not known for; while supporters claim the iOS7 is not the final look and merely a transition phase. Either way, Apple is loosely following the flat design trend after Microsoft and Google.
Let’s compare a typical home screen between iOS6 and iOS7 and look at its complications…
This time, Apple deviates from the standard design patterns. Without borders on buttons, the interface makes it harder to scan because of the lack of visual distinction between its elements. In most cases, drop shadows, gradients, textures and other ‘non-flat’ user interface elements hold significant informative value in establishing affordances in interface.
Affordances matter, and why?
The bottom line was that objects should be self-documenting. If you need a sign to tell someone what to do, you didn’t think through the process well enough.
A button that looks like a button brings in the right mental model to the minds of users in helping them understand the connection, and their goal – that’s a highway to interface efficiency. However, Apple’s using bare text became problematic, as separating actionable buttons from content is visually difficult. Apple using one typeface and relying on color was a poor decision, making it tough to trigger actions.
Misusing color & contrast
Flat designs are dependent on color & contrast as the indicator of interaction in interfaces. That’s clearly not an easy task as colors have perceived meanings and may lead to certain physiological reactions.
Well for iOS7, its saturation has been cranked up, so has the lightness. Rather than a mature and highly detailed design, it looks a lot more like an elementary children’s design. Bright colors, simple shapes, very rounded edges everywhere.
The colors are blown out and saturated so much that it makes it notably more difficult to look at and to distinguish shapes than it was previously. The level of detail in an iOS app icon previously could be very high, especially with the introduction of retina screens. Yet with the new iOS7, that detail is gone. Take for example the settings icon that used to be the most visually detailed icon that breaks the well-established convention of representing settings with a gear, now appears as the guts of an engine or some strange torture device.
Lacking the beauty of typography
It’s absolutely great that flat designs rely on typography as the primary carrier of aesthetic value and information. Who doesn’t love beautiful typography?
In iOS7, everything went from bold to light weight. Since we’ve also lost the shadow that makes the text stand out against any background, it then makes it harder to read than before. With that said, it is proven that the lack of typographic skills will be more visible than ever in a bare flat design.
Visual structure & inconsistencies
It’s now very hard to tell the difference between the header and the content. Both generally use the same colors and very subtle variants of gray/white. Buttons no longer look like buttons – they’re blue texts. Sometimes, you will see strong shadows that look out of place like on the ON/OFF toggles. Also, the Safari’s icon gradient goes from light to dark. Contrast that to Mail’s icon, which goes from dark to light, and also sits on a filled background. Why? Even weirder, there are paper textures on the Reminders app while iBooks uses wood.
Flat design gone too far?
We can’t deny that flat design does have some functional problems – With affordances getting tricky especially when dealing with call to action buttons and icons that refuses to help user experience in some cases, and flat design that espouses the use of bright and bold colors which is problematic for about 10% of the people on the planet.
Actually, it depends…
The likely goal of the trend in moving towards flat design was to place a higher focus on content while eliminating distractions from UI elements.
In most simplistic terms, the more design elements you add, the busier the design will be. Gradients, shadows, patterns, and textures can bring a design to life, but too much of it can also quickly clutter it up into a huge mess.
Flat design the future?
Flat design is large and in charge right now because of the focus on user experience. It’s all about user experience everywhere. But is flat design the future? That’s pretty much impossible to say as in a few years, we’ll all be focusing on something bigger and better that’s about to come along by then. After all, that’s the cycle of trends.
Check out this parallax scrolling website – Flat Design VS. Realism
Flat Design is not only a design style but also a communication way.
iOS 7: bold new direction or flat fashion victim?
A Look At Microsoft, Google And Apple’s Approach To Flat Design
To, M. (2013, June 11). IOS 7 And The Transition To Flat. Retrieved February 4, 2015, from http://blog.mengto.com/ios-7-transition-flat/
5 Dangers of Flat Design – UXPin. (2013, June 28). Retrieved February 4, 2015, from http://blog.uxpin.com/2526/5-dangers-of-flat-design/
Bacic, H. (n.d.). Apple Is Embracing The Flat Design Trend – Are You? Retrieved February 4, 2015, from http://www.forbes.com/sites/allbusiness/2013/09/09/apple-is-embracing-the-flat-design-trend-are-you/