MenuFlat Design

Almost permanently, new trends arise in the world of web-design. Every now and then, one of these trends becomes a well known design pattern, which eventually will be considered the holy grail of all design decisions by certain parties. These patterns then turn into personal preferences. Some love them, some hate them. But sometimes a design pattern may become more than a personal preference. This may be what is happening to Flat Design.

Let's take a look at how it began, what it is and what it could be.

What is Flat Design?

If you search the term for images on google you will notice that the general perception of "Flat Design" is pretty straitforward:

  • Abstinence of textures
  • Abstinence of ornaments
  • Abstinence of drop shadows
  • Abstinence of plasticity

At the very first moment, one could see this as new countermovement to the nowadays well known term skeuomorphism, which was one of the aforementioned trends in interface design which developed to a well known design pattern. If you never heard of skeuomorphism: "It is a derivate object that retains ornamental design cues to a structure that were necessary in the original" (Wikipedia). This is also a UX trend where buttons or knobs in user interfaces were designed like original devices in the real world. Just remember the good old Winamp times where classic radio skins have been flavor of the month. The most likely best known company to make this pattern their distinct signature probably is Apple. iOS and MacOS applications absolutely try to mimic real world things in any way possible.

But enough of that. Let's take a closer look if the above list is really everything about Flat Design. If we investigate Flat Designs closer, one might notice additional and important features:

  • Typography as design element
  • Emphases and hierarchy by contrast, sizes and color
  • Content as design element

This suggests a new focus for design processes of interfaces. And pronounces more than just a simple countermovement to skeuomorphism.

Debut performance of Flat Design was the mobile world. In the context of small displays (and partially low resolutions) there is not much space for skeuomorphic or complex surfaces. Google made this big with the redesign of Android's "Honeycomb" and "Ice Cream Sandwich" versions which is called "Holo" design.

ClockClock Clock CloseDownload Google musicGoogle music Google music CloseDownload Picture galleryPicture gallery Picture gallery CloseDownload Battery statsBattery stats Battery stats CloseDownload

The message is unmistakably:

  • Simple surface
  • Abstinence of unnecessary design elements
  • "form follows function"
  • "content first"

Soon other big players had to follow. Microsoft did with Windows 8 and Apple just did with iOS 7. But what are the reasons for this rapid development? Do the big Three just adhere to one opinion?

Not really!

The zeitgeist of current software and internet usage seems to be the leading power in this play. Users want to stay flexible, they use the same service on their desktop, notebook, tablet and mobile phone. It gets harder and harder for developers to create a seperate mobile, tablet and Computer version of their software. Technically, flat design gets the foot in the door with its advantages:

  • Preserving resources: for slow connections or processors
  • Display flexibility: Designs need to be easier to adapt to different screen sizes
  • Usage flexibility: Big and simple controls are finger and mouse-friendly

These limitations raise the need of simple and (data wise) small applications which scale well with the usage type. In webdesign new techniques support this approach. HTML and CSS features like Responsive Design, Web- and Iconfonts, CSS-Gradients and -transitions just perfectly fit the motives of Flat Design. Additionally, raising demands like "mobile first" push the feasibility of Flat Design.

Flat Design as revolution

Designers and developers now can unleash a lot of powers which seemed almost inaccessible some time ago. However, this is not the exclusive credit of Flat Design. Flat design could not reach the breakthrough all alone as responsive design could not either. It's a combination of the mentioned zeitgeist, the limitations of flexibility (sounds funny?) and the new techniques allowing it to strike like it does.

If you ask me, these are the reasons to ditch the complex decorated and textured interfaces of the past. Thus, rendering Flat Design a potential successfull paradigm in web and application design.

Bad & good habits

Like almost all design patterns, Flat Design is also a two-sided experience. The sole fact that a design is flat is not a warrant for it to be good. You still have many of the same design principles applying to it as to every other design. Some principles are even harder to obey when employing a Flat Design. One of the major challenges is the unambiguousness of a design. When it comes to designing different types of elements on a user interface, it's already hard to distinguish copy from buttons in some cases. Flat Design takes this to a whole new level because it ideally removes perception of depth, thus making buttons flat rectangles. Sometimes even this is stripped out, leaving only little up to no distinction between buttons and lables at all. Especially Windows 8 is a great example for this kind of problem. It sometimes seems to lack clear design rules and does not follow all the principles behind the philosophy of Flat Design.

Windows 8 appstoreWindows 8 appstore Windows 8 appstore CloseDownload Windows 8 settingsWindows 8 settings Windows 8 settings CloseDownload

The settings dialog above displays the text "PC-Einstellungen ändern" which actually is a button and not only a copy. The top apps in the Windows 8 appstore shows how the overuse of colors can disturb the clean look.

A far better example for a consistent experience is Google's Android. It has fully featured design guidelines explaining different visual approaches and giving obvious reasons for the different design decisions. Of course not everything in the world of Android is perfect either. But the concept is far beyond what other designers have reached yet.

Full flat vs. Half flat

One principle the Android UX does not always follow is the abstinence of drop shadows. In some cases, they are used to set slight focus on elements which should stand out or should be perceived as clickable elements.

Google Now cardsGoogle Now cards Google Now cards CloseDownload Homescreen FoldersHomescreen Folders Homescreen Folders CloseDownload Menu drop shadowMenu drop shadow Menu drop shadow CloseDownload Dialog drop shadowDialog drop shadow Dialog drop shadow CloseDownload

The screans above show the slight usage of depth using drop shadows. Android uses this for the Google Now cards, overflowing action menus and dialogues. Additionally, some slight bevel borders can be seen on the Homescreen folders and on some actionbars (on top of an app). The usage of these measures may seem inconsequent at the first look. But if you take a closer look this is a real great hint for the user and helps to perceive different contexts and actions faster and more secure.

Radical advocates of the Flat Design pattern may forgive this inconsequence for the sake of usability. As long as this is not overused or abused to highlight non contents (like ads), it can be a fine thing.

The future of user interfaces

It's hard to judge this big trend so early. But I strongly believe that Flat Design will cover more and more user interfaces in the future. Including applications and websites. I am not sure if it will be the holy grail of UI-Design principles in the future. Yet more has to come in the future of web-standards and maybe one of the currently cutting edge features of HTML5 or CSS3 will stop the current exclamation of a design revolution. Let's wait how the fresh candidates like border-image (the web's nine-patch) or canvas will influence this once CSS3 is a fully applyable standard.

If the Flat Design pattern evolves under the constraints of "form follows function" and "content first", then web and application design can dramatically improve. This would provide the end users with more and more honest experiences on the internet.