Hi everyone in this video, we are going to talk about pop up models, okay. Or overlay boxes. Remember in the last video, when you click the start trial button, you ended up at a new page, we're going to do something when you click this button, are you ready for it? Just kind of like pops up over the top, fades out the background and we don't have to jump pages. It feels a little bit more fluid. That's the word. It's definitely popular at the moment. So we're going to close it down, open it up, close it down so we're gonna learn how to do that now in our prototype in adobe XD. Alright. First thing to do to create a model is we still need this art board but we don't need a lot of this stuff in it. And plus we're still in prototype mode from when we were working the last video. So the switch to design and we are going to say goodbye to the nav. Gonna click on that, Goodbye to the all the footer. So I've just got this last chunk left. Okay. And where should it be this stuff up there to mak...

e sure you get rid of everything you don't need. Um So what we wanna do is I just want this chunk. I'm gonna have to make sure you got a white box in the background or something to overlay over the top of the homepage like you saw in the intro, let's just give it a try as is there's a few other things I want to do to it but let's just let's just cut to the chaste end. So we're gonna go back to prototype mode and we're gonna say when that button is clicked, what's going to happen instead of going over here and going to this tap transition, we're going to go to tap still, but we're going to say overlay and that's the magic source. What's going to happen is it's going to overlay that page over the top of this one excluding the background. Okay, so just the physical things on this page, let's just give it a preview to see what it looks like. Okay, give it a preview, come on, you'll notice by default if I click anywhere it gets rid of it. So that's something that just happens by default. A couple of things happened. There one is I did a shortcut to open this preview. Okay, so it is a command enter on a Mac or control enter on a Pc. So it looked down your keyboard that enter key. Sometimes it's the return. Sometimes it's got just a little arrow on it. Okay, so hold those down that launches the preview, which is cool. And let's have a little look at this thing. So so you can notice as a dotted line. So the solid line shows a transition. This one here is an overlay. Okay. And the other thing that's happening in here is that it's going to that page, it's dissolving, which is fine, it's got everything else that's perfect. What ends up happening to this page. If I click on it, you'll notice this little icon, this little icon here says whenever, when anything else is clicked, just go back to not the page next to it, but whatever page you got it from. So what is it called, Return to previous outboard. So if I click the start trial button on like one of the 100 other pages, it's gonna load this page and when I click off it's going to go back to that original page. Do you know what I mean? It's not going back to home page, it's going back to wherever you came from, which is really cool. Sometimes that can be turned off though. Like I've broken it where it's just disappeared like that. You're like, how do I make that happen again? So you click on it and you say tap, which is perfect. And you go to this one that says action previous outboard and then it turns into that little return button and goes to that. A couple other things I want is I want the little cross because clicking anywhere is a bit weird for people. It's gonna go back to that wires ui kit. Okay for the wire frames. I've closed mine down. Where are you? Wires. Okay. And I'm looking for the cross. I could go to adobe market or materials but I know it's going to be in here. It's going to be easy enough to find. Cool, there's a cross, here's a cross. I'm going to break it apart here so I'm going to right click it and group symbol, grab that cross, jump back into my other documents and I'm gonna put it in the corner here and because I've used that blue like that we had in the first one, it's just made it easy. I have to recover everything every time I'll show you a trick for recovering at all at the end. If you are like man, hit that blue So hold shift down, make it a little bit bigger and that's gonna be my little cross even though you can click anywhere. I still feel like you need a button to actually click preview. What's the shortcut command inter or control enter on the pc, click on their Cool. Ha close it down. Nice. one of the things I like to do, close it down is as we mount is I'm going to grab a big rectangle because if you start at the beginning, it kind of grayed out the background. Okay, there's an easy way to do that. Just grab a big old rectangle, give it no border, give it a fill of our black and then just lower down the opacity of this thing and then go back to your arrow tool. Black arrow. Right click it, send it back. Alright, so we're gonna give it a preview and there's gonna be a couple of little issues we need to fix. So previewing and the weird thing is that it previewed from this page, you might already run into this where sometimes it's previews from the home page and sometimes from this. So what ends up happening is if I have nothing selected. So my black arrow, just click in the background, it's going to default to this homepage. Why? Because if I go to prototype and if I zoom in in the top corner here, can you see this little home icon that just indicates that if X does not sure which page you mean? Okay, it's going to start from this little home icon. You can change that. You could say start trial could be my home. So that's the default but that's a bit weird. It's gonna go back here. The way to override that. And what we did there by accident is if you click the art board, name, start trial, you're kind of telling us um XD just preview this one for me, even though I haven't said it is the home. Okay. And if I click it, it's going to start from there. If I have nothing selected, it will start from the home screen. Okay, so what's wrong? Let's give it a click kind of half works. Um it's kind of in the middle then you're like welcome to the top, it's in the middle bits. Okay. It's a little bit weird. Let me show you the two things that are wrong one is? It's the this first option here, if I go back to design, remember when we're doing my crazy cellphone footage, we change the view ports height. We should probably just switch it back to matching the both of them because that's the line that I need. Right when I'm previewing, so I'm going to copy it and go back to this, it's up to you. They just have the match. It doesn't really matter if you've gone for the shorter or the taller of the viewpoint heights. Okay. I was going to go back to that original one where we're dealing with The 366 wide and 768. Just so I'm aware that that's the, you know, that's the line that I can't design underneath. Or at least a lot of people don't see what I put under here unless they scroll that's going to get rid of part of it. Let's preview that back to my kind of like skinnier model. But that's okay if I click on this kind of works, but there's still that top chunk, see this bit here and I'll show you why that is. So if you go to prototype and I click on this and I click on my button and you can kind of see it here. It is a big green thing. Okay, It's going to grab that and jam it and start it wherever the top of the green boxes. So what I want to do is close it down. Can you close it down? I'm just clicking on the blue box and grab that and just move it to the top. Okay, so instead of being kind of hard part the way down, I've just dragged the center bit to the top. Now, if I preview and I click on this kind of covers the whole thing. Here we go. cool. Huh? I love pop up medals. You might not like them. It's definitely a phase that the Internet is in and I'm in. Okay, it's just a way of instead of jumping through like 20 pages, it allows you to kind of jump, you know, you still be able to see where you are, you can go back to it and you don't have to have this like completely separate page to jump back and forth. Just it feels like an extra in a less extra step, even though really it's not just a trick, especially for login screens. Just something that's quite small, definitely great for like help boxes. That's um, you know, if you click on the little question mark to give yourself a little hint can be helpful. And the trick we did today is we put under design, we put a big black box and we just lower the opacity down and kind of covered it up to make it really stand out against the background. Alright, friends, that is it for this video. I will see you in the next one.

