E-commerce home pages in 2015: parallax and single photos trending

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
  • Amuses visitors and ties brand with positive emotions
  • Is remembered easily
  • Adds to the stylish image of the brand/product
Cons
  • Card design/grids look alike on hundreds of shops
  • No identity or design to remember
Requires additional time and resources
Used in
  • multi-brand stores
  • stores with a large number of products
  • marketplaces
  • mono-brand stores
  • brands/items with strong visual presentation
Typical elements
  • featuring a lot of products/blocks (special deals, categories, popular items, new arrivals)
  • slider/carousel
  • card design
  • traditional menu
  • featuring a brand, a single product or idea, a line of products but displayed as a single message
  • hidden menus
  • large typography
  • flat/material design
  • video content/background
  • parallax effects
  • single photo homepage
  • ghost buttons

A quote about web design

Source

 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

1. Falve

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

Falve - single picture home page design example in e-commerce

2. Made In Days

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

Made In Days - a single photo and parallax home page example

3. Pablo&Rusty’s

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

Animation effect on e-commerce home page example

4. Oakley

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

A nice example of parallax to present the product

5. Cyclemon

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!

Parallax for showing there's a product for everyone

6. Rimmel

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

Rimmel using parallax effects to feature top products

7. Salt
  • A very simple home page: just a photo of the product, subtly showing the brand logo
  • small but still visible menu

Single pic e-commerce home page

8. Lycka
  • Hidden menu and large graphic icons for links
  • Menu icons change size when scrolling
  • Parallax effects for showing different tastes of the same product

 

Parallax home page in e-commerce

9. Shwoods

Shwoods chose a perfect full screen picture. It presents a new glasses collection, also adding sense to the brand style.

  • Hidden menu is used

Shwoodshop single pic home page design

10. TheQ camera

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

The Q camera video and parallax home page

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

  1. 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):

Home page single photo example

Mobile view of a single pic homepage

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:

Ghost button usage

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:

Bad example of single page e-commerce home page

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:

Wording on a single pic home page

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.