blog home

The Rise of “Flat” Design

posted on Thursday, May 16, 2013 by Josh Wilkerson

flat-designBy now, most people have probably heard of the term “web 2.0.” But for those saying “huh?”, let me bring you up to speed. In the early 1990s, websites were clunky and boring by today’s standards. Images were small and low resolution partly because of limited digital camera technology and slow internet speeds (remember the awful dial-up modem sound?).

Now fast-forward about a decade. As technology advanced and CSS (cascading style sheets) became prevalent, the era of “web 2.0” began. The release of CSS 2 and newer versions of graphic-creating programs, such as Photoshop, gave web designers a new set of tools and the freedom and ability to create webpages that the early adopters of HTML could have only dreamed about.

Visually, “web 2.0” was defined by the predominant use of glossy buttons, color gradients, drop shadows, rounded boxes and large, busy background images. Until then, web designers had been pretty limited in the “visual department.” Like a kid on Christmas morning, they were excited to play with these new “toys.” I call this the “Hey, look what I can do!” era.

The bold new look of the web was definitely a welcomed change from the lackluster style of early websites, but like any good thing in life, such as an all-you-can-eat pizza buffet, too much of it can leave you with a stomach ache and indigestion (ok, so that analogy didn’t exactly work out).

Throughout history, most artistic movements were born out of a desire to revolt against or counteract the previous one. This principle holds true in web design. In the last few years, there has been a shift among web designers to eliminate the extraneous and often gratuitous use of “web 2.0” elements. Designers have been focusing more on the content and the intended use of the website and using the visual style to enhance the user experience rather than simply adding a drop shadow or gradient just to keep the status quo.

Adopting this attitude towards web design forces the designer to determine which elements are most important to the user and direct attention to them with visual, stylistic elements. Traditionally, this may have been called “minimalism,” but in the past few months, the term “flat design” has emerged.

In general, a website utilizing a flat design will be minimalistic, but not simply for the sake of minimalism. Rather, it’s minimalistic with an emphasis on user experience or usability. Legendary American graphic designer Milton Glaser once said, “Less isn’t more; just enough is more.” Applying this concept to a website will result in a design that is well thought-out in its purpose and careful planning will be given to the visual elements to create a fluid and natural experience for the end-user. While flat design hasn’t been crowned as “web 3.0,” as the web moves forward, more websites are following this trend.

A successful flat design eliminates unnecessary visual information and emphasizes the elements that are most important. It also recognizes the limitations of its medium and develops a visual style in order to enhance the user experience rather than simply trying to design an arbitrary aesthetic. Below are three well-known business-to-consumer websites that have made steps towards a flat design and examples of their evolution in the past four years.

AOL

2009

aol-2009

2013

aol-2013

MICROSOFT

2009

microsoft-2009

2013

microsoft-2013

SKYPE

2009

skype-2009

2013

skype-2013

While there are different degrees of flat design, I believe its approach towards usability and visual hierarchy should be important in any website. Here at DVL, we strive to discover our clients’ best features and use our resources to highlight that information in a way that is timely, visually responsible and reaches their target audience.

Tags: , , , , , , , , , , , , ,

  • Andrew

    Is flat design a temporary trend? I recently wrote an article about how design is becoming flat because of 3 reasons:

    1. An Informed user

    2. New HTML 5 abilities

    3. Cross browser/device capability

    Tell me what you think: http://www.andrewcoyle.com/blog/2013/06/06/what-is-flat-design/

  • http://ludovicurbain.blogspot.be/ Ludovic Urbain

    AOL is definitely far from flat or minimalist.

    Design is just becoming flat in response to an era of useless fake 3d buttons with lighting effects and image carousels with a useless mirror.

    It’s just another trend though.