E-commerce Link: The Rise of Flat Design

These iconsby Geek Fairy are examples of flat design.

These icons by Fast Icon are examples of skeumorphic design.

Greek holiday travel site Combadi uses flat design on its website for a clean, fresh look.

Will going flat with site designs for Web and mobile work for you?

With the recent unveiling of iOS7, Apple appears to be taking a bold move away from its previous interface design aesthetic. The new OS abandons the traditionally skeuomorphic look and feel in favor of a distinctively flat design.

Microsoft has been forwarding flat design in its Xbox 360 dashboards, the Windows 8 OS and even in the recent conversion of Hotmail to Outlook.

Google also has been moving to a similar interface style with its Android OS and Web-based applications. Apple’s move to a flat design means the trend is continuing and still growing. But what is flat design and what does it mean for usability?

Skeuomorphic and Flat Design
Skeuomorphic design is when an interface emulates 3D objects. This emulation can happen very subtly through the use of drop shadows, bevels and gradients. Or it can be very overt, like Apple’s Notes app where the entire interface resembles a notepad. The thought behind this type of design is if you present users with a familiar design from real life, they will be better able to understand how to interact with it.

There are problems with this idea, though. The digital world doesn’t actually work like the real world. In the Notes app, because information is typed onto the screen, why do there need to be lines on the interface? These visual metaphors can become a distraction for the user and take up valuable screen real estate.

Flat designs take a distinctively more minimalist approach to how content and functionality are presented. Rather then using visual metaphors and embellishment, these designs rely on foundational elements like shape, color and typography to convey meaning.

As a minimalist style, any unnecessary design elements are avoided. This means layouts are often simple and uncluttered; only the most important or relevant content and functionality is presented to the user. Designers will often make heavy use of iconography for functional elements or navigation. This condenses information into a visually appealing form, which allows designers to place more functionality on the screen without the visual noise.

Related Content
  • groovy

    great article, steve. very informative. i feel like we’re constantly chasing tech. we just finished an upgrade to our website. the next step is translating the site to mobile. hopefully, we can take advantage of what we’re learning now and design it using Skeuomorphic design. Thank you, PM

  • Michael Frishberg

    Steve, I shared your article with my brother, who is currently the User Experience design manager for INTEL…


    His background includes being a ‘bricks and mortar architect’ before becoming a computer systems architect.

    His reaction:

    Thanks. Yes. This has been all the rage for the past year in the design circles. This article is clearly a fan. But frankly, it misses the point, which in the context of "target marketing" is probably fine.

    Looking at it from a future-historic perspective, I can tell you how this will play out, and why I’m avoiding buying into the sytlisms du jour.

    Irving Gill, an architect with whom you may be familiar from his work in San Diego, was part of the Josef Loos approach to design (a major reaction to the Viennese Secessionist movement from 1900 on to 1920) that provided much of the fundamentals of Modernist Architect…

    The reaction to Gill’s designs were usually quite negative, because he had stripped every bit of non-essential ornamentation out of his buildings, letting the structure, skin and materials simply be.

    Loos’ famous essay "Ornament and Crime" basically called all of the "stylists" in architecture to stop wasting money and energy in building out superfluous decoration.

    The "flattening" of design. Which brought us the Modernist movement in the likes of Mies van de Rohe.

    Not to mention almost every skyscraper built after WWII and before 1980, worldwide. In this approach, the structure is the ornament. Minimalist was Mies’ watchword.

    Okay – so what?

    So "flattening design" comes out of all those traditions, and in my opinion, all of the drivers are almost exactly the same, except one: the same design has to work on devices of different sizes and shape. That’s the key design problem flattening addresses. As it turns out, the same reactions, from a human-perspective, will emerge to these design solutions as emerged in reaction to the sheer inhumanity of Modernism in some cases, and boredom in others. (I love Modernism, by the way, but that doesn’t mean it didn’t have its shortcomings).

    Take a look at the fabrics from Herman Milller in the 1950s

    Sure – we can claim "flattening" is an effort to make "calls to action more evident" but the reality is we’ll have tons of "brightly saturated colors" vying for our eyeballs, all on the same screen.

    The reaction to "flattening" will play out exactly as its forebears in Architecture and Design played out, and hopefully it won’t take 50 years to do it:

    1) Just as in the 60s, the patterns began to get larger (super-features) or more complicated (paisley anyone?), so these "flattened" designs will begin to get ever more intricate as the device technology permits
    2) Just as the Post-Modernism in the 70s began to strike down the very tenets of Modernism, by focusing back on the cultural heritage and meaning of Architecture, as opposed to simply playing formal games with surfaces and technology, so too, "flattening" will be replaced by skeuomorphic references (as opposed to literal metaphors we might see today).
    3) Eventually, designers will actually be crafting holistic designs that incorporate the full dimensionality of the device (shape, weight, gesture, orientation, etc. etc.) such that the visual design will be informed from dozens of influences (including historic reference, as Post-Modernism was informed)

    I will likely not be practicing at that point, as I believe we’ll need at least one, if not two, generations of digital designers who can truly grasp the entirety of this new medium.