Production Video - Login
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
Production Video - Login
Hey there. Welcome to this production video. It's just a video where we need because at the moment we've got kind of parts of these, we need all the rest of these. So a dashboard, a login screen and we need to connect up all the wires were not gonna learn anything particularly new in this video, we just need these bits to carry on. So yeah, you can watch, you can watch me on like double speed if you know how to change the speed of the video because it's not super exciting, you can even skip it, I'll allow you but if you're hanging around, let's get started. Alright, first up, I want this app, I want to change, this is actually the sign up page, called it the login and this one. Sign up. Okay and duplicated, holding down my option key on a Mac or a pc login and I want bits and pieces from this. So I want to um group it, command shift, G on a Mac. Control shift, E on a pc, grab you, deleting stuff, dragging stuff around. I don't like the edge, drag it up. There we go down, a little bit n...
ice. And this little line looks like it kind of, it's probably not strong enough to it's fine for the markup. Sign up, log in a couple of things. This is a group. Okay, So I'm double clicking it to go inside or you can run group. It's probably easier. I want to come down there we go instruct Director HQ and I'll double click these. Get rid of these guys and click on this, paste it. Oh that was weird because I had the text selected when I copied it. If you're in here and copy it, you just grab the text. But if you click it when it's not all highlighted and copy it, it's very different. So if you're finding that, that's because of that, don't highlight the text and copy it. All right, Next thing I want is my dashboard, you go thank you. Dash board dash board and this dashboard actually has no none of this stuff on it. I want to get some text like here I'll copy that. This is actually gonna be the instructor dashboard dashboard. Can't spell, can't spell again. All right, I'm gonna grab this part here. You get a copy down here, paste way too big. It's not far off the right size though. If I go in there by luck, how many of these I want, I want a few. So I'm going to double click the name, Just click the name once. Even track it down and I'll sort that out so that fits in there. Let's pretend it doesn't yours is a bit big. So um what I want to do probably the easiest because it's in a repeat grid. We can't do like responsive even though it says we can do responsive. Resize, we can't at the moment so I need to um group it grab you guys and them might fit. I'm just showing you what you would do if you didn't because a nice little trick is I have them all selected. Okay. And make sure responsive. Resize is on auto, it's on it's a little now a little slider to the right and it's auto on. Watch this whenever you size it. Can you see? It does cool. Resize the things I see, I like it and loop and remember if it's one unit which is I can use this option. Remember we start using our shortcut shortcut school if you can guess what that first little character is there and on a Mac it is the control key. So that is command control, C. Command control. C Actually not even sure what it is for pc. You'll have to hover above it and see really handy shortcut. Alright. Back to our repeat grid grid grid goodness. It is late is 11:30 p.m. On sunday night. Okay, so a little bit tongue tied there. Let's do one more thing. Let's grab it from the wires one we had so we had remember wires mobile and open that up and you are elements I'm looking for the menu. Either those lines or the other one that they use. Like see this one here with the three lines. One short. It's meant to indicate a menu. So I'm going to double click to go inside, copy it, Jump back to my other, paste it in, grab it. It's hard to grab those three little lines. Okay. And it's gonna sit up there. My little we're gonna use that later on as well. Alright, so those are all the bits we need. I'm going to get it to connect all up so switch to prototype, remember control tab to switch the prototype mode and I'm gonna select all to see what I've done. Okay, so I get to hear and when that one's finished, I'm going I double clicked it because it's kind of in part of a group. I don't want that whole thing to go into that actually would be fine. But I'm gonna double click it to go inside the group and I'm going to say when you are finished, go to here tap transition. I'm going to use that whole app version. Well instead of a dissolve, I'm going to use we used we we didn't decide what we're going to do. I'm going to do a slight lift looks nicer and I'm gonna do the same thing for this and it will remember the last thing I changed it to which is cool. We're going to do a menu a little bit later on when it pushes it across. Give it a quick test to make sure I've got everything actually we have to get the sign up button that's fine. When you click log in though. Not the text. So have it selected as like a little a couple of clicks as a group. So click it once. Double click keep clicking. You eventually can select the text, I just want to click it like that. So I get a little arrow. So I can say when login button is clicked, jump to sign up and if you click the sign up button over here, jump the login and this one's gonna be weird, it shouldn't be slide left, this one should be slide right, I'll show you what I mean. Give it a preview. We're going to click on sign up. Don't sign up preview and you can see when I go to log in. It makes sense to go that way. But when I go to sign up it needs to really go the other way because if it doesn't you'll get this when your preview, when you're testing. If I use if I left it as slide left, just feels real weird. Watch this, we'll start with sign up preview and log in and I go back this way it goes the wrong way. Okay, I want you to toggle left and right. So let's go to slide Right, Alright friends, those are all the components. We're going to need to carry on with this tutorial. That's why we need these little production videos. Just need I need this stuff to keep going. We haven't learned anything new, we've practiced some stuff right? But that's gonna be it. That's gonna be it for me tonight as well. I'm gonna go home, have a sleep and I will see you in the very next video. You'll be able to check you be like he sounds heaps better in the morning or you'd be like, man may need some coffee in the next video. Can't win. Alright by now.
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