You Are Reading

OUGD501 - Theory Into Practice: RWD + Flat Design

Here is an article including examples of flat design used in responsive design.

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 discussingthe 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

FUTURE INSIGHTS

KICKSTARTER

TWITTER

UNITED PIXELWORKER

TV SAFETY

TEAM TREEHOUSE

STARTUP GIRAFFE

SPELLTOWER

ROCK WERCHTER

LORENZO VERZINI

INVOISSE

ETCH

BUILT BY BUFFALO

ALLAN YU

VIZIFY

LA CAROTTE

 

MYSPACE

OAK.IS

DESIGNED TO MOVE


Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.