Prototyping

[00:00:00]
>> Sarah Drasner: Let's talk about prototyping and getting ready for animation really briefly. Thumbnails we mentioned, notes to yourself. They're really scratchy, they're really rough. They're just so that you can get your ideas down on paper. Storyboards are notes for collaboration. They don't need to be super high fidelity, no one wants to draw en entire comic book before they start animating something.

[00:00:22]
Who wants to do that? Not me. [LAUGH] You really just want them high enough fidelity, so that other people can look at it and understand what you mean. So that you can talk about it. But also, again, lower fidelity means that your feelings aren't hurt if someone tosses the idea out.

[00:00:40]
You didn't spend 17 million years making this storyboard, and somebody says, I don't really like this direction. Let's go in a different direction. You're like fine, no big deal, we'll do it. Low fidelity prototypes show the motion, they show exactly what's supposed to be going on. You can use big SVG shapes, then you're not creating them inside of a code base which can take a lot of time and effort.

[00:01:06]
This person Yaroslav Zubko does them in After Effects. I make them in code with SVGs and there's a couple of other people on code pen who do so. The reason why I do it in code is because, this is my opinion, we're in an opinionville right now. This is not real life this is opinionville.

[00:01:27]
It might seem like it's faster to do it in After Effects but then gotta learn After Effects. And if I make it in code, I'm really making all of the eases that I need to use for the thing as well. So if I get approval, I'm stealing that code and improving it for production.

[00:01:43]
Instead of rewriting everything from scratch, once I've already done that in After Effects. The other thing is, do you want to get better at animation? One way to get better at animation is by animating a lot of things. So if you're doing these prototypes by animating them, you're also practicing animation while you're doing that.

[00:02:05]
So I'm done with my opinionville, back to real life. These kind of low fidelity prototypes can help you show the motion. So if you have something like I made this for a company I was working for. This is a code pen. This is a screenshot of that site.

[00:02:23]
This is actually blown up. Let's bring it back to 100. This is a screenshot of that site because I didn't wanna get everything ready and done. So I just absolutely positioned the things that I'm working on on top of this screenshot. And then I just show what that motion would be like.

[00:02:42]
This is like absolute positioning in squares and stuff like that. And the rest of the site doesn't work, it's just a screenshot that I'm working off of.