Post Flat Design

by wellsriley on April 8, 2014

There’s been growing unrest about the future of interaction design trends. In the past week alone, I’ve read three separate discussions about the so-called “end of flat design.” This kind of talk is awesome because some of the best aesthetic and interaction design work is done at the dawn of a brand new trend. It gets designers thinking and inspires that special kind of creativity that our industry thrives on.

The pendulum swings

In the beginning, CSS only allowed for basic control over HTML documents. As web design technology grew up, the skeuomorphic aesthetic took hold, pushing the boundaries of what was possible on the Web. But as the style matured, some interfaces became difficult to use, confusing, or downright ugly. We abused the textures, shadows, and fine details that helped us define our industry. Designers wanted something fresh and simple to replace it.

The flat movement was born out of a need to get as far away from skeuomorphism as possible. Shadows and metallic sheen were replaced with solid hues and typography-driven design. It was a harken back to the Swiss ‘international style’ of design where strong typography and blocks of color reigned supreme in print.


But perhaps the pendulum swung too far in the flat direction. In the transition to flat we lost some of the helpful affordances – especially on buttons and forms – that more traditional aesthetics used to make our products easy to use. When everything became flat, creating a clear visual hierarchy became a constant challenge.

imageCan you tell which Shift key is enabled?

Flat has been the predominant visual style for over a year, and some brilliant work has come out of it. But it’s clear that now it’s time to let the pendulum swing back – if even only a little bit.

Post Flat

I propose post flat design – not just as a new way of thinking about design aesthetic – but also creating sensible visual hierarchy and more understandable interfaces for our users. Some qualities of a post flat interface may include:

  • Hierarchy defined using size, and composition along with color.
  • Affordant buttons, forms, and interactive elements
  • Skeuomorphs to represent 1:1 analogs to real-life objects (the curl of an e-book page, for example) in the name of user delight or affordance
  • Strong emphasis on content, not ornamentation
  • Beautiful, readable typography

Both skeuomorphic and flat extremes have uniquely beautiful and useful qualities, but merging the two styles allows us to leverage the strengths of both. For example, a mobile app might have dimensional buttons instead of colored text to represent primary actions within the interface.

imageFlaer by Brian Benitez

Without strict visual requirements associated with flat design, post flat offers designers tons of variety to explore new aesthetics – informed by the best qualities of skeuomorphic and flat design. Designers won’t have to sacrifice usability to “fit in” with the latest trend.

imageLight and Switch by Sebastien Gabriel

imageAnimated Safari Icon by Ray

Let’s try this out. Dust off your drop shadows and gradients, and introduce them to your flat color buttons and icons. Do your absolute best work without feeling restricted to a single aesthetic. Bring variety, creativity, and delight back to your interfaces. We’re trying some exciting things here at Collective Ray in the spirit of post flat design – it’s a refreshing and exciting challenge.

  1. vinaychavan reblogged this from collectiveray and added:
    Wells Rilley talks about how we have lost some of the crucial affordances while shifting our focus on to flat design too...
  2. waitingforelectric reblogged this from collectiveray
  3. nouveautortillion reblogged this from itwasaninsidejoke
  4. itwasaninsidejoke reblogged this from collectiveray
  5. sentientenergy reblogged this from collectiveray
  6. agreatrandom reblogged this from collectiveray
  7. jzanaught reblogged this from collectiveray
  8. dlev reblogged this from collectiveray
  9. powerofblog reblogged this from collectiveray
  10. maxdrukman reblogged this from collectiveray and added:
    As precisely everyone could have predicted, here come the “did we go too far” arguments in the flat UI debate. As the...
  11. fant0mette reblogged this from collectiveray
  12. vernishgardens reblogged this from collectiveray
  13. justs reblogged this from collectiveray
  14. harnumdesign reblogged this from collectiveray
  15. zilliezephyr reblogged this from collectiveray
  16. gotoandplay reblogged this from collectiveray