The Rise of Flat Design

If you haven’t already noticed, our digital world is getting a little flat. Recently, Apple released iOS 7—a vastly different and new interface for the iPhone, iPad and iPod touch. Candy-colored gradients, beveled and drop-shadowed objects, and heavy lifelike textures have been replaced with solid colors and more subtle gradations. Apple isn’t the only one banking on this trend, however. Microsoft has already adopted it with Windows 8 and the trend has crept into many websites. Historically, art and fashion trends constantly shift between simple and complex. Flat design, for the most part, is a push towards simplification without sacrificing functionality or purpose.

The best example to illustrate flat design is the picture above. What you see is the Mac OSX icon for the web browser Safari. Its original icon is on the left, depicting a real-world compass. A redesigned version from a 3rd party icon set is on the right. Note the absence of gradients, bevels and glass-like shine. But despite losing these details, it is still easy to understand what the icon represents. “You can easily see how the icons maintain their style and form even though they’re stripped of details, shadows and textures” (Awwwards.com).

The Appeal of Flat Design

Flat design is considered to be more honest than other styles. In general, it would seem that designers “are getting fed up with the irrational, ugly shortcuts being praised as good design” (Layervault.Tumblr.com). Designing honestly means understanding that what we create for the web cannot be accomplished with real-world objects; furthermore, we should avoid trying to copy them. Allan Grinshtein, from LayerVault, a Version Control system for Designers, says “Can you imagine your pristine iPhone built into the body of an antique telephone handset? Is that beautiful design?” Form and function must always work together to ensure an enjoyable experience for the end user.

There has been a surge of more simply built, minimalist designs lately. They have been warmly adopted by the design community because it is thought that they are better suited for functionally. Much like the backlash against the brightly colored Web 2.0 style a few years ago, designers are ready for a change after being bombarded by realistic looking interfaces and websites over the past few years. Not all of them were bad designs, but most were merely using these real world elements as embellishments that looked nice and were not necessarily good design choices.

Flat design can also prevent designers from getting bored. Our Philly website design agency knows that some tell-tale signs of designer ennui are the over usage of shadows, animations that seem out of place, and other random embellishments used only for decoration. Because flatter designs are so simple in nature, it forces the design to stay more constrained and focused. Ultimately, it could force a designer to really think about their design choices.

Shock and Awe

While change is always good and can help to breed better design, it is possible that the trend may have gone too far – take for example, iOS 7. For many Apple fanatics, it was a total shock because it was so different from its predecessors.

iOS 6 vs iOS 7

Apple was one of the first companies to push for skeuomorphism, a design technique aimed to recall the real world or a digital depiction of a real-world texture or object. For example: Folders and file images for filing systems, a letter symbol for email, the tools palette in Adobe Photoshop and Microsoft Office—these things are all very good examples of skeuomorphism.

“For the last several years, Apple designers have been working with a contradictory idea; if you make items in the digital world appear more like items in the real world, then they will be more appealing, more comforting, to those more accustomed to physical objects” (XcubeLabs.com).

mac

This actually makes a lot of sense; you wouldn’t have a screwdriver represent a paintbrush, nor should you create a new symbol to represent a real life object. Long before the iPhone, touch screens were something out of Star Trek; they were objects in the future that we would have in our “house of tomorrow.” Our interactions were limited to ATMs and grocery store credit card devices—an experience which left much to be desired.

Realism

Before the iPhone, realism in the digital world was a foreign country. The only place it existed was in video games. “In order to preserve immersion, game designers had long began to craft their user interfaces out of wood, metal, and stone” (SachaGreif.com). Initially, the life-like textures and buttons on the iPhone were implemented to help people feel more comfortable touching glass. If the button looked real, we would be more inclined to touch it.

skeuomorphism “Suddenly, Steve Jobs and friends gave us the ability to touch the Internet. To pinch and zoom, to slide a piece of data over with our fingers in order to examine another piece of data, to take a picture … and turn it around 360 degrees using our very own hands” (MacWorld.com). It felt intuitive enough for toddlers to figure out how to use the devices and it was unlike anything we had seen before.

