How Flat Design Will Reinvent Itself

Where is the flat design trend headed to? I will talk about some things I believe will change with the flat design trend.

Subtle Depth Effects

Designs that have gone "too flat" have some people alarmed because of the possible negative impacts on usability.

For instance, well-known web designer Paul Boag said this about flat design:

"Many websites and applications have so completely rejected skeuomorphism, that they now lack the visual cues that enable people to see at a glance what they are meant to do."

Distinguished usability researcher Jakob Nielsen has a much stronger sentiment about flat design. He says:

"The flat design threat is a fashionable trend that will hopefully subside before it hurts users (and companies) too much."

Another problem with the flat design trend is that user interfaces are becoming boring and dull. The trend, in my opinion, has led to websites becoming too similar to each other.

In an attempt to overcome the usability and aesthetic issues in too-flat designs, I’ve seen many designers turning to tried-and-true techniques such as drop shadows and gradients in the quest to add back some depth and clarity to their work.

One such approach is almost-flat design where some key design elements are treated with subtle drop shadows and gradients to improve usability, readability, and visual hierarchy.

One good example of almost-flat design is the Gmail iOS app:

The shadows and color gradients applied to the UI are less complex than what we used to use back in the days of the "Web 2.0" aesthetic:

Source: sixrevisions.com

The result of an almost-flat design is a sense of dimension, depth, pronounced clarity, better visual hierarchy and, ultimately, improved user-friendliness.

Fluid Animation

At the CES trade show this year, we saw many tech companies trying to revolutionize consumer electronic products.

One product of note is LG’s smart television, which has a user interface that embodies flat design aesthetics:

An interview with LG’s head of product management and design, Itai Vonshak, outlined one of the challenges his company faced with flat design. Vonshak says the difficulty with flat design is that "it gets very boring."

To innovate on the flat design concept, they added fluid, jelly-like animation transitions in the TV’s UI to give users visual cues that something is happening on the screen as they are interfacing with different commands. Check out the hands-on demo of the UI by The Verge to see the fluid animation in action.

As you can see from the video, LG has achieved a good balance between flat and flashy. The result is a UI that retains the simplicity and clarity of flat design with added excitement and usability improvements through fluid animation.

Translucence

Thanks in part to iOS 7, flat design has gone mainstream. Simplicity and clarity through flat design wasn’t the only thing introduced in the latest version of Apple’s mobile operating system.

Translucent foregrounds that let their backdrop seep through them create a beautiful, immersive experience for users.

Functionally, what translucent allows designers to do is the depiction of layering in a 2D medium, an alternative to techniques like drop shadows. Translucence is another way flat designs can incorporate subtle depth.

Line Icons/Outline Icons

The line/outline aesthetic for icons and illustrative elements make perfect sense when we look at the concepts flat design is espousing: simplicity and clarity.

Source: jlane.co

Line icons allow us to craft shapes that are more defined, intricate, and clear while still being able to retain a minimalist and unobtrusive look-and-feel.

How Else Will Flat Design Change?

How will flat design evolve? What other trends in flat design are you noticing?

Share your thoughts and observations in the comments below!

  • Wes

    While I believe that flat design has helped in many aspects of web development , such as the amount of time it takes to bring an app to market, I have found that the use in desktop apps seems to degrade the overall experience. One case in particular is Microsoft’s Visual Studio Suite. For some unknown reason they decided to do away with all of the colorful icons and gov with a flat, 2 color look. This really slowed down my development as I could no longer quickly distinguish between different files by just looking at the icon. There has been a massive push to bring back the colorful ones but so far it has fallen on deaf ears.

  • as of Visual Studio. I like its new face. i’ve been working with the ‘colorful’ VS for many years and now switching into the flat 2013. and love it 🙂

  • Chris Cuilla

    First, I find it interesting that people seem to assume (and this appears to be a fairly widespread assumption) that “flat design” (which has generally meant the opposite of skeumorphism) precludes the use of things like drop shadows, gradients and even some 3D effects. I think the point would be how these visual treatments are used and for what effect. It’s not at all surprising that designers are adding some of these visual treatments back into their designs. Fundamentally I think the backlash has been against the almost gratuitous and “kitchy” use of skeumorphism in various designs. The excessive and unnecessary realism. Apple was guilty of this in a number of places.

    Second, I agree that some of the early flat design is certainly a step backwards in usability, affordance and discoverability. There’s no question about that. But it’s early. These early designs will look rather amateurish when we look back on them in a few years as designers have had the time to think through the approach better and perhaps find the “middle ground” that provides greater variability among designs while avoiding garish skeumorphism.

  • Sorry, but in no world does “tried-and-true techniques such as drop shadows and gradients” exist on a usable, web standards internet. This is untrue, and flies in the face of what web standard stands for.

    And also re: “Another problem … is that user interfaces are becoming boring and dull. The trend, in my opinion, has led to websites becoming too similar to each other.”

    This is a good thing! Websites are a communication medium, not an individual expression of art! Its good that uniformity and consistency exists between sites, and users can start to learn and more simply identify common patterns.

    Think about printed books – this is generally a communication medium. Would the designer of a novel go ‘all-out’ making a book layout design individual and reflective of the text? No! To an extend he/she’d select some suitable typefaces, colour and paper, but general, there are agreed conventions that belong to the medium, which ultimately make reading a book an expected, natural experience.

    And you’re ‘Web 2.0 Aesthetic’ is in no way a representation of ‘Almost Flat Design’. Google is.

  • Flat design is here to stay. But definitely flat does not mean that one puts basic usability and visual appeal at stake. As the concept of flat design continues to gain prominence, it will evolve and transform.

    Thanks,
    Mark