Parallax Design Best Practices

By on June 26th, 2012

Parallax websites are the new cool kids on the web design block. Everybody wants to create one, but few really know what makes a parallax website good.

Parallax websites use a special scrolling technique where the background image moves slower than the foreground image, creating an illusion of depth. Originally used in the multiplane camera technique of traditional animation since the 1940′s, it makes a website feel more interactive and dynamic.

When used correctly, parallax scrolling can be absolutely stunning. However, many people are using the technique blinding; the results, no matter how eye-catching, consequently lack meaning and the foundations of good design.

If you’re thinking about jumping into the parallax trend, make sure you keep these best practices in mind:

1. Have a Reason to Go Parallax

Don’t build a parallax scrolling website just to make it look “cool.” You should have a point to using the technique other than pretty graphics and animations. Know why you’re using parallax scrolling; not all websites will work well with this technique.

Here are some websites with awesome concepts to go with their awesome parallax websites:

Krystalrae

Krystalrae is a Filipino-American Fashion Designer based in New York City. She uses parallax scrolling to showcase her designs in an innovative way. Her model changes outfits as you scroll down, making it easy to go back and forth between your favorites.

The photoshoot must have been intense for this concept.

Eephus League Magazine

The first issue of Eephus League’s Magazine is incredibly well-crafted, not to mention “mind-blowingly” beautiful (I’m pretty sure that’s not an actual word). As you scroll through the website, you feel like you’re flipping through pages of an actual magazine. There’s a refreshing balance between clean, minimal pages and stunning editorial-looking photos and illustrations.

Eephus League Magazine features beautiful typography and full-page photos.

2. Good Storytelling

A parallax website is most effective when it brings the user on an adventure. The nature of parallax scrolling makes a website feel like a video game or movie, so it makes sense to craft a captivating story. Plus, this gives the website the underlying purpose it needs.

Bomb Girls

Bomb Girls is a Canadian television show about five working women in a Canadian munitions factory, building bombs during WWII. Their website brings you on an adventure through the factory, rooming house, and parlour, where you can discover videos, news articles, and behind the scenes contents about life in the 1940′s.

Explore the worlds of each Bomb Girl, set in the 1940's.

Ben the Body Guard

Ben the Body Guard is an app that protects your passwords, photos, contacts and other information on your iPhone or iPod Touch you’d want to keep private. Ben walks you through the “mean streets”, talking to you about security dangers as you watch robbers run across the screen, spot dead man outlines, and get a glimpse at an unsettling torture scene through a ceiling window.

It’s a wonderful way to combine engaging storytelling with meaningful graphics, building trust and a completely memorable brand.

Ben gives you a tour of the most dangerous neighborhood I've ever seen.

Michaelberger Booze

This experience starts off with a full glass of Michaelberger Booze 35% at 12 o’ clock. As time goes on, you drink more and more until things start to get weird and you find yourself in a cozy autumn scene complete with a campfire. When you’re finished with that, you’ll drink Michaelberger 45% and get transported into a breathtaking world in the sky. This is a great example of using good story telling to attach ideas and emotions to products.

I'm looking forward to my campfire after drinking some of this.

3. Clear Navigation Between States

Parallax websites are definitely not conventional, and the lack of familiarity with the user interface can be daunting. Giving users an easy way to jump from one part of the page to another may help alleviate that. It’s best if the navigation is fixed and always visible, even as everything else on the website is moving in all directions.

Whiteboard

When you scroll past a certain point on Whiteboard’s website, a navigation bar appears at the top of the page. Instead of scrolling up and down the whole page trying to find what you’re looking for, you can quickly jump to different parts of the website. This is a good way to combine traditional magazine with the visual punch of parallax scrolling.

Whiteboard is a creative agency with a well-done portfolio.

Unfold

Digital agencies obviously know their stuff about good user interfaces! Unfold’s parallax website features a whole lot of moving abstract shapes that can get somewhat chaotic. Coupled with a looping scroll (when you get to the bottom of the page, the website starts back at the top seamlessly), it’s easy to get lost in this splash page. Luckily, they keep their navigation fixed at the top right corner of the screen.

Also, you should really check out their interactive map.

And this is just a placeholder while they get their REAL website up.

4. Don’t Forget About Communication

Good design focuses on communicating a certain message or idea. Sometimes, designers may get so caught up in creating a vivid parallax experience that the content starts to play a secondary role. Remember that users are on the website to achieve their goals; let the content speak louder than the aesthetics. The best way to do this is to keep animations simple.

Cantilever

The only parallax effect on this website is the content sliding over static background images. It creates a nice effect while not going overboard with flashy animations.

I love the chalkboard style menu!

Jan Ploch

Jan Ploch’s portfolio starts out with over-the-top animations of a training soda bottle, but the effects take a backseat once we get to the content. I’m able to look through his work and read about his process without getting distracted.

I'm not really sure why his website is half in English and half in German though.

Overall, it’s easy to lose sight of the main goal when designing parallax websites. It’s a new toy for designers (and developers), so we tend to get carried away with shoveling on as many effects and graphics as the website can hold. It’s worthwhile to take a step back and ask yourself whether you really need parallax scrolling for a particular project. Keep things simple and easy to navigate.

Don’t make it pretty – make it a good design.

 

Share
back to top

4Comments

  1. Lee Khleang says:

    Nice! I was surprised to see KrystalRae, they’re actually friends of mine that I got to work with on the brand. 

  2. Scorpineo says:

    These are conceptual best practices, where are the coding best practices for parallax web development?

Leave a comment