But iOS 7 eliminated the faux leather from the calendar and notepad app and said they “ran out of green felt” for their game center app (it was quite garish and tacky, actually). The realistic buttons and icons are now gone. The only remnant of this realistic era is the iBooks app. It still features a wood-grain book shelf where you may store your digital books.

“You don’t have to keep dancing with the one that brung ya, partner,” writes Joel Mathis of MacWorld, “but it’s generally considered rude to merely shove her aside, point at her, and start laughing while you dance with somebody new.” The snarky rejection of iOS 7’s predecessors was a strange reaction for Apple. Until recently, Apple had never publicly mocked an older design choice of theirs. Usually they quietly redesigned and swept the so-called failures under the proverbial rug (The Newton, Power Mac G4 Cube, and the Apple USB “Hockey Puck” mouse to name a few).

Unlike previous interface upgrades, iOS 7 was not a gradual change. Many people were expecting an update to the design, but not necessarily something that looks and feels like a completely new device.

Why was there a massive shift in design for iOS 7 and many other devices? Senior Vice President of Design at Apple Inc, Jony Ive says “When we sat down … to work on iOS 7, we understood that people had already become comfortable with touching glass, they didn’t need physical buttons … there was an incredible liberty in not having to reference the physical world so literally. We were trying to create an environment that was less specific. It got design out of the way” (CultofMac.com).

Apparently, Ive was against the use of visual skeumorphism—something that the late Steve Jobs was adamant about keeping. With Jobs’ death, Ive was finally able to eschew the brushed chrome and glossy veneer and focus on color, translucency, typography, animation, and simplified iconography. All in all, this design shift was not just a new coat of paint—iOS 7’s core has been updated as well. The physics engine is more intuitive, “The way they’re re-implementing the UI framework with physics – it just feels natural.” (FastcoDesign.com). Apple is still mimicking the real world, but skeuomorphism is going into interaction design. The interaction is as important as the visuals—a philosophy Apple has always stood by.

Necessary Simplicity

Apple certainly was not the first company to present a more simplified user interface. Microsoft did it first in 2006 with the Zune. While the music player Zune was a commercial failure, it laid the groundwork for Microsoft’s future design choices and for others to copy. The interface was minimalistic, focusing on light and big typography. It was free of superfluous details.
zune

From 2006 onward, Microsoft used the Zune as a springboard for their other products; other interfaces became cleaner and flatter. The Xbox 360 dashboard featured a square-based interface with simple iconography and typography and Windows 8 had “Metro UI,” which featured a simple, geometric interface with bold color-blocking.

We live in a time of information overload as a constantly connected culture. It can be incredibly overwhelming when we are always consuming and creating content. This becomes more complicated when most of our content consumption happens on our phones and tablets. “Becoming overwhelmed is all too easy, and a reduction of clutter in a user interface (UI) can create a little visual Zen” (SmashingMagazine.com).

Yet, despite the backlash and confusion of iOS 7, our Philly website design agency believes that the change makes sense. While the old iOS was beloved and people were used to it like an old sweatshirt, it was probably time for Apple to make a change. “The problem is that when borrowing elements from a design’s previous incarnation, you often also bring its limitations along for the ride, even when these limitations have no reason to exist anymore” (Sachagreif.com).

Since Apple is considered to be an innovator and trend-setter, it was important for them to upgrade their style and simplify where possible. “Simplicity is not just stripping the character of an element, but about taking away what doesn’t need to be there, it’s a very fine line. But distinguishing the line shouldn’t be rocket science” (WebDesignerDepot.com). This push towards simplification inevitably brings more focus to content.

Flat Design & the Web

If you haven’t noticed, the web has also undergone a style shift. A few years ago, Web 2.0 was the hot new thing. This is where almost every element had gradients, drop-shadows, textures, beveled edges and rounded corners. Famous fashion designer Yves Saint Laurent is quoted as saying “Fashions fade, style is eternal.”

