in

Study Case : 10 Inspirational Product Page Designs

There’s no longer any doubt that ecommerce is the shopping experience of the future. More and more brick and mortar stores see the potential of jumping into the online market, and new ecommerce shops are opening left and right. The only problem is that there’s a whole new set of considerations that come with setting up a store online, and a lot of businesses fall short of what they could be doing.

The most important component of any ecommerce site is its product pages; they’re where customers spend the majority of their time on the site, and they’re the pages that need to convey all the information necessary for a prompt purchase. Suffice it to say that if you haven’t pored exhaustively over your product descriptions, layout, imagery and navigational paths, you might want to now. But first, take a look at some examples of ecommerce sites that are doing all the right things when it comes to product page designs.

Zara

Website : zara.com

Zara - Product Page Designs

This retailer does a wonderful job of maintaining a minimalist design while still letting customers access all the information they need. Rollovers and shadowboxes are used to minimize the amount of information that starts out on display, and images are scrolled through, rather than clicked on. All of these choices de-clutter the page and make it easy to identify the right information.

Vanmoof

Website : us.vanmoof.com

Vanmoof - Product Page Designs

This company also features rollovers in its product pages, but in an entirely different way. The design here is maximalist, meant to convey a sense of how many options you have for customizing your bike. But it’s not confusing, because all the rollovers and buttons are immediately identifiable by their bright yellow backgrounds.

Stella McCartney

Website : stellamccartney.com/us

Stella McCartney - Product Page Designs

Suggestions that pair a product with accessories are a great feature to add, as long as they’re relevant and appealing suggestions like the ones shown on this product page.

Steve & Co.

Website : steveandco.com/en

Steve & Co.

A great little feature on this product page shows you a diagram of how to tie a bowtie. Little touches like these make a site feel specialized and accommodating.

Winestore

Website : winestore-online.com

Winestore

Another example of additional details making a big difference to the feeling of the page, this webstore includes a key to describe the tasting notes and pairing suggestions for the wines it sells.

Sony

Website : store.sony.com

Sony

Most product detail pages benefit from standardization; it makes it easy to find the relevant information quickly. But for special circumstances, there need to be special treatments. This product page lets you compare all the aspects of different laptop models side by side.

Farfetch

Website : farfetch.com

Farfetch

When your webstore is selling expensive luxury goods like this one, it’s very important for customers to be able to evaluate every detail of their possible purchase. This site has full-page zoom that allows you to view products larger than life.

Luhse Tea

Website : luhsetea.com

Luhse Tea

Almost all good product pages are clean, white, and minimalist. While the minimalism is key to having an easily navigable structure, there are ways to meet this goal without defaulting to white. This site has illustrations, glow effects, dark tones, and textures, but it’s just as easy to use as any other example.

IWC

Website :  iwc.com/en

IWC

This site lets the user try out an interesting and functional feature, where you can view the front and back of their products simultaneously. It’s not essential, but it’s a clever and intriguing touch that makes the shopping experience feel just that little bit more tactile and real.

Le Coq Sportif

Website : lecoqsportif.com/uk-en

Le Coq Sportif

This ecommerce site has a great feature where it conveniently groups its guarantee information together into rollover icons, instead of making the user wander all over the site, trying to find delivery schedules and return information.

Any website can have clean and functional product detail pages; it’s just a matter of thoroughly organizing and minimizing information. But the design really gets good when special details and features are added that contribute to the function and interest of the page.

As many of these examples have shown, a lot of the details that set a great page apart from the rest are specific to the brand and the product, and might seem like they’re beyond the scope of most ecommerce sites. But with plenty of comprehensive services like  Amazon’s ecommerce software available to streamline and upgrade your site, a customized solution to your particular product detail pages could be well within reach.

Written by Rob Toledo

Lover of all things CSS3, an avid supporter of Firefox who no longer engineers for IE7.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Loading…

hairdresser business card

Hairdresser Business Card Template

Designed in black and white

Top 10 : Tips for Creating Beautiful Logo Designs