{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Realism used to dominate digital design. Not any more. The world is flat.

At number one in Chris Lake’s 18 pivotal web design trends for 2014 is flat UI. For anyone new to the concept, here’s a brief introduction before we begin the cavalcade of smooth examples.

One word that has become one of my favourite ‘isms’ to bandy around the office like so much jargon confetti is skeuomorphism, the practice of making something artificial appear real.

Skeuomorphic design up until the end of 2012/early 2013 was everywhere. The clearest example can be found in the pre-iOS7 iPhone, where the Notes app was a yellow-papered, ring bound pad or the Newsstand app that looked like a rickety bookcase.

Apple has since ditched these old-fashioned links to the real world following on from the lead of Windows 8, which jettisoned 3D semi-realism for sharp, clean-edged tiles in 2012.

I’ve been interacting with the digital world for half my life now, I don’t need the comfort of a button on a desktop or mobile screen to look exactly like a button in the real world. The faster we consumers get used to this, the faster digital design can move forward.

The fast adoption of flat design has practical applications as well as aesthetic ones. With mobile devices becoming the primary screen on which we browse the internet, there is a growing need for desktop sites to utilise responsive design. Flat tile shaped sections on a site are much more adaptable and easier to shrink down and rearrange when viewing on different screen sizes.

Also without fancy graphics and animation, page load times are much quicker. Making your site more user friendly and accessible, and will ultimately improve its SEO.

If you want to know about flat design and its history, there is a gorgeous website called Flat Vs Realism that explains everything in a scrolling, animated and of course beautifully flat way.

Responsive:

The following ecommerce sites feature responsive design, therefore shrinking or rearranging to fit any screen size.

The Gadget Flow

Cat-nip for gadget-heads and flat design fans, this is a curated hub highlighting the best tech from around the internet, featuring direct links to product pages on third-party ecommerce sites and the ability to create a wishlist.

AB Aeterno

The only wooden watches made in Italy apparently. It's quite the specialty and this is a hugely informative, beautifully designed site with equally attractive and effective product pages.

Flat Guitars

Okay, so I'm only three examples in and so far there's probably only one and a half true ecommerce sites so far, however this is too brilliant not to highlight. Plus there are links dotted throughout to the individual guitar pages.

Gnarly

This Philippines based skate clothing store only has a handful of products, but it displays each one with rich clarity and huge images. Also make sure you scroll to the very bottom of the homepage for a secret treat.

Firebox

We've mentioned Firebox a few times on the blog as its a great example of flat and upwardly responsive design. David Moth interviewed Firebox's creative director Aaron Buckley last year.

Threadless

Again a perennial favourite on the blog, it just does clean responsive design so well.

7 Diamonds

A fantastic, comprehensive and diverse range of images on the product listing pages. The homepage has a great collection of large attractive images linking to various parts of the site.

Non-responsive

These examples are unfortunately not optimised for different sized devices, but I wanted to include them as they are great examples of flat design.

B&O Play H6

Drool-worthy tiled visuals that I dearly wish would resize to fit any screen, as I would love to see that little dance.

Rough Trade

Rough Trade recently redesigned its entire site and it's a gorgeous flat thing of beauty. I covered it last week in my post on record stores that need responsive design. That criticism aside, it's a great site with powerful search and a brilliant wish list tool.

Fitbit

Fitbit has a brilliant scrolling, subtly-animated lead-in to its ecommerce site...

Which then reveals the products on offer in a cunningly simplified and contemporary way.

Greats

Featuring product images that are some of the largest I've seen, this is ideal for an ecommerce store that maybe has fewer products to offer.

Dark City Gallery

There is an argument to suggest that making posters and records look attractive with flat design is like shooting fish in a barrel, and you'd be right, but you'll be surprised at how many similar sites don't look as sharp as this.

Lemon & Mint

This Swiss based site has a beautiful palette and simple tiled design begging to be made responsive.

With many thanks to AWWWARDS for some of these award nominated examples. 

For more on web design from the blog check out these 20 examples of beautifully persuasive ecommerce design. 

Christopher Ratcliff

Published 24 April, 2014 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

Comments (8)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Tim Radley

Hi,

Just wanted to say how exceptional your "best of..." features are.
Precise comments, great examples and a strong common theme that that me go off scurrying around the internet immediately.
Sites like Flat Guitars give you faith that great design is alive and that the internet is a medium that really supports this.

Thanks

Tim

over 2 years ago

Avatar-blank-50x50

Pete Fairburn

Fabulous site examples here. I particularly like the inclusion of fitbit's product page to show how the flat design ethic can progress passed just the "wow" factor of the home page.

I would be interested to know how these design perform in terms of conversions and revenue too.

We have recently relaunched www.blake-envelopes.com along similar lines - would love to know what the readership feedback is on it.

over 2 years ago

Avatar-blank-50x50

Charles Robinson

Some brilliant designs, but its a shame that Greats.com doesn't let you past the homepage in IE9.

over 2 years ago

Grant Kemp

Grant Kemp, Omnichannel and Mobile Practice Manager at Inviqa/ Session Digital

I must admit I am increasingly falling in love with the flat design ethos. Its harder to make simple look good, but when it works.. it really does.

I am really interested to see if it has a material impact on conversion.

One more that I would like to share that is increasingly one of my favourite recent projects we did was. Mainly because we got video in there too.

Head over to

http://fudgeurban.com/

over 2 years ago

Avatar-blank-50x50

Cheryl

Some great design inspiration and although flat design is very popular at the moment, ease of use should be the main priority of any website, which I feel fitbit have done really well

over 2 years ago

Ivan Burmistrov

Ivan Burmistrov, Usability Expert at interUX Usability Engineering Studio OÜ

It is commonly accepted among usability experts that flat design is much less usable than “traditional” design and because of this flat design must hurt conversion.

Two main problems with flat are:

(1) it eliminates affordances: buttons don’t look like buttons and entry fields don’t look like entry fields; a simple test (http://www.zebraa.nl/buttonforahero) shows that people click flat buttons 30% less readily than they click 3D buttons;

(2) flat design makes users think (unnecessarily): empirical research showed that even web specialists wrongly detect 30% of flat objects as clickable when they are actually non-clickable (http://blog.usabilla.com/flat-web-design-is-here-to-stay, see Section 4, “How usable is flat design?”).

Anyway, currently there is a serious lack of *quantitative* empirical research demonstrating that flat design is unusable. Such kind of research, with facts and figures, could convince the software owners and developers that flat style eventually leads to financial losses and should be avoided in principle.

I would be extremely grateful for sending me qualitative results supporting my strong belief that re-design of a traditional website into a flat style website leads to lower conversion.

I am also ready to conduct A/B usability testing of your ecommerce website in a lab if you would provide me with two versions of your designs: traditional and flat.

over 2 years ago

Avatar-blank-50x50

Arianna

Just love them all. I only believe that the website must have flat website design and must be also the responsive website so that it can support to all screen resolutions, mobile, tablets and Iphone etc.
Thanks

over 2 years ago

Avatar-blank-50x50

Jasper de Ridder

Thanks for the inspiring list! More e-commerce design inspiration can be found at www.inspirationalshops.com

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.