Almost Flat Design | Matthew Moore Design

Flat design is both hot and controversial in world of user interface. Microsoft led the charge to introduce it to the masses and many others have followed suit: LayerVault, The Next Web, and more.

Many designers have been calling it a fad since early on, thanks in large part to the UX problems it presents in interfaces that reach a certain level of complexity.

Flat design is beautiful and refreshing. It’s also generally faster to design and easier to make responsive. If it was a graphic design trend, it’d be well received. Unfortunately, us web designers have that pesky ‘usability’ thing always looming large. We cannot ignore the user experience with our work, so because of that, flat design is inherently flawed.

From Apple (left) to Google (center) to Microsoft (right), today’s tech giants are pushing very different visual design aesthetics.

A Way Out Of Here

With any great debate, the best solution usually lies somewhere in the middle. Compromise is hard for people with extreme opinions, but it usually benefits the masses. In this case, those masses are the users of our products.

There is a way to take all of the good things from flat design and apply them in a way that is still usable, even for highly complex interfaces. To see how that’s done, you need look no further than Google’s current interface design language.

Gmail (web + iOS), Google Maps (iOS), and Google+ (iOS) are the most prominent examples of what you could call Almost Flat Design.

Gradients in Almost Flat Design

For the most part, these interfaces stick to the flat design principles of flat colors, no drop shadows, and use of color to encourage specific user actions (e.g. red compose button in Gmail). But if you look closely, that compose button does have a slight gradient. It’s a gradient that says, “Hey, I’m a button you can press,” and not “Woah! I look like I’m made from candy! Oh and you can press me too.” Subtle affordance is a big component of Almost Flat Design and gives it a critical advantage over true flat design.

Drop Shadows in Almost Flat Design

Almost Flat Design doesn’t ignore the concept of depth. Instead, depth is used to support comprehension of the interface. But, just like gradients, this can be done in a subtle way and still allow for separation of information along the z-axis.

Almost Flat Design uses drop shadows and gradients to enhance usability.

Other Examples of Almost Flat Design

It’s not just Google. The new MySpace follows along nicely with buttons that appear flat, until you rollover and a ‘you can click me’ gradient appears. Letterpress, which some argue is flat design, uses drop shadows to improve the interactions when constructing words. Even Facebook, which has been largely gradient-free since 2004 uses drop shadows to separate overlays and dropdowns from the rest of the page.

Our Experience with Almost Flat Design

We recently launched a new Onepager dashboard and employed the guidelines of Almost Flat Design mentioned above. Our sense is that it allows for more complexity in the interface, but with the very focused and usable design, it’s not overwhelming and confusing to the user. We’d argue the lower cognitive load from the uncluttered visual design allows us to ask more from the user.

The future is bright for visual design. Going away are the days of the heavy real-life metaphors of today’s iOS and as we temper back from the Metro interface, the principles for highly usable, effective, and efficient design languages are emerging. Let’s just not forget the lessons of usability we should already know.

Note: I’m writing an ebook about Almost Flat Design. Sign up for email updates or follow me on Twitter.