23 Excellent Examples of How to Design Online Stores

Online stores can often be confusing and hard to use which can turn potential customers away. There are some very simple things you can do to keep your users focused on your site. Here are some great examples of sites doing just that.

CafePress

cafePress

Good use of top navigation, highlighting the relevant section that the user is currently viewing. Good use of colour to ease usability.

The Mozilla Store

mozilla

The Mozilla Store creates a fun, creative feel to their online store with related sketches in the header and clear navigation on the left makes it easy to find products.

HMV

hmv

HMV’s store almost jumps out at you due to the shadows either side of the content. Space for promo offers in the header to catch the users’ eye and big, bold and clear navigation.

Nerve Music Store

nerve

Nerve uses an unconventional method of dragging items to the shopping cart on the right but a big ‘Drag Stuff Here’ button above the cart instructs users what to do.

Taste Book

tasteBook

Taste Book gets across the message of what it is very clearly on the homepage followed by a big distinctive button indicating that it’s free to join.

Blooming Gorgeous Flowers

bloomingGorgeousFlowers

A design that displays the elegance of flowers with the use of vector illustrations as well as good photography. Great use of icons in the footer and for the basket in the header.

General Robots

generalRobot

Clean graphics and good use of colour shift the visitors’ focus to the products.

Bambino Direct

bambinoDirect

Fun colours directly relate to the products that Bambino Direct sell.

Blooming Direct

bloomingDirect

Blooming Direct’s store is ordered into three columns. On the left is the secondary navigation, in the middle is the content with the primary navigation on the top and on the right is the basket and space for offers.

Steam

steam

Layout makes good use of whitespace especially in the left column which contains the navigation and categories. Use of colour to easily distinguish between what is and isn’t clickable.

Feel Unique

feelUnique

Very clear navigation through the use of tabs and login section on the left for easy access for returning customers.

Big W

bigW

Big W uses a very clean and uncluttered design that makes great use of whitespace making it easier for the user ti understand how to navigate and use the site.

Northern Tool + Equipment

northern

Colours and design reflect the products on sale giving the users more of an association with the store.

Makoosh

makoosh

Bold colours which translates into a bold and easy to navigation. Use of a big promo area and a recently viewed items in the ‘My Account’ section on the right giving the user the ability to see what they looked without remembering exactly where it is located.

REI

rei

Another great example of top navigation but with the colour changes dependent on what section that the user is viewing.

Boots

boots

Boots uses a promo area that cycles between three different images with a very clear indicator to show which image it is on. It even includes a pause button so that the user can stop the auto-scroll and take in the message.

Schwan’s

schwans

Big imagery allowing the company to promote specific items and draw the users’ attention to them.

Apple

apple

Apple really keeps the focus on the products with little distraction elsewhere. It’s complete line-up of major products are displayed in the top two rows of the store.

Play

play

Play makes it very clear which section you are visiting due to a clear tab system. Promo area in the middle updated regularly keeping the customers coming back to new content to keep them interested in the store.

Game

game

Clearly defined sections with big message in the header notifying of free UK delivery which can be a great incentive for people to place an order with them rather than a competitor who charges even a small fee.

Etsy

etsy

Etsy gets across the message of what they sell with a big tag line placed underneath the logo.

QVC

qvc

QVC displays a message to users who haven’t visited the site before. This allows them to send out an introduction message to welcome new visitors.

Threadless

threadless

Great imagery of the products in use by people which is a fantastic way of presenting items.

Author Tom Kenny

I'm the creater of Inspect Element and currently work as a web designer for TUI Travel. You can view my portfolio and follow me on Twitter.

Discussion

  1. Lucas Tadeu says:

    Nice collection this one ;) . I was kinda interested in this kind of design.I think I found what I needed, thaks for the post.

  2. Sara says:

    Great collection! I’m glad that Etsy is featured – I think they do a GREAT job. I’m surprised that Target isn’t up here as one of the greats. Especially since they’ve won e-commerce awards in the past.

  3. Ian Lawson says:

    Awesome list! Although I’m a little embarrassed to say it, I think the QVC site is fantastic.

    Another one I have always loved is: http://www.panic.com/goods/

  4. Derek Tan says:

    Inspiring thanks!

  5. Hmmm, no doubt some of these work well, but which ones? What few commentators do is take the time and effort to ask how much these companies sell from their “great” stores. An ecommerce website design is “excellent” if it works (ie sells stuff). This is like listing the 10 best cars without driving them and seeing how they perform in their sector. It’s lazy, sorry.

    Anyone can pick some websites and say how good they are – let’s see the figures! (Must throw Apple in to keepn the mac crowd quiet). For example… RYANAIR.com is an excellent site, it does its job – but the chattering weberati will yelp all day long at how “awful” it is.

  6. Not really sure why you “singled” out these 23 sites .. So many good great and clumsy shops out there – what really makes the difference is how they interact with customers and ease of ordering and finding what you want.designers love slick sites because they can showcase their art, but at the end of the day what’s important is a site that closes the sale, something that far too many sizzle sites overlook.

  7. Here’s another: the most amazing UI I’ve ever seen for an online storefront (drag and drop shopping cart, sliding panes, lightbox, etc): http://kayosmarket.com

    Full disclosure – I built it :P It’s still pretty awesome though!

  8. @Ling: Really, RYANAIR.com? RYANAIR.com is just plain ugly and riddled with adverts. I think RYANAIR.com does the job because the rates are so incredible. It definitely has more to do with the business model than the actual design.

  9. Muito boa lista. Gostei bastante.

  10. Craig says:

    There’s a good article about rebranding an e-commerce site that I found the other day.

    Nice list, btw.

  11. @matthew, yes Ryanair :) Look, everyone can oooh and aaaah at “beatiful” sites (in sort of mac design terms) but what customers want is something that works.

    “Excellent examples of design” can only be true if the sites do their job, and whoever compiled this page has not bothered to analyse how the sites perform, in dollar (or pound or euro) terms.

    If some of these sites do not create profitable business, how can they be “excellent” in any way? Just because they have perfect code or css or validate or have beautiful colours means nothing. Good design alone does not buy food or create employment.

    Ryanair.com works fantastically well. Is functional, but is also excellent.

    - Ling

  12. Kervie Mata says:

    Beautiful websites. As much as people downplay design in marketing, poor designs will destroy the product no matter how good the product is.

  13. Rob says:

    I have to say that wwww.bambinodirect.co.uk is a particularly good example.

  14. Kelly Smith says:

    Inkd is the first marketplace to buy and sell print designs and Smashing Magazine profiled us as a good example of e-commerce usability and conversion. Check the article here if you are into this kind of stuff: http://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/

  15. Ben says:

    Amazon not on the list??

  16. Thank you for sharing good articles, posts and more are waiting, in respect

  17. garry says:

    I must say play and blooming direct are my favourite sites. I think the use of photoshop graphics and calls to action work well.

  18. Josh Barbara says:

    Great examples, Apple always have a great setup… very easy to navigate. Play is a great site but there is often alot going on as they have so many offers.

  19. Some good examples above of well designed online stores. It’s shocking that so many e-commerce sites still fail in this department and make the buying process so much more complicated than it needs to be. Thanks

  20. Good examples of well designed stores! Top navigation is defiantly a key factor, and of course first reactions to the site! Good post

  21. Maurice says:

    Not exactly an online store – but a great site with clean layout and easily findable catalogues from leading Australian retailers that has let to many an offline purchase! htpp://www.lasoo.com.au

Become Part of the Discussion

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.