Guidebook Blog

Even if you’re not in the web or mobile app business, you’re probably hearing about flat design. It’s a popular topic due to Apple’s recent iOS7 release and the concurrent update of many iOS apps. (Android phones, along with many design-forward websites, have been playing with flat design for awhile.)

I’ll give you the basics of flat design as they pertain to you, the one actually using smartphone apps and browsing websites. You’ll have a greater appreciation for the changes you’re seeing in the digital world–and you’ll be ready to strike up informed conversations at parties!

Flat Design: The Basics

The pitch for flat design? Remove superfluous elements like shadows, gradients, textures that mimic real life and visual metaphors. You’ll end up with a clean, easily navigable and digestible interface, free of clutter, which in theory will allow you–the user–to achieve a flawless zen state. Usability and efficiency go off the charts. You can free yourself from the digital world by limiting the time you spend engrossed in it.

(This is what you’re being told.)

Will this new design philosophy alter the way you interact with the digital world?

In reality, the flat design trend is impactful. At its best, it’s forcing app designers who may have iterated themselves into a less usable interface to revisit the essentials.

The problem flat design addresses is this: By now, our devices have the ability to actualize nearly any image with advanced graphics processing and pixel-dense retinal displays. This capability has created an arms race to have the most complex graphics. Flat design proponents argue that this movement to make website and app interfaces complex has gone too far, sacrificing usability. Too many bells and whistles.

The flat design trend also claims to bring back a focus on content. The new stark, iconographic images don’t subtly tell you how to feel and behave, so wording is important. This could translate to a better experience for you.

A parallel movement exists in the video games industry. I spoke with Isabel Yap, a passionate gamer and industry insider who worked for mobile gaming giant Gree International before coming to Guidebook. “As gaming hardware and HD TVs became more technologically advanced, game developers began to focus heavily on improving graphics to impress players,” says Isabel.  (See the side-by-side improvements in this post from techreport.com.) “But by focusing on the hardware, elements that used to be essential–storyline and character development–became less important, and there was less motivation to innovate. The Indie Game Movement has allowed creators and developers (who are sometimes the same person!) to make games that focus on creativity, gameplay, and storytelling.”

After many years of producing game systems, monitors, processors and handheld devices to wow users with incredible images, animations and textures, there is now a multi-discipline return to simplicity, content and intuitive design.

A History Lesson

To understand why your user experience is changing, it’s interesting to look at the trends of digital design over time.

Early personal computers–like the original Macintosh in 1984–used icons to direct beginner users to different features, and they were heavily rooted in real-life parallels. You organized your desktop into cartoon folders. To cut text, a little pixellated pair of scissors appeared. This is known as skeuomorphic design: it helps you understand the digital world using real-life cues.

Sketch for original Macintosh “brush” icon. Source: NeuroTribes

For years, as computers were able to process and display higher quality images, there really wasn’t a central model for digital design. Interfaces looked more and more photo-real, rich and textured.

Fast-forward to the release of the iPhone, instantly famous for its visual capability. The iPhone’s interface was designed with detailed real-life elements. The calendar resembled a fancy stitched leather desk blotter. eBooks could be chosen from a little bookcase.

The iPhone was the first smartphone for many people, so Apple worked to make the unfamiliar seem accessible with these tangible elements–the same strategy they employed when they released the original Macintosh computer.

It became a common practice to reference the real world in mobile app design. But trends change, and those references became outdated. Scott Hanselman tweeted,”The Floppy Disk Icon means ‘save’ for a whole generation of people who have never seen one.”

A few years ago, forward-thinking web designers began to adapt a cleaner look, focusing on showcasing media and written content over cool-looking visual tricks.

When the Windows Phone appeared in 2010, the ad campaign highlighted a clean design that could free you from being too attached to your phone, showcasing people in ordinary settings who were too engrossed in their devices to notice the world around them. According to Windows, the phone was “designed to get you in, and out, and back to life.”

“The stuff that’s important to you right on your home screen.”

Why You Might Want to Care About Flat Design

Everything’s going flat. And it will probably alter the way you interact with websites and mobile apps (though maybe not as dramatically as die-hard enthusiasts will have you believe). Sometimes it will be fun, and sometimes it will be frustrating. Designers desperate to fit in with the trend may deploy a slapdash update: whitewashing their interfaces and swapping out fonts without truly considering the benefits flat design can have in terms of usability.

Behind the Curtain

I talked to Peter Lada, Guidebook’s Creative Director, about his experience updating the Guidebook app to reflect the movement toward flat design. He stressed that the changes made are chiefly driven with benefits to the user in mind. That’s you!

The Guidebook app organizes information and helps people move in an environment that’s unfamiliar to them, so usability is a priority.

“Flat design complements the overall design ethos we’ve had since we launched: focus on the essentials and get that right,” says Peter. “Updating our look to fit with iOS and Android has allowed us to take this philosophy further, resulting in a distilled version of the product, stripped to only what matters to help the user make the most of the features.”

Peter tells me that user-focused flat design doesn’t mean it’s absolutely flat. Some depth and shadows are still OK, and in many instances help guide a user to understand how certain elements might function. “Guidebook’s context menu still has a drop shadow as the main screen slides away. This helps the user understand that content exists beneath the main view and helps define a visual hierarchy; things that are ‘lower’ in the visual plane are usually less important.”

And Apple has introduced the concept of layers, which gives an app visual depth that is more sophisticated than anything suggested by a drop shadow.

Icons throughout the app have been simplified to express their core functionality. Peter explains how designers think about the move away from skeuomorphic cues. “People get that this looks like a folder,” he says. Folders have represented a collection of items since 1984. “We need to ask ourselves how else we can represent the folder. We need to find ways to make changes–not just for the sake of making changes–but augment the app to improve a user’s workflow.”

Finally, there was a strong focus on lightening the colors in the Guidebook app. “While flat design does not necessarily equate to light colors, it helps the feeling of removing excess UI elements,” says Peter. “Dark colors can make the app feel overly designed.”

Designers saying they want their work to look less designed? Smartphone manufacturers building ad campaigns to encourage users to use their smartphone less?

The flat design movement may not usher in a new age of effortless device interactions, but it’s the first truly digital-industry-wide, synchronized design model… ever.