In 2014, e-commerce was gradually divided into two groups based on how they treated home page design. Here’s a brief table to tell the difference between them.
|Product grid home page||Custom design home page|
|Pros||Most changes can be done via backend fast and easy||
||Requires additional time and resources|
As single photo homepages and various parallax effects are extremely popular in 2014 and in the beginning of 2015 in e-commerce, we’ll run through the most compelling examples of their usage.
I’ve collected only 100% e-commerce websites, it means that all these websites actually allow buying online. Also, a single picture doesn’t always mean you have a pic/photo and nothing else; we will be also looking at websites that have their first screen completely occupied with a single picture or a slider of several pictures. What is more, I deliberately tried to avoid the biggest brands (except for Rimmel) to show that these e-commerce design trends are used by small and middle e-shops as well.
Single picture home pages and parallax effects examples in e-commerce websites
An Australian handcrafted menwear brand features its products on their single picture homepage.
- A high quality image shows the finest details of the product, you can see it’s really handcrafted
- The idea of the product is described through typography and brand name definition
Made In Days sells handmade leather goods.
The first screen is occupied with the image showing the product in action
- If you scroll down, parallax and animation effects present the goods, explaining what they are and how they are made
- The homepage is minimalistic, but still it has information on sizes and qualities of the product, including availability
- Ghost buttons are used so that the call to actions won’t interfere with the product view
These Australian coffee roasters created a wonderful website.
- At first the home page looks like several pictures describing the journey of coffee
- As you scroll, the pictures start to move in a very unusual way
- As you hover over pictures, they appear to be links to pages
- A hidden menu is used, what’s more, there is an expand/collapse link at the bottom of the website, which reveals a footer with links. It is hidden by default so it won’t interfere with this wonderful design idea
A common misconception is that you can use creative pages only for fashion, clothes, jewelery or cosmetics. Here’s a great example of showing a rather down-to-earth product.
- The first screen is occupied by a big image of the goggles
- As you scroll down, the mud is moving to imitate the environment the product will be used in
- As you scroll down more, parallax is combined with amazing animation, showing the product from different sides, including its inside structure, and featuring its main positive sides
This awesome home page doesn’t have any photos, but as you scroll down you’ll see some parallax art portraying various bike styles so you choose the one that’s suitable for you. And these guys don’t sell bikes – they sell posters and other printings of their designs!
Rimmel is the one big brand on the list here, but it’s using the parallax trend to its most:
- parallax sections for each product take almost the full screen
- element movements create volume and depth of the picture, also adding to the style the brand advocates
- as all long parallax pages, Rimmel home page has an indicator to show where you are now and to let you jump to the desired section right away
- A very simple home page: just a photo of the product, subtly showing the brand logo
- small but still visible menu
- Hidden menu and large graphic icons for links
- Menu icons change size when scrolling
- Parallax effects for showing different tastes of the same product
Shwoods chose a perfect full screen picture. It presents a new glasses collection, also adding sense to the brand style.
- Hidden menu is used
TheQ camera homepage combines several trending features:
- a full screen video as a background
- parallax effects that remind visitors of snapping a photo
- the pictures show both the product features and the slides that can be made with the camera
While parallax effects should be custom created with some serious design and coding work, a single pic home page layout is easier to set up. A lot of e-commerce extensions or themes allow doing that.
Points to consider when switching to a single picture home page design
- Use custom photography to place on your home page. Make sure the quality of the picture is great, and it looks nice of various screen sizes (desktop/mobile):
2. If you want to place call to actions over your pictures, use ghost buttons, they won’t hide parts of the images and won’t interfere with the perception of the image message you’re sending to the visitor:
3. Make sure you don’t use abstract or stock pictures, or pictures that are beautiful but don’t have any connection with your products whatsoever. Here’s a single doubtful example; the pictures on the Belief home page are very grained and of very high contrast, so it’s even hard to tell what exactly is shown on the pics. Maybe the retouch style corresponds to the brand perfectly, however, it is very hard to tell what this website actually sells:
4. Be precise with your wording. Such a page layout means you have less words to fit in. Make sure you tell what the customers really need:
5. Check if your slider/carousel works fine and fast and optimize the images, finding the balance between quality and image file size.
Do you like when a shop’s home page consists of a single image? Share your opinion in comments.