Lessons

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