Remember playing Super Mario Bros on your Nintendo back in the 90s? It brings back the memories of those days when you were an expert in running through the Mushroom Kingdom, fearlessly flattening one Goomba after another, doesn’t it? Interestingly, this iconic and revolutionary arcade game was one of the first to use a design technique that is a rage these days.
Relive the first level of the game and try to figure out what web design trend we are hinting at.
Still not sure? The design team of Super Mario Bros used two layers of graphics instead of the traditional single plane in order to create an illusion of depth in its two-dimensional (2D) atmosphere. While one layer acted as the foreground, the other one was the background. When Mario started running, the foreground layer was made to move faster than the background layer. As the images in the foreground moved faster than the ones in the background, the entire design gave off a unique three-dimensional (3D) appearance without using any 3D technique. This clever design mechanism, which has made its resurgence in 2009, is now known as the ‘parallax scrolling’ method.
Scroll more to know more
What makes parallax scrolling extremely beneficial is its power to tell a story. With two or more layers moving at varying pace, web designers get an unparalleled level of control over the user experience (UX) flow. As website visitors keep scrolling to see images enter, exit and intertwine, their attention can easily be directed towards any desirable action. The visual narrative is so engaging and impactful that visitors usually can’t stop scrolling until they reach the end, thus making this technique the perfect medium to tell a brand story.
Take a look at the website of Iutopi, a web design firm based in Argentina, and see how brilliantly (and creatively) they have described their work to their prospects.
While Iutopi is using the parallax technique to elevate its entire website, Peugeot is using it to introduce and advertise its new HYbrid4 Technology with an auto-playing comic. As visitors manually scroll or switch the autoplay option, the story (just as in a video advert) unfolds in front of their eyes. Creativity at its peak!While Iutopi is using the parallax technique to elevate its entire website, Peugeot is using it to introduce and advertise its new HYbrid4 Technology with an auto-playing comic. As visitors manually scroll or switch the autoplay option, the story (just as in a video advert) unfolds in front of their eyes. Creativity at its peak!
Which type should you choose?
Wondering where to integrate parallax? There are three types of parallax design techniques that you can choose from:
1. Single-page parallax design
2. Parallax homepage, with other pages left static
3. Every page treated with parallax mechanics
While going for a single-page parallax design is the least affordable option, it’s also not very safe to treat every page with parallax mechanics because this can make the website extremely heavy.
If you want our opinion, it’s a smart move to entice visitors with a parallax homepage, where you can lay out your story in order to establish a personal connection with them. Once they’re intrigued enough, take them to the static pages. By now, they are already aware of your story as well as your creative touch, so it won’t take long to turn them into leads. Everything done to perfection without adding any extra load on the website itself.
Want to tell your story through parallax design? Contact us here.