Learn Adobe Experience Design CC 2018 by Example | Gary Simon | Skillshare

Learn Adobe Experience Design CC 2018 by Example

Gary Simon, Full Stack Developer & Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 34m)
    • 1. Course Trailer

      1:22
    • 2. Project Preview & Introduction

      2:36
    • 3. Header Design

      11:29
    • 4. Vertical Sidebar

      12:33
    • 5. Chart Design

      9:17
    • 6. Finishing the Dashboard UI

      11:06
    • 7. FAQ Page

      5:33
    • 8. Account Page

      7:02
    • 9. Prototyping

      5:32
    • 10. Dashboard

      9:25
    • 11. Mobile Menu

      4:15
    • 12. FAQ Page

      3:28
    • 13. Finishing the Mobile Designs

      4:14
    • 14. Prototyping the Mobile Artboards

      6:05

About This Class

Adobe Experience Design, also known as Adobe XD, has recently graduated from beta to Adobe XD CC 2018!

This powerful UI design and prototyping tool is sure to be a staple in UI design for quite some time. It allows you to build user interfaces from scratch, and create prototypes with ease. In short, it's going to make your life a lot easier as a UI designer.

In this course, you're going to learn by doing. By tackling a UI project, we're going to learn the tools and the XD interface by necessity. This is how we all learn best! That's why you won't find any slides in this course.

The topics that you will learn:

  • Create a UI for desktop and mobile from scratch
  • Quickly replicating and modifying artboards
  • Using the Adobe XD vector tools for design
  • Creating prototypes between your artboards
  • Effective UI design principles

Things you will need:

  • Adobe Experience Design CC
  • An eagerness to improve as a designer!

So, if you're ready to learn, let's begin!

Transcripts

