Prototyping & Interactivity
Daniel Walter Scott
Lessons
Getting Started with XD
02:21 2What is UI vs UX
06:19 3The UX Brief & Persona
11:22 4Wireframing (Low Fidelity)
01:58 5How Wide for my Website
13:06 6Existing UI Kits
07:49Working with Type
09:09 8Basic Colors & Buttons
14:14 9Free UI Icons
11:45 10Footers & Lorem Ipsum
05:27 11New Pages & Artboards
04:20 12Class Project 01 - Wireframe
11:11 13Prototyping & Interactivity
08:53 14Create a Popup Modal
07:57 15Prototype
02:54 16Groups & Isolation Mode
02:30 17How to Use Components (Previously Components)
17:19 18Production Video - Left Nav
03:52 19Repeat Grid
05:27 20Updating Components & Repeat Grids
08:54 21Prototype Tricks
06:03 22Navigation Tricks & Tips
04:48 23Class Project 03 - Components
04:07 24Mocking Up an App
09:40 25XD App on Your Phone
08:04 26Fixing the Position
01:01 27iPhone & Android Status Icons
03:10 28Production Video - Login
06:45 29Sharing Wireframes
13:32 30Recording Your Interactions
03:13 31Class Project - Wireframe Feedback
01:21 32Mood Boards
07:43 33Class Project - Mood Board
00:59 3412 Column or Grids
04:57 35Working with Colors
09:02 36Tricks for Using Colors
06:34 37Gradients
03:50 38Class Project 06 - Colors
02:14 39Use Web Safe Fonts
18:00 40Character Styles
06:59 41Font & Text Tips Tricks
05:43 42Plugin Lorem Ipsum
05:39 43Paste Properties
13:15 44Class Project 07 - Text & Buttons
02:21 45Draw Custom Icons
04:13 46Strokes & Lines
14:28 47Pen Tool
14:34 48Drawing Practice
07:15 49Production Video with Tips
12:27 50Illustrator in XD
09:34 51Class Project 08 - Custom Icons
01:49 52InDesign in XD
11:38 53Pros & Cons for Images
03:58 54CC Library Connection
11:01 55Adobe Stock
05:20 56Free Images
01:48 57Masking
06:44 58Photoshop in XD
08:41 59Infographic
12:12 60Class Project 09 - Hi-Def Mockup
05:38 61Mobile Phone Mockup
18:08 62Class Project 10 - Mobile Website
01:24 63Hidden Features for Repeat Grid
05:17 64Plugin - Content Generator
04:29 65Plugin - UI Faces
03:15 66Plugin - PhotoSplash
04:31 67Plugin - Copy Cat
03:19 68Advanced Asset Panel
04:37 69Advanced Symbols
07:52 70What are Micro Interactions
07:21 71Button Grow
06:13 72Animated Image Gallery
06:39 73Full Vector Change
08:19 74Class Project 11 - Micro Interactions
05:12 75Time Delay Transitions
04:42 76Popup Menu or Modal
12:16 77Animated Mobile Side Nav
03:26 78Drop Down Menus
03:24 79Drag Transitions
07:19 80Number Ticker Scroll
06:51 81Alexa Voice Commands
09:37 82What is User Testing
16:53 83Unmoderated UX Test
12:07 84Class Project 12 - User Testing
02:23 85Mocking up in Photoshop
09:21 86ProtoPie
02:40 87Add Animation Using After Effects
09:39 88Export Images & Assets
12:56 89Export Code Using Design Specs
10:49 90Class Project 13 - Roar Cycles
10:29 91Conclusion
05:32 92Final Quiz
Lesson Info
Prototyping & Interactivity
Hi there in this video, we are going to connect our pages up, you can see the little wires there, we're going to preview it and we're going to make our wireframe interactive. Watch this ready to click the button jumps to a different page. Go back to the home page. It's simple, but quite the milestone in our course. Let's go work out how to do prototyping now in XD. Alright. Time to add interactivity. We're gonna get this first this button to go first. So we're gonna click on the blue button, not the text in the middle. So I've got it selected and we're gonna switch to from design to prototype. Okay, so your toggle between these quite a bit when you're building wire frame and a mock up. So design does all the design stuff you can see over here changes. I can do fill and fonts and stuff, prototype gets quite simple what ends up happening in the big differences. See this little box zoom in a little bit so you can see it. Okay, this little tab appears, so no tab tab. This guy is really han...
dy. Click hold and drag so when they click this blue button, it's going to go to the start trial and you just drag it to the side. You can see it can go anywhere in here. So it goes blue sea, not blue blue straight here, let it go and you'll see it connects to whatever the middle of the outboard is. Usually it's a dive down here that now is connected. Let's just see what it does by default. So to preview that you click this little play button up here on it. The launch is this like a little preview window and because it's separate from XT, it's this kind of separate little window and if I click on it ready. Ah cool. Huh? Basic navigation. We're kind of trapped here now we can't get back. So we're going to close it down at the little red box to go back in our case. We're going to click on the logo. It's really common on the website and an app, if you click on the logo, you go back to home base. So whether it's selected, I can click hold and drag it and it goes back here. So we ignored this before. Okay, this little pop up little window, we're going to leave it all at the moment by default and have a look at a bit more in a second because I want to show you how to preview So and hit this little play button member play, we click on it, home button goes back play. That's fun. Okay. But this window, you can close it, reopen and close and reopen it if you are like me and you are working with more than one screen. Not everyone is and you don't have to, but I'll just quickly show you here on my phone what I do is my setup. So I've got a Macbook Pro, it's nice, it's portable but the screen is a little small, so I fixed that by plugging it into this big LG monitor, LG do some really cool four K monitors cheap cheap enough, like I think it was like 400 U. S. So it's not cheap but pretty cool. Anyway, so what you end up doing is remember we hit preview before? Okay. And it appears it appears here. Okay. And we kind of have to close it down to get back to X. D. So what I end up doing is clicking holding and dragging it over here so it just appears on this window. Cool. And I never close it down, just stays open. And the cool thing about that is if I zoom in, hang on, I need to put my hands down for shortcuts. Sorry? Sorry, sorry. Alright, I need a I need a I need a cameraman following me around, I don't have that. So I've zoomed in really close here. Okay, I'm gonna go even closer real close. So this you see the screen there, you see over there, it's still that it's normal size so you can be designing in here and doing things and actually just checking it over there to see whether it's the right size rather than going back to 100%. The other thing is it's a live preview so I'm gonna kind of see if you can see both of them to the giant blue button on the right. Okay. I'm not sure if it's on the left or right in the video and get confused but if I click and drag it, can you see it's dragging on both. Okay, so it's live preview which is super handy. The other thing I want to show you is something you can see. It's quite thin there. Okay, it's not and if I try and make it bigger, you might have done this already. You're like well it's going to make it bigger and it does this and the black bars up here. Why is it showing me black bars? It's because over here if I go back to design, view, it's back here in Camp Tasia. I've switched back from prototype to design and I'm gonna move across, click on my outboard homepage name. Okay, zoom out. Remember this viewpoint height. Okay, the view port height is what's determining that kind of what you see on that laptop. So what you can do is you can adjust this and that will give you a taller box on that laptop. The only problem with that is that we're kind of designing for the 768. So we want to just keep that little letterbox window so we can only see that much. So we know what's up kind of above the fold but that can be a bit painful when you're working. So we'll jump back to the cell phone now and I'll show you kind of how it works. Alright, see you back and what we're gonna do is go to prototype actually know being design and remember you can change it over here view ports but you can also just drag this line and this is what I'm gonna do. I'm gonna drag that line up and down up and down and watch this up and down. You can see so if you go too far it's gonna try and put too much into view ports and your laptop on my my laptop screen can't show it. I want to find just this happy medium of that. Okay so my view ports ended up being at 10 and it's good for previewing on this but I need to realize that remember the fold kind of finished up here so I just need to be conscious of that but I can't deal with the black box black bars. So I just adjust my view ports to help me show on my laptop how confusing was all of that. Hopefully it wasn't too bad. Let's jump back out now. Alright one quick little thing is loads of people ask me in different videos what monitor that is because I always talk about it so I'm just gonna show you here so that you can go off and google it and figure it out if you want to buy it. Um That's the top there is the L. G. 27 U. D. 88 W. I bet you can't buy that anymore. It's about a year old now And depending on when you're watching this video it could be like 20 years old but it'll have family members that you can buy so um don't go and buy it you don't have to but people email me all the time about that so I'm just trying to cut that question right out of there. Alright back to the video. Alright I apologize to look at some of that video just shot on the cell phone. It was average not a cameraman. I hope you found it useful though. And the last thing I want to kind of just quickly take off for this kind of basic prototyping. We're going to do like full on prototyping later on when we've got our kind of high high resolution version going or high fidelity. Okay so at the moment though we're just going to cover all the basics what we need for our wire frames. There's a couple of little things is if I click on this you got a prototype if you need to break the wire. Okay so say you're like oh I don't want to connect that anymore. There's two things you can do. The easiest is to click drag, drag, drag and just let go in no man's land and it will just kind of snap back to its home. Alright wait there for a second little course update um in the rest of this video I'm going to discuss making adjustments to this. Okay. And what you did in the past as you clicked on it and it all these kind of adjustments here popped out. They've changed XD now. So all of these exact same settings when you click on that button instead of being a pop up, What happens is you click on it okay? It appears all over here, same stuff. Just all the triggers and types are over here. I'm going to discuss what these do throughout the course. Okay. But you was confusing where it didn't pop out here anymore, but it's over here. It's not too big a jump and now, you know, all right back to the course. The other thing you can do, I've undone that is you can click on it and say I'd like it to go to this. So you're saying I wanted to win this button is tapped. I want to transition to this page. Okay. Which is our start trial and that's the name of the outboard up there, you're gonna say none. And that gets sort of it as well. The other thing you can do with that trick is let's say you're in here really close and like we've got two outboards and it's pretty easy but you'll have, you can, you can have hundreds of art boards. It's not uncommon what you can do instead of trying to drag to like the 100th art boards to like it's just too hard. You can click on this and say actually I don't want to drag anymore. Dragon is cool but choose an outboard. I'm going to click the start trial and you can see it's done the wire as we mount it's connected it instead of dragging. Its just another way of doing it. The other thing is you can kind of see it here. If I have black arrow, click in the background, I'm on prototype and I go, where's the Edit, select all. So command a on Mac. Control a on a pc to select all. You can get this kind of nice. You can see all the wires going all at once. You like have I done all the buttons. It's really easy to see in this case and the one you don't have done is start trial. I was playing around with that in the break. So you don't have this one. So that's the one we do need. So start trial goes to the same box. I'm gonna click hold and drag it and connect it. And this one here goes back when it's done. All right. That is the intro to prototyping and using their live preview on a different monitor. Let's jump into the next video
Class Materials
Ratings and Reviews
Haseebullah Johar
Thank you, Dan Scott, for providing such a beautiful Adobe XD course. I completed the course today and noticed a couple of things that are missing. I want to share them here so that you can upgrade the course, which would be helpful for us. Hover state and toggle state. Dragging pages from 1-2 to 2-3 and then back from 3-2 to 2-1 with dragging is not working. Another thing is that we learned scrolling the website from top to bottom, but scrolling or pushing things from right to left has been completely omitted. These are the things I have noticed, and I would like you to upgrade them so that we can improve our Adobe XD skills.
Student Work
Related Classes
Web Design