The Beauty of One Page Websites

For many goals and purposes, you're exactly right. You could probably just say everything you need on one neat page.

Hot air balloons on a one page websites representation

Sometimes, the case may be that you simply don’t need a website with tons of pages and info to show visitors, you’re probably thinking to yourself, “man, I just need something simple and straightforward, not a total package or anything like that”.  For many goals and purposes, you’re exactly right.  You could probably just say everything you need on one neat page.  While every situation is different, and different projects require different things, this is often the situation for many of us.  This is what can make  one page websites so great and convenient.

One page websites have recently become very popular.  You don’t have to worry about maintaining tons of of pages, but all your content is constantly in reach of users.  This design trend is also great for people who want to advertise one time events, create online portfolios, or even for those just starting up a new business and want to introduce a new product.  By having all your content in one place, it allows you to get to the point, and let users know exactly what you’re about.

What Exactly Is Parallax Scrolling?

In short, parallax scrolling is the desired design effect, where the background image moves at a different rate of speed than the foreground elements, creating an interesting 3D style effect as users scroll further down the page.  It creates a rich sense of depth that really makes things stand out, and well…just look really cool overall.

One of the first examples of the wide spread utilization of parallax scrolling believe it or not, took place quite sometime ago.  With old school side scrolling video games like Mario Bros, Sonic the Hedgehog, and numerous others, parallax scrolling was implemented into the games core dynamic.  It made it seem as if the character was actually progressing and traveling forward or backwards throughout the levels.  These days, parallax scrolling is being implemented in the web design world, adding richness and depth to websites that users love.

However only when one page website design and parallax scrolling come together, can the real magic happen.  Websites that make use of these design trends together are able to reach out to users in a way that was otherwise not possible.  They are able to grab the attention of users, and easily tell a story that captivates audiences.

One Page Websites Show and Tell

Enough with all the talk and theory behind it, lets get down to it.  To quote and totally misuse a line from one of my favorite movies “The Matrix”, unfortunately no one can be told what parallax scrolling is…they have to see it for themselves.

Below we have listed five of our favorite and most creative websites with a one page design, that make great use of parallax scrolling.

Oakley

one page websites

Promoting their new product, the “Airbrake MX Goggle”, the eyewear retailer Oakley has created an elegant and clean website packed full of parallax goodness.  Not only is this website fully responsive, but the scrolling effects and beautiful photography really make the website shine.  These guys really do a great job of creatively showcasing their product to customers.

Website: http://moto.oakley.com/

Flat vs Realism

one page websites

I must say, I’ve not met anyone who doesn’t love what the guys at the international agency, inTacto have done with this site.  It’s hands down one of the most creative and interesting uses of parallax on the web today.  Their project Flat Design vs Realism tells the story about the history and battle between the two web design trends.  For those who have the processing power to handle it, they even include a short video game to play when you get past a certain part of the story.  Flat vs Realism has generated a lot of buzz since it’s launch and even won a webby award amongst others.

Website: http://www.flatvsrealism.com/

Sony

one page websites

For a truly beautiful example of parallax done right, look no further than the technology giant, Sony Entertainment.  From game consoles, televisions, and waterproof smartphones and more, the company’s new ad campaign “Be Moved” is absolutely breathtaking.  Sporting a completely responsive web design, along with stunning images and photography, Sony showcases it’s products in a clean and creative manners customers can’t help but love.

Website: http://discover.store.sony.com/be-moved/

Tomato Can Blues

one page websites

Tomato Can Blues is all about the captivating story of a cage fighter named Charlie Rowan.  Beautifully illustrated and crafted, the New York Times hits it out of the park, and brings the story to life.  As readers scroll the page illustrations come to life with stunning animations and special effects.  By far it’s one of the most creative parallax effects I’ve seen implemented, allowing websites to easily grab the attention of their audience.

Website: http://www.nytimes.com/projects/2013/tomato-can-blues/

Peugeot Hybrid 4

one page websites

This is by far one of the most interesting ad campaigns I’ve seen.  Peugeot has gone all out this time showcasing a comic book styled ad in order to introduce their new Hybrid4 car technology. As the page is scrolled the story unfolds putting you in the place of a spy, as she extracts information and makes her clean getaway.  The parallax effects really shines here, as the comic book feel is is accurate and fun.

Website: http://graphicnovel-hybrid4.peugeot.com/start.html

All in All

One thing is for sure, while Parallax seems like a new trend that’s recently popped up, I think we’ll see it utilized more and more as time progresses.  Having a one page website is not only easier for visitors, but it helps your company or website tell a story your visitors will love.  Chillybin has been implementing parallax for quite some time in many of our designs for clients.

With a strong passion for innovation and technology, we love making websites that not only work, but look good doing so.  If you’re interested in having your website utilize parallax, or would like to use it in a new project, reach out to Chillybin today!

Shaan Nicol

I help business owners increase profits by bringing their vision to life with a world-class website and gold-standard website support. Let’s connect!