Lessons

Lesson Info

How to Prototype

The next thing we're going to start to get into is we are going to start to work with prototyping. This is one of the big things that we're going to cover. Now, you've designed your project, you want to take it that step further, and you want to be able to share it with the world. Maybe you're not done yet, maybe you're just starting, you're trying to I don't know, you're trying to get an idea. You're like, "hey look at this, let me show you what I'm seeing." We can if we want to share it with people. We can preview it ourselves and look at it even on device if we want to, like on a phone, that type of thing. We can also setup connections, so that we can test out and if we want people to go from the login screen, or the home screen rather, tap the login button and actually go to the login screen to get a feel for how its going to transition or work, we can prototype. So that's what we're going to do next. So what I want to do is, I'm gonna open up a file. You can keep what you've got h...

ere, and you can kind of work with that. But just so its a little bit prettier. Just so we've got some more content, I'm going to open up a file that I can work with. This is the, I guess you could call it my final prototype. I've got a few more things and as you start to work in XD, you can start to add more content, work with symbols practice, do that kind of thing. I want to actually prototype this okay? Like I said we don't have to be finished with this when we want a prototype but, if you go to prototype in the upper left corner, you're going to see we can toggle to prototype mode. Now, Couple things to notice, you're going to see the tools panel is still there, but you now only have two tools. We don't design, we don't edit really that much in here. We are not going to create new content for instance. We could still see the assets panel, and the layers panel if we want to, and the property inspector is hidden, because in here our main job, our main purpose is to make connections, from one art board or one object, to another art board okay? Let me show you how that works. Suppose that we want somebody to tap on that login button or click, or whatever they're viewing this on, and go to the actual login screen. In prototype mode rather, if you come to an object, and you click on it you're going to see a little arrow to the right. What you can do is you can make a connection. Its kind of like a plug, you're just going to plug it into another art board. Right now we plug from objects or art boards, to other art boards. So if I drag that little plug out, and go to an art board like lets say the login screen, pretty simple connection and let go, its gonna tell me and let me actually, I can zoom into this a little bit here, hopefully that is okay, what I can do here is I can go in and say, what target do we want to go to? This is actually the screen we want to go to. The art board lets call it that, alright. Up here you can see we have none, and that just essentially means, remove the connection. That's a way to remove it. Or previous art board. That says, "Lets go to the previous art board you were previously on." You don't even have to tell it which art board it was. Whoops I'm going to click back on that. We can then setup what's called a transition. You can say hey, lets not do a transition. No transition would essentially mean, show the next art board okay? It would replace it right away. Dissolve is what we would typically use for web design, that type of thing. That's how you go between pages in the website. And then we have slides and pushes. Two different ways to do it. And you can try both out just to see what you like. I'm going to try something like slide left slide right something like that. And then you're going to see what's called duration. Duration is the time it takes to go from one art board to the other. And when we set a transition its .4 seconds to get there. Okay so you can make that slower, you can make it less time, that kind of thing. And we also have a new feature called preserve scroll position which you can use to do some crazy things. If you want to make it look like a slideshow you can do that. I'm not going to get into that right now, that's a little bit beyond this but, we're setting up a connection here now, I just set it up, I'm going to click away, because I'm done. Let me zoom back out. How do we test this? We're not going to test this right here in XD, at least not right in this view. What we're going to do is we're going to test it using the preview window. So if you look in the upper right corner, you're going to see desktop preview. Now if you want to you can press command + return, or control + return to open this. But if I click on that, its gonna open up if nothings selected its gonna open up the first art board in the upper left there okay? And if you see, this is putting it in the size of the art board. Its giving us kind of an idea of what it might look like on a device, if we're doing an app for instance. I can then go in and go to that button, and click on it, and test it out. If you don't like what it did change it. So I can go back over here in real time, I don't have to save the file or do anything. I can come right back here, and I can click on if I want to edit a connection, I can click on the end of a connection, either end it doesn't matter. That little round arrow thing, and then go in and say, you know what let slide right instead. I don't have to save it or do anything, I go right back over to the preview window and take a look at it. And there we go. Its in real time. And the great thing about this too, is that if I have content out here, like I've got this logo and I don't like it, I'm going to look at it in the window, and see what it looks like. Look what it does, its all in real time. Giving me the ability to kind of preview and see what's going on. That's great. We can setup connections, we can do all kinds of things like this. If we want to we can also go in and do a lot of different things like, copy connections, for instance. If I come up to this arrow, now I'm going to zoom into this just so you can see it a little bit easier, its kind of far out here. But this is a little back arrow. This arrow is a little special right, Its basically just saying go back to the previous screen we had. So what we're gonna do is we're going to setup a connection here. And just to show you a little different kind of connection. The first one we created I dragged out. You don't have to drag, now think of it. If you have like 1000 different screens in your app and you want to connect from the first art board up here, to the art board down there, dragging this little connector is going to be a pain. So what you can do instead is just click on the arrow, and that opens the menu and you just choose which art board you want to connect to. Now this is another reason why we want to name our art boards early on and name them something that makes sense to us right? If you look in there you're going to see something called previous art board. That just means, whatever art board we saw we came from, go back to. So ill choose previous art board. And that's it, there's nothing else to do. If I click away and then click on it again, its kinda hard to see I apologize but, you're going to see is those little curvy arrow in there saying just go back. Now lets test this out. I'm going to zoom out so I can see all this. Whatever screen or art board I click in is going to show up in the preview window. Now in Windows, I want to mention this, In Windows, you may actually have to toggle this, using alt + tab to see the preview window. It hides behind the XD document window so, you might need to toggle it to show it. But what I'm going to do now, is we're going to go in and say, "Click on the login button." And I'm going to try that back arrow, and it just goes back to the previous. And what it does is it actually reverses the previous transition which is great too. Now if we have these kinds of transitions and these kinds of connections like this one right here? If we want to if we copy content like we copy that little arrow right there and we paste it onto another art board. It will preserve the connection. We could do that. Or you could do this. You can actually copy the connection. Here's what I mean. We've got arrows on every art board. I wanna set previous art board on each one of those right? So if you come to one that you set, this one up top and you right click on it, you're going to see copy. Now this is a little different but, just copy it, its going to copy the actual connection. Go to another object that you want to paste it on, hover over it it should show the blue highlights, so you know that's the one you want. Right click on it and you can choose paste interaction. That's a great way for us to be able to just paste the same interaction we were working with. That way it will go to the previous art board, and that's it. So there's a lot of different types of interactive connections we can make in prototype mode. You're going to see that you can test them out, you can try them. There's going to be some work involved, I'm not going to lie to you. You're not going to make one connection and say, "Figure it out XD." Its not goint to happen, but, that's the same for a lot of these types of tools. We go in and we start to create and edit and creating and copying is a great way for you to be able to work a little bit smarter, a little bit faster. Like I said if you copy an object with a connection, it will also keep that too so. Let me zoom out a little bit, so we're working on the prototype, and we're making connections. What we can also do is this. We can actually do things like preview the connection if we want to. Now this, I'm going to show you is right now its MAC only for what we have, but I want to show you the preview of the connection. If you go to your device, and we now actually have it on iOS, and we have it on Android. What you can do is you can load the XD app. And you can see it up in the corner up there. I'm sorry if my hands shaking but you can see it up in the corner up there. If you put that app on your device, what you can do is, I'm going to tap to open it up here. You can login using the same Adobe ID that you used for XD. So its the same Creative Cloud idea essentially. Now what you're going to do is, when you login to the app for the first time, it's going to take you to a screen and its going to say, "You know what?" You can actually look at your apps. Look at what you're doing out here. To be able to check it out. On MAC only. What we can do right now is you can actually connect your device, and you can connect multiple if you have the usb ports. Connect to your device using a USB cable. This kind of thing right? And if you do that, you can open up a file in XD, and preview it directly on device, in real time, live time essentially. Sorry about that, this is going to shake and move a little bit. But you're going to see at the bottom down here, we actually have some options. We can preview XD documents, you can save a document from XD on your desktop, to the Creative Cloud folder on your hard drive, and then look at it from there on here. And you can do that on MAC and Windows. If I'm on MAC I can come down here and choose the live preview, and its going to say, "open up a document in XD." And its going to preview it. Now the really cool thing about this, is I can then tap to see where all my connections are. You can see these hotspot hints its called. And if I go and tap, its going to start to show it. Ill tap to see hotspot hints, sorry my hands covering it but I can, tap to go back for instance, there we go. And you can preview. Now this is great because we are previewing it on device. We're seeing it as it should be right? Now what I can do as well is I can make design changes. I can go back into XD and if I go back into design mode for instance, I know I'm shaking a little here I'm sorry. I can move something in XD and look what happens in the app. Its in real time. I love this because maybe you're designing on the fly. Maybe you're trying to make it a little bit easier on yourself, so you can see it on device, and see what happens but, this is another way to be able to do it. Like I said the MAC the tethering, is MAC OS only currently. If you want to, if you're on Windows or MAC, you can actually go up to file, and you can do save as, and like I said you can actually save to the Creative Cloud folder, on your hard drive. If you do that, you can go to the app, and it will show you all of those files on the main screen of the app, that you can use which is great. So there's a lot of things we can do there. Matter of fact on Windows we actually have a plus I love this. But on Windows you're going to see, there's actually on MAC and Windows, there's a little icon in the upper right corner, it looks like a phone or a thing a tablet. If you click on that on MAC, its going to show you all of your connected devices. Everything is connected via USB, if you have connected devices. On Windows, its gonna say, do you want to basically share or put your file in Creative Cloud? You can click in there, there's a little link or button, and it will copy your file to Creative Cloud, and you can just view it on the actual app on device. So there's a couple ways to do that for Windows. On MAC we're going to go to file, save as. You can do this on Windows too. And we're gonna go find that Creative Cloud files folder, which if you're a Creative Cloud member, you should have this on your hard drive, depending on what's going on. If you're in a corporation it might be a little bit different I'm not sure. But you can save this folder or file rather to that and view it on device. Okay so, anyway being able to prototype this way. Setup connections, do the previewing, see how it looks, both in XD and on device is a great way to be able to work.