Prototyping parallax effects: design tips and tricks for UX design beginners
Parallax design involves using the act of scrolling in order to move different elements on the screen, by using the layered method. Be it with a fixed navigation bar at the top of the screen or several moving objects that work together to deliver a unique experience – with its unquestionable sense of depth and ability to improve storytelling, parallax is a point of reference in UX design.
Parallax 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 parallax 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 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 websites with Justinmind.
What is a parallax website?
Parallax is when the background image of a website moves at a different speed to the foreground image, creating a multi-layered visual effect. Parallax 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:
Image credit: Fabulicious
What do scrolling patterns have to do with it?
If you care about creating user experiences that people love then getting your head around the basics of scrolling is necessary – thankfully there isn’t a whole lot that goes into the inner workings of scrolling. But here’s the important thing about scrolling: it’s the trigger that sets off your parallax design.
It’s a common misconception to consider parallax a third scrolling pattern. You see, you can have parallax design applied to many elements and components of the website. The real connection between the parallax and scrolling is that the user needs to scroll in order for the parallax to manifest itself.
If you want to step up the website with parallax design, we recommend implementing an infinite scroll. That way, you have plenty of room to develop the parallax effect while users don’t need to worry about going to the next page.
As you scroll, the content loads continually and infinitely. This type of scrolling is especially good if you have a lot of content to show but don’t want to break that content down into individual pages, which helps to boost user engagement. How? In theory, if users have to continually scroll to discover new content then they will be more inclined to stay on that page scrolling ad infinitum.
The infinite scroll helps to build a narrative and takes the user on a journey. Nick Babich points out that this “technique allows user to scroll the chunks of content without any interruption or additional interaction”. Perfect for the mobile user who doesn’t want to awkwardly click a link to go to a different page. Long scrolling is also great for creating portfolios or even resumes.
Best practices for parallax design
1. Use parallax design to tell a story
It’s no surprise that media outlets have adopted parallax design as a way to draw readers into long-form content. The New York Times is a pioneer in imaginative, engaging parallax website design – their pieces on women in prison or cage fighting break new ground in content design and delivery. Parallax websites have the power to draw users into a narrative and provide a sense of progression.
But you don’t have to be literally telling a story to exploit the narrative power of parallax scrolling. Parallax design is also a potent way of utilizing “guided storytelling”, points out Jaqueline Kyo Thomas in UXmatters. Use parallax design to weave the story of your product – humans are hardwired to love and remember stories, and parallax can help you tap into that.
Experiment with the narrative power of parallax in your website prototypes before moving on to development. Tell the story by prototyping slide-in layers as you scroll; set them to appear at different scrolling speeds to add more subtlety to the effect.
Adding expressions with the expression builder means you can play with advanced element attributes such as rotation and position. By mixing up these elements in your parallax scrolling prototypes you’ll be able to guide users through the story from start to finish.
2. Don´t forget your website’s main objective
It’s all too easy to get carried away with making a parallax scrolling website look super awesome. But parallax design should work to help your site achieve its core objectives, whether that’s selling a product, generating leads or disseminating content. Over-cooked or pointless parallax can stop users achieving their goals, according to the guys over at UserTesting blog.
Parallax design should increase the chances of users following desired paths and carrying out desired actions. Check out the parallax website of boxer shorts designer A-dam: elements slide into view as users scroll, but the most important action buttons are pinned to the foot of the page, following the user wherever they go and providing instant access to products and information.
You can get a similar effect by using the pinned elements in Justinmind’s parallax UI library. Select which orientation you want to pin to the element in (eg “Pinned top” or “Pinned bottom”). Apply the “Move to” action to the element and calculate the exact position you want within the prototype interface. You have 100% control over where your pinned parallax elements appear in the UI – play around with the prototype and align the parallax design with wider objectives.
3. Don’t overdo it
Applying parallax to your website design will result in different elements moving at different speeds. Even though you can have quite a bit of fun with parallax design, finding balance in your overall design is key – that balance between creating something truly unique with parallax as a tool and what users enjoy.
It’s a small but rather important distinction, because moving elements can stop being fun to look at rather quickly. Too many things or too fast a movement can be too demanding of our eyes and cognitive effort to keep up.
Another issue with parallax design is that it can be misleading: users will try to scroll down on instinct, which means you need to be careful with a parallax effect which does not use scrolling as a trigger. Consider Figmenta’s website. The animation is beautifully done, but does little to clarify to the user that there is no scrolling space in the screen – while the motion of the animation encourages the user to scroll. See our dilemma?
That means the effect should be employed sparingly – parallax for the heck of it will have a negative impact on UX, usability and site success.
4. Test your prototyped parallax design on real users
Building an interactive prototype before moving on to the final development phase is a great way to test out your parallax design. Usability testing on real users is invaluable when dealing with design styles such as parallax, which have specific applications and can strike audiences in different ways.
Historically in user testing, parallax designs have not shown to improve usability; in fact, in some cases users grew tired of the parallax pretty quickly. That’s something you want to avoid, so run the full gamut of usability tests on your parallax prototypes.
Justinmind’s expert tips: things to consider with parallax design
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 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
Amazing parallax design examples for inspiration
We know that sometimes, taking that first step in the design process is the toughest part. And when dealing with tricky concepts such as parallax designs, it’s only natural to need some sort of point of reference.
We put together some of the best examples of parallax design we could find out there in the virtual wild. These examples cover all sorts of websites and enjoy different styles – you’re bound to find something that catches your eye!
You can find them all on our blog post: 20 must-see examples of parallax effect websites.
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.
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 scrolling. They’re drag and drop friendly like all our UI elements.
You could end up with a parallax scroll effect as awesome as this!
Check out the Justinmind Parallax UI library.
Learn to prototype your parallax design on Justinmind
Parallax scrolling can have a massive impact on your finished design – but it ain’t the easiest effect to implement in your prototypes. It includes different elements that stay put while users scroll up and down, while other elements move at different speeds, which can represent quite a challenge for newbie designers.
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.
- On the properties menu, check the display pin position options box.
- On the properties menu still, you’ll be able to dictate the position of the element with X and Y margins. You can set any of the two as a fixed constant while the other adapts to create a scrolling effect you desire.
- Set the margins you want for the fixed and variable positions. For example, if you want a floating button that follows the user on the right – set a pin to right X position with a 100 pixel margin from the right edge of the screen.
- When you simulate the prototype, you’ll see the floating button to the right that accompanies you as you scroll down.
Fear not! Here at Justinmind, we made a tutorial that illustrates exactly how you can prototype your parallax design in a matter of minutes. Go ahead and check it out.
The parallax design takeaway
Parallax scrolling can be a potent way to direct users’ attention and draw them into the story of a product. But beware of overwhelming or frustrating users who want to find information quickly. 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 design on real users. Iterate and test your parallax designs with a prototyping tool to ensure that you end up with a site that meets both user needs and business goals.