1. Course Trailer: as a designer, your life just got easier with the release of Adobe Experience Design CC Hi, I'm Gary Simon, and I'm a full stack developer with two decades experience working with some of the top companies, including Lincoln and Plural Site. In this course, you're going to learn all the adobe experience design has to offer by falling along as we create a full user interface project from scratch. See if you know anything about me. You know that I love to teach by example. It's how I think most of us learn best, but don't be experienced. Design is not only software that allows you to design user interfaces, but it also allows you to quickly and easily create interactive markup prototypes. As you see here. In this course, you're going to learn how to create user interfaces for desktop and mobile from scratch. Quickly replicate and modify our boards. Used the adobe experiences eyeing doctor tools for design create prototypes between your art boards and effective user interface design principles. Onley thing you're going to need is a copy of Adobe Experience Design CC 2018 and an eagerness to really become an awesome you I designer. So stop staring at the screen already and let's get started 2. Project Preview & Introduction: all right. Hello, everybody. And welcome to this course in this introduction about everything we're going to learn throughout this course. So here, of course, we have Adobe X'd and right here are a bunch of art boards. And this is actually the exact project that we're going to be creating from scratch in order to learn the dhobi experience. Design CC 2018 Now first, we have basically two different things happening here. We have a desktop view off this fictional service or app. It's kind of like a dashboard and then also a mobile presentation of the same app. Now, if I zoom up, we can see a much closer representation of what we're going to be designing. As you can see, it's a very appealing designing our design rather, and one of the things that I will be focusing on as side from actually designing all of these is switching over here to the prototype tab. And if I select one of these, we could see all these little interesting connections that are happening back and forth between these. Well, what the's are essentially is it allows us once we select one of these and to hit play right here and let me scale this down showed up quite large on my screen. Allows us to emulate what this service or this app and how will behave when it's actually on a device. So, for instance, if I click on account and hit update info information updated, we could start to actually use this without having to write any HTML or CSS JavaScript or worry about back encoding of any sort. And it's actually really easy to set all of this up. And not only that, we can also view it on a phone type of display right here. You could see we have a nice mobile navigation here, and it behaves just the same. And even further than that, you could connect your phone to Theodore B X D app that you can install. And you can even use this option right here to move the file to your creative cloud and actually open it up and use it on your mobile device. So as you can see Adobe experience, design is very powerful. It just released from Beta Teoh its first version, which is C. C 2018 and I think you're really going to enjoy this course because you're going to end up learning quite a bit. All right, let's get started 3. Header Design: All right, now, welcome to this new chapter. This very first chapter where we're going to focus on getting up our project up and running here in Adobe X'd, and we're going to establish a background design and also get the header portion of a desk talk resolution for our project. Okay, so I'm gonna switch over here. I have the new document window open here. This opens up by default when you load up X d. And I'm just choose Webb 1920. Okay, so just a few things I When it comes to navigating around in relation to using your keyboard, you can hold the space button. And that changes that to a hand, as you can see, and we can move around. I'm going to be doing that often. Throughout this course, we can also hold Ault and your mouse school will to magnify in and out. So those two things I'm going to be using quite a bit. All right. So the first thing let's change this name, the way to do that up here of this are poor. We just double click, and we'll just call this desktop and main. Okay, So the first thing I want to do is to get a background set up for our project. Now, more often than not when it comes to setting up a background for you know, whether it be a Web sites I or an app you other one is to be quite on the light side or quite on the dark side. That way, your user interface on top of it can contrast one way or the other in a significant manner so that you can really visualize and see the actual user interface. So you can either choose to use a solid color over here. When we select this, we have the ability to give it a feel under appearance. So if I click on Phil, we could see that we have it by default set up here as solid color. Now, if we change this to Grady int, we can also choose to define a Grady int. We're gonna use a Grady int. So this topic er up here gonna take here to the upper left. Take this bottom one down here to the lower right now for this first picker for the color, we're going to make it somewhere around a yellow color, and then we're just going to make it really light. So the color code I'm using is f f f d E six, so you can just put that in the hex area. Now, for the 2nd 1 we're gonna go choose more of like a pinkish purple color, and I'm gonna choose f f c B F eight. All right, So once you have that, that will be our background. As you could see, it's very kind of sort of like a pastel. It's still light. And really, it's up to you if you want to use a Grady Int or not. Not a big deal. Okay, Next, we're gonna go ahead and get out a logo right here, and I'm just gonna call it dashboard. We're not gonna spend any time doing logo design, although you can look at my other courses and you can probably find a logo design course there. So, with the type tool, I'm just gonna left click just anywhere without thinking about it. Too much. Gonna type in dashboard. All right, so right here when you have a type player selected, and by the way you can talk, go on and off the layers by clicking this button down here. So when you have type selected, we'll see. Over here. We have a bunch of options in this panel, so I'm going to take the text and change the font to railway. Now. You may not have that by default, but if you Google Railway Fund, you'll be able to find where to download that. And it is free to download and has a bunch of different weights. And it's a fought that I really like to use. So let's go ahead and increase the size here. For now, it's good. Choose a size right around, we'll make it an even 40 and notice you can either just employed a direct number here, or you can left click and drag up and down to change the font size. So also for the wait, let's shake it. Let's make that a bold right here. Now for the Phil, we're gonna choose a primary color that we've been we're going to use throughout this course. So we're gonna choose something like a purple or pink, and we're gonna make it right there. So that's gonna be f f 00 e now to add this to a swatch, which would make sense because we really want to use this often. You need to click this a little plus button right here. All right, great. So I was gonna position this around in often times when I'm I moving objects. I will be holding shift to either make it go 100% vertical up and down or also left and right. So I'm just gonna leave it right here for now. And I'm a change a position later. And now I'm gonna add a little menu right here, like a drop down menu button. So to do that, I'm going to click right here, and I'm just gonna type in options, change it back to railway, and mind you, we could have duplicated this. In fact, let's just do that so I can show you how to do that. Real quick. Control D hold shift. Moving over will name this the options on getting ahead of myself. And let's go ahead, take the size down. What's making an even 25. And we're also going to change it to regular and for the color we're gonna use you use something that's a little bit more de saturated Zoom up here so we can see this. So this color was added to our swatches. It is for a 2147 Now, this doesn't look like a very good menu item, So let's give it a little bit of a container to do that. We'll go ahead and take this rectangle tool right here. Well, just draw right over it. All right, let's get rid of the border. And here in the layers. Let's go ahead. Drop that beneath options. Okay, I'm gonna extend this over here, and you can see these little circles right here. That's to control the border radius left, click, and you could just slightly see it affect the roundness of the edges. Let's move this year and more in the center. Let's get this lined up in. Even you could see these different little guide show up. They're pink, and that's very handy. Now let's add a little drop down. So this is where we're going to use the dreaded pen tool that a lot of people are frightened over. It's not that hard, actually. So what I'll do is I'm going Teoh left. Click right here. Hold shift left, click right here. And then we left click rate there as well. Now, if you find that you didn't get it, even you can use your keyboard arrow keys by selecting the anchor point that's needed to adjust. And I think I need to adjust this. We'll double click it. All right, there we go. Now, I just realized I made that incorrectly, so we'll make that point down. All right, So it's get rid of the border and for the fill color, we're gonna use our primary color from the swatches. And also I scale it down, and you could just hold shift to scale it down. That way it's constrained and you don't get I any unwanted distortions. So control wine, by the way on your key award will get you 100 100% view. Okay, that looks pretty good so far. Now, let's continue on, And at this point, let's go ahead and create a basic navigation over here. So this time we're gonna take just these two. So I left click on the options and then held shift and also selected these. You can also select the layers over here. I'm gonna have controlled D, which will duplicate him and then move him over by holding shift. Next, let's drag us in so that it's even. And then also just to differentiate between these different menu items because they are different and is going to be a group of these items over here on the right. We want to create a separation, aesthetically. So to do that, what we can do is let's get rid of the fill this time. Let's give it a border. Our border could be this color, but maybe a little bit lighter. So let's go ahead in. We'll use right around there. That's a to 7 to 9 f will hit the plus sign. And that looks pretty good right here. So now what we want to dio we're gonna take both of these and we're gonna choose repeat grid we're gonna be using is quite a bit. It is a great soul. So we click it and then we extend all the way to the right. What does use for We can also increase the space between and by left clicking and dragging right between them. Okay, so you basically want an even amount of space on the right and the left, and that looks pretty good to me. So now if we want to adjust thes actual text labels, we can double click a few times and just change this one to account. All right, Now, you can do this while it's still maintaining this grid or these this repeatable grid. But we can also on group the grid, right. And let's change this one to services, and the next one will be a fact, and this one will be contact. Okay, so at this point, if you think there may be might be a little bit too small or the text might be too large, I'm going to right click and on group them. So we just select on lee the text layers, and maybe we'll make thes 22 to make him just a little bit smaller. Can also center these up by holding shift, and you'll see a little vertical helper when you get right to the centre. Right there. All right, I'm gonna take all four of these, and they look to be a little bit off vertically inside of the container. All right? That looks pretty solid to me. Right there. Okay, So now in the next lesson, we're gonna focus on getting a left side navigation right over here in this area. I'll see you then. 4. Vertical Sidebar: All right, welcome to this lesson where we're going to design a sidebar navigation. Okay, so continuing on with this sort of ah white background panel theme, let's go ahead and add one right here, roughly. Okay, So to do that will take our tool here. Or if you already have corners that are defined, we can just go ahead and control D that will duplicate it, and then just drag it out. This way, we're able to save a little bit of time. So right around here looks pretty good. Okay. Now inside of here, we're gonna have basically some options that are relevant based on our project here. So this is going to be a sort section is gonna have a label with a little icon and then also some options for day, week and month and year. So what we want to do now is will take the type tool or you know it. Let's just go ahead and save time, and we'll just replicate one over layers over here. Bring it over here. By the way, that was controlled D and we'll call this sort and we'll make a little bit bigger. So let's try 30 and I bring it over because I want to have a little icon right over here. In fact, let's just make that 25. Okay, so at this point, we can other design a custom icon, which would probably take a little bit of time. Or we could just grab a Nikon that's free and available to use from one of the many icon sites. So I recommend checking out this icon finder dot com, and we could just type in what we need, like a stopwatch. And also we can change the price to sort Onley free and no link backs required, and that will give us some options that we can still use. I really like this one over here. So if I click on it, we could just choose to download the S V G. And that's what we want for Adobe X'd because X D can import these SPG files, which will allow us to very quickly and easy change the color if we need Teoh. And it's also SPG files are vector format. We could scale him up to any sides which cannot be said about PNG option. So going back here if we just click this. All right, We can go ahead and I'm gonna open it here and show in folder and showed up on another monitor. So I'm gonna drag this over here and we're going to do is just drag it to my desktop. So I'm going to drag this right here and already hadn't filed the same name, so I have to replace it, and then I'm going to drag this right in here, all right? And that is how easy it is. Awesome. So now what we can dio is move this over where we need it. We're going to scale it down. You could just too old shift in Ault and drag us in, or we could just left click and drag that here. But you want to make sure that this little icon, this lock icon, is here. So it's constrained, all right? And by the way, when it comes to thes icons that are transparent in the middle, it could be a little bit tricky. Just like them, you may end up selecting something you don't want, Teoh. All right, so I'm zooming up here now. I don't want this to be black instead to change this, we could see we're have the access right away to this bill color. Sometimes when you import some SV G's and this is very important you're going, you may run into confusion. If you don't have this Phil section right here available, it's probably because this is grouped up. It's so if you click on the layers and you notice that there's a group, then you just need to extend it all the way until you find the actual path and then you will be able to edit the color. So for the color, we're gonna make it our primary color. All right, so now let's go ahead and get our actual menu items. So these air repeatable. So we're going to use the repeat grid tool as well. So let's take this. We're gonna duplicate it, Control D, and we're going to double click. That's changed this 1st 1 to be day and pay attention, by the way, when I'm actually putting these elements on the interface, white space margin and padding is highly important in order to effectively design a well looking user interface and also one that's easy to use. So we're going to scale the size of this down. Um, the reason I'm going to do that is because, really, if you think there's something called visual hierarchy in design and you want to separate your elements according to their importance, So in this context, this label sort is really important because it's kind of letting you know what's happening down here. So the way we can separate it through visual hierarchy is through size. It's to make it boulder, for instance, I through color and contrast. So there's a lot of different ways. So I'm just going to scale down the size of this right around there, will just say, Yeah, 17. And I'm going to say this one's gonna be day and also I'm going to change the color as well . So let's come over here to the Phil and do I wanted absolutely pink. No, I don't. I think something more along this color right here that we have, which is a 27 to 9 f. All right, that looks good. Now let's use the repeat grid tool really want four, by the way, and let's extend these a decent amount so they have a lot of white space, and it's easy use. Okay, so at this point is what it should look like. Roughly May want to. We will probably increase the font size, but not just yet. Let's go ahead now, and I'm going to UN group the grid. Now. We can have access to change the font size, say maybe 19. Okay. And at this point will go ahead in change these up real quickly. There's gonna be weak. I hit, escaped by the way month escape and then year escape. Now I want to show what it looks like when you have an active page that selected. So we'll say it's a week in this context. So we'll take our rectangle tool draw out right around here. We can fix the alignment a little bit later. After, after this section, let's take the color and make it our primary because you really want to denote Ah in a very visual manner which pages currently selected. So we could just do that come down here and for this one was make it white, all right? And we could see it's not perfectly aligned up. We don't want to move the actual type because it's already lined up with the other type. So weaken. Just position this and change the size as needed. All right, That looks pretty good right there. And we may want to make this just, let's see a medium just so it sticks out a little bit more. All right. We can also emulate what it looks like. For instance, toe hover over. Oh, before we do that, let's make sure this goes all the way to the right and to the left. Here, control de to duplicate hold shift to move it down. This one. Lets go ahead and use a real like gray. Well, they were right around there. Will add it to wristwatches. E B E B and E B. Okay. All right. That's what the sidebar she looked like at this point, we'll put that right here. Let's go ahead and create another one control de and right there. Just so we have even amount of space between these different elements. Okay, this one, we're gonna change this, and we're gonna call options. Okay, Let's go find a Nikon real quick. So for options, we could just It is always best to try to stick with the same icon, find that we have consistent looking icons. So for options, I think I'm just gonna use this one right here, so download SPG. All right, and I'm going to just minimize this. Pull this over. I have my folder out on the other monitor and drag it over here. Move this over here. All right. To scale that down. This to be pretty much the same size. Just like that, Phil will be our color. Get rid of this. All right. Just about done here. Let's go ahead and change up the links right here. We're gonna say all affiliates gonna move this over. I'm gonna get rid of all of these, so I'm just selecting Hit delete. We're gonna make little check boxes because these are options after all. Hold shift. Make a perfect square. You can move it with your arrow keys. Okay, The default gray is actually fine, so I'm fine with that. Let's take both of those by holding shift. It's like both of those layers and hit repeat grid and will create a little bit of separation. All right, so let's go ahead. Now. If you're happy with that, we can hit on group grid and this one down here. We're gonna change to Onley Internal will put us. These are just random ideas it came up with in verified. Let's also simulate what it looks like when one of these are a couple of them are checked off, so we're gonna create our own custom check mark here. We used a pencil left click, hold shift to make a 45 degree angle, keep on holding it and then hit escape after that third anchor point. So now let's go ahead and take this, move it near the center, and then we'll also make the border here this color and make it Maybe not three. Let's try to pixels with All right, let's I just replicate that and then we'll make it right here is Well okay, great. Everything is coming along really well so far. So in this section, right here in the next lesson, we're going to begin designing a really cool and slick looking graph 5. Chart Design: all right. Hello. And welcome to this lesson where we're going to design a chart. So let's go back to our workspace here, and the first thing I want to do is get a label going. So I'm gonna take control D. We're gonna move this over and again. We want a fair amount of white space between these elements, and this is commonly known as a gutter. All right, so now we'll double click this statistics, and I'm gonna make this bold. And I like that size right here. So we're gonna leave that as is So position it to the top and we're gonna have a an X y axis sort of chart right in this section right here. It's gonna be the main focal point of our content. So what we'll do now is when you use the line tool. So it's the first time we used you've used this one, and I'm just going to left, click, hold shift and dragged down a chart right around there. That's gonna be the height of our chart. Basically, the border. I don't want a gray, um, actually used the eyedropper tool, and we're just gonna choose something right around here near the middle, and we're gonna click on it and then come down right around here. So that's B 29 to a zero. If you want to follow along is Jackley. I guess I'll go ahead and add that to her, um, swatches there. And at this point, I want to use to repeat grid tool because we have a bunch of these. Maybe not quite this many. So increase the size here, and we want this to end basically right here to the right side of this. All right, so I'm leaving space right here, However, because we're gonna have some labels. Okay, So now let's take the line to again. We're gonna start at the very bottom, connecting it holding shift and connected to the very end right there. Okay. Right now, if you extend a little bit like I did, they're just hold shift, zoom in a lot and get that to match up. Let's also make it the correct color. All right, Now, at this point, and by the way, there we go. That wasn't showing up on my screen. This right portion. Let's go ahead and one group the grid. Now we can see it much better. Okay. What I want to do is take the type tool, or rather, instead of doing that once again, I'll just come over here and take control. D and we're going to read a line. This and this is going to be monetary values right here. So I'm gonna put in 1000 500. All right? And I think I will also make this. Let's take control one to see how size, how small that looks. I think that's fine right here. But we're gonna make it a little bit darker. Czar Teoh really make it look a little bit darker. You can just hit. You can make it bold. So now we can repeat grid pulled us down. And I only want about five of them, and we'll put it right around there. Maybe will decrease that a little bit and just drag the whole thing down right there. All right, great. So now we can one group that and change these values here. Maybe did to I 300 less at a time. So this will be 900 and notice because we made it right. A line it'll perfectly lined that up as we need it to. And then finally, 300 great rights. And now we also need the X axis labels. So I'm going to duplicate this control D and we'll start right around here. And I'm going to put in real quickly Jan for January. Most have months right here. So we're repeat this. And now let's see if I can count correctly. So we're gonna pull out 12. So run into 123456789 You're doing good, Gary. 10 11 12. All right, I pray still screwed it up, by the way, um, right there looks good. Okay, awesome. It's and now one group that and let's go ahead. January, February, March. By the way, you can probably speed this part up. April, May, June, July, August, September, October, November and December. Yea, I didn't screw it up. I only say that because the first time I did this, I went through the project. I I miscounted, obviously. Okay, so now the real fun part. I for some reason, I just really love this next part because it makes the design just stick out. Having this, I've sort of this bar that comes around with big busy acre. So this is where the pencils really fun to use? I don't know. It might just be me, but if I left click just anywhere, it doesn't matter. You know, kind of what you're doing here. This is just for, you know, a prototype demonstration purposes. I'm Let's go ahead and create a busy a curve. Now we have a little vertical grid, so we can kind of get this structured in somewhat of a coherent manner. So maybe every three I'll pull out Oops, I'll hold shift. No. I left click and then hold shift, and we create a busy acre of their and so again, every three lines. So whatever this company is, it's not doing too hot, I guess. Also, try to pull out. Maybe about in terms of the directional handles to grid lines like I have going on there, right there, This one right here and again. Maybe I'm being a little bit too slow about this. Oh, no, they lost money. Oh, they gained a lot of money up here again. I'm trying to stick with every three and just pulling out, too, and will make this up here? Yeah. Look at that. Now let's hit Escape. And now this is the fun part. This doesn't look very good. Obviously, let's click on it. And let's change the border to our main color here, a primary color and then the thickness. All right, That still doesn't look great. But let's go ahead and click on it, and let's give it a shadow. It kind of makes it really pop. In my opinion, um, over here, when it comes to the shadow at a shadow based on whatever you have and we can control the X . So if I left, click and drag you look at that. I really like that. So we'll make it seven on the X and on the why we could make it. Well, seven as well. You can also control the blur amount. I think six is pretty good right there. All right, so now look at that. I don't know about you, but I think it looks pretty good. All right. So in the next section, we're gonna finish this design off here by creating three different panels right here just of basic stat information. I'll see you then. 6. Finishing the Dashboard UI: all right. Hello. And welcome to this lesson where we're going to finish off the desktop version off our services main page of the control panel. So to do that, we're going to add just three blips down here. We're also gonna add a little notification up there as well. Before Reaper, proceed with that part. Let's click on our our board right here and notice that we have a view port height, which is 10 80 it's also set to the height of the actual art board itself. So what we want to do is increase the height here because we're going to need a little bit more space. So to do that, we could just simply left click and drag up or specify a specific amount as needed. For now, it's gonna leave it about 12 82. We could see this little dash line down here is an indicator off our view. Port height. Now the view port height. What that simply means is if we click play to view this in the preview, we'll see. We can now screw all past that view port height. Okay, So first things first. Let's go ahead. I'm gonna focus on that little notification area for someone. Take all this stuff right here, Hold shift and just drag it down right around there. Next time to take this little section right here and hit controlled D, the geese are to duplicate rather remove it into place right around there and then also move this up and then also, way to the right. Make sure you use in the guides to make sure that it's lining up correctly. So there's going to be like a little notification panel notifying people of, you know, very important stuff. So I'm gonna click on the pill. We're gonna make it more like a yellow color, and we'll make it right there. So we'll saying an Adventist watches F F f for a B. Now, this is very important this next part because it has to do with just general design and especially user interface design practices, you know, in relation to color and contrast. We look back here. This is an eyesore because there's not enough contrast between this yellow in this background right here. So if you need something that needs to be yellow like a cautionary type of element, but you need to create separation from the background. Well, you can do in a couple ways. One way that we're gonna use is a stroke, so we can apply a border. But that looks kind of ugly. It doesn't really fit in with the rest of the aesthetics of this design. So let's change it to white and also increased the thickness. That's a little bit better, in my opinion, actually, a lot better. I should say so. Now we're gonna take the type tool. No, I'm not, because I don't keep on. For some reason, it won't X'd won't remember your previous fonts when you create a new one. So I'm just going to take this and duplicate it will put it right here. I'm going to put in just die a random error like are warning message. Your traffic cash has not been cleared in 298 days or something. So I like the color has a good contrast. So we don't have to change that also, like this size as well. So we're not gonna change that either. So now, at this point, we can put in one of our Icahn's and so we'll see if we have a Nikon that we can use down here, unfortunately, they don't have, like, a warning icon. We use this spray here. It actually that makes sense. So we'll choose the SPG, and we'll just repeat that process as before. So gonna pull this over here? I'm going to get out my Dallas section off screen and then import this right here. All right. Right around year. Looks pretty good. Make sure you select it and don't move any other elements. Alright, let's try this. Ah, color right here and that looks good. You can also put in X over here. Advise just using the line tool so that zoom up hold shift to make a 45 degree angle. Let's make this side, too. We'll make it this color as well. Well, whether it's elected control D and hold shift and make sure you have your guides to match it up and then we'll bring it back. Great, they're perfect. Hold shift and select both of these. Now it's in the center. Let's see what that looks like. It's a little bit larger than this over here, so that's a no no. We want things to be consistent. So it's lock these up. Bring it down just a bit. Run around 16. That's better. Awesome. Okay, Now let's create this area down here where we have our three different sections that we're gonna have a little blips if you will take this one and just duplicate it. But right here in this time, we're going to change the appearance up just by a little bit. So what Will dio is change the Phil. We're gonna use this right here, and that's a to 7 to 9 f, and I'm gonna take the capacity down a bit. So it's kind of like a really transparent sort of panel right here. Kind of like the look of that. So now zoom up down here and we're going to real quickly. We'll take this label Duplicated Control D I was gonna put in here our ally. So our return on investment for those of you who might not be familiar with the acronym and then also we put in 12 05 will increase the size. Well, say, let's say 45. All right now, I don't like the type that's associated with railway, so we're gonna change that up see if we have source Sands Pro. I don't really like that either. So let's go. Um, the default font iss s. I don't wanna be sure how to pronounce that. It's ago. You I I'm sure I just butchered that. Don't worry about me. Don't pay attention. I'm gonna take this and we're gonna put in per customer. Of course, we'll make that smaller, okay? And don't worry, We're gonna situate and make things look a little bit better here shortly. And I can I want a little, like footer. So what we'll do is duplicate this control D, and I'm gonna drag it down. And I don't want this. It shouldn't be beveled right here. So toe the way we could fix that is double click. Now, we have access to the anchor points when it's like this one in this one by holding shift and hit Delete. Now it creates a little busy a curve right here. But to fix that, we can just use our Let's see here, use the pencil. I think we have to double click on it first. Sorry about that. There we go. Click on that one, and then we click on this one hit escape, and now it is perfectly straight. Sorry about that brief hiccup. They're now. I'm gonna take thes holding shift and drag up right around there, and we're gonna have some type in there. So now I want to make this a little bit, have a little bit more contrast. We'll take this and we'll put in leaving. Sorry about leaving an 86% profit. Okay, let's Ah, take everything in, move things up a little bit. Take all of it, maybe move it up a little bit closer. All right? That looks good. Now, once you're happy with all this may be a weaken private increase that a little bit. That's better. So around 14 will take thes three and I will repeat the grid and pull it out three times and then give it some space right around there right now for to take this one and increase it. We can see what happens to the rest once it's all in the repeat grid mode. But I think we're gonna leave it like that just for now in maybe what I will dio is gonna take this repeated grid on group it. I'm gonna take all of them, hold a shift and increase the size instead of just I repeating that again because there's too much space in the middle. I didn't like that. What we'll do is just delete those real quick increase. The size will do that again. Repeat grid. That's much better. There we go. Now that's 1000 times better. Okay, so now what you can do if you wish, is UN group the grid. You can change these values up, and I'm going to do that and I'll have that done. Ah, for the next lesson. So when the next lesson starts, you'll see what it changes to. But you can change them to what you want. Or just wait till then to see what I change Them too. But there's no other design at this point. Okay? So now in the next lesson, we're going to simulate what happens when a person cooks on, like, a fact button. So we're going to duplicate this art board and got all of this stuff right here and create new content. All right, I'll see you then. 7. FAQ Page: all right. Hello. And welcome to this lesson where we're going to move on from the dashboard design into another sub page, and there's going to choose one at random. And that's gonna be the fact page of the frequently asked questions page, which is pretty standard across many web apps and websites. So switching back here, the desktop I'm going to select on this art board hit Control De look at that today. Ah, now we have a separation or a replica of everything right here. Now, first things first. Let's change this to desktop FAC. Okay, so now we have to ask yourself, how should this layout change if it all? Well, now it doesn't really make sense to have all these sort options, because that's really only going to be prevalent once we have. You know, we're at the dashboard page. So what? Weaken Dio, I'm going to delete this woman and we all this stuff drag this up. And for this web app, the dashboards really gonna be a primary focus so we can create a way where people can easily get back to it. That would be ideal. So I'm gonna change this and call this dashboard and right here, I'm going to get rid of that. We're gonna create our own little back arrow. All right, so I'm going to use thiopental and hold shift left, click it escape. Then use the line tool. Come here in the center, Hold shift right around here. And if it looks a little bit off like the center of that, you can just increase this size lightly so that it's there in the center. So we'll take this. Make it to for the stroke. Wait. And our color right there. Let's also get it even toe up. All right? That looks pretty good. Maybe we'll make this I boulder here or semi bold. All right. We also will. Probably it would make sense to center that. Okay. All right. So over here, now, we can also get rid of this, and we'll move. This. Statistics up will change this here, to fact or frequently asked questions. All right, Amber is gonna get rid of everything right there. So now we could take a type tool and we'll left click right there. Make sure you're using your guides a text area right around here. Now, I'm gonna use some warm ipsum text. So lips, um dot com she's just filler tax for us to use. And it's an industry standard to use this I tech story here. Okay, paste that in going to change the color here. Uh, I think I like that. Except maybe a little bit more de saturated right around there on that to this watch is that 7868 and 79 Let's also change this to railway and will increase the font size just ah , right to 22 the line height right around 35. Right? That looks solid right there. Now, it's also have the actual questions, and people can click on these, and maybe something will drop down. Um, for the actual answers. So I'm gonna go ahead and take this, Just duplicate it. You know what? Better yet, I'll just take both of these duplicating Put him right here, make sure they're lined up. It's gonna be the first question. So I'll say a question regarding the dashboard. You put in anything here, you could still use the Lord Ipsum text if you wanted to. Really? Um, we're not gonna have any type of icons that will just get this center right there. Pull this over here. And we can also take this top one, these little handles and hold Ault and scale in that way, it doesn't need to be quite that thick. So this was change the filter. A primary color as well to make them really stick out. Let's get these more lined up evenly. All right, Great. So now I'm gonna take this and repeat grid vertically right around there. Looks pretty good to me. All right, so this is looking pretty solid at this point. Um, before the next video, I'm just gonna change these values up because you don't need to sit me see me sitting here typing. He's all out. Um, And in the next lesson, we're going to expand on this by replicating this once again, and we're gonna create what I page happens when you click on the account button. All right, I'll see you then. 8. Account Page: hello in welcome to this new lesson where we're going to create an account page. So let's go ahead and take our desktop fact page control D will rename it the desktop hyphen account. All right, so not much is going to change here except was gonna changes to account and only show maybe just a couple lines this time. And then we're going to have a little bit of a form field section right here where they can update their name, their email address and change your password along with a call to action submit button down here to update the information. So now I'm going to take all of these and just get rid of them. And then I'm also let's just go ahead and double click on this. We'll change this 1st 1 here to ah, default value based on their account information like Gary Simon for the name. We don't want it to be real thick like that. So it's changed this here, too. This color Swatch 87 to enough. We'll make it regular and let's give ourselves a label. So I'm gonna take this up here patrol D to duplicate that and we'll put in your name. We don't want it to compete again. This goes back to visual hierarchy. We don't want to compete with the label up here, so it's less important. Essentially. So what we want to do is we'll make it not bold. Maybe just regular. And there we go. We create a nice sort of separation here Between these two up here, we could probably even changes down to 22 for the size. All right, so now we'll go ahead and extend its just a little bit. We're gonna have to different columns here. So we have your name and sees a repeat grid and will push us here so that the right side lines up with this over here. And this is going to be your, uh Let's just put an email address office put in contact at court Citro com. Alright. And then we'll take this. It's also just pull this down real quick. We're not gonna use all these. Just a couple of them, actually. Um, and increase this will increase that space later. Let's go ahead and ungroomed pit will get rid of these two. We don't need him. Take these to pull him down just because we have your name, your email, and then we're gonna have ah area to change the passwords. Let's change that password. And we'll just put in like that some ass tricks and then re type password. We don't need that at all. Okay, so now let's create a call to Action button. So I'm just gonna take I gonna break. We'll take this one at the bottom, right click and un group it duplicate this. Hold it down. We'll take this button right here. This text rather. And if you have something showing up that's behind something, a quick way to organize it is right. Click, arrange and bring the front. Now for this one prediction to make It's a update. Info. All right, again. So another really important thing going back to you know, the design theory of you I design is right. Now, if we look at this, there's not much separation. We can't just have a white button because it doesn't draw attention to it. It's a completely different type of you element. So we need to change it up. We need to provide some visual hierarchy here. We need to change it in such a way that people can immediately see that. Hey, this is a button. It's not another form field, obviously, so we're not going to style it the same. So to do that, we're gonna take this. It's just Dragon in here and it's double click that XY is it who is currently a part of a group. It's on groups of right click and UN group. Now we can click it, change it to a primary color and then also another thing. We don't want to leave this darker tax. Yeah, you can still see it, but there's still not enough contrast. So does this make it white? There we go. Now, that's much, much, much better. Awesome. Okay, so let's also create a real quick other replicated our board of what it looks like when this update info button is clicked on. And in the future here, we're gonna use the prototype button here, t make all this stuff function So it's duplicate that control delights like any art board, and it's gonna take everything in delete. Take this and actually, I'm not going to take that what we'll do instead, because we want to center the next text right here, so we'll take our type tool. Make sure it's aligned here where it needs to be, and then right online or left, click and drag all the way out. And then we're going to center some taxes says, um, we'll make it say information updated. All right, so let's just get a reference point. This is railway Bold, A 25 with that fill color. So right away bold with this darker feel color and make it kind of a little bit larger. And then take this, Duplicate it, make a smaller maybe make this semi bold. Your information has been updated successfully or something. I just wanted an excuse to put another type player down there. It looked a little bit bland. So let's go ahead and put in Not a Talic, but, um, medium. Okay, so take these two right around there. Okay, So now this is what your entire project should look like at this point. And what we're going to do in the next lesson is the really fun part. And that's to switch to this prototype tab and start making the interface actually start to interact with each other. All right, so I'll see you then. 9. Prototyping: all right. Hello, and welcome to the final section. That's a part of this chapter. And also the desktop prototype. So now for the first time, we're gonna step into the very exciting and fun prototype tab. And trust me, you're gonna love this because we did all the hard work in the design, all the different art boards. And now we get to connect them all up, and it's just fun. It's a fun process of just taking his little connectors and connecting up. You'll see. All right. So Okay, this is what it should look like for now. At this point now, for good prototype, zoom up here and we want to see what happens when somebody clicks on the fact page right here. Well, if we click on this, you'll see this little arrow, and we can pull this over here if we want. But really, we want to make it so that if they click this fact or this button right here, it will work. But it needs to be grouped first. So we'll go back to the design tab and hit control G to group each instance of these throughout the art boards, just like that same thing with account to because we're going to be doing account as well, the other two I'm not going to do simply because that would be a little bit redundant at that point. Okay, so going back, we click on that and it takes you Where to? The desktop fact page. Now this brings up a little window where you can specify the target, which is the different art boards. The transition type dissolves. Default will choose slide left and then easing. Believe that there and then duration will leave it 2.4 seconds as well. So what happens here is what when we made that connection, if we select desktop main hit play, we'll see that if we click on fact, there we go. It gave that specific transition type that we specified so you can control that through those settings. So now let's go ahead and select it Hit control C. That's gonna copy the connecting information. So the fact page, if you click out that, obviously it's not gonna go anywhere because it is the fact page. But if we're on these two, like right here on the account page and the account successful page. We could just control V. And it will remember that connecting information to do the same thing with account. So, accounts gonna go all the way to over here, and it's gonna keep the same settings is before a copy and very click on account. Over here. Pace that and then account over here. Pace that. All right. Now also, we have the dashboard, so we have to group that as well. Control G control G and control G. When that's clicked in the prototype tab goes back to the dashboard. Well, to slide right this time. Copy it. Paste and paste. So now select all these. We have these crazy connectors everywhere with Big One MAWR Adjustments is desktop name. Let's duplicate that control. De won't call this one desktop main hyphen, I Let's see. No alert. All right, So what's gonna happen? Somebody clicks on this. This little acts over here, for instance, or the whole thing. It's gonna go away. So down here, we'll delete it. Select all this, drag it up, holding shift, and now prototype, Click this. Drag it down and we'll just make no transition type because the page doesn't leave. All right, So now we can go back, for instance. And copy this. Copy that. Copy that connector. Piece that And that looks good. Okay, let's go ahead and save this quick play and give it a go. Let's say we want to go to the count page. Awesome. Let's click on update info. Oh, wait, That's right. Doesn't work just yet, So we need to make this button clickable. Drag that here. And we could just choose slide left. Try that one more time. We'll go to account, we'll update and throw. And by the way, it wouldn't make sense really, to have a transition, because again, it's not changing pages, so I forgot about that. Let's go back here to prototype and just change this to none. See how easy it is to make updates here. All right, third time, hopefully is a charm showed up off screen. Alright. Account update it sweet. Looks great. It's gonna fact page. Yeah, Let's go to the dashboard. Let's ah, exit out of here. All right, Now you have to admit, that was pretty fun. So now switching back here, this I little website or app. It looks pretty good, I But there's one problem. It's not very responsive. We're not showing what it would look like. For instance, on a phone. So what, We're gonna focus Nile now? Going forward in the course is to take this design here, all these pages and translate them into a mobile type of art board. All right, I'll see you then. 10. Dashboard: All right. Welcome to this new section where we're going to take the desktop mock up design and translate it into what is gonna look like or what it would look like on a phone, for instance. So the first thing was gonna switch back over here, and what we're gonna do is I'm going to used the art board tool, which had we actually haven't used yet. So if I just left click right here, for instance, we'll see by default. Gives us an iPhone 67 sort of design. We could choose 67 plus right there. You see that? It just kind of replicates it, and that's what we want. By default is a 67 plus view. All right, so one thing row, click. At this point, if you want to view the app in your phone kind of like how I did in the trailer where you saw me using the actual app. Then you want to make sure if you want it works and you want to make sure it works perfectly and fits inside of your phone perfectly. Go to Google. If you don't know this offhand already, type in your phones name and version model number All that stuff and find out the dimensions of your phone in terms of X by y you know, um, the with by height resolution in pixels. And then you set this art board right here to that within height. In that way, when you use the dhobi x'd app to preview, then it's gonna fit perfectly in your phone. All right, just a little quick tip. Then I found on that are the hard way early on. So now we want when we want to do is replicate this design and try to think intelligently. And this is where it kind of helps to know and understand. You know, some front end i html CSS and also the different frameworks. Obviously, you would want to communicate with whoever is coding the website to for it to be responsive or whoever is developing the APP, depending on whichever language they're using to try to get that information. So we're gonna try Teoh basically replicate this intelligently for a mobile view. Okay, So first thing I'm gonna take the, um first yet will take this right here and for our Phil, Um, once again, let's go ahead and add this color here. Tourist watches, which is right there. And then also this as well. Tourist watches. So these two right there. So we're going to recreate that background here in the fill. So we go back to radiant, will choose on the first color picker. Here will be this color, and the second will be this color. Okay, going back up, we're going to copy just the logo, and we'll scale that down. So we'll take this down right around 25 will work. Well, all right. And let's create our own little hamburger menu section so we'll take a line. The line tool. Old shift. Drag that out. We'll make this will try to and maybe we'll go three. Make it a primary color, and then we'll use to repeat grid ring around there. Look pretty good. So now it's on group it. All right. That's how it easy it is. I love the repeat grid tool. Makes things in life I a lot easier. So notice I'm giving myself a lot of white space as I you know, I placed these elements on here. It's very important to remember that So the next element we have to think is would probably be this main content section. We're not going to show in terms of importance, like the options. I rather just show this stuff right here in the main section. So the first thing that comes is this area, So I'm just going to duplicate that and drag it over here. And we can change the appearance quite a bit when it comes to responsive CSS and all that, even though we're not doing that in this course. But it's good to understand that, you know, based on this different view boards and get this is our hybrid out for whatever We can change the appearance. So I'm Brian. I'm gonna make it yellow. What I'm gonna do instead is create a new sort of container right here. Get rid of the border. Just gonna leave it and make it white. And then we'll go ahead and just take this stuff. Put it right there. Right click with Botham selected, arrange and bring the front and we're going to scale is now right around 13. And let's also get our little X. I think both of those and hit control Geeta group those it makes sense to make those a group, and we'll delete that skillets down just a bit and move this over just a bit. Hi. That doesn't look too good. We need to scale this down as well. Okay, so far, so good. Now, let's take our chart right here. So to do that, we'll take all of this. Well, duplicate it. Bring it down. Oh, my, Can we just I scale this all down and call today? Not quite. We need to simplify things. We can just get rid of this entire left section right here, all right? And we can also probably get rid of half of these, so we have 12 so let's get rid of six of them right here. So now I'm going to take this in here. Hold shift and scale it down right around there. So we just have an X axis to work with That will take all of these and we'll scale those down. Okay, let's move these up. Let's move everything up here. Now. I could see how these lines are on top of that. That looks terrible. So let's just select our stroke right here. Bring the front. Oops. There we go now? It's to the front. All right. So we can also ask yourself, you know, would it make sense that make this all the way? You extended out all the way. Let's see here. I'm just holding shift and changing things around a little bit. Smooth things down, actually. Kind of do like that. Will move this over, Maybe. Scale these in? Yeah, I actually kind of like that. I think I dio At least let's go ahead and we'll double click this and move this off. So it's not cut off right there. We can get rid of this line and this line. All right? I like that. Very, very cool. So let's continue on now. We have these three sections down here, so these are all this is basically a group. I'm just gonna take one of them duplicated. And you know what? This seems to pretty much fit pretty well. I see if we dragged us up, What happens? Yeah, kind of shrinks everything down a little bit too much. Think we're just gonna leave it like that? So what we can do is take this our board and we're gonna increase the height. Maybe toe 1800. All right. It was probably a little bit too much. It's OK. Repeat the grid. So now it's select it and 1200. Just drag it up right around there. Now, if you want, you can change these values, your values yourself. But I'm not gonna do that. You really know how to do that. All right, So that is it Just for this beginning section. So now, in the next lesson, we're gonna take this and we're going to. Anyway, what happens when you click on this little hamburger? I comment you right there. 11. Mobile Menu: Hello and welcome to this lesson where we're going to create a navigation that comes out when that hamburger icon is clicked. All right, so let's take this right here, and we're gonna duplicate it now. We're not gonna have toe ever at anything in here, so I'm gonna take all of it and just hit control G to create a group out of it. Next, we're gonna create a rectangle that goes about 2/3 of the way from the right. Get rid the border here. It's just gonna be white. I think that will work just fine. Right. So next we want to wait to get out of this. So we're gonna take our X, get it up here. Increases size right around there. So they click on that, This will go away, go back to this page and then next we will create this navigation right here. Except in this way down here. And missile is very easily achievable. Achievable? If this were responsive, HTML, for instance, could change up the appearance quite significantly. So what I will do is I'm gonna take I Let's see here will take this and duplicated in. Just drop it down here. We don't need a check box or anything, so I'm gonna rake clicking on group it. Get rid of this and we're gonna make the fill color This darker color, which is for a 2147 right there. Looks pretty good. So we're gonna changes to dashboard, and we're going to use a repeat grid tool to create five different link areas right around there. Looks pretty good on group it. Let's change up the names here. So this is gonna be account. This will be services. This will be fact. And this will be content or contact rather. All right, so let's emulate what happens. I would, for instance, if that's the current page. So get rid of that. Give it our highlighted color, a primary color. And let's look in here in the layers, drag this beneath so that we could see the type and then make it white and make its We'll make it semi bold. Also, make sure this is all even up. This is in the center. This is in the centre between these two, and it is alright. Awesome. Not done just yet, though, because I want to add the sort options to. So to do that will take I this right here hit control de too. Duplicate those. Drag it all the way down right around here. So you want good separation between these elements? Because this is not a part. This sort label is not a part of this. So we can create separation visual hierarchy through position. All right, so we have sort and let's have the options. So I could get this do is take these right here. Duplicate. Um, all right. And we can change. Ah, these right here too. Day, which is the other values that they were week, a month. And here and then finally also put the other one. But we're not gonna add all the other options Will just assume this one has collapsed. There we go. Duplicated Dragged us into place. There we go. Right there. Perfect. Awesome. So now, once this clicked, this will show up. Once it exits, click, it will go back. All right. So now in the next section, we're going to do a mobile version of the frequently asked questions. I'll see you then. 12. FAQ Page: All right, welcome to this lesson where we're going to create a mobile view off the fact page. So going back, we're going to replicate the first art board. And by the way, let's change this name appear this will be menu, and this one will be mobile hyphen. Fact not F a. There we go. All right, so right here, we're going to get rid of pretty much everything, with exception to the logo and the menu. And now we need our little back button. We'll make that show up, duplicating it. It's a little bit big. So we can just I shift and scale it down. Probably decrease that size a little bit. Increase this just a tad bit. Get centered up here. All right, That looks good to me. Next, we're going to have our type. So it's going to be this this and, well, you know what will select all these right here, Control D and we'll move these roughly into place. Said, Now put this right here. This can be scaled down just a bit. Or you can make it go on a second line if you wish. I think that looks good. Right there. and then we'll move this right here, and we'll take down the size was try 18. And let's select all these and this one. Here we go, and then we'll take these. All right? And obviously, we need to fix how large these air showing up. So what I'll do is take all of them right click and on group, and we just select Onley while holding shift the type here. Now, if we need Teoh, some things will just have to go on another line like that. And we'll make these adjustments here like that. So now what's bring these in? Okay. And bring this in. Make that in line up there. Oops. And won't work by holding all of them. Almost done here. Now we take these. All right? And then finally also, we have to drag this one down. We also have to increase its just slightly the height of this art board. There we go. All right. Things are coming along very, very well and very fast to so in the next section, we're going to create the account version in this mobile layout 13. Finishing the Mobile Designs: All right, welcome to this lesson where we're going to create the account page in the mobile layout. So to get started, we're going to take this here and duplicated Trudy. And we're just going to change this here real quickly and will make this I account. We'll move this up just a bit. There is less text before, and we'll delete all that. So now we could take all of this, duplicate it, come back down and make some adjustments here. So we have your name, and then your email address would collapse under it. Naturally, take both of these, and I'm going to take both first and on group those. It's like both of those and move these in. It's probably all right that it did change the size. All right, that's good. Right there. And then also for password. We'll put right there. Take thes right click and on group Pull those in. Oops. This didn't get selected somehow. And just drag this up rate around here and then update info. Usually, when it comes to buttons on mobile, we can expand 100% in center that text. And then now we could see like this one which we can rename by the way to mobile hyphen account and drag that in. And there we go. Awesome. So let's also real quickly replicate this to show what it looks like when this form is submitted. So we'll come back up here, copy this text duplicated, and then we'll just die. Change this up real quickly. Position. And this is behaving differently because is a text area. We can also decrease the size like that. They will put that right around there. So now we can drag this up right around to the view port or just enter the report right here. Perfect. So this will be mobile account. I will just say updated. All right. So, being that we still have a decent amount of time left here in this lesson, let's also go ahead and create this variation right here when um, the message goes away. So we'll take this, duplicate it, drag it down, and then we'll change the name to on exchanges. Teoh Dashboard. No alert. Get rid of the alert, will drag all this up in its place and will bring this down just a notch. All right, guys, this is looking really cool, and everything is pretty much to this point. Done. So in the next lesson, we're gonna wrap this up by creating the prototype of this mobile art boards. 14. Prototyping the Mobile Artboards: all right. Hello, and welcome to the final lesson. That's a part of this course where we're going to create a prototype of all the new mobile art boards. So switching back here, let's go ahead and go to our prototype tab. So the first thing we're gonna focus on our dashboard here and what happens when this is clicked, so as mentioned, we'll go over here, we're gonna have a transition. So it was going to leave it at nine simply because the page doesn't change. But just there's a new menu that's will relate on top of it. So now we can take this copy, and we could select these three right here as well as this one and hit control V to Paste in that I'm glad I noticed that. Because now you can't actually do that. You need to do each one individually. Maybe that will update that in the future. Okay, so when this exes clicked, So simply gonna go back here without any type of transition. Okay, so next, let's see what happens when this is clicked. This will go down here without any transition as well. Okay. And for this menu, when somebody clicks on account that's going to take them to the account page. If somebody clicks on fact, it's going to take them to the fact page on. By the way, let's add transitions here. So I'd left make this one slide left as well. Okay, these dashboards right here, these buttons will go back here, will slide right and simply copy that. Pace this here and here. Okay, An update Info. Make that go here with no transition, all right? And just trying to think if there's anything else that I'm missing, I think that's good. We'll just make that assumption that it is. Maybe this one could go back here to dashboard. Okay, let's save it. And let's select this dashboard and hit play. All right, so here's our actual Vieux Port that we can see, and we could scroll down to see all that. And let's click on this X ray here. All right, that's when it goes away. There's our menu. Let's click on account. Awesome. Well, let's click. Update. Awesome. Let's quick go to dashboard to go back here. Let's click on Fact and dashboard. Let's go back to fact and click on the menu. You could see that the actual page in the background changes. So if you wanted to actually change that, that it only shows it currently shows that page of fact. When that's clicked, I'll show you real quickly how you can do that. So we'll see you on the fact page we duplicate. This will go down here. So now if that's clicked, then what we would do is go back to design and we would copy all of this, but not this stuff in the back, because that's all of a part of a group and weaken group that duplicate it. Move that there. Then when the exes clicked, we could actually just make this whole thing change. So that goes back here, right? So now when this menu is clicked, we're going to disconnect that and show it right there. So let's go ahead and save that hit play. We'll go to our fact page, that, uh, awesome stuff and also like if you wanted to create the X so it goes back to the same age, you can do it, and I think at this point you probably get it. So now that's pretty much it for this course, but I do want to make one note. If you want to at this point to use it on your phone, for instance, so you can click on mobile preview and tells you have to move your file to Creative Cloud. You can click on that, and then in your smartphone or your smart device of some sort, you can download the adobe X'd app, and that's for android and IOS, and you can open up the app and make sure you log in to the correct creative cloud accounts that you have access to the file here once you move it there and at that point you can just select it on your phone, and you can actually use the app on your phone as intended. Okay, so hopefully you guys learn quite a bit sort of a crash course in adobe experienced design . But you know, I am a firm believer and just learning as you go and learning with a purpose rather than just teaching tools and a conceptual manner. It's always I've always found it best personally. If we just tackle a project and we learn as we go, hopefully you feel the same way that's pretty happening Pretty much how all of my other courses are structured. So if you enjoyed this, make sure you check out my other courses. If you're watching this on you, Demi, of course, check all the other courses. I'm gonna be producing mass producing a lot of different courses here based on full stack development. Of course, this one happened to be design and aesthetics. But I have a lot of other ones where, you know, we could actually take ah, full mock up like this and make a working reality in your phone or on your browser. All right. I'm Gary Simon. I'll talk to you later.