what do you use to prototype web animations?

[al404]

Hi

I would like to know what the designers use to prototype dynamic web site, like parallax pages?

because often needs to specify when object comes in the page, how fast, from which direction, etc.

Thanks

 

[960design]

I'm sorry, I don't fully understand your question.

Images created in tons of different software, depending on needs:
Maya, PS, Pixelmator, GIMP, Blender, ect.

1) Storyboard
2) HTML5 / CSS3 local
3) HTML5 / CSS3 production

It's quite simple to create the parallax effect using HTML5 / CSS3. I'm sure there are tons of tutorials via google. If not, let me know and I'll create some.

 

[riyasin123]

Designer used PS, GIMP, HTML5 / CSS3 local

 

[lucidmedia]

In the studios that I have worked at the designers were expected to be able to prototype such interactions using Jquery, etc. Such properties are so difficult to describe without seeing them that it just saves time to have the UX people define things like fades, movement and pass that code over to the back-end developers (who rarely want to be fiddling around with such things).

There are a few tools for prototyping such work. Each has its limitations of course. Origami is a quartz composer-based toolkit that was written at Facebook so their design team could prototype complex movements and interactions within UI. Its free and is a great way to create moving prototypes without code.

As for simplicity, Keynote can be useful in a pinch to create simple animations.

For a larger project where the interactions and animations need to be integrated into a full on narrative user scenario, I still favor After Effects. its overkill for small prototypes, but good for large systems that need to be prototyped before development starts.

Hi

I would like to know what the designers use to prototype dynamic web site, like parallax pages?

because often needs to specify when object comes in the page, how fast, from which direction, etc.

Thanks