Parallax with the best of ’em

According to Wikipedia, Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.The technique grew out of the multi-plane camera technique used in traditional animation since the 1930s, and was popularized among video games in the 1982 arcade game Moon Patrol. (thanks for the explanation wiki!)

Who remembers playing this game?? (not me)

download

 

For the non-techy people (like me),  what I find so fascinating about Parallax scrolling is that it keeps the viewer’s eye engaged. It creates depth and movement to a page, making it more interactive. Elements in either the background or the foreground have the ability to move, making the computer screen transform from flat to more 3-D like. I felt it was important to turn to computer experts regarding Parallax scrolling, so I googled, and then I googled some more, and now I feel like I have a much better understanding.

According to Helene Sears, a BBC editor who creates a huge range of visuals including all of the daily charts, maps and infographics that accompany on online news stories, “Using parallax scrolling for the Bond feature allowed us to present information in an engaging way that enhances the content without overpowering it and we’ll be looking for ways to use this approach again on bigger news stories”. To read more from Sears and her work click here.

However there is down side to this type of scrolling. Simon Reed, a graphics and web designer says “But for all the benefits there are occasional trade-offs that have to be made when designing and creating parallax-scrolling sites. Namely, the emphasis on design over the content. This can  have a knock-on effect when it comes to readability, search engine rankings and the overall effectiveness of what you’re trying to say; which are all pretty important if you’re relying on a parallax-style site as part of a marketing push”. To read the read more on Reed, click here.

 

Ladies and Gentlemen, now I’d like to present some nifty examples of Parallax scrolling:

http://www.bagigia.com/

Screen shot 2014-08-14 at 8.43.53 AM

This site has a good balance of white space yet still is interactive and engaging. The scrolling comes from different angles, as does the pop-up of “hand-written graphics”. The site had good movement to it. After looking at other examples, this site was a bit on the plain side of things. The cool thing is on the initial landing page, the background is textured like leather, which I found it very appealing.

 

http://uk.rimmellondon.com/

Screen shot 2014-08-14 at 9.00.35 AM

This site was interesting, it was almost as if you were traveling in an elevator, and each time the elevator door opened there was a new scene. While some of the scenes were a little busy, I really liked that the designers choose only one or two elements on the page to move. They did a good job at creating depth and achieved that 3-D like quality to the page.  In the screen shot above, as the two tubes of mascara move up and down on the page, it creates an eye catching element and the movement, for lack of better words, is cool.

 

http://whiteboard.is/

Screen shot 2014-08-14 at 8.50.01 AM

WOW WOW WOW!!!  Taking a screen shot of this site does not do it adequate justice! Its pretty mind blowing. There are many layers to each page, yet its not overwhelming. There is dynamic movement which is very eye catching, and the different pages move cohesively into the next. There is text on the page, yet its not clustered, and is easily read. On this particular screen shot, there is a video playing in the upper portion background, while the smaller video icons easily glide up and down the page in the foreground. This is one of the best examples I came across.

 

These examples can easily be applied to public health. The take away message is to create a webpage that strikes a balances with a dynamic, eye-catching movement and presenting clear in-depth information.

 

 

 

Advertisements

5 thoughts on “Parallax with the best of ’em

  1. This is great Kirstie – you really dug into some analytics that I knew nothing about before reading this. Thanks!

  2. Kirstie,
    Thanks to you now I know what to call those moving slides on the websites haha. I agree that parallax can be engaging and eye catching, that is the first thing I would look at before browsing the rest of the site.

  3. My husband is a UX/UI designer and he is literally infatuated with Parallax. Full disclosure, the nuance is lost on me and I actually find the format really hard to navigate. BUT, you make a great some great points here and I love your examples – plus with so many advances in web design I do think it’s exciting to have a new era of design style. Fun post!

  4. No, I do not remember ever playing moon patrol. Hmmm, Kate Moss definitely caught my attention. Nice illustration.
    I like your message. The Work With website is awesome. They did a great job, except for that “we empower visionaries” statement that would not seem to leave me alone. To tell you the truth, I like your blog better because it is easier to follow. Once again you caught and retained my attention in your blog. I think you are a natural at this kind of thing.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s