Ecommerce websites are popping up all around us. Are all of them successful? No. Most fail. But why?
One of the most common reasons is that they do not put the needs of the user before the ideas of the business.
Good user experience is one of the key features of any successful ecommerce store, and without taking care of this one aspect, you're in an uphill battle to drive sales. And how do you provide great user experience? By perfecting your ecommerce website design.
Here are my favourite ecommerce websites of 2018, compiled from our entire ecommerce website database.
These websites should give you an idea of what elements you should be focusing on, and some pointers on how you can provide rich user experience through additional website features and good themes.
Below each website we have listed one unique key takeaway from each website that you can implement on your store today.
Inspiration: The Top Ecommerce Website Designs in 2018
1. Modus Nutrition:
Modus Nutrition’s homepage focuses on the why and benefits of the product instead of jumping right into the latest sale or promotion. What's interesting with Modus Nurtritions website is that they they use long scrolling. This technique is used to not fatigue the user when scrolling through their home page. New information is populated and looks interactive when the user moves down the page resulting in a beautiful ecommerce website design.
Key takeaway: Long scrolling can reduce user fatigue
2. Rebecca Atwood:
Rebecca Atwood is a Brooklyn-based textile designer with a shiny ecommerce experience. The final product is a bespoke online store that looks as beautiful on mobile as it does on the desktop. The design showcases the products in use which builds an aspirational picture in the users head, as they can see the product in action.
What the website does well is that they offer a click to buy option, similar to what you see on Instagram where you can instantly be transported to the product page.
Key takeaway: Click to buy
Mulberry is a bold company with a striking ecommerce website design. You see big colorful photos and fewer words with this type of website design. If you are looking to design a high-end fashion online store then Mulberry is the perfect place to draw inspiration.
Mulberry's zoom to hover technique on images prompts the user to click the item and also highlights the high-resolution quality of the imagery. If you are familiar with CSS or want to pass this to your web designer here's a simple how-to guide.
Key takeaway: Zoom on hover
4. The Sill:
With appealing colors, this website gives off a very clean, simple, and cheerful feeling. The Sill believes that plants make people happy, and so does their online store. The entire site is crisp and refreshing and has a beautiful nature vibe.
The header menu is very clever and it's one of my favourite features on this list. The gap between ‘The' and ‘Sill' is done so to mirror the name of the company. As you scroll down to look at the products the words come together and the other options move to the right.
Key takeaway: Interactive mega menu
One thing that really makes The New York Times Store website stand out is the organization and typography. The fonts perfectly represent the New York Times brand. The different product options are laid out in a clean grid making browsing and shopping a breeze.
What they also do well is that they bold the typogrpahy for their Best Sellers and Sale items in the header which is subtle, but automatically draws your eye to the products.
Key takeaway: Easily identifiable typography
6. The Owl:
The reason Owl is on the list is their strange take on ecommerce website design. The homepage is not what most online stores look like. That’s a not a bad thing as it makes their web design creative. Creativity helps stores stand out. Doing something a little different can help your bottom line a lot.
Their homepage is very minimalist and they have a video which plays automatically to highlight their products. Again it's very edgy and almost enchanting. Due to their minimalist design, the video won't affect load speeds for users to the website.
Key takeaway: Automatic playing video on your homepage
7. Baron Fig:
This ecommerce website design is full of great design elements. The first is the minimalistic and sharp photography. The second is the fun graphics and catchy phrases. The color scheme correlates and compliments the product. If you’re looking for a site that uses a variety of elements to create one cohesive feel then Baron Fig is perfect for you.
Slightly below the fold of the homepage, Baron Fig display a rolling display of snippets from press articles from companies such as GQ, Buzzfeed and New York which instantly grab your attention.
Key takeaway: Carousel of comments from the press
Beacon is a collaborative design project selling posters for good. The website looks like an online art gallery. The products are displayed like actual posters hanging on a wall. The design is simple with very little text and no unnecessary menus.
Via some HTML techniques Beacon also have the background images move which grabs your attention instantly.
Key takeaway: Moving background images
Scrolling through the Packwire homepage is an exciting adventure where you don’t know what is going to pop up next. The design features are completely different than any other site. There are fun pop-ups and sliders covering the whole website. Packwire have built a sexy website for a very unsexy business.
Due to their complex design and animations, the page load speeds can be quite long. However, Packwire has used a box unpacking and packing itself to indicate that the page is loading. It's unique to the business and makes the waiting time far less laborious.
Key takeaway: Unique loading icon
10. Caroline Z Hurley:
The large stunning photo on the Caroline Z Hurley homepage sets the feeling for how the rest of the website design will be. The fun and simple photography sell the product without even trying. Customers are not bombarded by product options.
The lady in the picture is clearly admiring the product so much that she doesn't even realise the camera is there. It really detaches from the cheesy and standard stock images of somebody smiling at the product.
Key takeaway: Out of the box photography
Beatific uses a wide variety of digital content such as photos, animations, and illustrations to successfully convey its message. The color scheme and fonts create a young and playful brand that is evident throughout the entire site.
This young and friendly feel is reinforced with the Facebook Messenger plugin attached to the site. If you are already connected to Facebook you can message somebody instantly for help. You can connect to this website today via the customer chat plugin.
Key takeaway: Connect Facebook Messenger
12. Storm London:
Storm focuses on demonstrating the high quality of their watches. As soon as you are on the homepage of this ecommerce website, you are greeted with descriptions and photos of each watch. The amazing design of this website highlights even the smallest of details to entice the potential buyer.
So much so that Storm don't actually include the footer on their homepage, because let's face it nothing of interest is in there. So as not to draw attention away from the product you can to click a plus sign to extend the footer.
Key takeaway: Expanded Footer
13. Wolf Gang:
The thing that makes the Wolf Gang website unique is the dark and heavy design. Many sites adopt a more bright design with vibrant colors, but Wolf Gang is the complete opposite. The typography is bold and in your face. The site grabs your attention right away.
What Wolf Gang also do well is that they take the fatigue out of scrolling. With one flick of the ball in your mouse and you auotmatically move to the next section, very clever.
Key takeaway: Section scrolling
MSMG is the classic example of using vibrant colors and photos.
What struck me most about the MSMG was that the mouse cursor turned to an M. Yes, you maybe thinking at this point that is very 1990's! Yes it is, but people love nostalgia and a throwback. Is it time to embrace that for your website?
Key takeaway: Embracing retro
A.N. Other uses a sticky button that keeps the company name front and center no matter where you go on the site. The overall design is classy yet unforgettable. It offers a grid-like design which easily draws the eye from one thing to the next.
Their website is split directly down the middle. A.N. Other simply rotate the text and images to keep it interesting, this makes the website so much easier to look at, rather than some website that have no symmetry or order.
Key takeaway: Even sections make for a cleaner design
16. Two Chimps Coffee:
The brand's uniqueness shines through as Two Chimps number one priority. The hamburger menu has a rare design and pops up. The entire site is full of distinct features.
When you try to the leave the website you are met with a “Please Don't Go” pop up with a call to action (CTA) that says “Gimme Some”, it's very playful and beats the very unoriginal “add to basket”.
Key takeaway: Clever CTA's
17. Not Another Bill:
Not Another Bill is a great example of an online store design that stands out in the crowd. Their products are beautiful and clean. The website design makes use of color of the products and white space in the background to show off the artistic products.
They build themselves on being a website that offers unique gifts. This is highlighted by their drop down on the homepage which takes you directly to the product you desire. For example within two clicks you can find ‘Greeting Cards' for ‘Teenagers, this really simplifies the process.
Key takeaway: Simplify how people find your products
Sense6‘s lack of color makes it stand out from the crowd. The entire site is mainly in black and white. The very few other colors used on the site are intentional and minimal. There are small pops of gold to direct the eye to certain menus and buttons.
Key takeaway: Less is more with colour
19. Manolo Blahnik:
Manolo Blahnik has a career spanning over 40 years, so their website needs to reflect how prestigious they are.
When you scroll down the page, it resembles a catwalk which is very in keeping with their brand. Manolo has created a shadow effect behind their products as well, which is quite unique in this list.
Key takeaway: Use a shadow effect on your images to add impact
20. Native Union:
The sliding banner makes the website interactive for the user and easy to navigate to the different pages. The use of images throughout the site is more engaging than text alone and better represents the products. Photos of the products are front and center leaving the user with fewer questions.
When you use the Native Union header menu the sub producuts are highlighted without you having to click them. An additional benefit is that icons are used for users to easily identify what they will be clicking on.
Key takeaway: Use icons to display products
Photography is an important aspect of any ecommerce site, but what makes MyFelt different are the cute and comical photos. They are less professional and more fun. The photography used throughout really sets the tone for the rest of the website.
As you can on the right hand side a little logo sticks on saying “GoodWeave” this is a charity that MyFelt work with and it follows you down the page. Users are more likely to get on board with companies that are charitable.
Key takeaway: Do you give to a good cause? Highlight this on your pages
Myro's product isn't much to look at, it's essentially a recyclable refill pod, so creating a lifestyle around their product and bringing it to their life in their website design is vital.
To display the simplicity of their product, Myro use an interactive gif below the fold of the homepage which really etices you and highlights the use and effectiveness of the product in a matter of seconds.
Key takeaway: Use interactive gifs to show your product in action
Infographics are a fun, yet effective way to describe a product and business. It breaks it down for the customer and makes it enjoyable to look at. Kaffefamiljen is the perfect example of properly using infographics to draw in the user.
What they also do well is use language such as ‘your coffee', ‘welcome to the family' and ‘what best suits you'. You really feel a part of the brand when a company does this.
Key takeaway: Use inclusive language in your website design
Emersion is a simple yet stunning design. It features seven different scrolling pages. Each page is similar with a small amount of text and an illustration. The very few design elements that are used create major impact.
Although this may not be too relevant on your website but Emersion use pagination in the bottom right-hand corner to inform the user how many pages are left. This ensures that the customer isn't getting frustrated.
Key takeaway: Uses pagination to sort fatigue
25. The Burren Perfumery:
The Burren Perfumery relies heavily on lifestyle shots of their products. There are beautiful photos of their perfume being made and used. The composition of the photos is great. Did you notice their fun font too?
Burren's homepage website design is set up so users automatically buy into their brand. The lifestyle photography teamed with their story is a fantastic tactic in drawing people in.
Key takeaway: Explain your business and get customers to buy in to you
26. Via CopenHagen:
The landing page of Via Copenhagen does not continuously scroll, but instead completely changes pages as you scroll. It is bold and choppy, making each product jump off the screen. The neutral color palette is stunning.
Key takeaway: Replace whole pages with a scroll
27. Save Khaki
Save Khaki's design is very minimalist, with a strong emphasis on imagery which stretches the width of the page.
You may read articles and reports on why it's not the best idea to use a carousel on your homepage. It's been reported that it promotes mixed messaging and it gives the impression that the store don't know what they want to showcase.
However, done right and it can give your website a great asethetic. Save Khaki don't push different messgaes they use it to highlight their products in every day use, while the Men's Shop and Women's Shop options stay static so people can decide to shop whenever they choose.
Key takeaway: Use carousels to promote your different products
28. Buffy Comforters:
The background photo makes the user want to jump right on that couch and snuggle under the Buffy comforter. Buffy claims they are the fluffiest, softest, and lightest comforter ever and the website makes it more than believable. It sells the product effortlessly.
Additionally as soon as you begin scrolling, Buffy offers a discount code as a pop-up. This is an obvious technique but is very effective.
Key takeaway: Pop-up with discount offer
29. 450 GSM:
450 GSM does not have a fancy website. It is practical and ideal for the business being presented. 450 GSM goes to show you don’t need to go overboard to have a good looking website. It’s okay to be simple and easy to navigate.
If you find that your industry isn't typically then the most interesting then don't try and make something it isn't.
Key takeaway: Less is more
The layout of the vintage artefacts is great. The different artefacts are aligned in a neat grid making browsing easy. The use of whitespace around each product square makes the site feel clean and organized. The photos convey the charm, character, and story of each piece.
Again this is a great case of how nostalgic products can perform well. People love the past and Only/Once's simple design lets the products do all the talking.
Key takeaway: Bring retro up to date is very popular
The ecommerce website design of Aesop focuses on the beauty and naturalness of their skincare line. It’s made up of close up photos of the product and its packaging. This ecommerce website is a good example of how to photograph beauty and skincare products in a sophisticated way.
This is sophistication is backed by how much breathing room they give the products. Most companies focus on a massive logo and giant menu. Let's face it, customers don't care about your logo and they will look for your menu, it shouldn't dominate the page.
Key takeaway: Big menus and logos aren't important
The landing page is specific to MAKR yet interactive to the user. It features rows of different leather products that change color as the user hovers over them. This not only showcases the different products and colors but sparks interest.
Also it shows how different products will look teamed up with different clothing. People may like a product but how will it fit with what they are wearing? It's worth bearing in mind.
Key takeaway: Showcase your accessory items with different clothing
42/54 uses vibrant colors to their advantage. This ecommerce website does not shy away from flaunting bold background colors. But notice that their overall ecommerce website design is pretty light in general. The bright colors are small accents.
Similar to previous websites mentioned here, 42/54 show that a header menu isn't initally important. The menu only comes in to place when you scroll down, which gives extra emphasis to the Fall/Winter collection they are promoting and increases the click through rate.
Key takeaway: Bring in a main menu after highlighting your products
34. Simply Chocolate:
The design of this Denmark based chocolate company ecommerce store gives enough space to let each of their products shine individually. When you scroll down the page, a new chocolate bar floats up in the middle of the page, with each chocolate bar taking an individual color theme, and a fun name.
The website design of this ecommerce store is one that can’t be compared to many others in this list. The menu is actually sideways for a start. What they do well is that the background images help to tell you more about the product. Rather than using words, Simply Chococlate just use images of strawberries and nuts.
Key takeaway: Use your background imagery to describe your products
35. Dimension Volumes:
The most notable thing about the Dimension Volumes ecommerce website is the bold typography. The large font grabs your attention and creates dimensions to the entire site. The font is just a little bit thicker than you usually see online. It makes the website design stand out even further.
Key takeaway: Don't be afraid to be BOLD with your text
36. Teenage Engineering:
Teenage Engineering has one of the best-designed ecommerce websites in engineering. It looks exactly how you would expect an engineering site to look, but also has a young, modern feel to it. The black background and white font make it stand out.
They also are repeatedly using lower case lettering which is definitely a trend that more businesses are adopting to attract a younger audience, who favour it.
Key takeaway: lower case is in. ok
Vipp sells minimalistic household items. Their website follows suit with a minimalistic design. The products are beautifully organized, but not in a boring grid view. This site shows that it’s okay to stick to the basics sprinkled with a few fancy features.
What I like about Vipp is the way hey highlight their prodcut in use after you hover it. Users like the polished studio photography and it being used so give them both options.
Key takeaway: Team your studio photography with lifestyle photography
Staud is another example of ecommerce website design that uses bright colors. The colors are used in photos, the product, as well as backgrounds. The text is all in white and black. The balance here is very good.
What STAUD do well is that their pop-up offer stays sticky on their webpage on the right-hand side. Most people can and will click off pop-up offers so keeping it in their vision is important.
Key takeaway: Use a sticky right-hand menu widget to advertise your welcome discount
39. Mallika Favre:
Malika Favre is an in your face website design. It completely eliminates the use of white space and uses bright colorful graphics on the entire screen. This ecommerce website design is both memorable and creative.
Another great usage of interactive imagery, Mallika have the price display when the user hovers over the product.
Key takeaway: Display prices and product names when users hover over
Verk’s home page focuses a lot on the purpose, the engineering, and high standard of the product. They do not jump right into selling their goods. They talk about quality and pride instead of the latest sale or promotion. The entire tactic shows the customer that Verk cares about each and every one of their watches.
Verk advertise their watches as “minimalist”, so it's unsurprising that their website reflects this. They are a company who are very aware of their brand.
Key takeaway: Ensure your website mirrors you brand
Obscura organized all the product photos into a unique grid design with all the important text right on top of the photos. The homepage is beautiful with very minimal text. All the text and information is nicely hidden away in a hamburger grid on the left.
Obscura's mega menu is great in its design. You can drop down 3 levels to a product but at the same time it doesn't feel overbearing, due to the fact that the menus have been designed differently.
Key takeaway: Don't be afraid to have your mega menu go to a sub-sub-section
42. Charlotte Stone:
This is an example of a women’s footwear ecommerce store with a very soft designer look. The main colors you will see here are light pink, yellow, and white, accompanied by soft patterns. This ecommerce website design goes well with the product that they are aiming to sell. It feels very feminine and fresh, with the font matching the rest of the website’s look.
What Charlotte Stone do well is that they don't force sales on you. They just want to get you to sign up for their newsletter, they do this by changing the colour of the background every few seconds on the sign up form.
Key takeaway: Draw attention to your sign up forms by changing the colour
43. Minna May Designs:
As a business that specializes in hand lettering and illustrations, you would expect to see similar techniques on the Minna May website. The site features gorgeous fonts, light colors, and dainty imagery. The design behind the company comes out in every aspect on the website.
What's different about Minna May to the other shops is that they sell their products on other platforms. However, they use their website for extra design functionality and to highlight their story.
Key takeaway: Use your website as a portal to your Etsy store
44. Réard Paris:
Reard showcases their swimwear in a unique and different way. Instead of the swimsuits being laid out in the typical grid, they are organized by threes on a slider. The price and other information are not focused. The site also uses large amounts of white space to direct the eye.
Key takeaway: White space isn't waster space
Bacca sells handmade wooden laptop stands. Their ecommerce website design is full of great design elements. The first is the fun colors and graphics you see at the bottom of their homepage. The second is the quality photos of their stands. Notice that the stands are alone without anything in the background. This helps the product stand out.
Key takeaway: Use plain backgrounds for your images
46. Umbra Shift:
It’s not uncommon for website homepages to go on forever, filled with all kinds of information and photos. Umbra Shift takes the complete opposite approach. It has a very short homepage giving it a less overwhelming feeling. This helps the customer feel more comfortable.
Umbra use space very well and their products dominate their hompage, this ensures that they will look big on any device.
Key takeaway: Use the full width of your website
The photography on Fitzy is absolutely superb.
A quick scan of their website and you can see passport wallets displayed at breakfast tables, a cherry blossom style bag amongst cherry blossom trees and belts surrounded by the materials that made them.
Handmade products and the boom of etsy are massive in the ecommerce world. What Fitzy do well is they display this as their tagline and reinforce this throughout with their close-up photography.
Key takeaway: Sell handmade products? Give authenticity by displaying how you made them
48. Read Only Memory:
Read-Only Memory published books about video games, so it only makes sense to have a website with a video game-like design. Similar to the company, the site is the perfect mix of video game and book designs. It features a big block grid-like system to organize the products.
Another good use of a sticky menu here, this time on the product pages where the add-to-cart and checkout options follow you as soon as you click a product
Key takeaway: Use sticky menus on your product page to help your conversions
49. Good Moods:
Good Moods is one of the most aesthetically pleasing websites. It is a perfect mixture of bold and bright, yet soft and tender. It features beautiful lifestyle photography. The color palate has a calming nature about it.
Good Moods have over 15k followers on Instagram and by looking at their website you can see they are big on photography. So if you have it flaunt it, integrate your social media platforms in to your ecommerce website design
Key takeaway: Highlight your Instagram if you are big on photography
50. Really Well Made:
Really Well Made’s website is, well, really well made. If you are looking for a good example of how to incorporate your social media feeds then this site is the perfect example. Really Well Made showcases their Instagram feed right on the homepage. It is an excellent way to build customer confidence.
They also highlight their blog vividly on their homepage. The articles are fantastic and help them to highlight photography that they may not use on their product pages
Key takeaway: Highlight your blog where you can be less salesy, people will appreciate it
That sums up our roundup of the top ecommerce store designs of 2018. Feeling inspired?
Just remember this, It's not about how we want the site to look. It's about how it should look for them, and how easy it is for them to buy. If you'd like to take the easy route, you can simply use an ecommerce platform like Shopify or Bigcommerce and make use of the great themes they offer.
Have you come across any other ecommerce website designs that you love? Let's talk in the comments below!
Feature image by Maria Ivina