The Requirements Agency
GODSPELL DECONSTRUCTED – The making of Broadway’s first parallax scrolling website.
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.
Godspell on Broadway receives CSS 2011 Site of the Year Nomination
The new Godspell on Broadway website has been nominated for the Awwards CSS Website of the Year 2011 competition. If you get a moment, please vote for us!
Check out the new GODSPELL website! It’s pretty awesome! @georgesalazar
OneSpring collaborated with the amazing marketing team at Davenport Theatrical Entertainment to redesign and implement the first ever Parallax Scrolling website on Broadway.
Parallax is a technique used to create an illusion of 3D space by moving layered objects or images at varying speeds in relation to one another. Although it was originally constructed for the gaming arena, it is a growing trend for web design. With the advancement in HTML5 and CSS, designers can now achieve experiences that were only reserved for Flash projects in years past.
Ok.. The new GODSPELL website RULES! Click on each individual cast member to see footage of their song!! @CelisseMusic
The new GODSPELL parallax site contains several layers of carefully selected and prepared motion graphics each of which moves faster the closer you get to the user. Complex foreground objects, such as the tree in scene one, the taxi in the cast scene and the bus in the subway scene, are designed with detailed transparencies so you can see the main character through the leaves of the tree and through the vehicle windows. The background is a seamless red brick wall that spans the entire piece and contains show information, interesting imagery and several areas of interaction.
If you click on the bios at Godspell.com, you’ll see clips from the show (ie. a snip of me singing ALL GOOD GIFTS). Pretty cool! @tellyleung
“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
As you scroll down, 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 OneSpring’s 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.
Visit www.godspell.com to experience the new website.
Scott McDowell, Chief Innovation Officer for OneSpring says “The GODSPELL story provided us with an assortment of great content and imagery therefore we knew we had to choose a technology that would provide the right medium for delivering the message. A number of factors led us to a horizontal parallax scrolling technique accomplished by using HTML5, this enabled a richer, almost three-dimensional experience that works across multiple browsers and devices.”
The Parallax Design / Scrolling Experience
I have to admit these are one of my guilty pleasures; in my down time I’m often scouring the web to find the latest Parallax indulgent, with our own addition only a few weeks away. As with any great experience the key to an effective implementation is to focus on a compelling concept while fleshing out the story. This ensures the technology and design are merely passengers and not the primary drivers of the experience.
So what exactly is Parallax design? The wikipedia answer “is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines”. Now you may be curious how this pertains to web design. Simply put, parallax web design is the technique of placing multiple images, videos or objects on different dimensional planes that scroll or move at varying speeds creating an illusion of three dimensional existence in a two dimensional browser.
Although parallax scrolling has been around for nearly 30 years in the video game world, it made its first appearance on the web about 5 year ago in some FLASH instances. With the recent advances in browser support for HTML5 and CSS, designers are now able to create these interactive experiences without the bloat of FLASH, igniting an explosion of parallax sites and the latest in web design trends.
I’ve compiled a number of sites as well as various tutorials on how to implement your own parallax design.
Tutorials
Smashing Magazines’ behind the scenes of Nike’s Better World.
Smashing Magazine’s Parallax Tutorial
Behind the Scenes of NewZealand.com
Vertical Scrolling Examples
Horizontal Scrolling Examples
Recent Posts
Categories
Tags
Contact Us
Join Our Email List
Government Portal
