Advertisement
  1. Web Design
  2. Inspiration
Webdesign

Inspiration: Online Stores Where Products Are Placed Front and Center

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Creative Examples of Geometric Web Design Styles
SVG Brilliance: 10 Inspiring Examples From Around the Web

In this inspiration roundup I’ve gathered together examples of eCommerce designs, showcasing how they place focus on their products to build better experiences.

Enticing Content

In order for anyone to enjoy their time on a website, the content needs to fit their needs. Once that’s nailed down it’s time to make the content appealing. This example is easiest to demonstrate and recognize when dealing with photos.  

Take Wonderland’s Store’s product page. As you’re scrolling through their products the images are very focused. There is a single image of a print, or a sweatshirt, always with the same light gray background. This allows the products to speak for themselves. In the case of Wonderland’s Store it’s the lovely illustrations of famous figures. The prints are friendly and super colourful. This is one way to show off enticing content.

httpsthewonderlandstorecomproducts
https://thewonderlandstore.com/products

Another site that has great content is that of an artist Jason Ratliff. On his homepage, he’s organized his art by type. As you scroll, the different types of artwork pass you by and catch your gaze. This effect wouldn’t be the same if the different collections were displayed interchangeably and all at once. This is important because it allows the content to make an impression on the user one at a time.

httpwwwjason-ratliffcomhello
http://www.jason-ratliff.com

Get to the Point

Sometimes it’s best “not to beat around the bush” in order to make an emotional connection with the visitor.

Let’s examine “lookbook” from J.Hannah. What I love about the lookbook is how to-the-point it is. Within the photos of the jewellery, there is little visual clutter. There are no elaborate scenes, or models posing anywhere, doing any “thing”. It’s a simple display of the jewellery on a person. The colors are well composed to show off the gold hues. I can see the product, therefore, I can imagine wearing it myself. There is no need to embellish the setting the jewellery is being displayed in.

httpwwwjhannahjewelrycomclara-lookbook
http://www.jhannahjewelry.com/clara-lookbook

Useful Information

Another thing that makes for a great experience is taking away the guess work on related information, such as free shipping, or sales that are going on. Once again, you don’t need to embellish the content in order to make it effective. Make it obvious to your potential buyer that free shipping is available and move on. Free shipping might be a secondary reason (at best) for their visiting your website, they are primarily looking to buy something, and them knowing you have free shipping shouldn’t overshadow their original goal.

A good example of all the tips I’ve listed so far is Ward Whillas home page. The first thing you see is a photo of a model, the photo is uncluttered and gets to the point right away. The photography is beautiful which gets me excited and intrigued. Lastly, they have a small black label on the bottom left to let their potential customers know that they provide free shipping in the US. It’s not a giant flashy banner, which makes the experience of this home page that much more delightful.

httpwwwwardwhillascom
http://www.wardwhillas.com

I’ve come across a WooCommerce theme that does this really well too. As you can see in the design, there are two block elements that say “Free shipping” and “Free returns.” They’re direct, yet fit into the aesthetic of the overall design. 

httpsthemeforestnetitemdelphinus-creative-multipurpose-woocommerce-theme16067273s_rank2
https://themeforest.net/item/delphinus-creative-multipurpose-woocommerce-theme

Selling With Photographs

It’s difficult to sell something online with poor visuals. One of the reason images have been getting bigger and bigger in web design is because we inherently understand images; we can relate to them and cognitively process them quickly.

Let’s take, for instance, the portfolio of Isabel Urbina Peña. On her homepage, she shows off the book covers she has designed. She could have taken a photo of the book against a plain background, something white for the sake of clarity, and called it a day. But that is not interesting. That’s normal. Instead, Isabel designed the hero shots to show off her creativity further and to help accentuate the designs of the books. The graphical aspect of these hero shots is lovely, they help tell the story of the book further, they help draw the user in. 

httpwwwisabelurbinapenacom
http://www.isabelurbinapena.com

Tian’s website uses a similar effect. The first thing you see when you land on the homepage is a simple photo of a model playing with a scarf. The photos are beautiful in various ways. First, all you’ll see is the model and her scarf, so it’s easy to focus on her. The scarf is flowing and is colourful which adds dynamism to the appeal. Lastly, there is a single CTA in the top right corner which makes the next step clear, but doesn’t take away from viewing the photo. 

httpwwwtianstudioscom
http://www.tianstudios.com

I’ve found another theme that showcases products very well. This one is called Averly. In the screenshot below you can see that photos are used in two different ways. First, it’s to emphasize the product, like a hat or a pair of jean shorts. Then, it’s showcasing the product in a real scenario through a photo of a girl wearing the jean shorts on a street. It’s relatable for consumers. You can clearly appreciate both types of photos, one that lets you focus on the product and one that lets you image life once you own the product.

httpsthemeforestnetitemaverly-a-hip-creative-multipurpose-theme15888311
https://themeforest.net/item/averly-a-hip-creative-multipurpose-theme

Consistency in Design is Key

Inconsistency within design can hinder a user’s experience. When a user notices an inconsistency, doing so subliminally raises red flags, pushing the user onto undesirable trains of thought. You want the user to be focused on making a purchase and not noticing that something isn’t right. It may seem trivial, but inconsistencies distract.

Kant is another theme with spectacular and consistent design. It’s bold throughout, and very pleasing on the eye. It’s easy to navigate and has a really good flow to it, thanks to its clean UI. The product page is, honestly, very pretty. The whole theme is.

httpsthemeforestnetitemkant-a-multipurpose-template-for-startups-and-freelancers16760116
https://themeforest.net/item/kant-a-multipurpose-template-for-startups-and-freelancers/

Wrapping Up

I hope you enjoyed my collection of fantastic eCommerce pages which place focus on their products. I hope these examples have inspired you to create your own product-centric eCommerce designs!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.