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.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: