Rechner by Berger & Föhr, the app that converted me to “fLAT DESIGN.”

Dare to be Boring

Is flat design just a fad or is it progress? 

Henri Liriani
8 min readJul 7, 2013

--

I’ve typed and deleted many words since the flat trend began in the design community. Many of those words have been said, (lots of times) but they are in some cases relevant to my own points, so forgive me for being redundant. Despite my dislike for the terms, I’ll use the dichotomy of flat design vs. skeumorphism for familiarity’s sake.

Fundamentals

Pan Am City Guides designed by George Tscherny.

Graphic design underwent certain mutations as it bled into the digital mediums we associate it with today.

However, if you look back a few decades, it’s clear that print design had already explored the extremes of ultra-minimal, symbolic design.

This Pan Am print work is a great example of large semantic distance. Instead of concerning himself with meticulously recreating the real images referred to in each print, the designer focused on design fundamentals. He focused on color, impactful typography, and especially spatial composition.

However, print design isn’t interactive. Thus, where print could afford to be abstract and intriguing, GUIs needed to rely on familiar, real-world interfaces like the button. When computers and their UIs were new to everyone, skeumorphism was a necessary tool that established symbolic continuity from the real world into the digital. I’m going to argue however, that we (users) are familiar enough with digital UIs now to no longer need that crutch (in most cases), especially if it comes at the expense of less efficient and unimaginative design.

Ego

Let’s be honest. Rewind back to 2009 and think of any great UI. Was it great for its show of the designer’s ability to draw photorealistically? Or was it great because of its adherence to fundamentally good design principles? I’d guess the latter. A pretty rendering of an object can get people’s feet in the door (mine especially), but outside of that initial moment when you’re trying to figure out what the app-in-question actually does, how useful is skeumorphism to productivity?

Switches I made for a project some time ago. There wasn’t an end-purpose to this direction aside from looking luxurious / decadent.

I feel as though (decadent) skeumorphism (as it came to be known) was in fact the fad, and not flat design.

Making photorealistic stuff was—let’s face it—showing off. We were celebrating our ability to make pleasantly realistic stuff in Photoshop. It was cool.

Not So Delicious…

But that trend wasn’t timeless nor was it good practice. It was detrimental to design because of an unwarranted emphasis on aesthetic, skeumorphic beauty. There was a whole generation of “delicious” OS X apps that were sold based on how cool they looked. Apps weren’t being sold for their functions, but for their novel and often gimmicky GUIs—and that’s problematic. It’s a UI’s job to get out of the way and make the function(s) of the app as easy to perform as possible, not to be the star of the show.

The trouble became that a skilled designer could overpower the fundamental weaknesses to a UI’s design by making it look cool. This is akin to covering a facial blemish with makeup. Given the recent surge in flat design, there are apps with flat UIs that are sold based on their visual style too, sometimes even using that style to disguise their flaws elsewhere, and that’s not okay either.

But on that note, let me try and dispel a popular opinion:

Flat Design Isn’t Easy

If only I had a nickel for how many times I’ve read something along the lines of: “So basically, I select every layer in my PSD and hit ‘Clear Layer Style?’” Even among the people I work with every day, it’s not readily apparent that design is more than just slapping on a routine 90º 1-2px, 0 dist. drop shadow and a gradient overlay. Is flat design really lazier and more replicable because it didn’t involve those simple steps? No. Granted, there are UIs that use complex graphics (that aren’t easily created by anyone) like Voice Memos in iOS 6 (see below), but generally, the skill required to style UI elements like buttons, bars, and glyphs is not noteworthy.

What’s noteworthy is the design sense required to spatially arrange elements appropriately, to use color judiciously, and to keep it simple.

Voice Memos in iOS 6 (left) vs iOS 7 (right).

This is a striking example of how decadent skeumorphism can stunt an app’s UI design. I never consciously critiqued the old Voice Memos app for using two screens before I saw the iOS 7 version. The only function I can possibly imagine for the gigantic mic graphic in the old version is to indiciate to a person you could be interviewing that they can talk to the phone from that end and be recorded.

The new UI is literally over 9,000x better. It simplifies the app into one screen and displays more relevant information. I don’t know about you, but I never had a clue about what the units meant on the old app’s meter graphic, but the frequency spectrum is (oddly) much more self-explanatory and useful. The Voice Memos redesign demonstrates the opportunities for strides in design afforded by stripping away visual decadence. It also points out that flat UIs can be just as difficult to design, if not moreso, because there’s less of an excuse to hide behind, assuming that you define design the way I do.

Let’s define design real quick.

