Categories: iOS / Mobile Apps


Mobile app users probably associate parallax with single-page scrolling websites. But parallax is an increasingly common feature in mobile app design. From the app icons that jiggle on your mobile screen when highlighted to side-scrolling platform games, parallax is everywhere.

Let’s take a look at exactly what parallax is and how – and why – to add it to your mobile app.

Parallax is increasingly common in mobile app design.

Parallax is increasingly common in mobile app design.

What is parallax, and how is it used?

Parallax is basically where the position of an object seems to move depending on where it’s being viewed from. Take a camera, for example. Objects look different through the viewfinder or the lens of a camera. You can also experience parallax when you close one eye and then the other.

When it comes to graphic design, there are two main versions of parallax: parallax scrolling and parallax mapping.

Parallax scrolling is a type of asymmetrical scrolling. Objects are assigned either to the foreground or background, with background objects scrolling slower than foreground ones. This gives a sense of depth to a 2D scene, and actually stems from old-school animation techniques. You’ll see it frequently in games and on websites.

Parallax mapping is a little more complex. It’s used in 3D texture rendering and is used to add depth and realism to textures. Basically it displaces the texture coordinates of an object in relation to the angle the object is viewed from. The steeper the angle, the more displaced the object.

Parallax is used in scrolling games like Mario.

Scrolling games like Mario use parallax.

Using parallax in mobile app design

 

Parallax scrolling.

Unsurprisingly, parallax for mobile apps takes a leaf out of the web design handbook. Games frequently use it to create a sense of depth. Content-heavy apps use it for an interactive storytelling experience. Others use it to create visual interest in an otherwise flat design setting.

Parallax interactivity.

Mobile app design also features parallax in menus, “pull-to-refresh” widgets, welcome screens and onboarding sequences. These create a sense of interactivity, depth and feedback. Via parallax, users know that the app has responded to their actions. Parallax can also help guide users from one point to another.

Parallax icons.

Angle your smartphone and you’ll see your icons “shift” on the screen accordingly. Drag an icon, and you’ll see it jiggle on the screen. This is a feature that adds depth and responsiveness to the user experience. Using parallax for icons and similar design feature within an app creates a cohesive experience. It also provides users with immediate feedback on their in-app actions.

Parallax is bringing 3D back

As design is getting flatter and flatter, parallax is helping to bring back depth to our screens. It helps users gauge speed, movement, interactivity and the successful completion of a task. But like anything in mobile app design, it should have a purpose. Excessive parallax scrolling and movement becomes a confusing headache. Ensure that any parallax in your mobile app is designed for the user experience – and that it helps, not hinders, your users’ interactions.



If you enjoyed this post, please consider sharing it using the buttons below.

Touchtap is a mobile development agency specializing in mobile development. Learn how to get mobile applications developed.

Back to Posts