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.
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.
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.
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.
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.
Again a perennial favourite on the blog, it just does clean responsive design so well.
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.
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 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 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.
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.