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

Question

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 1

Think as if you are building a movie animation that a user can step through and control. My workflow is as follows:

• Outline the basic storyline. What is the end story you want to come away? What is the baseline copy you will be structuring around? What are key important moments you want to focus on? Is there a particular pace? Notice how I don't talk about technology or tools yet. It's all about getting the story clear and concise. Manage your ambitions when it comes to animations. The more you want to animate, the more tedious and time consuming it will be [but the payoff is usually worth it].
• Build a storyboard. You can use a nice template like this or take advantage of Artboards in Illustrator, Layer Comps in Photoshop, Pages in InDesign, or Artboards in Sketch. Use sketching and vector shapes to your advantage. I like to hand draw my storyboards to communicate ideas. I make it rough but enough to get a general sense of what I want to get across.
• Create still mockups of those storyboards to help you visualize. I'll recreate one or two of the Storyboard shots as fully fleshed out, non-animated mockups. This helps me really hone down the feel, the typography, the colors.
• Animate one or two frames lightly. This is where you can start to choose your technology. You can experiment with mockups in After Effects or Origami/Quartz Composer or step it up a notch with HTML-based tools like Adobe Edge Animate, CSS3 Animator by Sencha, Google Web Designer, and Tumult Hype. You can even prototype by hand with CSS3 animations.
• Start developing the individual elements. Animations have a lot of moving parts which means if you have a composite file, you'll often need to separate out pieces to be individually animated.
• Now, lay out your document. You have your storyboard in hand, you have your tools in hand, it's time to get the vision out. Start the background design. Put the copy down. Determine the placement of images. There is no animation yet. I like to do this rapidly using Adobe Reflow Edge or Macaw though you could hand code with a framework like Bootstrap if you like.
• Animate in sections. First, do major, global animations. Then animate section by section. Incorporate responsive design now so you don't have to do this later.
• QA test. Make sure everything is activating when it's supposed to. Are your animations fluid? Do they look natural or have the feel that you are going for? Is it working on all major browsers? Have you got it working on Mobile devices and tablets as well?
• Launch it! You've done a great job. Don't get hung up on the details. Get it out the door. You can always tweak.

Remember, you are the movie director of your parallax site. You are interactive and telling the story of a lifetime.

Answer 2

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.