what do you use to prototype web animations?

Discussion in 'Web Design and Development' started by al404, Sep 19, 2014.

  1. al404 macrumors 6502


    Apr 24, 2011
    Novara, Italy

    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.

  2. 960design macrumors 68030

    Apr 17, 2012
    Destin, FL
    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.
  3. riyasin123 macrumors newbie

    Sep 11, 2014
  4. lucidmedia macrumors 6502a

    Oct 13, 2008
    Wellington, New Zealand
    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.


Share This Page