Designing a blog, or a personal website is one thing. You sort of still need to worry about general design aspects, usability and website functionality, but not as much as you would when it comes to designing an eCommerce website.
An eCommerce store needs to resemble a real physical store, meaning that everything should flow naturally, everything should be accessible and easy to navigate, not to mention — easy to purchase. Of course, over the course of the last couple of years, creating a spectacular eCommerce store has become less of a problem. Even here at Colorlib, we have covered eCommerce extensively: best eCommerce themes for WooCommerce users, a free collection of the best eCommerce themes for WordPress that have been built with Bootstrap, and also a selection of eCommerce PSD templates to give you the freedom to code your own design from scratch, using a pre-inspired design.
Although very important by itself, only having great quality product photos on your online store isn’t going to do the full trick. You will want to make sure that customers browsing your store are able to refine and explore their options for productions through a seamless form submission, much like a digital catalog. Design your store so that the search bar is never hidden and is always clearly presented, people love to search for things they get new ideas for. Always mention the availability of items, there’s very few things more frustrating than doing a checkout process and getting a message ‘out of stock’. Create your design through questions, whenever you plan to add a new element or a new feature, ask yourself what is the reason behind doing it, and what benefit it will bring to the design. Don’t forget to incorporate good practices of search engine optimization, the most organic traffic source you’re going to cultivate. We could go on for hours, but instead of doing that, we will instead outline some of the most inspirational, well-designed, and appealing web designs for popular brand eCommerce stores.
Mahabis originates from London, a famous world location for fashion, and modern clothing design. Londoners love to express themselves through their physical appearances, and it’s brands like Mahabis that keep this movement alive. The values of Mahabis are beauty, simplicity, and functionality. 80% of world’s operating countries have customers for Mahabis clothing catalog, and the website that they operate from plays a big role in that achievement. Their flagship products is comfortable and modern slippers that are being manufactured in countries like Portugal. The features of the store allow anyone to explore different colors sets, and learn in-depth of what makes these slippers so unique and so admired all over the world.
The Obey Clothing line has managed to capture the attention of a large population of millennials, coming out around the time when most were in their early ages. Since the inception of the line, it has grown into this massive movement of creative artists and street art fans that serve the skateboarding and punk-rock scene. OBEY is for those who love to express themselves uniquely and passionately. The Obey online store isn’t a complex design, it’s a minimalistic approach towards putting the product in the eyes of consumer, and concluding a sale effortlessly, the same couldn’t be told about physical OBEY locations which tend to be more lively, and hip at the same time. The black on white design here works really well. In the checkout page, you have a few selection of sizes and colors, and the checkout button is fairly straightforward.
Polo Fangio makes some really sick Polo shirts, all for men! Fangio is another household brand that serves those that love luxurious comfort and design, and not so high of a cost. The design can seem a little irritable at first, but that’s because not so many online stores are using this flipping-cards design with the smooth navigation integration. Everything on this store has been organized to reflect a particular collection of Fangio Polo lines, and product pages are built as individual homepages for each of the shirts, which allow you to experience what they look like in the real world, on a real person. Many stills are available for each of the shirts at the bottom of the checkout button. Who knew that truly dark designs can function so well.
Welcome to Farer! A British-design and Swiss engineering watch brand that cater to the free-minded creative individuals who enjoy that classic feel to their watches. Reasonably priced, Farer watches have earned the admiration of thousands of watch lovers, their collection consists of classic watches that will be good gifts for your parents, or friends who have that hip-vibe to them. What we really like about Farer’s design is that it has been built directly to support the message of a brand. Everything leads back to the explanation of what the watches stand for, and product landing pages are on a whole another level — very detailed descriptions of what the particular Watch is About, a concise rundown of the specification that the watch has, and crucial information about shipping costs and returns policy. This is what product landing pages need to look like, customers want to know that when they spend more than $500 they are actually going to get some form of protection, in the case of disliking the products physical appearance. They sell straps too, and even for the straps product pages, everything is outlined carefully to support the customer’s decision of buying the product.
Death Wish Coffee Company
Death Wish coffee is known as one of the most strongest coffee brands, but these guys are known for so many different reasons. Their community engagement has guaranteed the success of many years ahead, they even won a prize tournament that guaranteed them an advertising slot during the Superbowl. Naturally, to expose themselves to such high traffic volumes, they need to have a website that would take care of the business, and they do! Their design idea is simple, make a huge introductory frame that shows what the coffee packaging looks like, and directly offer customers to buy some from that same window that they land on; genius! The following container talks about the product, with very concise descriptions, followed by a huge slider that outlines the best customer reviews. Of course they have a navigation menu, but that has been hidden underneath the popular hamburger menu that you see on mobile devices. As can clearly be seen here, 99% of emphasis is put on selling the product directly as the user opens the website. Could this tactic potentially help your individual product sales?
Allbirds originates from New Zealand, a country well-known for its population of sheep, which was the pivotal inspiration point for the owner of Allbirds, to begin crafting footwear out of this magnificent material. Many years later, Allbirds is a worldwide brand providing some of the most comfortable shoes on the planet! Allbirds prides itself over simplicity, by choosing not to be too flashy with logos and brand imagery on their products, rather — give people the freedom of choice to have a shoe that does the purpose of being a shoe really well. Their online store features a lot of animated content, which is why we wanted to point out this design, and how you as an owner of a brand-product could also explain your product to your customers with the use of demo animations, and also video content of yourself being an ambassador to your own brand. Ohh, and the cherry on top — Allbirds will give you a full-refund of your purchase if you aren’t satisfied within a 4 week period. Excellent!
Robin is the future of smartphone devices, and it uses frickin Android too! Robin wants to change the mobile phone sphere by offering a new and revolutionary concept of smartphones — a phone with unlimited storage! Yes, you heard that right. The unlimited storage comes from deep integration of cloud services into the phone, that would directly sync all your existing content onto these cloud platforms to help you achieve a near-infinite storage capability. Their homepage of the product is divided into two different containers — the first container that has the phone in display, and a little bit of general information added to it, and the next page that mentions the price of the product, and offers another preview of the OS. Simple as it is, all other important product details are listed in a separate page that can be accessed from the menu. This is another stellar example of how single product brands can benefit from putting their product first, and details in separate pages. Those customers who are genuinely interested, will find a way to learn more about your product, but first — give them the option to buy it right away.
Father Rabbit specializes in many different areas of products, most of which are meant to act as gifts. Kitchen stuff, baby stuff, home decor, bathroom items, educational products, gardening tools, bedroom and laundry, many categories that could make for great gifts in the future. Father Rabbits design for this many products is still heavily dependent on simplicity, with a big navigation menu that can pinpoint all major categories and their sub-categories. The use of versatile typography ties together the elegance of Father Rabbits website, and product pages are rich in visual content, and text content that will thoroughly talk about what you are purchasing, another inspiring signpost for those who run online stores with large quantities of products to sell.
Irish Design Shop
The Irish Design Shops features gifts, kitchen, outdoor, jewellery and books related products. Their main selling point as far as design goes is the use of clear images, and simple to navigate product pages where the Add to Cart button is displayed with extra weight added to the colors. The footer doesn’t break away from the rest of the homepage grid, making everything seem like it has been drawn on a single piece of paper, and likely it has been. Take inspiration for how simply elegant design can meet the needs of a sophisticated brand that cherishes design.
Fight For UX
UX and UI (User Experience & User Interface) is what lies behind every great design. Those two keywords make up for all of the webs website designs, and getting them both right is essential for the success of your online business venture. Fight for UX sells posters related to web design, to keep yourself and your fellow designers inspired to continue with building great things. All of the 5 posters get their own individual grid boxes in the homepage layout, giving you a name for each and also the photo that it’s going to feature in the poster. You can click on any of the 5 posters to jump to the product page and learn a little bit more about what the poster stands for, and of course — how to buy it. We wanted to include Fight for UX because it showcases how aesthetic design can work well in situations where you are selling products that you’re truly passionate about. The unfolding menu on the right-sidebar has only a few straightforward selections, once again giving room for simplicity.
Status Audio Headphones
Status Audio was born out of the research that concluded what professional headphones should look, feel, and be like in order to serve a generation of music lovers who love to take their music with them behind those headphones. Headphones is a tough market to crack as well, with popular brands like Beats by Dre operating in the industry, it’s hard to tell customers that your product is better than what others seem to review so much. This startup has managed to build world class headphones that music artists all over the world are admiring already, their belief in simple design is also reflected in their website design. You click on what you want, and it takes you through the process of finalizing a sale. A few nifty additions are perhaps an automated product image slider within the sales pages. Furthermore, scrolling below the first element of the product page, you get more detailed insight into the headphones, their technical aspects, and also customer reviews including video reviews. Feedback is a crucial aspects of eCommerce design, and these guys have it figured out down to a science of how to make customer feedback a part of the design.
LilGadgets focuses on headphones for children, and their design is equally well designed as to what we saw in the previous store. A little bit more color perhaps, but then again — the lack of a review system is evident. What makes up for that is a more detailed description of each of the headphone models, and how they are going to help your children have the most amazing music experience. It’s time to inspire your children to become little artists of their own!
The Soap Co.
How do you make a brand that sells soap stand out with their products? You definitely don’t want to be designing a design that’s going to throw around big images and other sensationalist features, you want to list the products as soon as the customer comes to your store, which can be seen in this case. You open the Soap Co. store, and the first thing you get to see are the actual products, so it’s time for shopping. These kind of designs are typically built in the case of having a product, but also having a concise marketing strategy that would attract customers that are already somewhat familiar with the brand, and only need a quick way to refill their running-out subscription of soap. We recommend minimal design all the way.
Yeezy’s by Kanye West are amongst the most prestigious footwear collections in the world. Getting your hands on a new pair of Yeezy’s is going to cost you a pretty penny unless you are really lucky in the selection process of getting the shoes at the store when they come out. It’s really that hard to get your hands on a pair, and it doesn’t look like the process will be made any simpler any time soon. The website is responsible for a little volume of sales, but most of Yeezy’s are sold directly in physical stores. The Yeezy website is a simple logo that says YEEZY, and a small navigation icon on the left corner that once you click it, unfolds 5 individual links: Men, Women, Film, Kanye’s homepage, and Terms. The two important links here is Men and Women, which are the actual collection links for products. Clicking one of those will unfold the product line on a very dark background, colors that Kanye seem to embrace a lot. Even to preview product info, you have to click separate buttons, perhaps an UX flaw, but most likely it’s because of the way Yeezy brand functions in the real world.
Thing Industries was conceived when two lovely designers came together and decided it was time to built something unique to give back to the world, and that something unique falls under items like: banana pillows, bear rugs, birdhouse bookshelves, cheese board with animals, sacrificial chairs, octopus hooks, indoor stoops, brick layered blankets, and a couple of other cool and creative items! And they have stuck to their original creativity right from the start. Open any of the pages for any of the products, you will get a nice cover shot of what you’re getting, and an easy to navigate buying process. On the list of menu items that they use you will find: homepage links, store catalog, about their vision, a separate press page for showcasing any important mentions the press (of which they have quite a few), contact us page, stockists, and newsletter that customers can subscribe to for new product updates. That’s how you run a small-time creative brand business.
We’ve definitely been clear that we wish to include a few online stores that relate to actual technology that we use, one of which of those technologies is Bootstrap. We decided to preview to you what the official Bootstrap themes ‘store’ looks like from the creators of the framework. We love the simple approach to telling the customer what the overall product is about through the use if imagery, element boxes, and easy to understand descriptions. It goes on to preview actual profile cards for the participants in the creation of the styles, which gives you more flexibility to learn of what other work these authors are doing. That’s the beauty of GitHub, the ability to explore what others are working on publicly!
Mollusk Surf Shop
Mollusk is everything and more that you’d expect from a surf company / brand. These guys originate from organic local sources and constantly participate in creative areas like arts, crafts, music, films, etc,. Mollusk has got a lot of reputation for creating the kind of clothing line that outlines a traditional all-chillout style that surfers love to wear. The surfboards they advertise are all built by local dudes, so the money keeps going back into the local economy. The store they got going on focuses on two important aspects — the navigation menu on the left that lets anyone to explore categories and their child-categories, and the imagery catalog display for all of the items, click on any product and you get to see it full-scale, with the option to change a size and buy straight away.
Langly Camera Bags
Langly is most likely the most specific brand in our eCommerce design inspiration collection so far, these guys focus on producing Camera Bags for those adventurous individuals who love to hike, and trail dangerous and exciting paths to capture those insanely stunning photographs. The bags are meant to work as all-in-one tools for carrying your camera gear in very effective way. There are slots for lenses, different camera types, and tons of compartments for any other individual camera gear that would otherwise end up in a pile of clutter. Very reasonably priced given that this is a unique product and serves a great purpose on its own. Langly bags were inspired by the lives of freelance photographers and nomadic professionals looking for something to protect their gear with style and ease. Whether you’re on assignment or on a mission, Langly keeps your gear safe and close so you don’t miss a shot. For carrying accessories and necessities alike, you may not be able to bring everything you have but you’ll have space for everything you need.
Black Milk Clothing
The story behind Black Milk is authentic, from having no money to invest in materials, to getting access to what you can and creating something unique out of it. Black Milk is a fashion line that’s popular amongst those who love to express their freedom and the free-thinking spirit through their clothe. It’s amazing how a fashion line that’s built from the ground up by a creative artist, can attract the same exact crowd because they feel the same way.
Remember that some brands choose to run an online store only because a few customers have asked for it, or because they understand that there are some implications of having an online store. Bokeh Life’s website is simple, it’s four styles of caps that can be navigated using jQuery navigation. Click on the hat, a new modal appears that show a few models wearing the hat, and a nice Buy button to help you get this one shipped right to your door. The elegance of style in this web design is the ultimate reflection of elegance that Bokeh puts into their caps.
InVision gets talked about a lot, it’s a design workflow tool used by millions of designers around the globe! There’s something about design companies who launch their own versions of platforms and business pages, such as an eCommerce store. There’s just something about this process that makes you wonder — what are these guys going to come up with next. The InVision Marketplace is a complimentary store where InVision fans can go and purchase for themselves a t-shirt to help promote the brand, but also to act as an ambassador of InVision and tell the world that you love to do design. The t-shirts aren’t of course all about just InVision either, there are actually some really remarkable and unique tshirts in the collection, and as a designer you will surely find yourself attracted to quite a few of them. Take the marketplace for a spin, it’s very design friendly and going from product to checkout is a seamless interaction of design.
Afends understands the composure that good design can have, just like you need to roll back your shoulders to become more present, you need a design that is talking to the customer directly, through the means of visual appearances; the kind that are integrated with real world elements so that the design of the product can be seen in its full blossom. We love how Afends are using an Instagram widget at the bottom of their website to display the latest Instagram posts from people who use Afends apparel.
If you run a brand that has a product that many already know about, making a website that can sell the product quickly is going to be much less easy. And that’s the path that Lunet Eyewear has taken, their online eCommerce store consists of a simple navigation header and a product placement that gives you a clear idea of what the latest version of the sunglasses are, and how to purchase them. They also use a jQuery notification popup to tell European customers that they offer free shipping within Europe. It’s little widgets like these that make all the difference for the UX of the website.
The Garden Edit
The Garden Edit redraws the traditional boundaries associated with shopping and the garden by bringing together a modern collection of products that embody functionality, timelessness and beauty. John’s roots go back to London, a kind of place where style and passion is highly appreciated. He has turned his gardening skills into a full blown business, anyone within the London area can order a bouquet of flowers prepared by John, and his remarkable gardening skills. He does actually sell quite a bit of gardening tools as well, all of which as you will learn are quite modern and fill fit right into the space of a creative gardener. Apparently listing hundreds of products on a single page can actually be very beneficial — the colorful product displays keep the customer engaged, and who knows what he is going to get a craving for next.
Ecobee sells a home kit with sensors that can measure the temperatures of the house, and also the number of people that are in the house at any given moment. Their approach to selling is black on white minimal, with as much details about the product as possible. Their main selling page goes back to the homepage, where they use HTML5 to create individual element boxes that talk about the products most important features separately.
No. 22 Bicycle Company
Selling a bicycle in the store is quite easy, isn’t it. You got the thing on display, and customers can take it for a spin if they really are interested in acquiring a professional biking piece. But that result can also be achieved on a website, although not with the whole going for a test ride thing. No. 22 has a few professional bikes for sale, and their approach is to create separate homepages for each of the bikes and talk about their appropriate specs, while including important geometrical information about the bikes too. The buying process involved selecting your configuration, size, and the kind of color palette you’d like to have on your bike.
PRESS is a specialty books and things shop focusing on out of print and first edition art, fashion, design, craft, and counterculture books, new titles published by small and independent presses, and unique stationery products from around the world. Press has close ties in the book industry that allows them to publish amazing products at great rates. Flagship products include photography, art, fashion, crafts, designs, and books themselves.
Moving into a new house? You will want to stock up on some unique cuttlery and glasses to make your guests feel like they’ve walked into a unique experience, but how does a brand go about selling these things on the web? The first step is to use good visual display content that shows the product in all possible situations, including being on an actual dinner tablet. That’s the approach of Snowe. Apart from that, all their product selling points are still traditional: description, product details, and use cases.
W+K Studio Goodness
Goodness focuses on wearables (shirts) and paper goods in the form of gift cards, and general greeting cards with that unique twist. All of the designs have been hand crafted and provide a very unique design experience that will be pleasant for anyone to receive. You can select products individually and take a look at their close-up images, and if it really speaks to you.. just finish the sale from the product page itself. W+K Studio also allows the ‘quick shopping’ option to jump straight to the checkout page.
Selling food online takes commitment. With so many nasty brands out there selling crappy food, it takes a special set of tools to sell your organic produce for those who can appreciate it. And by the looks of things, Patagonia has gotten all that figured out rather well. They talk about their products and their ingredients in a way where you are reassured that they contain no artificial contents, and are as organic as they come. With plenty of pictures, videos, and descriptions available. They talk about where they source the stuff from, and how it is made. Those are the things customers want to know about when they are shopping for delicious organic food online.
Wocket Smart Wallet
Welcome to Wocket Wallet, the smartest wallet that you will put in your pocket! They use the first header space on the website to promote the wallet with a background video that shows different people using the thing directly in a shopping experience. Then, as you scroll down the homepage, all other elements of the wallet begin to add up and you actually get to see each of the steps of making a purchase and how you will be able to recreate that same experience once you purchase the wallet. The more detailed you get about your product details, the more interested customers are going to be about making a purchase themselves. Wocket Smart Wallet is a great design example of how modern technology can make it seem like you already own the product.
360 Cameras are gaining high momentum, top YouTube bloggers and brands are using 360 to add special touches to their branding experience, and 360fly could be the tool that you will end up using in your own marketing efforts. Their design is another example of how crucial it is going to be to talk about pressing product points with stunning visual content, and easy to grasp descriptions. The footer of the page has been dedicated to full technical specs of the product, another good element to incorporate in your own eCommerce designs.
A Book Apart
And sure.. if all else fails, then you can come and check out A Book Apart, a famous resource of books that talk about web design, and general creative design. A Book Apart runs a direct online store in-built within the same page where the products are being talked about. Pleasing design with books that are going to please your design senses, if not for yourself — then get these for your designer team, because they’ll need all this knowledge to replicate some of those mesmerizing designs that we endured in this roundup.
eCommerce Designs for Inspiration
We really went all out with this one. The amount of inspiring designs in one place has never been seen before. The focus point we took with this one was aesthetics of design, and the ability to talk about your brand or product through a web design in such way that the user feels like he is becoming a part of something bigger, and of course if he is going to use your product — he is. And Hey! eCommerce store owners, we want to see your own store designs, so please leave those comments with your own inspiring designs, we’d love to check them all out!