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:
Download Justinmind and start creating amazing parallax website prototypes in no time
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!
Get started with parallax design with Justinmind prototyping tool – download now
Prototyping the parallax scrolling effect in Spotify’s website: getting started
So it’s time to get prototyping your parallax design. To give you an idea of what you can build with Justinmind, start by checking out an example or two – clicking the parallax option will bring up examples of the kind of parallax designs Justinmind is capable of.
To get started, download Justinmind. Open up the desktop app, create a new web prototype and customize the measurements as preferred. Justinmind will automatically load all the relevant UI libraries, including our Parallax elements.
Building out the UI navigation
First of all we’re going to create our navigation menu using Image and Text widgets. Customize the menu in the Properties tab. Learn how to make your navigation menu interactive here!
Now we’re going to make sure that the menu remains pinned to the top of the page even when the user scrolls down (like freezing rows in Microsoft Excel).
Go to the Parallax elements widget library on the left-hand side of the canvas. Drag a Pinned top widget to the canvas and place it at the top of navigation menu elements. Resize it to 1300 x 80 pixels (or to match the width of your canvas).
Important: place the navigation elements within the Pinned top widget’s panel in the Outline tab.
Giving your header a parallax effect
Next, you’ll create your fixed-position header and make this a real parallax website prototype. To reproduce the Spotify example, start by adding a hero image.
Tip: use SVG vectors to scale images.
You’ll need a Text box and some buttons to reproduce the website’s header and Call To Action buttons. You can customize the button style, such as its color, padding and text font, in the Properties tab.
To make sure our header section remains fixed upon scroll, drag a 30% scroll speed widget to the canvas and place it at the top of the canvas. Rename it “30%-slider” and resize it to 1300 x 710 pixels in the Properties tab.
Now add a 50% scroll speed widget to the canvas and place is on top of the 30% scroll speed widget and your header text box. Resize it if it doesn’t cover all of your text. This will ensure that your header text also remains fixed.
Tip: make sure your Pinned top widget is on top of all the over UI elements by moving it up in the Outline tab. Your parallax effect depends on it!
Now all that’s left to do is build up the body of your parallax web prototype. We suggest grouping the body UI elements within a dynamic panel to keep them tidy.
And that’s it! You’re a parallax design pro! Find more on prototyping parallax designs with Justinmind here.
Parallax scrolling for web and mobile: Justinmind’s expert tips
Our in-house UX/UI expert (and all-round-everything expert) Sergi recommends following these basic tips to ensure your parallax scrolling prototypes are successful.
- Don’t put style before content: content should always be your priority
- Keep it user-friendly: Make the experience as enjoyable and as clear as possible
- Navigation flow should be kept simple
- Keep important information readily available at all times—try putting valuable information on the upper half of the page
- Combine parallax scrolling with other design elements. Parallax scrolling is no longer new, in fact, it’s almost a requirement for websites, especially for one-page web designs. Going beyond parallax helps making the user experience unique
- Always keep in mind your web design’s goal—Parallax scrolling should make reading and navigating easier and consequently should make it easier for a user to accomplish a task
- Too much scrolling can be distracting—avoid endless scrolling, by avoiding featuring too much information on a single page that may annoy users and make information hard to find
The parallax design takeaway
Parallax design might not be your favorite, but it certainly is a powerful way for users to access your web content. Design it right and let your users decide.
The best way to design a new web design trend is to build it and test it out using a prototyping tool like Justinmind. You’ll be able to create visually accurate and interactive mockups quickly and easily, with time to spare to test out your parallax effect on real users.