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 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 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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.