Parallax Web Design: Fad or the future?

When the first “designed” websites started appearing in the 90’s, they were predominately produced by designers who had print backgrounds. So many websites looked like an online version of an organisations’ printed brochure. This restricted form of web design became the norm as all necessary information needed to be contained on the one screen and therefore no web site needed to scroll. Looking back, it was what we were used to. Dialog boxes, games and CD-ROM multimedia shows were all contained within a single screen so it was only natural to take those visual principles into the form of websites.

Nowadays, it’s second nature to scroll because as web design has developed into a fluid state of growing and shrinking web pages, so have user’s expectations. Clever web design has given us the expectation to scroll because we want to see what else the page has to offer past the edge of our computer screen. Information isn’t squeezed into a single screen anymore, which can make scrolling actually become a positive part of user interaction within a website and therefore make it an enjoyable experience. As long a site is designed properly and maintains a high level of interest, encouraging a user to scroll, then we are already there and we have maintained our client’s interests in the same way my mum has developed an obsessi-, I mean, interest in Facebook!

Modern web designers have developed ways to use scrolling as an advantage by use of colour, space and minimalistic layouts. These techniques have evolved over the years and more recently seen an influx of “parallax” web design and development.

What is parallax? According to the powers that be, parallax is “a 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” (Oxford English dictionary (Second Edition ed.) 1989). They’ve even managed to create a calculation that goes with it…

Parallax Equation

You can see it now – a client’s reaction when you give them this answer. If they haven’t started crying or thrown something and walked out of the room in a rage, surely the blank look would be enough to tell you that you’ve lost potential business!

So, an explanation for the rest of us: In a nutshell, parallax web design uses multiple backgrounds moving at different speeds as a user scrolls down, giving a sense of depth that is usually devoted to a flat, 2D space. Picture a scene where you’re driving in a car. You look out your window and you see the ground racing along next to you. In the distance are hills that appears to be moving slower, then behind that is the ocean, hardly moving at all. That’s what parallax web design is all about.

As I was trawling through examples of parallax web sites, a thought entered my head. I’ve been seeing parallax on the screen for years. I might be showing my age here, but I remember when Super Mario Bros 3 came out on Super Nintendo – the first time you could get the flying Racoon Mario. It was AWESOME! I remember when I flew, the curved trees, clouds, vines, flying ships, cannons on flying ships, cannon balls that came out of the cannons on flying ships… You get the idea – they all flew at different speeds, hence giving the sense of a 3D scene on a 2D platform. So, it was only a matter of time before the graphics I saw on my video games were to be adopted for parallax websites. Funnily enough, one of my favourite sites I stumbled across was for Nintendo’s Mario Kart on Wii!

As a web designer, I fully appreciate the complexity of the thought process that goes into projects such as this. The “traditional” scrolling method of up and down has been given a new dimension. With the power of parallax web design, you can absorb your users in a world that maintains the utmost interest – making a website fun! Many parallax websites use the “single page” theory, where a single page is used in the navigation process. Users don’t click through to pages – instead they scroll, giving a sense of an actual, travelling user journey. Once all the information is absorbed (in a cleverly designed way of course) and the user reaches the end of the navigation journey, contact details are revealed. Chances are, because the user was interested enough to scroll to the end, they will be interested enough to use you for a project of their own.

I stumbled upon German design agency OK Studios. Even though the site is in German, my interest level was maintained. I think these guys have done a fantastic job at incorporating parallax navigation, mixed with design aesthetics. A real piece of art!

The only hurdle that parallax websites face is the fact that information gets lost while the user is distracted with the functionality of the website. Rather than absorbing the intended message, the user becomes more interested in the interaction process. That is the challenge that designers are faced with every day – the difficult balance of functionality and aesthetics. Good designers will always find a solution that incorporates both aspects. It’s all part of the creative solution

Is parallax web design here to stay? I’m talking from a designer’s point of view here. I think that with every new and exciting style, there is the challenge on how quickly it catches on. Parallax web design, when done properly, is simply cool. Designers have forever been pushing boundaries with their ideas. Team up with a good developer and a website can become an amazing piece of information and marketing. I think parallax web design is a clear example of pushing boundaries and staying ahead of the game. I would like to see it stay as web designers stay determined to out-do each other. Whether or not parallax design will become part of popular culture will depend on how much it is understood by the masses. And how big a client’s budget is…

Hallway is a growth-driven agency for ambitious businesses - we offer peak-performing, Ever-Evolving websites and online marketing that deliver stellar results.

Don't miss our next article! Subscribe now:

View recent articles
  • Share this article: