Recently I started working on a project at work to build a promotional piece as a parallax/animated website. I saw this question on Stack Exchange and felt this would be a great re-post of my answer here on my blog for archival purposes.

When you are building a parallax/animated website, 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.