Flat Design - why brands may be able to get more with less

Flat design techniques, when properly implemented, can help improve how customers use companies' sites and apps, so let's stop treating it as a design fad.

Design, perhaps more than any other part of the digital industry, follows ever-changing trends. And right now, flat is in.

As flat design becomes more common, brands that are a few cycles behind the trend risk looking outdated (at best) and untrustworthy (at worst). But trends can compete with function: if you redesign, will your site still do its job? Will your conversion rate drop? Will your users be frustrated? What good is a swanky design if you’re in the red?

But maybe, good experiences and beautiful design don’t have to be adversaries. Maybe they’re both (finally) headed in the same direction.

Why flat?

Flat design strips back visual styles and ornamentation to create a clean, uncluttered user interface. Driven by experimentation in the mobile space by trendy app developers, this edgy proof-of-concept has become so common that many apps had adopted flat design, as have mobile and even desktop operating systems.

iOS flat and bevelled design, via currenteditorials.com

Such a minimalistic aesthetic is nothing new: product, industrial, and graphic designers have long made a living from obeying the laws of minimalism and modernism. And when it’s done well, the results can be timeless.

To understand flat we need to look at skeuomorphism – the use of graphical effects, such as lighting and textures to replicate physical objects in the digital world. This could look like paper or wooden background textures, highly detailed textile-esque ornamentation, the new LG G3 metallic look, or the best example: the concepts of ‘desktop’ and ‘folders’.

Flat UI folders

Humans often respond better to more natural looking objects than the cold precision of order. So the more unfamiliar the interface, the more likely we are to turn to (and the more value we can get from) skeuomorphic principles. We saw this in the first cut at mobile and desktop apps and operating systems: these were visually rich and exaggerated, providing users with familiar visuals that would help them navigate a completely new digital platform.

Mac OS X, via wikimedia

As a result of over-saturation and heavy-handed executions, ‘skeuomorphic’ has become a slur within the design community. So why have industry juggernauts like Google, Apple, and Microsoft waited so long to go flat?

Falling Flat

Making something flat doesn't necessarily make it good.

Flat UI example, via printexpress.co.uk

At first glance the above design looks good; it feels somewhat contemporary and clean. But there are some functional problems.

Everything feels ‘active’. There’s no primary call to action. The bold use of colour stands out against the clean background, but there are too many competing active elements. We don’t know instantly what we can interact with. The most ‘touchable’ looking elements are in fact static content.

Flat interfaces provide their own set of challenges. And the tool kits that we use are different. For instance, without the aid of gradients and textures as visual devices, colour needs to step up as a visual cue for interaction.

Vesper App's use of colour

"Everything should be made as simple as possible, but no simpler," so said Einstein

Balancing act

Flat is more than a trend, though - it’s closely tied to function. We've seen people become more comfortable interacting with mobile interfaces over the years. The case for ‘metaphors’ and other accentuated visual cues is no longer needed.

Many consider flat design to be solely a response to skeuomorphism, and that's partially true, but it's not the full story. Our changing information consumption habits have played a significant part in flat design's popularity. We're increasingly consuming information from mobile devices when while we're performing other activities (crossing the street, for example). Flat design pushes content and action to the fore, allowing us to find and consume information quickly (this is called data foraging), and perform actions at a glance.

But while people are becoming more comfortable with flat designs, there are many examples of how these two design philosophies can work together, combining the best of flat and skeuomorphic.

Garage Band, while not totally successful, shows how subtle colour and basic shapes indicate interactive elements, while using graphical nods to real world studio equipment, like amp valves, to elicit an emotional response. It taps into that familiar creative space for making music.

Garageband's flat and skeuomorphic design

As designers, our goal is to create intuitive and usable designs. Flat design doesn't have exclusive rights to the future of interface design; it depends on the project and the context. It should be a visual choice; a more refined aesthetic for a more refined and task-focused user.

Where to start? When we approach interface design, we strip it back to its core functions as a starting point. From there, we add details and colour to satisfy the design’s primary purpose. Skeuomorphic elements can be added after it’s designed. Adding in details with a light touch, offering users a little familiarity, might make sense for some designs. There are some great examples of judicious, useful skeuomorphic designs, just as there are poor implementations of flat design.

Designing the performance

Design embellishments can cause headaches. High quality mobile displays add a new clarity to HD graphics, but that means larger images, which means a massive cost in files sizes.

Similarly, responsive web design relies on the constant shifting of size and aspect ratio of graphical components corresponding to screen size. Creating multiple image versions for different devices bloats file sizes and page load times.

The solution to both these problems is vector or code-based graphics. They offer crisp lines, no matter the resolution or screen size of the device. UI components, created through CSS code alone, tend to have much lower file sizes, in comparison to graphically rich designs, so page load times can be greatly improved, which increases overall performance.

So it’s no coincidence that the trend to flat design coincides with the huge increase in the usage of code based graphics.

So, why go flat?

Graphic design is critical to experience. Flat design, when done well, produces a cleaner and less cluttered user interface. And much like a clean and tidy desk space, a clean design is generally a more productive one.

Illustration: Patrick Cusack | Editing: Randall Snare