I feel like I might incur the wrath of his ghost if his quote is used even one more time, but here it goes:

“Design is not just what it looks like and feels like.
Design is how it works.” —Steve Jobs

Now that I’ve checked every box for a run-of-the-mill, pseudo-profound design blog post, I think we can continue.

Moving Forward

iOS 7 garnered lots of controversy for its visual treatment, but aside from some of its typographical choices and the home screen icons, I’m a fan. I believe it’s a major step forward in UI design.

Apple got to know their own product better. They figured out that margins around content were virtually useless on a space as small as the iPhone screen, and that the physical device provided “margins” anyway. They found that tap regions make more sense than buttons, as long as there are strict and consistent guidelines in place to keep the UI language coherent. iOS 7 was a complete reevaluation of everything on the screen. This is why I hate just calling it “flat design.”

Thirst for Simplicity

Microsoft calls it “authentically digital,” which I guess is pretty accurate. It’s not the absence of graphical effects that makes a good UI nowadays, but rather the critical questioning of every element: graphic or text. The flat movement heralded a spartan desire to simplify in designers.

There are some brilliant guidelines in the talks given by Mike Stern from Apple’s WWDC this year. One is to design UIs by starting with the content, which is often just text. Particularly in iOS 7's new Mail.app, photos now cover the entire width of the device rather than being bound to a useless 20px padding from the edges. This is the kind of progress that flat design has provoked, and I love it.

The Ugly Truth

I’ve read that people are already getting bored with the flat design in iOS 7, somehow using that as evidence that flat design is indeed a fleeting trend, and hence we arrive at the crux of this post:

“Dare to be boring.”—a professor of mine

Bear with me.

I was (and still am) a professional procrastinator. Consequently, I developed poor academic writing habits. My writing was always a scatter-minded attempt to get big premises on paper in order to have a sufficiently lofty discussion. I did this thinking I needn’t bother with things like textual evidence and nuanced details. Thus, my professor told me to “dare to be boring,” meaning that I should construct careful, sound arguments with ardent sobriety, instead of trying to sound grandiose and epic at the expense of what mattered. Granted, this was Islamic Political Philosophy, but I think the point stands.

Our job isn’t only to floor users with gorgeous work. We design interaction models that are beautiful and stay out of the way, functioning in the fastest, simplest way possible.

I mean, just think about the word “interface”:

interface |ˈintərˌfās| (n.) a point where two systems, subjects, organizations, etc., meet and interact.

I wasn’t trying to make us feel small and insignificant, I promise.

We shouldn’t care if users aren’t forever-entertained by our design choices (did I mention that I think that’s impossible?). It’s our job to push the envelope on how meaningful we can make the connection between users and their content, and I can think of few better ways to accomplish that than by stripping down a UI to its most basic and usable form, silently, nobly, invisible.

What’s Next?

Rechner by Berger & Föhr, the same app in the cover photo at the top.

If you haven’t played with it, at least view this screenshot of Rechner on an iPhone (preferably black). When I first did, I was amazed at how the screen didn’t feel trapped behind glass. It felt like the UI was on top of the phone. That’s fascinating to me because I think it’s the next step forward from where we began with our skeumorphic training wheels.

We have to wait on better screen tech to enable us to really touch the physical device with our UIs, but the notion alone is exciting. It makes iOS 7's depth via parallax, popovers, and blurs make even more sense. When you think about the whole device—not just the screen—as part of the canvas, you can make the whole UI feel more real, and not by making it imitate a real-world object, but by allowing it to be its honest self.

Why?

One great question is why it’s important at all to make interaction with a digital UI more real / physical (on mobile devices). To answer that, we need to think about what an iPhone or iPad is. It’s a screen with a (single-function) button on it. That means we have the whole screen at our disposal once the user enters our app. At present, content on the iPhone feels trapped inside of it most of the time, giving us less of a sense that what we’re interacting with is real.

A UI that feels like it sits on the surface of a device and that has responsive animations that are convincing to the touch can allow users to feel a more tactile and real connection to their content, and that’s important.

I’m confident that we’ll never go back to the types of UIs we saw in the last decade because we won’t miss them. While extreme minimalism might wear off on people too, we are better off as an industry for having had a flat design movement.

There’s a grain of truth to the “fashion is cyclical” idea, but I’d argue that design isn’t as much fashion as it is a hybrid of art and engineering. I’d say progress in design is more linear than cyclical.

I’m excited to see what designers and developers will do with the opportunity that iOS 7 presents because it’s not just a new coat of paint; it’s big-i innovation.

--

--

Henri Liriani

Design & Product person. Rehabilitating Minimalist. @hliriani