I am currently working on several wireframes / mockups.

The product I am designing will have a landing page with a parallax.

What is the correct way of representing this in a wireframe?

So far, I have a browser frame with a huge X box ( image ) inside it. Somehow, I feel this is not the right or best approach.

  • Good question. I've only ever seen prototype (gif/video) mockups for parallax sites – Zach Saucier Jun 25 '18 at 12:57
  • I'm very curious about this myself. The only other improvement I have made so far was adding a scroll bar to the browser frame. I now have two wireframes, the one that is just the image box with the scroll bar to the top and a second one with the scrollbar down, representing what happens when we go past the parallax. – mayk93 Jun 25 '18 at 13:07
  • Probably there is not a way. Insert text with an arrow. – joojaa Jun 25 '18 at 13:14

I have not seen a standardized way of showing/indicating the parallax effect.

One idea is using the image icon with a mouse indicating it is moving up or down.

parallax icon

  • 1
    Biased towards Mac users ;) – Zach Saucier Jun 26 '18 at 18:33
  • Or mouse users in general. – Rafael Jun 26 '18 at 20:04

I have no idea... But let us invent one right now!

We could define an icon that can be used on the element.

Probably squares overlapped? Arrows to indicate the need to move the page? Well, some parallaxes need a mouse input...

Circles do not work, looks like rings or a tube.

I like the first one.

enter image description here

If it becomes canonical in the future, remember where it came from!

  • The squares look like layering to me, not a stereoscopic effect. I think the arrow with less opacity is the closest, but I might try separating the two arrows even more distance wise – Zach Saucier Jun 26 '18 at 18:22
  • Parallax is a form of layering actually. This is an excuse to play. I will probably do that later. n_n – Rafael Jun 26 '18 at 20:03
  • Understood, but I meant that it looks like an editor's document layers, not any form of motion :) – Zach Saucier Jun 26 '18 at 20:06
  • Copy, Layers, Opacity, Down (fast), not sure. – Luke Jun 27 '18 at 7:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.