{"id":321775,"date":"2020-10-01T07:39:28","date_gmt":"2020-10-01T14:39:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=321775"},"modified":"2020-10-01T07:44:43","modified_gmt":"2020-10-01T14:44:43","slug":"the-paper-prototype-rule","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-paper-prototype-rule\/","title":{"rendered":"The Paper Prototype Rule"},"content":{"rendered":"\n

I\u2019ve been lucky to have worked with some of the best designers in the industry, including Zhenya Rynzhuk<\/a>, Louis Paquet<\/a>, Maria de la Paz Vargas<\/a>, and of course, dozens of the amazing designers at MediaMonks<\/a>. Many of the projects we\u2019ve worked on require custom animation and guidelines that enable developers to be fully creative and push the limits of what we think is possible with CSS and JavaScript.<\/p>\n\n\n\n

Then there are other projects that lack resources. These are the ones that end up becoming an opportunity for us as developers<\/em> to take the lead on how certain UI elements animate and whether the guidelines we create add up to a great user experience. Those are generally the projects in which a simple trick can help us determine if we\u2019re on the right track.<\/p>\n\n\n\n

I just so happen to have a simple trick that has helped me quickly test if my animations hit the mark. I\u2019d like to share it with you now. I call it The Paper Prototype Rule<\/strong>.<\/p>\n\n\n\n\n\n\n

The print mindset<\/h3>\n\n\n

Web design (perhaps unconsciously) inherits many things from print design. If you think about it, some of the most basic interactive web patterns, such as accordions or tabs, are just a digital representation of how we physically have stored information in the past.<\/p>\n\n\n\n

\"\"
I suspect the youngest developers in my team have never had to deal with a paper file cabinet in their lives.<\/figcaption><\/figure>\n\n\n\n

Even though the industry has taken a more digital-first mindset and gone beyond the print paradigm in the past decade, we often struggle to get out of that print mentality. As developers, it can feel as though we\u2019ve been wired to animate UI elements in a boring<\/s> standard way that doesn\u2019t go beyond the reference of moving pieces of paper.<\/p>\n\n\n

The Paper Prototype Rule<\/h3>\n\n\n

I\u2019ve picked up some tips and best practices in my years working with other folk and have developed them into some simple rules for working with animation. Although I consider the rules more as guidelines or a personal reference, I\u2019ve recently unlocked more value by starting to pass them on to my team.<\/p>\n\n\n\n

And it’s thanks to The Paper Prototype Rule<\/strong> which states:<\/p>\n\n\n\n

If you can use a paper prototype to recreate the animation, then you probably need to spend more time on it.<\/p><\/blockquote>\n\n\n\n

The intent is not to overly complicate animations, but embrace the advantages of creating a digital <\/em>experience that graduates from print concepts. And the principle is pretty simple. Can the animation be prototyped with paper? If yes, we can do better. If no, then we’re on to something.<\/p>\n\n\n

The Paper Prototype Rule in practice<\/h3>\n\n\n

Don\u2019t get me wrong, paper prototyping has proven to be a great tool for user testing<\/a>. But we can use the simplicity of its nature to determine when our interactions are just too simple.<\/p>\n\n\n\n

Let\u2019s try an example.<\/p>\n\n\n\n

Almost every standard website has some sort of navigation. So let\u2019s assume we inherit a design  comp that provides direction for both active and inactive navigation states. Sure, we can do that. It’s not that hard.<\/p>\n\n\n\n