Like anything fashionable, the over-abundance of something can and will eventually become overwhelming. Take for example, those ubiquitous, shiny candy-like buttons. Their faux 3D appearance made them look more clickable, which is fine, but it was done to excess. Suddenly everything on the web was too shiny, too bubbly.

Web 2.0 Buttons

This happened with skeumorphism too. Remember when websites were loaded with real-world textures and items? Polaroid pictures, ribbons, chains, quilting, and fabrics all showed up on websites and were done to excess.

But this is how trends always happen; they rise in popularity, everyone starts using them, and then suddenly they are everywhere. They become so exploited, misused and overused that they are eventually overwhelming. A backlash inevitably occurs in the design world and the cycle is reset. “The key to analyzing design trends is to remember that they aren’t inherently good or bad. Instead, they merely serve as a way to observe and remember the collective tastes of bygone eras” (DesignShack.net).

Could this happen with flat design? It’s likely but since there is a push towards better usability, it is hard to predict how it will go. But, like anything, flatter designs have their downsides. Instead of going too far in one direction, it’s important to embrace trends slowly. Design is about balance and there are many elements of more recent trends that will still work if done correctly and effectively.

“The idea of ‘flat’ vs. ‘skeuomorphism’ as an ‘either/or’ approach is frankly, if you’ll excuse the pun, a bit one-dimensional. Design is driven by a combination of functional and aesthetic considerations, from the purest levels of form-following-function to the purely ornamental” (VentureBeat.com).

Finding a Happy Medium

Websites can rarely operate with a complete absence of either style; there is a time and place for everything in design. The screenshot below is an example of a flat design UI kit for designers. It is a perfect example of the style but, keeping everything so flat could be a little boring. While using contrasting colors and tones helps significantly, it always is important to determine if a style is appropriate for your project. Think about your audience and what you are trying to achieve. Rather than push your design too far in one direction, our Philly website design agency knows it may be more effective to find a happy medium.

Flat Widgets

Texture is one of these things that can help with the transition. While textured backgrounds may be classified as no more than embellishments, they create visual interest and depth, helping to emphasize what is important. Implementing a flat design should not be full of hard and fast rules. If a subtle gradient works for a particular element, do not be afraid to use it.

“Designers should not simply flatten designs arbitrarily, but also address the functional qualities of skeuomorphism on each design decision” (VentureBeat.com). If you find a bold background pattern that you love, try to work it in somewhere. Design is about taste as much as it is about function. Again; a completely flattened design scheme is not always the right solution for every project. “At the end of the day, if a sneaky little drop shadow will help your users understand your design better, then what right does anyone have to tell you otherwise?” (KatherineBarrow.com). Do not be afraid to hold onto older design techniques, if they work for your project.

Conversely, think carefully about the choices you are making with a design. If that bold pattern does not really work, perhaps it should be removed. “As you work, keep asking yourself, ‘Do I really need that?’ Getting attached to an item that you find clever is so easy, but we must always look for elements to cut or simplify” (SmashingMagazine.com).

It’s incredibly important to consider your brand when deciding to “go flat.” If you are a creative agency that is en pointe with design trends, then perhaps a flatter aesthetic could work for you. The screenshot below is for the French creative agency Nitrografix.

we-are-french

The design is simple, yet elegant. It provides easy, uncluttered navigation combined with charming illustrations.

The next example however would not benefit from a simplified, flattened design.

world-of-warcraft-website

This is the website for the popular online game, World of Warcraft. As I mentioned before, video games have been using realistic textures to help players feel immersed in the game. The site is echoing the look and feel of the game. “The chunky nature of the navigational tools and the images is suited to the arcane and medieval features of the game” (CrazyLeafDesign.com). If the site departed from this and went with a flatter, more streamlined aesthetic, there would be a large disconnect from the product.

Visualization vs. Usability

