Current Design Trends for Digital Shops and E-commerce Websites

Advertise here with BSA

Great web design requires research to pinpoint some of the more popular styles of building layouts. eCommerce is an ever-expanding field which can earn webmasters a lot of money through digital or physical products. Especially when you compare earnings to advertising revenue for small or mid-sized websites.

In this post I’d like to share some examples and design ideas for creating modern online webshops and eCommerce layouts. The goal is to make a few sales or at least make an impression on visitors so they might return in the future. It’s definitely a competitive market, but by learning what works you can apply better design techniques into your website for higher conversions and greater profits.

Marketable Homepages

Designing a catchy interesting homepage is one of the best things you could do. Most visitors will judge a website by it’s cover even if this is frowned upon by the idiom police. Some visitors may overlook a cluttered or confusing homepage – but most will simply leave.

Try to create a mix of items which can push visitors further into your website. Coupons or monthly specials are the perfect choice to replace advertising banners. Also think about carousel listings for new or popular products.

The fashion website Gilt has such a brilliant homepage experience. At the top you’ll notice a large background banner advertising sales, followed by a thumbnail listing of clothes & accessories. Towards the bottom we have some icons explaining their products and even a download link to the Gilt mobile app.

Your site may not be able to include all of these items so don’t try to emulate everything. Instead you should plan out some elements which can work best for your store, then fit these appropriately into the homepage. Wireframing is a great step for this process.

Another cool homepage design can be found on the Gnarly! website, surprisingly using the new .clothing domain. Their homepage doesn’t have a lot of extra features but it does have an essential element to marketing – brand recognition. Right after the page loads you’ll notice the text colors, background, and webpage logo blend together perfectly.

This site also doesn’t come across as some fancy inner city boutique. I’d recognize this store for youthful and spirited designs of shirts and accessories. Plus when you hover the product thumbnails you get a cute little animated gif image. All of these techniques contribute to the overall branding which sticks into people’s minds as a memorable experience.

Fixed Headers

This trend isn’t found on every eCommerce website but I have noticed it more frequently. Fixing your website header to the top of the page gives visitors instant access to all the regular amenities. These could include a search bar, navigation items, shopping cart, coupon codes, among other things.

The fixed header on Fab.com is a prime example. You can login or access your account settings anywhere on the page. And it gives you access to shop from each individual category without scrolling back to the top. I will admit that it cuts off some of the page height, so this may be annoying on smaller screens. It all comes down to personal preference.

Personally I like the Grovemade fixed header because it blends so elegantly into the layout. At the top everything looks to be apart of the page and you only get the fixed header once scrolling down a bit. Then a secondary nav menu becomes attached beneath the first one after passing lower on the page. This is a beautiful effect which looks amazing if you can pull it off.

Content Rotators

I’ve seen this trend on more than a few websites but it offers so many benefits to the typical eCommerce store owner. You can showcase any number of products to capture attention. Wootten has a very distinct look and their homepage includes a regular full-sized image slider.

The images don’t actually link anywhere else on the website. It’s just a typical image slider meant to showcase their work and the type of services they offer. But you could include links that lead further into the site or even some caption text for each photo.

One other example from AllModern shows two different content sliders on the same page. First is a photo rotator with deals and specials on various products. Then a little bit further down the page you’ll notice a carousel with featured brands. You can click on any logo to browse their products on the website.

Just have some creativity with your content and pay attention to what other websites are doing. There are dozens of free open source content rotator scripts for jQuery which are easy to implement and setup without needing much code experience.

Sleek & Beautiful Typography

Minimalism has always been a great choice when trying to create focus on a webpage. Apple does this well and it has lead to immediate brand recognition with many of their products. One aspect of minimalism is to study typography and how this can affect a website’s composition.

It never hurts to include fancy text for a logo, banner, headline, or another large page element. But most content should be easily skimmable and quick to read at a distance. I typically suggest any sans-serif font with a contrast between the background and foreground colors. As you get more comfortable spend time playing around with different fonts to gauge what looks best.

The online shop for Bree is a great example of minimalist typography. The site uses plenty of text with all caps to denote more important links, items, titles, or similar bits of content. The font is crisp and easy to read whether capital or lowercase. Plus there is a lot of white space between sidebar blocks and individual items on the page.

Inspiration Gallery

To get the creative juices flowing I’ve organized this small collection of well-designed eCommerce themes. Each screenshot is from a ThemeForest WordPress theme, most of which include many of the trends I’ve mentioned in this article. If you need to design a custom eCommerce website these layouts should give you plenty of interesting ideas to get started.