20 Great Responsive Websites that Use “Flat Design”

March 11th, 2013 by Chris Olberding

Last month, our Creative Director Chris Olberding was featured in Web Designer Magazine discussing the end of Skeuomorphisim in 2013. He details a shift away from skeuomorphisim and towards the look and feel of the heavily marketed Windows 8 brand, which is entirely based around the ‘flat’ design trend. Flat design is the practice of removing dimensional realism from visual elements. No drop shadows,  leather textures, shiny surfaces or notepad backgrounds. Flat design is strongly based in typography and color, which lends itself to another popular trend in 2013, scalability.

Today, responsive websites and flat design go hand in hand. With the control that a designer has in CSS3, HTML5,  and JavaScript  creating a beautiful looking website that easily scales to fit multiple devices is much easier than it has been in the past.  Flat designs can use background color, scalable type, and flexible images to alter the design into different sizes. The benefits of this flat approach in responsive layouts means that you create less images per breakpoint, which can also increase page load speed.

Below are a few examples of responsive websites that are using flat design aesthetics.

Fresh

freshproduct.at

Future Insights

futureinsightslive.com

Kickstarter

kickstarter.com/year/2012

Twitter

2012.twitter.com

United Pixelworker

unitedpixelworkers.com

TV Safety

tvsafety.org

Team Treehouse

teamtreehouse.com

Startup Giraffe

startupgiraffe.com

Spelltower

spelltower.com

Rock Werchter

www.rockwerchter.be

Lorenzo Verzini

lorenzoverzini.com

Invoisse

invoisse.com

Etch

etchapps.com

Built By Buffalo

builtybybuffalo.com

Allan Yu

allanyu.net

Vizify

vizify.com

La Carotte

 

lacarotte.be

Myspace

myspace.com

Oak.is

oak.is

Designed to Move

designedtomove.org