1

I am currently designing a website for my client. I decided to use Sketch to prepare artboards and Invision web app to prototype and present it.

During the designing process I planned for some portions of the site to feature parallax scrolling. I have an element partially overlapped by element on top of it, and it will get more and more visible after the user scrolls down.

Now, how do I show it to client? It is only a design, so I don't want to assemble it on testing enviroment, as I am not sure he will like it and decide to use that design choice anyway, but if it's static, all he'll see is some overlap, obscuring important elements.

In this instance my issue is with parallax scrolling, but this can be easily asked about other elements, like video headers, or onhover buttons. Is there a way to present it as a self-explanatory, coherent design?

Improve this question
2
  • 3
    I'm not a Sketch user, but a quick search turned up this plugin: animatemate.com. It's free so it might be worth a look.
    – Westside
    Commented Jan 17, 2017 at 14:35
  • @Chris Sounds like one of the better answers and it's a comment!
    – Hanna
    Commented Jan 17, 2017 at 15:46

4 Answers 4

Reset to default
1

Take a look at prototyping tools like Origami Studio, Principle, or RelativeWave Form. All of these import from Sketch and are built for showcasing rich interactions on a screen. (The downside of that is that it takes more work, and, aside from Principle, managing multiple screens can be awkward.)

Improve this answer
2
  • I guess this has to be it. I've researched a bit more into the topic, and inVision App has a module in production called motion, which is suited exactly to what I need, but it has been some time since the announcement and it hasn't shown much update. So until it is integrated into inVision, in order to have a concise, simple solution to show interactions I have to switch tools. Principle looks awesome.
    – Hassan
    Commented Jan 20, 2017 at 13:55
  • Also, if you're willing to go through a relatively steep learning curve and use JavaScript, framer.js apparently allows a lot of flexibility. It also imports from Sketch.
    – Tin Man
    Commented Jan 21, 2017 at 10:16
1

Depending on the relationship with your client, show him an example from another website. Make him understand what you want to do and try to convince him that way. I've done this many times, and if you can deliver the same feeling as the example site, everybody will be happy in the end.

Improve this answer
1
  • Would if I could, but due to nature of the agency I work for, I won't be the one presenting it to a client - and the person that will be showing it, needs to understand it on the fly as well. I would love a concise solution, preferably not involving outside references as proposed in your answer.
    – Hassan
    Commented Jan 17, 2017 at 13:16
1

From my point of view, the following isn't worth the trouble but you could:

  • Make a small animation/gif with your design showing how it would work. If you have After Effects it's a 3 click- 2 drag- 1 save thing so it won't be time consuming and you can add it to your file and be presented to the client. The same goes for the other major UI/UX elements.

  • Find a internet gif of a parallax that matches your own and show your client as a concept.

Improve this answer
6
  • Ist not much more with a webpage
    – joojaa
    Commented Jan 17, 2017 at 13:33
  • @joojaa Oh well, I am also not a fan of someone else presenting the website, as he mentioned in one of the comments.
    – Alin
    Commented Jan 17, 2017 at 13:37
  • sure but just because its a webpage does not mean it can not be dumped to a videofile. Quite many users do not have acess to a decent animation suite. let alone AE or even PS that can do simple paralax scrolls.
    – joojaa
    Commented Jan 17, 2017 at 14:06
  • @joojaa sure, you can even use windows movie maker to achieve something decent for a presentation.
    – Alin
    Commented Jan 17, 2017 at 14:08
  • 1
    @joojaa Side note: I've seen Sketch on windows with a virtual machine running OSX :D. Anyway, you are right about asking inexperienced people to create an animated presentation.
    – Alin
    Commented Jan 17, 2017 at 14:17
1

Adobe's XD (Experience Design) is a fantastic tool for this type of thing, although you'd likely have to rebuild it in XD first. It's still in Beta, but tons of great presentation options without having to build the actual site.

If that's not an option for you, I'd suggest "storyboarding" the site... that is, take screenshots of the design at different intervals, showing what the user will see as they scroll, and showing them in order. Not the most comprehensive presentation, and will require the presenter to do a thorough job of explaining (and some imagination by the client), but it may be your best bet.

Improve this answer
3
  • Print slides 2-3 transparencies and side them on top of each other?
    – joojaa
    Commented Jan 17, 2017 at 14:40
  • Exporting from Sketch to XD is possible with some workarounds, you don't have to completely rebuild. Juist rebuild the parts that you want to have animated and leave the rest as a static piece. However, XD does not have hover animations etc yet as far as I know.
    – Summer
    Commented Jan 17, 2017 at 14:43
  • Good point about the hovering, I missed that first time through. And I've never used Sketch, so don't know what the capabilities are. Thanks for clarifying!
    – DLev
    Commented Jan 17, 2017 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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