We’ve all been told that you should define the story first then choose the technology. Well this is a tale of the exact opposite. It all started in early summer of 2011 when the first parallax scrolling websites began to appear. Although not the first, NIKE was by far the most publicized of sites and many can argue they deserve credit for bringing parallax scrolling to the masses. As slick as the NIKE site is I must admit it wasn’t the site that sparked my interest in this design, in fact it was a little unknown consulting firm. They designed a site that really took the use of parallax and creatively applied it to their service offering (the story).
Over the summer I started compiling a list of my favorite parallax sites and even created a short post highlighting several of them. During this time I kept searching for a client and project that would allow us at OneSpring to implement this new style. Eventually we found a project for one of our commercial clients and it was more or less a proof of concept in which we took static text and images of their 125 year history and produced a very rich and graphically stunning presentation using a vertical parallax implementation. It was a great first attempt and truly beautiful I’ll admit, however we didn’t have enough material to create what I was hoping would be our parallax pièce de résistance. Around this time I was having a separate discussion with Ken Davenport, the Executive Producer of GODSPELL about their existing site and how we’d love to turn it into a parallax experience. Ken being one of the most innovative producers on Broadway was quick to notice an opportunity of differentiation amongst the other sites promoting plays and musicals.
I sent Ken and his marketing team several design examples of what we could do and how this technology would be perfect. It not only works on traditional browsers but it would also work equally well on mobile and tablet devices without having to recode or download a bulky plug-in. They approved the concept and it was time to get busy as opening night was only weeks away.
The marketing team started sending us materials from background images and fonts to audio clips and cast bios. I then met with Mitch Moccia, OneSpring’s lead designer and interactive developer to discuss the first iteration. We discussed how we could include what they had given us and really play up the wall and the main character. The character in the story is the “blonde guy”, who doesn’t officially have a name yet remarkably resembles Hunter Parish and as story has it, the photo was shot nearly two years before Hunter was cast as the role of Jesus.
Version One was purely focused on getting the technology working and stubbing out the initial scenes that would eventually tell the entire story. We used static images from the existing GODSPELL site and Mitch started to overlay the first of the foreground images (the tree and Group Sales placeholders). Albeit rough, we knew right away the design had the makings of something amazing and truly unique for the Broadway community.
Version One
View the working iteration of Version One
Versions Two and Three focused on refining the parallax scrolling, smoothing out the speed of each foreground object, matching the velocity of our main character to other items, browser compatibility and creating what we called the scene transitions. The scene transitions at this stage are the tree, sign post, taxi and phone booth. During this iteration, Mitch started adding transparency to the windows of the cab, the panels in the phone both and the negative space of the street sign.
Version Three
View the working iteration of Version Three
Versions Four thru Six introduced many new elements while finalizing the story. As the story grew so did the canvas size. The initial width of all scenes in Version One was 3,000 pixels and by the time we reached Version Five we were pushing 6,000 pixels. The marketing team at GODSPELL provided additional assets like ring tones, videos, posters and other elements that were integrated on and into the wall.
Version Five
View the working iteration of Version Five
“The creative process was an iterative approach, one in which we went back and forth with the GODSPELL marketing team to craft the story of our character who walks through each scene looking at visual and interactive elements on the wall. Most of the objects you see on the wall and sidewalk were taken from actual New York City photos. In conjunction with the creative design we optimized the technology to ensure a smooth experience for each browser and device.” – Mitch Moccia, Senior Web Developer and Parallax Designer
In the diagram below we deconstruct the various layers that create the three-dimensional effect of walking along side the wall and seeing foreground objects in front of our main character. Each element was carefully timed to enter and exit the viewing window at the appropriate time to achieve the desired experience. In order to accomplish this, each element or object is set to a different speed at which it travels across the viewing window.
As you scroll, the main character proceeds from left to right through the urban cityscape and the user can view a video message from Stephen Schwartz, meet the GODSPELL cast, sample hit songs from the show and find an easy way to buy tickets online. Combine all of this with interactive design best practices, HTML5/CSS3/jQuery parallax code and precisely timed motion graphics and the new GODSPELL parallax site becomes a site worthy of the hottest ticket on Broadway.
