Storyboards for UI/UX with Adobe XD | Matt Ward | Skillshare

Storyboards for UI/UX with Adobe XD

Matt Ward, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (37m)
    • 1. Intro

      1:29
    • 2. Creating the Storyboard

      18:14
    • 3. Animating the Storyboard I

      9:57
    • 4. Animating the Storyboard II & Exporting

      7:36

About This Class

In this class we'll be going over how to quickly make storyboards in Adobe XD, with no art or sketching background needed!

Storyboards were originally developed by the film industry as a tool to tell a story, but have also been adopted into the product development process to do the same very same thing. Making a storyboard allows us to quickly visualize and convey ideas to stakeholders, without a huge investment of time or money. The problem is, it's really hard for those of us less artistically gifted to put one together, but that changes today!

We'll be using the unDraw plugin (it's free and amazing) to put together and animate an example story board for Amazon's shipping process. We'll go over a simple framework to have beforehand that involves taking notes on each part or "frame" of the storyboard and the rest will be super easy and fast from there!

See some examples below!

4dc40da6

c5e32554

42431db4

Transcripts

1. Intro: Hey, guys, today will be going over how to create storyboards and Adobe X'd. If you've never heard of storyboards before, they're a tool used by the film industry to help stage shots and tell a story. They typically looks something like this. They're broken down into like squares or rectangles, and the subject matter of the scene is told in each box and usually some notes there at the bottom to explain what's happening. And this is actually a very effective tool to use in product development, because we're essentially doing the same thing. We're telling a user's interaction with that product, So this is a helpful tool to visualize customer journeys, user flows and things of that nature. But if you guys are anything like me, actually creating the visuals for these is very difficult. I have a hard time the worst sketcher ever. Have a hard time getting these out in a timely manner. So that's what we'll be going over today is how to make a storyboard for product development, but really fast using this plug in, but called on draw. It's really cool. You guys should definitely check it out and please download it to finish this class. But this is an example of the kind of quick animations and storyboards you could put together using it. And you see, it really gets everything to a very high quality very quickly, and that's what we want. We want to convey ideas to people quickly about our users, so that's what this class will be about and let's get started. 2. Creating the Storyboard: so we could start by opening Adobe X T and we can just go. Webb, 1920 by 10 80 is a new file. The reason I do this is because this aspect ratio is good for presentations. So if you ever create your storyboard and want to share it out, it's really easy to do so with this aspect ratio. So the first thing to check. Just make sure you guys have this under a plug in. You can just go appear, click AB and then search for under off. So just make sure this is installed before we get started. So the first thing to note is I actually never just jump into the program to start a storyboard, which is a little counterintuitive. You always need to lay out your problem and kind of a goal of your storyboard and what's happening. So I usually either do this on pen and paper. Just open a quick notes and just kind of lay out what story I want to tell in the storyboard. And for this one will just be visualizing Amazon shipping process in the future. And I kinda have a quick breakdown of the scenes that I want to take place, and I usually just like to copy and paste this over into my file. So always have that for reference because it's pretty easy to forget sometimes and miss a step that have to go back and redo some stuff. So we'll be looking at our first step here, and that's user selects products online. So this is gonna be like an online shopping kind of thing so we can open up on dro, and you can either go from right there or in this plug INS panel. Either way is fun. Then you'll see. Here we have a bunch of illustrations that are all very, very good, and they're all vectors, so you can edit them and change the colors on. There's actually a pretty decent amount to. So if we do shopping, so there's a bunch of options we get here and let's take this one the online shopping one and so issues you click click on it. It's automatically copied and we go back out here and then we can command V, and then we have a first frame of a storyboard. And so what's great about these is they come in grouped. So if we un group, you can see everything now is broken down in an individual like filled vectors. This is actually really cool that you can agree him like this because it allows you to move things around and change sizes really easily, Which is helpful if we want to add animations or anything in the future. But this is actually a wonderful scene for users selecting an online product. So our first scenes kind of done so it was really that fast. So what we can do for the next one is just copy and paste this over and one now, notice everything's on group. Now, I'm actually going to keep the same this same woman over here because we kind of wanna have the same person in each frame because the storyboards about a specific user So it's usually good practice to keep the same person here. So the next one we need to do confirms and purchases. So she selected her clothing online, and now she's gonna make sure it gets to the right place so we can try confirm my okay, that works. Actually, this she looks pretty similar, so we'll grab that one and then copy and paste there. So we'll agree this I'm gonna slide it over a little. I'm gonna UN group. And even though this person's excited and that is a nice touch, I'll still keep the same woman every here. So we'll have to click in and delete each of these elements and you'll notice this. This part could be kind of tedious because there's a bunch of shapes going on here so you can just click and see if you can grab all of them this way and then tried to delete like that. And sometimes that works. You just have to be really wary of what selected could still end up to leading huge parts of the story board. This is actually a little too vague, so I'm gonna drag this down to make a little smaller and then maybe over and one thing to do so we can use prototype to preview our storyboard. So we contract. There were tap transitions. Fine. So if we preview this, it looks pretty funky. The sizes aren't matched up. I see we're getting, like, a little bit of distortion here on the side of this. We really don't want this entire entire scene here so we can copy and paste this background so it looks a little more uniform. Get rid of this one. Here we go. So now we're gonna have the same background, which is a nice touch of consistency in the storyboard. And then we can go in and we'll send this to the back and resize this phone on that so it's a little a little better. So when we brought that in, you see, the radius is what changed to just be sure toe re edit. There's if you do change a lot of these shapes and we're gonna make this actually bigger now, UK, that looks about right. It's now when they go in and preview in a nice second step, I'm actually gonna bump this over a little. So it's a little more centered to the original animation. We lost a piece. There s so it's always just be very wary of little pieces you might be leaving out. It's super easy to do, but it is still very nice to have all visas vectors, and I'll show you later on why that is. Okay, So that's the 1st 2 frames of our storyboard. We have the online purchase confirmation and the next step we're gonna have is order is processed. So we will copy and paste. I go in and jump to full screen to You usually don't like to work in full screen. I like to jump between windows a lot. But for the sake of the video, I will change. So this one will delete. We're actually gonna delete her as well, because she probably won't be involved in the next frame because in order is being processed. So it's not something she's gonna see open and draw again, And then we could do Maybe packages, Uh, this looks good. It's a good copy and paste that, um and we're ungh reaping again because we're not gonna have this guy in There is the future of Amazon's shipping service. So I don't think we'll have a guy manually doing things. What I actually wanted to you is we're gonna have a drowned. Do it. Let's see if Jeff Bezos actually makes that come true. Hopefully but will make a storyboard foreign if he wants to. You so go back to under all I think I saw one. We can trade room. Okay, so there's a lot you notice. That's pretty great flexibility with this stuff, Like being able to randomly pull in like a bunch of drowns and a couple of illustrations there for something. Pretty niche. This really is a Rebus plug in, and it's one of my favorite in Adobe exceed. So, Rex, we're gonna pace that over and were dragged this to the top because I really only want to drown out of it. And I don't want to mix it up of all of these filled shapes down here. So we'll delete this and make sure we get all there's filled shapes of the background. I'm actually gonna group this and then bring it down. Most live this down a little. I think our board moved. Track that back down. Okay, so we'll go to the next game in the predatory tap transition all the time and play. Then we have the order speaking process there, and our next step is order shipped. So well, actually, good. And copy and paste this art board that last illustration we had will also do a pretty good job for ordering shipped, so we'll take drown in again And there we go. I actually got until eat this guy Copy and paste in. That's awesome. We'll get our drowned flying through the air after is being processed. What we could do is on group this and again, we're gonna delete this figure here on this one. I'm gonna take a while, cause I imagine there's a lot of vectors back there. We'll keep the shadow. So the thing about this, too, is it's just so nice toe have illustrations of this quality so easily accessible. A lot of times will have to pay for this or they're not free for use. You can leave them for education, things of that nature. But this is these are actually free for client and personal use. Just can't stress enough how cool this is to have. This is a plug in to be able to pull things from because they really are amazing quality. If you ever need to as well. You can also go in and change the colors we wanted, like a different city escape or something. So you can kind of tailor to specific brands depending on what you're designing for. Um, but we'll stick with the purple for now. Okay. Good. And connect this next frame of our storyboard. Got a pretty type jag, deceiver. Well, that looks good. And then we'll see it one more time, man and drowned. Going through the air. Looks good. Then what's our last step? Successfully delivered. Okay, Su a copy and paste this everywhere, actually. Let's see. Let's go Look for another illustration would use success. Maybe. Actually, this one is pretty good. So, um, but she is a little different than our original our original actress Over here. So what do you use? We could just got and copy and paste here, Back over. Just have. It's consistent. I do like that other illustration. But it's always better to kind of keep the the same protagonist in the schoen's. What we can dio is get rid of some of this background and use all the same elements that were in our last shot. You notice. Sometimes you have, like, white vectors or things with capacity. It's just good practice to kind of make sure those guys are removed. Species drowned, so the drone drops it off. But in all actuality, the dream wouldn't just drop it off. She'd get some kind of phone identification to see if I can grab this little bit so we can go back over and what we can just reuse the same phone, um copy, paste, track that over and then we'll shift this ever to make room for our phone. Can I give reference to what's going on on her end so we don't just have a random drowned showing up for now. Reason. And we can kind of understand what she's looking out, and then we'll connect this. Everything is connected. So let's flip through. I'm actually gonna connect it to the front to us so we could go through it twice. So we have online shopping, taking place, selected items, confirmation. We have our packaging processed, the drone delivering, and then we get a confirmation here at the end. And one thing I like to do to you because we have these notes, is to just use some annotations at the bottom, just like the regular film storyboard to really drive home what's going on to your point text so I could put it like that. It's also nice if you have, like a persona created for you already or something you can change the name out to be whatever the name of the persona is, just add a little credibility to it and then just go through and at the notes here, period. The area didn't send her there for a second. It's always good to have these notes to if you're not presenting the storyboard just to ensure that everyone understands what's going on. Because even though this may seem obvious, some people may have some misinterpretation about the steps like that little bit there actually gonna have these plants back, we'll make a little more happen in that scene. You know, this scene looks a little bare compared to some of these other ones. They usually have these, like plants in them. That's a really pretty quick fix. Just don't greet that more crab display it on down here. Just keep that same kind of visual style. Is this partly? What makes these so great is they have a pretty distinct style, so we'll try to honor that by using so in these elements as well, in case that would see it with their notes. OK, so that's our first stabbed, a storyboard and were something you can do and like 10 to 15 minutes. This is actually very good quality and the best part about it. There is no sketching and not attend of artistic ability involved, but it's actually a very high quality, and the next thing we can start to get into is if you have time and it's a finalized storyboard, you can get into putting animations and is a bow and then use them for, like, a focal point and presentations, which is pretty easy, and that's the thing will start to do next. 3. Animating the Storyboard I: okay, Once we get our storyboard complete, this is a completely optional next step. But we can actually add some animations in between these frames to really step up the quality. And I would always suggest doing this when you're pretty sure about your story board. And it's been finalized because you wouldn't want to go through the trouble of animating it just for it to change in a day or two you. But what we can do is add a little bit of animation to each frame. It's really make it a little more visually interesting through what we can do is take this first our board and duplicate it copy and paste that over and drag him back to about the same spot. When I animate things to you, I usually like Teoh, give myself plenty of space, so I'm gonna make these other art boards. Well, may have them down, actually. Okay, so everything's on grouped already, which is good. That's kind of what we'd want to dio. So the first thing we'll do is we'll get these check marks to pop up in the next frame, just like she's actually selecting them so we could go in and select these, and we don't want him just to fade in and out. We could do that pretty easily. Well, actually, to scale a little, so we'll drop the size down the capacity to turn off and then this time on our prototype, been good at this one and most select auto enemy. I believe that he's out 0.3. It's fine. We'll play. Okay, that's pretty subtle, but it's a good first step. I think the next thing we can do here is make thes clothes change color as well, so we can go in and select maybe a bunch of vectors here. What I like to do is make two selections, so select everything here first and then come back down. And that way we just have what we want to animate. Selected what will Dio. It's what? Drop the A pass ity. We'll drop it all the way town, actually, and then we'll do the same thing here will come in, grab all the elements, the shirt we grab, something that's true. Let's try it one more time. Come back through their begun and we just have that shirt and you the same for this bottom skirt that she selected. It's a little bit of a pain to do it this way, but it's still pretty fast when it comes to being able to audio animate these storyboards. It really adds, in the level of quality, doing it this way, so we'll click. Then we get that to pop up. So there's the items she selected. No class this. So let's say the next frame of this. We want this store to disappear because she's getting a confirmation on our phone. So what we can dio is just scale this down, make sure all those elements were selected. Of course, I forgot some because there so many, Um, let's see, then what we'll do is we can scale this down, turn the capacity off, and then we'll protect to here, tap on our enemy. That's fine. See what this looks like, And then we want to found to pop up in its place so we'll make another copy and paste of this art board. But this one up here, well, actually select all these phone elements again. We're getting a little distortion again, but because of the automated main, it's fine. We're also getting a bit of this plant. It is a nice plan, but we will get rid of it. So what we're going to do here is we're actually just gonna go time to this and then most at that time 20 and will do none duration of zero as well. So it's gonna immediately transition into the screen. And the thing is, you shouldn't really notice it. So once we do, that was like this are born good a time auto enemy. And then we'll do these out at 0.3, just like the other screens. So what this should give us that would disappear and then are found pops up in its place. Then let's view it from the top again. Gutter elements coming in, they disappear. She gets that confirmation and you notice the tech change text changes to which is nice. Then we'll work on the next frame of our storyboard, which is the drone coming in. And if you can imagine, we're definitely gonna make this drone fly because that's awesome. So see, So this would be a completely different change of storyboard, so we won't have her in, and we'll have a different background. So there's no need to do anything crazy. Now we'll distract that over. Well, actually, just you top and then transition here is fine just because we're not animating anything from there to here. But we have our drone group tear. So what will actually dio this copy and paste this art board over, then ungreased this and grape this drone again? So we have just the drown there and a quick note because I unde grouped and then regroup here. Is it actually a different? This is actually different group name. So this is green 14. And then if I go back over here, this is group 15 so it won't actually auto animate between these. So what I'll have to do is just delete this again and then copy and paste over. That's a pretty easy thing to forget, Especially when you notice we have hundreds and hundreds of paths and you can definitely have a lot of groups animating this way. So it's just good practice to make sure that's the same stuff on each our board. So we'll actually get this room to fly in, so we'll scale it down, turn the capacity off, and we'll prototype drag that over animate Um, he's out. That's fine here, so we'll play that. That was actually a little too fast. Amazon did too good of a job there, so we'll have to go back in and let's Dio, we'll try second out to see how that works. That works for me. You could go in and play with some of the easing and see what looks best. We'll try season and now here. Okay, I think that'll be fine for what we need it for. And then we'll copy and paste this once more. And what we want is for the drone to pick up the package and fly back off with it. And we'll scale a little because he's getting further in the distance. We'll turn the capacity off again. Our enemy is in and it's fine. So we'll see how this looks. And let's take it all from the top, just to make sure everything's connected properly and they would get. Everything's looking good so far. So the next thing we can work on is getting the drone to fly through the city 4. Animating the Storyboard II & Exporting: Okay, So for our next step, weaken dio our package being delivered. I'm actually just take this over and start on the next rail. So we still have our same drown here. And what we can do is we can make him go across the skyline, actually. What? I'm gonna just you see, if we can delete this one, leave this package and then just copy and paste it from the last armoured. Just a little easier to grab it this spring, That's what Copy and face this kind and put it over here, and we'll actually make him go all the way across the screen. Just a quick Now, we're actually not gonna be auto animating between these two are boards. We're just gonna be doing a transition. And the reason that one matters because I copied and pasted this same drum. It would want to auto animate from this invisible drone we have here. So just a quick note that that should be a transition there. Read about. Okay. So we'll have a drowned start on this side, Then we'll copy and paste this on board, and then we want him. He's gonna be moving pretty fast. It will give him a little bit of a tilt and he'll fly over here. It's more pretty tight. No enemy. And he's flying a long way. So we'll do you a second and 1/2 here. No duties and announce. See how this looks. Awesome. Looks pretty good. Worked pretty well in the first track. This book was out of the preview. And then the next thing we can dio this prototype our package delivery. So this is how we wanted to end up. So I'm gonna do this copy and paste this and dragged us over here. So we want to drown to come in from the top right again. He's getting further ways, will make a little smaller, turn the capacity off, and we're going to connect. These two are boards again, not using auto animate. Just so we don't get any were drown action happening here. But the first thing we want is actually for the phone notification to pop up. So we're gonna scale that down, and then we're gonna track this hardboard back over. Just gonna make another copy of this one. Actually, I'm actually going to delete this drowned from this middle art board copy and paste that drowned we had earlier on to this one. Then we'll auto animate this to get to found the pop up because she receives a notification before she receives. Okay, that was comically slough. So we're gonna dio is just this to probably be 0.3 again. And we just wanted to use out. Let's look at that one more time. Okay, so she receives the notification, and then we want our drone to fly in. So pretty tight, this last one on our intimate And since it's flying will do a second year, but also to use and and out for you that and they're the drowned delivers the package, and we will add one more extra slide just to share the German flying away. But it would be pretty awesome if she just got a free drowned with each package. So we'll grab this guy and we'll have them fly out the same way you came in. We'll scale it down a little, turn the capacity off in prototype between those two on arena. Mayhew's out. When seconds fine grand comes in, it leaves and who were done. So the package identification got sent the package got delivered. So back out of here, not maximize will close it. So let's view it again from the top. So she's still X products online. Gets a confirmed purchase. Package is being processed. Package gets delivered. It's a notification. It's getting dropped off handy Leaves said. There we go. That's it for our storyboard. And so a couple options to share this one. You could always just go to each frame an export, and you get to choose which ones choose how you're gonna export at Web P and G I. Weston Android What I like. Did you miss? The time is actually share with a Web link on so share for review. You can go. We'll name it Amazon storyboard. Well, that's fine. Great link. The men will quick to view this link, and so you actually get here is the option. Just share out a Web prototype of your story board, which is really helpful as well. Just a super easy way to share this out and also get people a chance to look at it with all the animations, because this show up in the Web browser as well. So that's one way to share it out. And if you ever need to put this kind of thing in a presentation, you can always just go full screen and then just screen record. And then through a video in the presentation, there's a couple of different options. There are generally lean towards sharing the Web prototype. It's super easy to send a link around that kind of fun so it can pass around in organizations and stuff. But that pretty much wraps up for this tutorial. Please leave any comments if you guys have any feedback and thanks.