While retail sales are still dominated by brick and mortar stores, the number of people who shop online is rapidly increasing at an unprecedented rate. eCommerce took up 14.3% of total retail sales in 2018. As a result, it’s necessary for businesses to move into this avenue and develop a strong online presence if they want to keep up with the demands of their customers.
eBook
PDF: eCommerce Website Design Elements That Sell
Although social media has become a strong driving force in product sales, a well-designed website is still key in attracting customers and increasing conversions. Quality website design is a good indicator that a company cares about their products and understands the needs of their customers and target audience.
We’re happy to share with you this list of eCommerce website designs that we feel have solid combinations of strong visuals and intuitive site structure. We hope that these will inspire you for your projects this year. Happy reading!
Best eCommerce Website Designs
Cutter and Buck
Cutter and Buck primarily sells golf clothing and sports apparel, and their website is minimal and clean, like their products. They effectively applied the traditional style of eCommerce without making it seem too safe. As a Groove Commerce client, we helped them strike this balance by highlighting their lifestyle photography – which doesn’t come off as too high-end or too casual. Aside from being really easy to navigate, their subtle hover animations add dimension to their site.
Mollusk Surf Shop
It’s not unusual anymore to see a website’s navigation on the left as opposed to the traditional top-of-page. Mollusk Surf Shop has successfully managed to make their navigation work well with their homepage by also giving it the functionality of their filter. By saving a lot of vertical real estate on their product page, Mollusk took advantage of bumping up the product information, thus creating an above-the-fold experience where all the information you would need is visible without feeling too cramped.
Best eCommerce Homepage Designs
Rebecca Atwood
Let’s face it. I have a soft spot for cute patterns and pastel hues, be it on fabrics, notebooks, or wallpapers. So, browsing this website was a real treat. Rebecca Atwood is a designer/artist who has an online store that sells fabrics and accessories, and I love seeing the interactive elements on the hero section of the homepage.
The site is very airy and whimsical which reflects the playfulness of Rebecca’s designs, and coupled with their decision to go with a light color palette, it makes the patterns and details of the products stand out more.
Two Chimps Coffee
Two Chimps Coffee’s homepage greets you with a playful animation of their pattern with their logo smack-dab in the center. The subheading reads “No nonsense,” and they truly express it on their design with monochromatic base colors, large text and CTAs, and sharp imagery.
To keep it from looking too serious, the pops of color, use of illustrations and interactive animations add a touch of playfulness. The seamless transition from the product category to the product detail page makes the shopping experience as smooth as their coffee (I had to) and reinforces their belief that coffee is serious business.
Bon Bon Bon
Bon Bon Bon’s homepage is fun, personalized, and maybe just a tad bit overwhelming. But strangely enough, it doesn’t bother me because it just seems all on-brand with this Detroit-based bon bon (bon!) company.
I just love the extra visuals that they’ve incorporated in the site such as the cardboard texture on the nav and the branded elements further down the page. It makes for a highly customized and personalized site that will definitely engage visitors to explore and tempt them to buy.
Best eCommerce Product Page Designs
Baron Fig
Baron Fig’s choice to move the product specifications below-the fold gave room for a very sleek and beautiful above-the-fold experience that lets the product take center stage with minimal distractions.
There has always been a danger of having too much information above the fold on a product detail page, which is understandable because you want the buyer to clearly see what they’re getting the moment they land on the page. However, sometimes it can be best to spread the information further down the page to avoid overwhelming customers.
We’re loving how Baron Fig’s solution to not crowd the page is making it so that customers can toggle between the “About” and “Features” of the product, and also adding some of their product and lifestyle photography.
Casper Mattress
Casper’s product detail page displays a great example of an above-the-fold experience that manages to fit all the necessary information without making it too cluttered. More details about the product are shown as you scroll down the page, and it does an effective job of amping up the product with the least amount of copy.
Snowe
If you’re shopping for new cutlery or glasses, you might want to check out Snowe’s website. Their elegant site reflects their products’ design, and it carries over to their product detail page where they have a mix of stylish products and lifestyle photography that entices customers to purchase.
I also enjoyed the fun hover states where they incorporated use cases for specific products, such as putting a fried egg on the hover state of a plate. This makes it easy for people to visualize how a product could be implemented in their lives, which in turn would make it more tempting to buy since the customer would be able to visualize themselves using it.
eCommerce Website Design Best Practices
Simple Can Be Better
Sometimes companies must decide whether they should choose an existing layout that users are more familiar with or to try to come up with a new layout that can impair the user journey. It might be frustrating for designers because we often want to be able to create something totally awesome and new.
However, factors such as your brand’s personality, target audience, or the learning curve that your customers will have can influence whether we should stick with the design best practices or come up with something new that you feel your users can easily adapt to.
Find Your Unique Voice
When everything looks the same, brands can appear cold and impersonal. That’s why now more than ever, people are looking for websites that have a touch of humanity and make them feel that the company is talking directly to them.
Illustrations
We love that illustrations are becoming more widely used. It gives websites more personality and flair – especially custom illustrations for products. There’s also been a noticeable shift from clean, paper-cut style illustrations to more organic hand-drawn illustrations that make a brand seem more approachable. While not all companies may require illustrations, it’s still good to consider if it would be beneficial for your brand to incorporate them.
White Space Is Good Space
Minimalism may seem like a passing trend, and sometimes it can go a bit too far. But at the same time, you have to avoid the temptation of cramming too much information on your site. Narrowing it down to its core components will avoid confusing your customer and make your brand message more clear. This involves the effective use of white space to give your site some breathing room to make the information easier to digest.
Image Compression and Optimization
Page load speed can be the defining factor for your conversion rate. Chances are, your users may get frustrated if your site takes too long to load, no matter how well it’s designed. On average, 9.6% of visitors bounce when the page speed is 2 seconds, and it increases to 32.3% when the page speed reaches 7 seconds.
There are many ways to improve your site speed, and one of them is through image compression. Plenty of free online image compressors are available for you to use without losing the quality of your image. Here’s our favorite.
Conclusion
The eCommerce industry is still a growing one. There’s a lot of competition, and whether you have a physical store and also sell your products online or a business that sells your products exclusively on the web, it’s very important to ensure that your website is visually interesting, reliable, and easy to navigate. Because even if you have a really great product, chances are people won’t buy it if they can’t figure out how to.
If you want to establish your brand as something that’s reliable and will stand the test of time, that should be something that is reflected in your website as well.
Awareness of the current design trends enables you to get some insights on what your current shoppers want, although it does not necessarily mean that you have to apply all of them in your design and keep updating it when the next one comes along. You might risk losing your brand’s voice and personality.
It’s wise to take a look at what’s new to get inspiration, determine if it’s something that can work well with your brand, and then decide whether it’s something you’d like to implement.
We hope this has inspired you as much as it has us! If you need website design services, contact us to learn how we can help you implement an inspiring online store.
