Types of Prototypes

[00:00:00]
>> Sarah Drasner: So Types of Prototypes. There are actually a number of ways that you can create prototypes. One of them is called Thumbnails. And thumbnails are kind of similar to what you did a little bit earlier today. But they're a little bit messier, thumbnails are messages to yourself. And they're not really intended to communicate with anyone but you.

[00:00:20]
It's a really quick scribbling drawing so that you can understand something really quick and toss out ideas really fast. So you can ot something down, put something in a corner. Some of the thumbnails that I've made, I don't even remember what they're for, [LAUGH]. I look at them, and I'm like, what is this?

[00:00:37]
Did the dogs make this, this is crazy. Storyboards are one step up in fidelity from there. So once you've made a few thumbnails, you can toss those ideas out and make something a little bit higher fidelity so you can explain some concepts to coworkers and stuff. What I like about the thumbnails is that there's such a low commitment.

[00:01:00]
So you don't feel bad about trashing an idea. So you really wanna get into this thing of like this idea is not valuable, and I'm not so attached to it that if I decided to go in a different direction it's a big deal. You want it to be very disposable at this stage.

[00:01:16]
Storyboards have a slightly higher commitment because you're actually making them in a way that you can communicate. But they don't have to be super crazy, either. I used to think of storyboards and I'm like I'm not gonna make a comic book before I make an animation or user flow, that sounds like a lot of work.

[00:01:33]
So maybe make it just enough fidelity to people to kinda understand where you are coming from and know higher, again if they wanna throw that idea out that's okay you are not like crying sin you soup later, that evening. I quite like making low fidelity prototypes. I made this for a client once because, they had some concepts that they had for how we should do a welcoming user flow.

[00:01:59]
You know when you go to Slack and you first join and it shows you a bunch of things. So I was doing this kind of like, well, we could show it this way and this way and this way and I made this in code and animated it. It's like an SVG animation, but it's super low fidelity, right?

[00:02:16]
If tomorrow they were like no, I don't want that, no big deal. However, if they did want that, since it's in code I could steal the eases and some of the animation and make it fix it up a little bit for production kind of. And I know that the eases are the same thing that they wanted too.

[00:02:35]
So it can be a really effective way of communicating without building everything into an entire system. Some systems are actually really, I worked on some applications that are really big for really big clients, where they have all sorts of legacy code. You're pulling through React and Angular, [LAUGH] and it's like, is that Backbone?

[00:02:58]
My God, [LAUGH] and so you don't necessarily want to in order to show an animation, go through all of those layers and really figure it out before showing a concept, right? Even if you have a dove branch. So, other people make low-fi prototypes on code pen two. This one by Yoseph Becker is really cool because it is actually interactive.

[00:03:23]
So that little hand, that's me actually going through this pen and moving things around. So, that's an effective way of showing what a gesture might look like to a client. They get the idea of what that might look like. I also do more high fidelity prototype, so here's an example.

[00:03:44]
It's not in the whole code base again, it's just a small piece. But I make all of the little pieces so that they can see how that one thing might work once it was built. And if they like it, then again, I clean it up and make it a little bit more.

[00:04:01]
I mean in this case, it's a React component so I could kinda put it in, and work with it that way, right?
>> Sarah Drasner: You can also do stuff like screenshot the site and absolutely position just the piece that you're trying to animate. I used to have a really good example of this, but I think I'm probably not allowed to show it anymore.

[00:04:25]
I just haven't to ask them instead of like having everything like putting it all into your code base you can screenshot the site and then absolutely position just what you need to show, and then they really get the sense of it. And the funny thing about that one is, like, showing this to CEOs, like they really believe it's the site, so then they're like, have you ever seen someone walk into a glass window or something?

[00:04:50]
They're like, wait, why can't I click on it? I'm like, it's just a screenshot, man.