Is ‘flat design’ really flat?

I’ve been following the growing trend for ‘flat design’ with interest. But is it really ‘flat’ or more a reaction against over-used design details like the drop-shadow?

I would argue that the visual impression of depth in a UI is very useful and not something we are going to lose, particularly for very complex UIs. Take this page from Layervault, for example (Layervault’s Allan Grinshtein is one proponent of ‘flat design’):

In the design shown above, the boxes for each plan are clearly designed to be placed in the foreground, relative to the other elements on the page, an effect created by use of contrast. The text that contrasts less with its background colour seems to fade into the background. The same is equally true of the rest of Layervault’s excellent UI design. And it is true of Microsoft’s new web app UIs.

A page doesn’t really have any depth of course – it is flat as your screen. So maybe an extreme anti-skeumorphist would take issue with the use of contrast to create the impression of depth. But the fact is, depth is an extremely useful tool in UI design that helps us establish context and focus. And this impression of depth on a flat page inherits its potency from the way we perceive real 3D objects in the world around us.

I really like some of the new refreshing ‘flat design’ UIs and I think generally simplicity is good. I may well end up moving some of my own design work more in that direction. But I also don’t see anything wrong with the occasional subtle gradient or shadow. And sometimes these can help reinforce the impression of visual depth of in interface in a useful way, like with buttons.

In Defence of 3D Buttons

There’s been some discussion in the web design community recently about ‘flat’ UI design as the arrival of ‘honest design’. See this post from Allen Grinshtein for example. Of course ‘flat’ design has been around for a long time (here’s a flat design I worked on back in 2007), but has been getting more attention with the arrival of Microsoft’s nice-looking Metro design language for Windows 8. In much of the design community there has been a fairly strong reaction against over-use of 3D gradients and drop-shadows on the web and ‘flat’ design seems like a refreshing way forward. In particular Apple’s use of skeumorphism in the Calendar app in iOS 6 was widely disliked. But having said this, I find that in my UI design work I still tend to favour using the 3D metaphor for buttons. Yesterday I had a bit of a discussion about this with Ben Joyner (chief web designer at the University of Bristol) which has caused me to think a bit more about why this is. I think these are the main points from my point of view.

In usability, familiarity is king

I think that on a web form, the familiarity of a button that looks slightly 3D can give a slight usability edge. People are used to the 3D metaphor and if a submit button has a slight gradient and seems to pop slightly from the page, I think this helps to key people into the function of that element. It doesn’t have to be over the top – the effect can be quite subtle and the casual viewer might not even notice it. But I think in some cases the extra texture of a gradient can help.

Brochure sites vs. web apps

I reckon there is a slight difference here between a standard ‘brochure’ website and a site comprising a lot of interactive forms (e.g. web apps). While I think the choice between flat or 3D is largely an aesthetic design decision in both cases, in web apps (including mobile apps) the greater density of interactive elements on the page makes it slightly harder to mark out affordances with other means such as colour contrast, white-space, etc. In these cases I find it particularly useful to mark out a button with a subtle gradient and/or drop shadow. Although I’m not saying a flat web app can’t be done successfully! With a brochure site (for example where you have little more than a submit button on a search bar) I would have no hesitation in using a flat style.

Working with browser defaults

Although it is possible to replace default browser form elements like select boxes and radio buttons, it is hard to do this consistently across different browsers and results in a lot of extra work. Generally I prefer to work within the flow of the constraints of the medium and accept browser defaults here. So, given that select boxes will look very 3D, I think it can potentially be slightly confusing if submit buttons then look flat. Yes, you can certainly work around this but I usually prefer not to. This is one way in which working with web forms is a bit different from creating a stand-alone new design language from scratch like Metro: they already have their own history and baggage.

So what do you think – are there any real usability implications of the flat vs. 3D styles? Does anyone know of any testing aimed specifically at 3D vs. flat buttons?

Adobe Illustrator Responsive Web Design Template

Responsive Web Design is a challenge for the traditional processes of visual design, where the standard Photoshop (or Illustrator) mockup tends to be geared towards a single fixed width view of each page. One way to meet this challenge is to decouple the overall look and feel (or ‘design system’) from the layout by using style tiles. I think this method has a lot of merit and is generally the best way forward.

Sometimes, though, it may still be useful or necessary to mockup how a given page will look at different sizes, before you reach the HTML stage. This might be the case if you’re still working at the branding and design system stage and want a bit more context for your style tile. Or maybe you need to show a client a quick preview of an important page.

If you’re like me and prefer Illustrator to Photoshop for web design work, you might find this template provides a couple of useful shortcuts. I’ve included five standard view sizes each on their own artboard and with device chrome for iPhone, iPad and a desktop browser (The device graphics come from Teehan+Lax who were kind enough to let me use them here).

I’ve also included a sample grid on its own layer, which represents a fluid grid with a maximum width. This is unlikely to be exactly the right grid for you, so you’ll probably want to delete all the columns and start again. I’ve found that the easiest way to create grids in Illustrator is just to use the Object > Path > Split into Grid command – although it can be a bit fiddly to balance gutter and margin widths if you want to end up with whole pixels!

In practice I tend to find that five sizes is too much and I usually end up deleting a couple of the artboards. Let me know if you find it of any use or have any suggestions for how to improve it.