Prototyping parallax scrolling effects: five design tips and tricks for UX design beginners
Parallax scrolling is one of those web trends that we either love, or love to hate. We have experienced the ebb and flow of parallax websites over the past 5 years, with the parallax effect making a splash as a rather controversial UX trend in 2015.
Whether you’re a fan or not, you can’t argue that it’s tough to get parallax scrolling right. Luckily, there are ways to make the design process a little less painful, thanks to prototypes! Prototyping tools like Justinmind make it really easy to build out amazing parallax websites.
Want to give it a go? Here’s our beginner’s guide to prototyping parallax scrolling websites with Justinmind.
What is a parallax website?
Parallax scrolling is when the background image of a website moves at a different speed to the foreground image, creating a multi-layered visual effect. The parallax scrolling effect has been around for years in classic video games, but has only taken a front seat in web design more recently. Now big brands like Nike, TED and Costa Coffee have been sporting the UX trend, and the results look great:
And in case you’re wondering what it looks like in numbers, take a look for yourself:
Why use a prototype to design your parallax website?
Web prototyping and design have been revolutionized (we don’t think it’s too strong a word) by parallax scrolling. Now in 2017, web users expect websites that spin an enticing narrative, encourage engagement and inject a little light-heartedness or pleasure into the digital experience; gone are the days of plain images and monolithic slabs of information.
Prototyping your parallax website allows you to quickly build out UI interaction and test it in real-time, early on. With a prototype, it’s easy to iterate on past versions and fail forward in the design process. For parallax design enthusiasts, this should be music to your ears! And if that’s not enough, check out the rest of the benefits of parallax prototyping:
- Boost user engagement
- Tell a story, don’t just present information
- Arouse curiosity and make users want to scroll through your page
- Create intuitive scrolling, a must-have for touchscreens
- Increase call-to-action clicks
- Revolutionize engagement with long-form content, keeping users on-page and engaged longer
Just take a look at this example from Spotify, which brings together all the positive possibilities of parallax scrolling. We’ll show you how to replicate this example below.
What’s in Justinmind’s UI library for parallax design?
Our parallax widget library contains ready-made UI elements that enable you to easily add pinned and fixed-position elements, apply different scrolling speeds, wireframe slide-in elements on scroll, prototype sticky elements on scroll and create floating menus. So much choice!
Justinmind’s parallax design elements allow you to build out and simulate your prototype just like the real deal. And we’re always updating our UI libraries and kits to include pre-built UI elements specifically for parallax effects. They’re drag and drop friendly like all our UI elements.
If you’re feeling confident (and why not?), you can parallax at different speeds, or customize the following features for more personal web prototyping:
- On Scroll event – add the On Scroll event to your UI elements and simulate parallax scrolling in either static or responsive screens.
- More attributes per element. In addition to value, you can easily set up expressions using an element’s position, width/height and rotation angle.
- New constants. Scroll x and y positions are constants to that you can use in your expressions.
- Calculated positions. Within the “Move To” action, you will be able to move any element to a calculated position.
You could end up with a parallax scroll effect as awesome as this!