What tools do designers use to help envision and plan the design of a parallax site?

Making a parallax site is something I’ve always wanted to try and am now getting into. I understand that they range in complexity and so, for sites more on the advanced side with several layers to create depth or imitate story-telling an animation, what do Designers typically use to help envision that sort of process rather than just building a flat PSD/AI file?

I would imagine they’d like to try and layer things over each other and see how things shift or move before making final decisions on the site’s design.

Are there any tricks or methods to this?

How would a designer go about conceptualising and planning a parallax design for a website, and what tools could they use?

Here’s an example of what I mean by advanced:
http://supportkyoto.org/

Answer

As you said, parallax sites tend to vary in complexity a great deal, but as you’re asking about story telling in animation I’m going to assume you’re asking about a reasonably complex site.

When producing something of this complexity I find it better to think as if I’m producing a short animated film rather than a static website. I storyboard the animations, normally sketch them first from start to finish, then I’ll draw them on separate artboards in illustrator.

I find by drawing everything illustrator, I can move assets around and visualise how it will all come together, which is especially good if you have things moving in multiple directions. Then, when I’m done, I can output everything as rasters to be animated in my code.

Adobe edge is also looking like a useful tool for doing this sort of thing, I don’t know if it’s quite at a production level yet, so I’ve stuck to my own workflow, but it’ll be there soon.

Attribution
Source : Link , Question Author : RachieVee , Answer Author : JamiePatt

Leave a Comment