Class Materials

Bonus Materials with Purchase

Six Completed Files

Exercise Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Web Design Design Thinking UX Design Design Projects

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.

2,000+ classes ranging from fundamentals to advanced techniques.

Create a Popup Modal

Create a Popup Modal

Lesson Info

14. Create a Popup Modal

Lessons

Getting Started with XD

What is UI vs UX

The UX Brief & Persona

Wireframing (Low Fidelity)

How Wide for my Website

Existing UI Kits

Working with Type

Basic Colors & Buttons

Free UI Icons

Footers & Lorem Ipsum

New Pages & Artboards

Class Project 01 - Wireframe

Prototyping & Interactivity

Create a Popup Modal

Prototype

Groups & Isolation Mode

How to Use Components (Previously Components)

Production Video - Left Nav

Repeat Grid

Updating Components & Repeat Grids

Prototype Tricks

Navigation Tricks & Tips

Class Project 03 - Components

Mocking Up an App

XD App on Your Phone

Fixing the Position

iPhone & Android Status Icons

Production Video - Login

Sharing Wireframes

Recording Your Interactions

Class Project - Wireframe Feedback

Mood Boards

Class Project - Mood Board

12 Column or Grids

Working with Colors

Tricks for Using Colors

Gradients

Class Project 06 - Colors

Use Web Safe Fonts

Character Styles

Font & Text Tips Tricks

Plugin Lorem Ipsum

Paste Properties

Class Project 07 - Text & Buttons

Draw Custom Icons

Strokes & Lines

Pen Tool

Drawing Practice

Production Video with Tips

Illustrator in XD

Class Project 08 - Custom Icons

InDesign in XD

Pros & Cons for Images

CC Library Connection

Adobe Stock

Free Images

Masking

Photoshop in XD

Infographic

Class Project 09 - Hi-Def Mockup

Mobile Phone Mockup

Class Project 10 - Mobile Website

Hidden Features for Repeat Grid

Plugin - Content Generator

Plugin - UI Faces

Plugin - PhotoSplash

Plugin - Copy Cat

Advanced Asset Panel

Advanced Symbols

What are Micro Interactions

Button Grow

Animated Image Gallery

Full Vector Change

Class Project 11 - Micro Interactions