On the web you’ve probably heard the phrase “parallax design” thrown around here or there, right? So, what is it? In a nut shell, it means to alter the position of an object so that it appears differently from another viewpoint. On the web, parallax design is a style of coding that manipulates elements on a web page to create the illusion of movement and depth in a flat digital space.
Commonly, designers use parallax design to create an effect which slowly scrolls page elements into view. You see this in single-page layout websites and in cases where a lot of images are viewed at once. This is referred to as “parallax scrolling”. But, parallax design has untapped potential for creating visually exciting websites. Here are some great websites that push the envelope of parallax design.
Otis Redding’s website is a fantastic blend of nuances in design and storytelling, while appealing to an aesthetic of a time gone by. Websites get this way when we work creatively and focus on creating a particular experience for the user. Tapping into that creative side isn’t as difficult as it sounds. We can share a vast array of emotions and ideas by deciding on something as simple as color choice. Taking it a step further, the folks behind Otis Redding’s website bring it to life by animating the pages with parallax design.
The website is split up into parts based on the navigation. The colors, textures, images, and typography choices that help set the look and feel of something vintage. This helps to differentiate different design elements in the grand scheme of things, but introducing parallax design helps set the stage! Visual elements shift into view at different speeds. Page content suddenly shifts upward over photographs and album covers that ease-in smoothly. Just like Otis himself, this page is a performance of texture and visual imagery over a colorful dance floor.
Personally, this design takes me back to a time when I was a kid. I’d waste hours in this dirty record store flipping through albums and completely emptying my wallet on old records. Odis Redding, then Eartha Kitt, then Chet Baker, then the next artist, then the next – album after album. Music blasting through the beat-up wall speakers in the store. That place is still there, hardly any records any more though. Those were great times. Through parallax design and good visual elements, this site brings those feelings back to me again.
Ben the Bodyguard
Another fantastic example of parallax design is the story of Ben the Bodyguard.
So, who is Ben? Ben is the kick-butt, take no prisoners kind of guy whose only job is protecting your information. Nerd Communications does a great job of branding their product by paring an awesome narrative with simple parallax design.
As we scroll …er stroll through the mean streets with Ben, we are taken through the dark alleyways of an unsafe world that Ben is going to protect us from. Objects of Ben’s world come into view as we meander about. Thieves, trains, compromising situations – it’s a dangerous world out there and Ben is going to help make it a little safer.
Lions, tigers, and bears aside, this is a great example of the creative potential that can be achieved with parallax design. It is a mini adventure that establishes the validity of the character behind the product, which enforces the product’s good intentions and function. Crafting a website like this is a great way to articulate brand identity and shares a little bit about the fun-natured professionalism that Nerd Communications pours into their work. It’s good to have a little personality in your designs.
Jessica and Russ
Jessica Hische is a super talented designer whose portfolio jam-packed with gems-of-awesomeness, with a work ethic to envy. She is constantly creating useful side projects that are just as helpful as they are inspirational. Sites like the Daily Drop Cap, 52×52, and Should I Work for Free? just to name a few. She recently shared another side project, her wedding invitation The Story of Jess and Russ.
Various artist’s work illustrate the couple’s timeline, like this great work by Sam Webber. Parallax design is used to move elements throughout the site, guiding the user down the narrative. The choice of moving elements and design aesthetics establish a visual hierarchy that shares a story rather than just telling one.
Needless to say that this website is pure eye candy, as well as being a great example of combining creative forces! On one hand we have extremely well executed design married (no pun intended) with masterfully crafted art work, and on the other we have their stories running parallel. The website shares tid-bits of Jessica’s life while taking you on an honest, vulnerable, and charming story.
While technologies emerge and trends expire, the web constantly changes. As creatives, when we start pushing the boundaries we begin to see a surge of creativity. If you sprinkle a little practicality into the mix you start seeing designers introduce new visual elements with strong creative sensibilities like parallax design. With elements like parallax design in our designer toolbox, we have the freedom to be a bit more bold by sharing an experience, rather than just another visit.