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.

For example, such themes as Divi and Avada remained popular because they've always moved with the design trends and kept themselves relevant.

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 and developers 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.

Swiss international style flat design

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.

Flat design - can you tell that the shift is pressedCan 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.

iphone design flatFlaer 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.

Light and switchLight and Switch by Sebastien Gabriel

Animated safari icon

Animated 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 and themes. We’re trying some exciting things here at Collective Ray in the spirit of post flat design – it’s a refreshing and exciting challenge.

And we'll keep trying new and exciting things as long as we're in this industry.

 

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!

Featured On

Inc Magazine Logo  

Sitepoint logo  

CSS Tricks logo   

webdesignerdepot logo   WPMU DEV logo   

and many more!

 

 

 

 

Best Rated Caching Plugin

Make your website faster 

TemplateMonster Bundles

Awesome bundles for awesome websites. $1300 worth of products for $49 only!

We've got an exclusive 10% OFF for CollectiveRay visitors until - use Coupon Code: collectiveray

TemplateMonster Bundles

How to make your website FAST!

Step-by-step - free email course, how to make your website load in less than 1 second 

 

The Outstanding HungryJPEG Bundles

AWESOMENESS! Bundles of premium font + graphic packs at more than 96% OFF!  Get a bundle for just $9 - ONLY!

The Hungry JPEG Awesome font bundles

 

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

 

 

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.

David attard

Follow us on Social

Follow us on Facebook   Follow us on Google+   Subscribe to our RSS Feed   Follow us on Twitter

 

Where are we hosted?

This site is proudly powered by FAST VPS InMotion Servers and given an insane speed thanks to MaxCDN!

Web Hosting MaxCDN - Speed up your website