Current Design Trends for Digital Shops and E-commerce Websites

Monday, November 10, 2014


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.


featured image laptop ecommerce shop website design


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.


gilt ecommerce website design inspiration homepage


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.


gnarly online ecommerce vibrant yellow website


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.


fab ecommerce clean website fixed header


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.


grovemade grove made ecommerce fixed header


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.


wooten ecommerce website design texture rotator


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.


allmodern all modern ecommerce rotator


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.


bree ecommerce website simple minimalist typography


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.


Fitshop


fitshop fashion ecommerce wordpress


Evora


evora responsive ecommerce theme wordpress


Sistina


sistina flat shop ecommerce theme wordpress


Stored


stored ecommerce wordpress theme screenshot


JustShop Cake Bakery


justshop bakery restaurant website wordpress design theme


Shopper


shopper woocommerce wordpress theme inspiration


The Retailer


the retailer retina responsive wordpress theme


Neighborhood


the neighborhood shop theme wordpress inspiration


Flatsome


flat responsive wordpress theme design inspiration


Bazar Shop


bazar shop ecommerce theme inspiration webdesign


ShopPress


shoppress responsive woocommerce thene dark layout


Sommerce Shop


sommerce shop versatile ecommerce theme wordpress


All Around


all around universal wordpress shop ecommerce


Outlet


outlet responsive woocommerce theme wordpress





Advertise here with BSA







Source: http://ift.tt/1Elj3WR

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading