Designing an ecommerce website is big business, and it's now easier than ever for companies big and small to launch an online store.
Bespoke ecommerce site software – such as Shopify, which offers an amazing library of customisable templates – makes it easy to create beautiful and highly immersive online shopping experiences.
Here are 12 great ones that have caught our eye. So read on for some top web design inspiration...
01. Not Another Bill
The whole idea behind the rebuild for this site was to shift the Not Another Bill's direction from a gift subscription service to a full online store powered by Shopify. This is definitely a company that sets its sights high, and now it has a website to match.
The minimal design approach is about more than just looks: Rotate°, the London-based agency that designed and developed the site, explains that the stripped back UI is intended to let the products (and art direction) shine.
The site uses contemporary photography that wouldn't look out of place in a creative lifestyle magazine. These photos look their best as full background images. Check out the landing page and main gift pages: at no point do they slow down the impressive loading time of the site, delivering a positive customer experience.
Inspiring feature: The natural language filter makes finding the type of gift or product you are looking for easy.
This fantastic site for a small parfait shop near Tokyo looks simple at first glance, but on closer inspection it's a deceptively complex one-page design that uses subtle motion to turn a flat design into a unique and surprisingly dimensional affair.
Looped video is also used in a clever way, cropped into circles, showing the making of a luxurious chocolate dessert. Ultra-stylised photos of the restaurant and food complete the experience, with overlapping layers of visuals animated in staggered timing. It's a fun and inspiring treat.
Inspiring feature: Free floating buttons orbit the parfaits and link to masterfully-built, full-screen animations that transition to modal detail views.
03. Simply Chocolate
Simply Chocolate is a chocolate company based in Copenhagen, Denmark. A vibrant and fun site design gives each product plenty of space to shine. A parallax effect means that as the user scrolls down, a chocolate bar floats above the content, unwraps, and breaks into chunks.
Meanwhile the ingredients of each bar – coconut slices, almonds, mint leaves – animate gently in the background. These in-your-face effects work because there's only a little information displayed in the background at any one time, so it doesn't become overwhelming.
Inspiring feature: In-your-face parallax effects put each product front and centre.
Kvell is a contemporary homeware brand based in Canada, and its website is truly a thing of beauty. The homepage displays each range in situ, with the user navigating through by clicking the horizontal scrollbar.
They can also dive in to explore each range in more detail (the navigation at this point switches to vertical, but the style remains the same). The bright colours, bold typography and balanced product shots used throughout make this collection a joy to explore.
Inspiring feature: Consistent and appealing art direction is used throughout.
A great colour scheme paired with subtle animations gives this site both style and personality. Mouse over the little hairdryer and it bounces on its cord; hover over the icons at the top and a tiny animation gives you some feedback.
Touches like this make the site fun to use without being overwhelming or annoying.
Inspiring feature: Adding colour and movement on hover gives nice feedback and feels fun.
For a site with a diverse and large range of products – from fashion to furniture to kitchenware – the challenge is to make sure your users can find what they're looking for.
Where Nordstom excels is in its product filtering options. After choosing the general area they're interested in via the main header navigation, users can narrow down their search as much as they want to using further filters displayed down the left hand side. Features like these are essential for happy shopping.
Inspiring feature: Great product filtering options.￼￼
This site creates a fresh look by moving away from established ecommerce design patterns, placing images and text on a grid that feels much less familiar.
There's plenty of white space and each page contains a few simple images, making it seem a lot less busy than most of the web.
Inspiring feature: Great use of photography makes the products feel luxurious.
A blocky layout, bold type and strong colour palette give this site for a men's sportswear retailer a distinctive, memorable style.
Unlike many ecommerce sites, where an unusual aesthetic is confined to the homepage, the design here is consistent throughout – information on individual product pages is separated into a defined grid (price, colour, size, overview and so on).
Inspiring feature: Large, chunky menus are easy to navigate and satisfying to use.
Those who love bookshops but can't always make it to the high street can get a taste of a bricks-and-mortar bookstore on PRESS' website.
The 'Books and things' shop has a website that makes use of beautiful photography to mimic the atmosphere in a tranquil bookshop. Scroll down and the products appear in a striking black and white chequered grid.
Inspiring feature: Huge product shots let you get a feel for each book.
10. A Book Apart
While many ecommerce websites rely on large beautiful photography to sell their products, A Book Apart instead uses the block-colour covers to vividly display its series of 'brief books for people who make websites'.
This works especially well when displaying the entire collection of books, available as a bundle.
Inspiring feature: Makes the most of its simple, colourful book covers.
11. Ada Blackjack
Ada Blackjack is a brand of handmade bags and leather goods. While relatively traditional in terms of design and layout, this ecommerce website excels with its expressive use of large hero images. Photos are simple and clean, and let the product shine, as well as emphasising that it's quality that's the focus here.
When viewing a large version of a product on its individual detail page, the designers chose to move away from the traditional popup by overlaying the large image within the page. Click the plus icon to see the effect.
Inspiring feature: Simple photography shows off the high-quality products.
Land on the homepage of wallet maker Bellory and you'll be greeted with a relatively simple layout. Delve a little deeper into this ecommerce website and you'll find a wide variety of very different designed pages highlighting individual products. Incorporating fun demonstration videos, the Bellroy site is a great example of how flexible Shopify can be when presenting your products online.
The Slim your wallet tutorial is a fun and interesting guide to 'losing the wallet bulge', culminating in some rather nice photographs of the product and links to all its products.
Inspiring feature: Fun video demonstrations and an interactive guide.
- 4 top online shop solutions
- Instagram developing ecommerce app
- 16 great places to sell your design work online
- Empty list