What is Parallax Design?

Parallax in Web Design

 

Parallax originated in side-scrolling videos games in which the background moves at an independent rate from the foreground image.  This same principle is used in many modern web designs, allowing multiple elements to move at different speeds giving a rich and robust user experience.  Nike was one of the first major brands to utilize parallax web design.

mario parallax

 

The “Fold” is dead! (And was never alive)

When it came to web designs of the past, people would often what to jam as much web content above the “fold,” or the scroll line (meaning the content that is visible when you enter a site is “above the fold” while everything under that was referred to as “below the fold”).  This term originated from newspaper advertisements and layouts.  So when you open a newspaper, the big fold at the bottom bisects the paper into two sections.

It was always an odd term to me because it tried to take an established media term and use it in a new media(the web).  While it is important to have pertinent information and branding immediately visible upon page load, some of the best information and stories can be told through scrolling.  Because of this, the term and its antiquated principals are often disregarded by designers and developers.

 

Pros of Parallax web design

This engaging technology is great for making a fun and memorable experience within a website.  It can help tell a story or products, services or company history using layered graphics and text.  These effects generally help lower bounce rates—an important metric that determines how long a person stays on web pages without leaving to a new site.  Some of the larger benefits of parallax include:

  • Unique experience
  • Greater User Interaction
  • Engaging Content
  • Storytelling by leading a visitor through a branded process, history, or idea
  • Lower Bounce Rates
  • Layered Graphics improve aesthetics
  • Improved brand exposure via word of mouth and social sharing

 

Cons of Parallax web design

While the benefits can largely outweigh the downsides of Parallax design, there are still some factors to take into account.  These may include:

  • Slower load times
  • Some effects do not work on mobile
  • Single page sites can kill SEO efforts

 

Let’s see some Parallax sites!

Here is a short list of some fantastic parallax websites.

early-1
InTacto Agency
http://www.flatvsrealism.com/

 

early-2
Peugeot
http://graphicnovel-hybrid4.peugeot.com/start.html

 

early-3
Oakley
http://moto.oakley.com/

 

early-4
Sony
http://discover.store.sony.com/be-moved/

 

early-5
Seattle Space Needle
http://www.spaceneedle.com/home/

 

If parallax design seems like a strong vehicle for your brand or products, give us a call and we’ll be happy to answer all your questions and show you some of our work.

Leave a Reply