The Future Beyond Flat Design

The World is Flat

In fine art, the successor to each artistic movement is typically a reaction to the previous movement, like a pendulum swinging back and forth. Similarly, in the relatively short history of web design, several trends or “movements” have come and gone. Most recently flat design has spread like wildfire and largely appears to be a reaction to skeuomorphism, an aesthetic that uses real world metaphors to communicate the functionality of interfaces. This can include the use of textures, shadows, and ornamental design elements.

Screenshot of Notes in OS X Mountain Lion

The yellow lined paper in the Notes app on OS X Mountain Lion is an example of skeuomorphism because it borrows visual cues from its real world analog.

By contrast, the hallmarks of flat design include minimalism, few gradients and shadows, and an emphasis on saturated colors and shapes. There have been many articles written about both topics so I don’t feel compelled to specifically add to the conversation there, but I’m definitely interested in exploring what’s next. When you’re trying to keep up with the brisk pace of the web, it’s never too early to start thinking about tomorrow.

Form Follows Function

Louis Sullivan (an American architect) coined the phrase “form follows function” in the late 19th century as a way to surmise the idea that the shape of a building should be informed by its purpose. This idea maps to web design quite well, because websites are also utilitarian; rarely are buildings or websites created for art’s sake. However, the function of a website is most certainly benefited by sound aesthetics. Design helps to make navigation feel obvious and buttons look clickable. Without good form, the function of many websites would be diminished.

Indeed, flat design is strongly influenced by function.

One reason that skeuomorphic designs became popular is because they borrowed affordances from everyday life. Designers were able to rely on users to bring their own prerequisite understanding. The lack of real world metaphors in flat design forces designers to think carefully about the hierarchy of information and the communicative value of the visual composition, which is a good thing. Flat designs also tend to load quickly because they use fewer images, which allows for the creation of experiences that are well suited to an increasingly mobile world. In fact, Microsoft made an advertisement that highlights how Windows 8 provides a unified experience across smartphones, tablets, and desktops.

Flat designs are also beautiful to look at because of the rich diversity of saturated colors that are atypical in the natural world. I’m often reminded of stained glass windows when I look at tile-based interfaces like these.

What’s Next?

Flat design looks nice and it also stands on a strong foundation of functional purpose, so what could influence a change? There might be many reasons, but I think it’s going to come down to refinements driven by the basic elements and principles of art and design, rather than a dramatic revolution. I also think people will simply becoming tired of the same look; the evolution of aesthetic sensibilities is a constant in life.

Nobody can predict the future perfectly, but here are a few of my guesses:

More Shapes

Recently I blogged about the new CSS shapes module because, not only is it cool technology, I think it will also serve as a nice transition from the version of flat design we know today. Composition and shapes play a huge role in the communicative power of flat design, so if designers have easier access to shapes beyond just rectangles, it could accelerate a trend towards different types of shapes. Specifically, acute angles and the directionality of a shape’s points help to guide the eye towards actionable interface elements. More neutral or passive items could feature more obtuse angles or curves. We’ve already seen this manifest in the form of circular profile pictures, like on Treehouse.

More Colors

Flat design has settled around what I would describe as saturated color triads, quads, and pentads, where there are few shades but many hues. Beautiful as this is, users will eventually grow tired of everything looking so similar. Color is great way to communicate visually without compromising everything that’s good about flat interfaces. Similar to shapes, I see this more as a diversification of what’s already present rather than harsh reaction.

If you’re not sure what I mean, head over to Adobe Kuler and start playing with the color wheel. You can also click on the Explore page to find lots of beautiful color schemes.

Big Photographs

Skeuomorphism doesn’t always do a good job of leveraging the power of digital displays, but it does bring a warm human element to the equation. Even with its friendly color palettes, flat design runs the risk of feeling like a Rubik’s Cube: calculated and unnatural.

Photograph of a Rubik’s Cube via Flickr user Sonny Abesamis.

Photography has always had a place on the web, but now more than ever, it has an opportunity to fill a cold void. This trend has been around for some time, but now it has more of a functional purpose. The website of Treehouse teacher Mat Helme employs edge-to-edge photography, and it gives you a better sense of Mat’s personality. I’ve also recently redesigned my personal website to use full-screen photo backgrounds in an attempt to create a place rather than a bunch of pixels.

Layers

I mentioned earlier that flat design forces designers to more carefully consider composition, which includes the relative size and placement of screen elements. This is difficult for most websites and applications as it is, but the more content and functionality you introduce to increasingly small screen sizes, the more difficult it becomes. You can only simplify so much.

One avenue that deserves more exploration is the usage of layered UI elements. This allows you to show and hide interface elements on the fly, without the need to completely change the screen. This concept has already made its way into numerous mobile apps, but my favorite example is Facebook. They’ve used the increasingly popular design pattern of sliding panels on the sides along with floating panels for real-time chat.

A screenshot of the Facebook iPad app, demonstrating chat functionality.

All of this is highly speculative. However, trying to predict the future is not only fun, it’s often times a good way to create new ideas. Where do you think design is going next? Let us know in the comments!

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

9 comments on “The Future Beyond Flat Design

  1. “use full-screen photo backgrounds in an attempt to create a place rather than a bunch of pixels” – like this thought very much

  2. Really enjoyed the article Nick. It seems as though we have now seen each side of the spectrum: ultra realism with skuemorphism, and extreme minimalism with flat design. I’m hoping we take a kind of ‘middle way’ in that we see the best of both worlds!

    • I’m in a way glad flat design is showing up more and more this days, ultra realism is cool but some people took it too far (doing some amazing stuff) that sometimes took the focus away from the content… At the same time I agree with Nick that some people will get tired of it pretty quick (too much of the same is never fun) and with ios 7 comming out in sept/oct i’m sure there’ll be high demand for re-designing websites/apps, so even if flat is not your cup of tea prepare for whats comming!

  3. At the core of the new era in UI design is well executed typography and hierarchy. We’ll see more and more of this but the style will get all the attention.

  4. Definitely agree that the usage of layered UI elements is the way forward in the short to medium term. However, I am nervous about the potential complexity of these methods. Facebook is a great example, the sliding panels are a great way to allow the site to function on the smaller screens of tablets or smart phones but it can often be confusing to the user. Greater simplicity can also bring greater complexity. ;)

    ___________________

    Online protection doesn’t get much better than a Palo Alto PA-3020