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 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 at 13:07
  • Probably there is not a way. Insert text with an arrow. – joojaa Jun 25 at 13:14
up vote 2 down vote accepted

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

  • Biased towards Mac users ;) – Zach Saucier Jun 26 at 18:33
  • Or mouse users in general. – Rafael Jun 26 at 20:04
  • This looks really nice! Thank you! – mayk93 Jun 28 at 12:49

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 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 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 at 20:06
  • Copy, Layers, Opacity, Down (fast), not sure. – Luke Jun 27 at 7:24

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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