One thing to keep in mind before venturing into the world of flat design: While it appears that it is simpler or brings more simplicity to the project, some adoptions of flat design are merely made to look simpler. In reality, it is more a question of perception rather than a reduction of elements or simplification of the interface. A flat interface vs. a non-flat interface still holds the same amount of information and weight, the only difference being visual representation is less ornamental.

“The risk with flat design is that it can come across as too plain or too simple. Without detailed design elements, it can be hard to properly tell a complex visual story or adhere to the visual hierarchy of traditional web design” (OnSydney.com.au).

Although it seems counter intuitive, this push towards simplicity can also cause usability issues. Some users are uncomfortable with these new, stark interfaces; many do not always know where to click or tap on a mobile device. The style does not always do a good job defining what is and is not clickable.

Part of the reason for the surge in skeumorphism is that it acted like a visual metaphor. If someone tells you they have a broken heart, you understand what they mean because you know what that feels like. Buttons and interactive items are the same way.

“The screen doesn’t offer physical buttons, but it does offer things that want to be pushed or clicked or tapped. Designing those things to look like a button relates to the familiar and makes the clickable more appealing to our sense of touch. Even if you aren’t familiar with the web, you’d likely recognize the button and know it can be pressed in some way” (VanseoDesign.com).

However, as a Philly website design agency, we know that metaphors can also be overused to the point where they become cliche. More and more embellishments are added as an attempt to outdo the last person who used them. While these visual metaphors were intended to promote better usability, in many cases they only obscured the message.

So, are flat designs hurting usability? In many ways, it could be. People were used to those cliché visual metaphors. “Even for those of us who don’t need to be told that things on a web page can be ‘pressed’ it might still slow us down at times. A flat rectangle doesn’t suggest press me the same way a 3-dimensional button does” (VanseoDesign.com). Yet, depth is not the only way to indicate that something is 3-dimensional. Color, shape and placement are other methods to help with usability, but if flat design is done wrong, no amount of color or shape is going to help.

“Users have come to expect actionable items in the design to look different to static items. In other words, something that they can click, toggle or slide should look different to something that they can’t” (KatherineBarrow.com).

Regardless of the colors used, clickable items should be obvious. Most of us have been using the web long enough to know that if something looks button-like and clickable, we will want to click it. Buttons are for pressing. But how does a flat, green rectangle tell a user it is clickable?

Take the screenshot below for example. If you are going to use a flat color for action items, it must be bold, and noticeable enough to stand out. That being said, even though the action buttons are bright green, the low contrast of the rest of this design is not the best choice. The background and the content blocks are almost the same color. If your computer monitor’s contrast is set incorrectly, or you happen to have low-vision or colorblindness this site could look like one big white blob.

onsiteio_500_mini

This screen shot though, is a better approach:
fitbit_dashboard_mini

It has a much darker background that contrasts nicely with the white content blocks. The bright bold colors of the charts and graphs also help to create emphasis on what is important.

With all of this in mind, there needs to be a happy medium. Perhaps an “almost” flat approach is the right way to go. Gmail uses an almost flat approach for their web application. It sticks to flat colors and no drop shadows, but it uses subtle gradients on buttons. “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’”. Certain affordances need to be made if users are expected to interact with your site or app.

Start Small

If you decide to venture into the world of flat design, our Philly website design agency recommends easing into it. Any adoption of a trend should be a subtle one, especially for a site with many visitors who may be turned off by a sudden shift of styles. “No design outline is perfect. Tailor your design for each project so that the look matches the feel and tone of the message” (Designmodo.com). Regardless of the style you ultimately decide to adopt, remember that above all things, a design should function well. Not only should it be visually appealing but it should work and be easy to use. This is what flat design is trying to do.

At the moment, flat design is half trend and half revolution. The abolishment of skeuomorphism and other embellishments is a traditional part of design. Designers will always have passing infatuations with trends and ultimately brush them aside. But the underlying theme of flat design is what is, and will, be important. Elevating typography and color along with giving content a strong focus and having them be functional parts of the design instead of afterthoughts will be the aspects of flat design that prevail.