Coloured pencils artfully placed together to forma a spiral.
Calendar   29 October, 2014 //

The flat design trend

#User experience
Darren Fisher, Creative Director at Pivale Drupal agency - a bearded man with dark hair and glasses.

Written by

Darren Fisher

Creative Director

Share Arrow down

Flat Design is the trend on the tip of everyone's tongue and it doesn't seem to being going anywhere anytime soon. Flat design is essentially a minimalist approach to design, which waves goodbye to the realism which has long been a staple of web design.

A copy of the book 'Don't Make Me Think' by UX expert Steve Krug.

Some background

The term 'flat design' is often thrown around in the web design community but I've seen the trend creeping in to print design, architecture and fashion too. It would appear that this flat design thing ain't no fad! On the surface, it's a wonderful thing; clean shapes, splashes of vibrant or at least well considered colour and the eradication of skeuomorphism - AKA - the nasty faux shadows and textures we've long been subjected to. Without a doubt, designs like these have been most prevalent in the world of UI and web design, but it is through user interfaces that the surface of this trend gets peeled back and we get to peer into the real soul of this thing.

But let me track back a bit here! Where did this trend appear from and why are people using it? The answers to these questions aren't simple. The birth of flat design could be traced back to any number of places and I would even argue that flat design principles have long been at work in the world of print design - best exemplified by 'Swiss Style' graphic design which came about in the 1950s - some four decades before the invention of the 'world wide web'!

I think it is easier to describe the 'why'. The answer is 'humans'! Half of us are fickle creatures who are easily bored and the other half are tireless innovators who are easily bored! In cinema, film-making trends are referred to as 'new waves' and are born out of disillusion for the status quo, and are often driven by young and restless artists. In politics, when people get fed up of their governments they revolt and turf out the old figureheads and appoint new leaders under new political structures. When relationships start to break down, we get divorced and date people half our age! Where was I going with this?! Oh yes... we get bored and we seek out the next big thing. That's just our nature!!

The cinematic new waves analogy works best because these movements aren't forced or planned - they just happen organically. And that's the same with design trends (not to be confused with nasty fads), and the explosion of flat design is no different. Since its inception the world wide web has been dictating to us what is what by imitating life. Can you click it? Then it needs to be coloured and underlined or if it's a button it needs to look like a big bevelled blob just so we don't get confused. But most of us have been using the web since the mid nineties and we've kind of got the picture! Flat design bins off all of the imitations of old and instead gives us clean, flat interfaces which are a joy to interact with... or are they?!

Most UI/UX designers will be familiar with Steve Krug and his industry gospel 'Don't Make Me Think'. His teachings are absolutely impossible to argue with. A website or app or any user interface should simply not make a user think. If something is unclear or difficult to navigate then it is a design fail. So is flat design, which essentially removes all traditional indication that an object is click-able or interactive, actually anti UX? Well... not quite! You see, the clue is in the word 'traditional'. In flat design a button is still a button, just without the frilly bits. It's still a big, bright and colourful blob which is obviously a button so what's the big deal? Hover states. That's the big deal! Traditionally we've relied on hover states to reinforce that element of interactivity and then we went and invented smart devices that have touch screens and don't have hover states! This is where I find it particularly surprising that people argue that the best place for flat design is on mobile. The load times on flat design websites tends to be quicker which is suitable for mobile devices, but when removing the ability to hover, I really do start to question if flat design is the right format for these devices?

A restaurant table setting, with plates, decorative napkins and wine glasses, all made up ready for diners to arrive.

Contextual placement

So is flat design good or bad? I personally believe, like most things in life, things aren't black and white. It all boils down to context. What are you trying to achieve as a designer and have you got the user's experience at the forefront of every decision you make? Is flat design killing usability? Well that depends on who is your user? What do they want to achieve? How many options are available to them? If your website is clean and simple and needs to be functional I believe flat design can be the best thing that has ever happened to you as the designer and your end user. But it doesn't work everywhere.

The simplest situation I can think of, where flat design just simply doesn't lend itself to the product would be a website for a restaurant. So your client is an independent restaurant and their website has three goals.

  1. To inform the public about their wonderful restaurant and their wonderful food and to make the reader hungry and book a table NOW!!!
  2. To show a selection of dishes that they lovingly prepare and cook in house and to make the reader hungry and book a table NOW!!!
  3. Make the reader so damned hungry that they book a damned table right NOW!!!

So image a sleek, crisp, corporate-style flat design with it's splashes of vibrant colour and simplified interface making you feed hungry and all warm and fuzzy inside. Image trying to present the idea of a cosy, welcoming environment through stark colours with loads of white space. That just ain't gonna work! You want textures, of wooden chopping boards and images of freshly sliced tomatoes rolled in balsamic vinegar and sprinkled with basil before being tossed with sumptuous olives coated in the finest virgin olive oil through a thick baby leaf spinach and rocket... well... you get the idea. This design is most likely going to benefit from a rustic look; full of photography and textures and a navigation which promotes realism so you can really picture yourself sitting down and enjoying a wonderful meal. This may be a slightly crude example but hopefully I've presented my point well enough! E-commerce sites that sell hip and funky T-Shirts on the other hand would benefit nicely from a flat design. Lots of white space to really accentuate the T-shirt images and designs. Simple colourful buttons encouraging the user to add to basket. Minimal navigation to encourage the user to get right to filling that cart up and spending loads of hard earned cash!

A flat design iMac showing an upward trend on the screen.

So is flat design here to stay?

The most important thing to remember when considering any trends are that they have risen to popularity for a reason. The question is: if you deploy these techniques are you doing so because like so many others you know it will enhance the experience or are you simply doing what is currently popular and modern, despite the impact on usability. If you're just being a copy-cat then you're turning a legitimate trend in to a fad and your website or app or whatever it is you are designing will quickly become dated and people won't want to use it. It's as simple as that!

Flat design simplifies the look of the website but I think that this often needs to go hand in hand with a simplification of the site itself. Thinning the entire site down to what is useful, and what is required will help the design to blossom and will ultimately translate to a better user experience.

Most importantly, with flat design or any other design trend of visual style there is no right and wrong... unless of course it is clearly... well... wrong!

Related services

Darren Fisher, Creative Director at Pivale Drupal agency - a bearded man with dark hair and glasses.

Written by

Darren Fisher

Creative Director

Darren is our creative director, responsible for our design and frontend development team as well as managing the majority of our website and multisite builds. Darren is a graduate of the University for the Creative Arts, achieving a bachelor's degree in Digital Screen Arts.

Related articles

The Pivale team from left to right - Pri Scarabelli, Julie Manning, Barry Fisher, Darren Fisher, and Daniel Johnson.

Who are Pivale?

Let's talk