Justinmind

BLOG

Expand your prototyping knowledge

5 steps to building web wireframes with parallax scrolling

5 steps to building web wireframes with parallax scrolling


Web prototyping with parallax scrolling: 5 step guide

Parallax scrolling is one of 2016’s top trends in web design, and it’s easy to see why – it makes for awesome-looking UIs! That said, it’s tough to get parallax scrolling right sometimes. So that’s why we put together this 6 step guide to web prototyping with perfect parallax effects; we’ve even thrown in 8 expert tips on how to build parallax scroll with a Justinmind prototyping tool to help you get started. But you’ll have to wait till the end to read them.

Step 1. What is parallax scrolling in web design?

Let’s start with the basics. Parallax scrolling is when the background of a website moves at a different speed to the foreground, creating a multi-layered visual effect. For the last few years parallax has appeared all over the web, from make-up sites to UK foundation The British Legion, and its popularity doesn’t look to be waning yet. This might be down to the fact that parallax enables designers to weave strong stories, improve UX and, best of all, flex their creative muscles.

 

parallax-scrolling-google-trends-query

“Parallax scrolling” Google Trends query

Step 2. Why we use parallax scrolling in web prototyping and design

Web prototyping and design have been revolutionized (we don’t think it’s too strong a word) by parallax scrolling. In 2016, a user expects websites that spin an enticing narrative, that encourage engagement and that inject a little light-heartedness or pleasure into the digital experience; gone are the days of plain images and monolithic slabs of information.

Just take a look at this example from Lixpen, which brings together all the positive possibilities of parallax scrolling.

 


Download Justinmind today and create parallax scrolling in your wireframes!

DOWNLOAD FREE


 

Step 3. Web prototyping with parallax scrolling: getting started

Web prototyping and parallax – the pros

  •  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

Web prototyping and parallax – the cons

  •  Longer load times thanks to hefty layers and images
  • Device or browser incompatibility
  • Getting parallax right for mobile is complex
  • It’s kinda everywhere! Parallax for parallax’ sake is not going to boost anyone’s user experience.
  • SEO unfriendly – the more images and movement on a page, the less keyword optimized text. It’s all well and good having a gorgeous site but if no one ever finds you in the SERPs, you might as well not have bothered.
  • Crippled analytics. As this post from the Content Marketing Institute points out, “Single-page websites may ease the user experience, but they make it tough to collect and analyze different points along the buyer’s journey. That means fewer data points for analyzing how your visitor interacts with longer-form content.” And that is not good.

Step 4. Parallax scrolling in Justinmind prototyping tool

So now we’ve run through the basics of parallax scrolling and run through the pros and cons, it’s time to get prototyping. If you choose Justinmind as your prototyping tool, you’ll have two main weapons in your parallax arsenal – simulation and UI libraries. Since we released version 6.4 (it feels like so long ago now…), Justinmind has allowed you to simulate parallax scrolling with on any device you like. 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.

So let’s get started prototyping a parallax website in Justinmind. Instead of creating a new prototype right off the bat, start by checking out an example or two – clicking the parallax option will bring up examples of the kind of parallax creations Justinmind is capable of. Once you know what you can do, open up the desktop app and choose the web prototyping option; the prototyping tool will automatically load all the relevant UI libraries, including our Parallax elements.

parallax animation example

What’s in the parallax UI library?

Our parallax-specific UI library contains pre-made UI elements to enable you to easily add pinned elementsapply different scrolling speedwireframe slide-in elements on scrollprototype sticky elements on scroll and create floating menus.

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 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. Give it a try and tell us what you think about it!

Step 5. What about parallax for mobile devices?

Yes, we know we started out by saying that parallax scrolling on mobile devices can be complicated. But that’s not to say it should be abandoned! Although, as Jacqueline Kyo Thomas points out in UX Matters, parallax sites tend to “fall flat” on a mobile device, there are ways you can work to make your parallax site more responsive. There’s no quick fix to the parallax for mobile problem, so consider following SEO expert Nivneet Kashual’s advice and only parallaxing is your brand is already well known, or you’re working on a microsite.

In Justinmind when you open a mobile prototype you won’t have automatic access to the parallax UI libraries. But no problem!  You can still load the libraries by clicking on “Add/Remove libraries” in the Widgets panel.

Bonus! Test your parallax scrolling in a prototyping tool

Obviously, testing is a key part of successful web prototyping, and testing your parallax experience is no different. The ability to simulate a web or app prototype on a range of devices throughout the design process means that you can validate functionality as you go, and identify glitches ahead of development. Make sure you’re working on a prototyping tool that enables testing on different devices, and is integrated with user testing tools.

Here at Justinmind prototyping tool, we’re integrated with all the main user testing tools and we’re enabled for cross-device testing, meaning you can get the feel of your parallax scrolling designs at any point in the web prototyping process.

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

download-justinmind-prototyping-tool-banner-1

Cassandra Naji

About the Author

Cassandra is Marketing Content Editor at Justinmind

Leave a reply

Your email address will not be published. Required fields are marked *