In some ways, a flat UI represents less information than one with depth.  The ultimate extension of this is this quick bookmarklet which can make many websites "flat" just by adding a bit of CSS (skip down for the source):

Drag This To Your Bookmarks Bar

Some Examples

GitHub

Github

Twitter

Twitter

The bookmarklet works in part by removing background images. Websites need to define a good background color behind their images, if they don't, you might see some unexpected things:

Pandora

Screen_Shot_2013-11-06_at_11.31.52_PM

Source

var d = document.createElement('div');
d.innerHTML = '\
<style>\
*:not(.icon):not(i), *:not(.icon):not(i):after, *:not(.icon):not(i):before {\
box-shadow: none !important;\
text-shadow: none !important;\
background-image: none !important;\
}\
*:not(.icon):not(i) {\
border-color: transparent !important;\
}\
</style>\
';
document.body.appendChild(d);

Follow @adamfschwartz on Twitter

Recommended Articles

Join our subscribers

Sign up here and we'll keep you updated on the latest in product, UX, and engineering from HubSpot.

Subscribe to the newsletter