Popup Menu or Modal
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
Popup Menu or Modal
Hi there in this kind of advanced prototyping, we're going to look at pop up help boxes like this, we'll look at reusable kind of overlays that appear on all pages, they fade out the background and this one's blurted as well. In this other example here we can go a bit further little video, you can click on the video and it takes control of the full screen, you can close it down and look at a few other examples where you can click and choose colors or at least fake, choose colors, pick fonts, they're called models or pop ups or overlays. They're all going to look like that. Let's figure out how to do them here in adobe. XD. Alright to create a little pop ups. Um So I've created like just a little graphic already. Okay, so it's just a circle with a question mark in it. And let's say I put this here and just to help people understand maybe a little bit more about how this works. I love these little things. Just to kind of help you explain. I use a little pop up often videos in them, but i...
n this example we're just gonna do a bit of text. So I'm going to zoom forward and create my little help box. All right, you're back. That was probably very painful to watch. It was painful to make that's my little help box command one. So when you click on this disappear. So you kind of just make it here, then it needs to go on its own art board. So I'm going to group all this cut it. Okay. And what I'm gonna do is often I'll just put my so this is gonna be my normal flow of website stuff. Um I always put like the pop ups or all of their own like little group up the top here, there's no reason just got to put them somewhere. So I like to put them kind of just above the main flow. So up or tool, we're gonna use the nine-20, just make sure it is the same width as the upwards it's going to appear on the top of. Okay, so I'm going to pop it up here. It needs to you need to have the outboard selected when you have paste because it needs to go in the exact right place where you've cut it from over here, you can see it's kind of in the position we had it and let's just give it a test first before we add any more stuff. So you, when this tiny little thing here is clicked, switch to prototype, it's going to jump to here and it's going to be tapped and it's going to make sure it's overlay. I should give this a better name. I will in a sec. So let's give it a preview. So when this is clicked, it doesn't work, why does it not work? Alright, I'm back. I worked out what the problem was, it's never happened to me before, honest. What ended up happening is this art board over here? If I go to design view had a fill of white. Okay, so this one, if you have a feel of white, this guy here when I preview it, okay, it jumps to it and actually looks at that Phil and goes, oh, I'm gonna put that on because you've been purposeful about it. I wasn't purposeful about it. If I go back to here now and say actually turn that off, you're probably gonna work by default. I don't know how I did that, but anyway, without the fill on, it works. Nice. Cool. The one thing you need to make sure though is when it gets over here, Okay, go back to prototype. Most of the time you click anywhere, it'll go back, Okay, it's just the way it works. And if that doesn't work, you click on this one and you probably have this little icon on the side here. You need to say you go to when you're tapped, go back to the previous art board and you'll see that little kind of like refresh or go back button is there, That's how it goes back. Can't see it click on the side and just add it tap previous outboard. It's good to go Clickety click click click click click. So good. And I learned something in this video as well. Now we're going to carry on and do the log in button, it's the same thing, so if you want to skip ahead, you can, there's not gonna be anything new was going to tie together a few of the bits and pieces we've learned in the past. So I'm going to duplicate this outboard because it's the right size. Going to get rid of everything on it. I've already made like a login screen in between videos, so just you know, it's going to be our login. Welcome back all the bits and pieces we need. Of course it's going to do the same thing, but we're gonna do some cool stuff in the background we've done before and we're getting connected to multiple pages. That's one of the perks for the pop up menu can appear over any page. So let's get it going first of all. Okay, so over here, I'm going to start with the homepage one. I'm going to click on the log in Button switch to prototype zoom out a little bit and I'm gonna say you connect to you with our overlay. A little trick you can do is see you down here. If you click in the middle of this, can you see the middle of that green button? It just kind of shows you where it's going to appear, which is cool over here though. I would like it to have a few other bits. So in design View control tab To toggle between the two. Okay, so I've got this big box, we've done something like this before. I'm gonna do it, I'm gonna actually, I'm gonna select it and go background but rather than in a previous video, we did it for the White Friends, we just kind of made the opacity light. So in this case I'm gonna send this to the back first of all and I would like to lower the darkness, increase the blur. It's a little hard to do this because you can't see it over the background. So what we might do is copy it, come over here and paste it. Okay, so I want to be able to kind of see how blurry, I need it to be and how dark I want it. So I'm going to lower it down so it's quite dark how blurry it's gonna be. That kind of blurry. Just kind of get it how you want. Then I'm going to make sure it is nice and big so it covers everything that we're going to see a copy. I'm going to cut it, move it back over here, send it to the back. There we go and let's give that a wheel over here preview, click on log in kind of freaked out there a little bit. Who is freaking out? I guess this is my preview, trying to record videos and do demos. Uh little animations. It's kind of freaking out a little bit, I guess it's that fade. The blur. The blur is actually quite a hard thing for the computer to do that's kind of freaking out. But you get the idea now one last thing I want to show you is we're going to use that on all of them because that login appears on all of them. I'm gonna show you some tie in some things we've already done. So I want that to link to all the pages on the homepage. To link to the homepage because how much have we done? I haven't done, you can see it here very, I haven't done any of my prototyping on any of these buttons, which is good, kind of so we're going to get this one working now. The reason I do this, I'm going to copy it and I'm going to paste it and I'm going to put it over here in the passport area. Remember why I do this is so that I can link to all the different parts. So if I go to you, okay, I want to actually remember command click to get to the logo. Come here. Actually, I don't want to and double click it. I want that to go to there, but I want it to be transition just a regular old transition. Awesome. We don't have an account page yet. We have a log in page. Okay. Which is going to go to their register page, which I don't have yet. So I'm just going to kind of pretend it's this one. The reason I do it up here and not actually on the art board is watch this. I can't link to the homepage from the homepage. So if I click on this and I'm not sure why I'm so far out, it's just painful. So I can't link to myself. So when I'm copying and pasting this onto the other outboards, it's not going to link to here. So if you do it up here in this little thing and I copy it and if I paste it onto this one, get in the right spot, it's going to add those two and it's not going to have this one, but this one over here, paste it, it's going to have that link back to the homepage. You might not find that useful. I do because I just want one to change and I want them to kind of like go off to their respective pages. Unless you happen to be on that page, you can see the registration button doesn't come to hear anymore because we're on that page. Does that make sense? We did it in another art board um in the wires. It doesn't have to be an outboard. It can just sit up here Often. It's easier in an outboard. This one's fine because it's just a long thin thing. Alright, let's get products, let's get login screen to work on all of them. Cool, freaking out a little bit. Let's go to the register page, but you can see, you can kind of co use that login on all the different pages. All right before you go. I want to show you how much I use or maybe overuse models on different projects. So this one here is a different project and working on, well, it's kind of very similar. Okay, but this is the actual product rather than the course. You'll see. These are all pop up models on their own little sites and I'll show you how they work. So this one here, our preview and in here I use the same thing before I use the same kind of like little pop up. But I use a little movies that go into here. Now, it's just a mock movie because XD doesn't allow you to have videos working in here. But I do a kind of a second hop. So that just opens it up. But then you can click on this and it opens it up. Okay? It looks like it's full screen. You can close it down and I'll show you how I've constructed that. So basically let's have a look so you can see this little cushion. Mark goes to this page. So that's exactly what we did in the last video. Okay, just kind of overlays that. But then this one when it's clicked, it has its own overlay. So it's just another one. So all I did was generate this other page, make it kind of full screen, the video looking and then to say you my friend, okay, is the same thing you're going to tap when that's tapped, I want you to overlay to which page it's going to be, I can't remember why I called it, But it's going to overlay to this one and double check when this one is finished, it's just going to go back. So let's give it a go and I'll show a few other examples, it's just more of the same stuff. But yeah, it gives you a kind of a nice little step through another one that overlays in here. Is this one, choose an image? No, it's choose a theme. Okay, I wanted to really communicate to the developer who was building this, how this this worked, you click on it and I just added a developer note, these are the different dropdowns. I didn't want to have to create like so many outboards to totally make this because my developer is fine. He knows like it's not a perfect working model, he just needs like ah just needs the design. So this is what I was hoping to do, like when you click this, drop down, it'll be a drop down menu and I just said, look this is what's gonna look like when you pick gradient, this is what it's gonna look like when you pick um uh image and this is what's gonna pick when you pick solid colors. Okay, so I just wanted to give him a little visual cue there. What else have I got? There's lots of other ones picking fonts as well. Let's have a little look preview this page when you choose fonts, allows you to go through and pick these. I didn't make them clickable, you could go even further and click on these and change them. Okay, so that was just a little helpful thing there for my developer, so he knew what I was doing and there's a bunch of things like that throughout here. one more, I'll show you is another example actually. That's not that exciting, but we'll do it anyway. It is the login button. So all the pages have this kind of like course login. We've done it though. It's pretty nice and sweet in this one. Weird because it's not blurring the background, is it? Yeah. Alright, buddies, there is pop up boxes or models or overlays, lots of different people call them different things. Models, probably the most specific pop ups are different from models. Pop ups get blocked. Models are kind of within the app. Anyway, 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.