The Full Adobe XD UI/UX Course – Design Apps & Prototypes

1. Introduction: Hi there. Welcome to the complete Adobe XD UI UX course. In this course, we're gonna learn how to design beautiful interfaces for both mobile and web, and how to turn them into interactive prototypes that we can share with our team members, with our colleagues and our clients when he was Nemo Tommy and I'm your instructor for this course. For the past 12 years award on dozens of mobile and web projects for service on my own and other clients, salvage have been featured on websites such as Forbes. Creating products is my passion and I love to share some of that with you in this course. In this course we're going to work on to real projects for a food delivery company called healthy bites. The first one is going to be a mobile app where users can actually use this app to order food for delivery. And the second one's gonna be a website to showcase what healthy bites has to offer to potential customers. We're gonna do all of that in Adobe XD if you'll begin hurt No worries at all. This course is intended for beginners all the way through experts who we're designing for multiple years. But now they want to learn a new software. We're gonna get started by installing a sea, going through all the features to end the tools that we have access to. And then we're gonna jump right into the projects and learn how you use things such as components, repeat grids, and stats to make our design process along faster. We're even going to use that template by Apple to put together the iPhone app designs. As we go through learning how to do that, we're going to go ahead and also explore branding and learn how to create a logo, how to put together a color scheme and accustomed typeset for our project. Once we polish up our designs, we're gonna be learning how to actually export those designs out of XC, sharing them with maybe team members, call these your clients and also learn how we can create interactive prototypes that we can even test on our own mobile devices, which are super cool. Whether you're looking to blend that next design internship or that next design client for your firm. And this course is exactly for you. If you are ready to get started, then jump right in and I'll see you in this course. 2. What is Adobe XD?: We're almost ready to jump in and explore Adobe XD. But before we do that, we want to quickly go through what there'll be Stephen is so that we have an idea of what we're going to be expecting and a future lectures. So what's Adobe XD? Adobe ICSI is an app based design software that essentially allows you to design mobile and web apps in an easy to use environment built specifically for designing mobile and web apps. Now of course, you can use Adobe XD for other things such as a game design or just general graphic design. But the main purpose of it is for mobile and web apps. And that's exactly what we're going to be working on in this course as well. Adobe XD comes with a really powerful real-time prototyping feature that we'll explore. Once we do design our app, we'll go ahead and create a prototype out of it. Essentially, you prototype allows you to get a feel of what that mobile or web app will feel like or look like to a user once it's completed. So that includes connecting all the screens that you designed so that we can kind of give an idea to a client or a colleague on what that product or that app will look like once it's developed, this feature will save you tons of time when it comes to creating a mobile app, especially for the developers, were going to be actually putting this design into action. Because with a prototype, we can actually get a feel of what we actually wanted the app before actually writing a single line of code. And it'll be XT makes it really easy for you to share your designs with clients and colleagues. So that it includes sharing specific Artboards if you'd like, or an entire project, or even being able to share it, your prototype with other people and creating multiple floors for them to see what the app is all about. And then we'll explore all of the sharing features and exporting features all throughout the course. Now Adobe XD is available for free, seven-day trial, which you can sign up for and use, and then you can actually get it for 999 US dollars per month. And that's just a single app subscription fee for just Adobe XD. But if you want more from Adobe, if you want to install Photoshop or Premiere or other tools, you can also do that for a bit of a higher price. But it might be worth it if you're actually exploring other design or any other software is from Adobe. And then next lecture we'll go through the different pricing as well as how to actually install it on your computer. So I'll see you there. 3. How to Install Adobe XD: Ready to get started by installing Adobe exceed. The first step is to go ahead and open up your browser. We can sign up for Adobe XD through Adobe's website. So all you need to do is head on over to Adobe.com forward slash XD and hit enter. Once the website loads, you'll be brought to this page for Adobe XD, which is where they explain how it works and give you a little videos of how you can do app design or web design or app design, brand and game design with Adobe XD, which is pretty cool, you can watch those animations to see what will be going through. This is awesome. And if you come down here, you can actually go ahead and discover some of the features it has from here. Now of course, we won't go into too much details with the features on the website because we'll be actually going through all of these features throughout the course. So let's go back to the main page here. And after you scroll down here, you can see this is the pricing that I mentioned in the previous lecture. If you do want to just use Adobe XD itself, it's available at 999 US dollars per month, which I think it's pretty worth it considering that a US, you a ton of features. And you can use the single app. You don't need to subscribe to all the apps, Adobe Creative Cloud. But if you do want to use all the apps and Creative Cloud, including Photoshop, Illustrator and so on. You can go ahead and subscribe to this option over here, which starts at 5299 a month. Now of course, as I mentioned, the Adobe XD comes with a seven-day trial. So that's where we're gonna be using for this course here. If you don't have Adobe XD and you're just testing it out. Or you want to go through this course and learn it before you buy it, which is what I do recommend you can go ahead and simply click on the free trials. What we're gonna do. Once you've done that, it would ask you a couple of questions for individuals, for students and teachers, which you might be able to use to get some educational discount. It does require a valid ID, so you might have to send it an ID to actually show that you're a student. Or you can also sign up as a business. But we're gonna go ahead and just use for individuals. And click Continue. Who asked you to pick a plan again, you can pick just Adobe XD or all the Creative Cloud apps. For now, we're just kind of pick XD for the purpose of this course. When I click Continue, it will ask you if you want a monthly option or a year, the option for the billing. We're going to continue in the monthly. And of course, we're gonna be using this seven-day trial to begin with. So it's not going to actually go ahead and charge. Are Carter anything at this time? We'll click No, thanks to this additional offer that he gives you. The next step, it will just ask you for email address. So I'm gonna go ahead and enter my e-mail address here. We'll just set you up with an account. If you already have an Adobe account, will ask for your password. Otherwise, it will ask you to sign up here and add a password. Go ahead and take that time to set up your account. If you don't already have an Adobe account, once you get to the checkout page, it will go ahead and actually asks you to input payment methods. So let me go ahead and click subscribe. From here, you'll be able to see when you'll get started charging. So I have the free trial available until December 16th. So essentially you have free access to Adobe XD until the trial and date that you see over here. Until then you can totally use the product for free. And then after that, it will be, we will start charging you based on your subscription. So let's go ahead and click Get Started. Now, in order for Adobe XD to install, you actually need to install Creative Cloud, which allows you to install. It'll be products and keep them updated on your machine. Go ahead and allow Creative Cloud to open to install over here. Once Creative Cloud does open up, it will look like this. And you'll be able to see from here XD being installed. Now of course, because I already have it installed, it will go ahead and update it. Since I haven't updated it, it's updating it instead of installing it. But for you is to say install if it's your first time installing XD on your machine. So give that some time and then once it's fully completed and updated, we'll go ahead and open it up and explored in the next lectures. 4. Managing Your Adobe Account: Before we jump into Adobe XD and exploring what it's all about and using it. I just wanted to quickly make a short video to explain that at any point throughout the trial or before your trial ends, if you do decide that it will be excused not for you, or you just want to learn it. You can always manage your plan is through the Adobe account website. So at any point you can go to account dot adobe.com in your browser. And from here you'll be able to see your plan. So if you chose the Adobe XD free trial, you can actually go ahead and see how many days you have left on told the billing method starts charging you and how much you'll be charged, at what point. So before that time, if you do decide you want to end your billing or you want to cancel or perhaps upgrade to have access to more plants, you can go ahead and click on Manage plan over here. And once you do click on Manage plan, you can go ahead and either change your plan or cancel your plan from here. And I just made this quick video just to make sure you don't get trapped into any billing cycles. Because I hated when that happens with free trials, when the end because it's happened to me and I'm sure it's happened to some of you. So I'm just making this video to let you know that at any point within your seven day trial, you can cancel without any consequences. But I do hope that you find Adobe XD useful enough there You keep using it. Now if you're ready to jump in, we're gonna go ahead and explore Adobe XD in the next lecture. 5. The File Browser: So if you do have Creative Cloud opened up, great. If not, make sure that you go ahead and open it up, you can go ahead and just search Creative Cloud from your spotlight. And you'll go ahead and open that up. I already have it opened up now you should be able to find XD under your installed apps. If you're not on this page, you can get to it simply by clicking on All apps on the left side over here. And then go ahead and click on Open. And I will simply go ahead and open up your Adobe XD. Once you do have XY opened up, you don't need to actually have Creative Cloud open so you can go ahead and close this window and simply just have XD opened up. So this is the first page that you see in XD is your file browser and essentially where you'll be able to access all your files. What do we work our way from the top left here to the bottom right, so we can go through what this file browser has to offer. So at the very top left over here you'll see a new file option. So from here you'll be able to create new files where you can design your mobile and web apps or whatever you're designing. You can go ahead and open files from here. So if you already have, whether it's a Photoshop file, that sketch file, or another XD file. You can go ahead and open them up from here. Once you can do click on it, it will go ahead and ask you to locate that file and open it up from there. This is our homepage, which is where we are here. From the homepage you'll be able to access starting a new document, but in a faster way. So if you do already know what device you're going to be designing in. So let's see. I'm going to be designing for an iPhone 12 Pro Max display size. I can go ahead and click on this. And what that will do is open the file and generate that precise formats or the sizing for the artboards for me, which we'll do in the next lecture. So let's hold off on that. But this is great because this way was all the sizing over here. You don't really need to look it up online. And so that makes our design process a lot faster. Similarly, if you are designing for a web project, this is typically the size that we designed for 1920 by 1080 pixels. Now you can go ahead and use these other two options which are less common but also available. You can go ahead and create a document for Instagram stories. Instagram posts, twitter, Facebook post, even YouTube video covers. So you have access to those as well. If you're working for a branding type of design, or you can go ahead and create a custom designed by entering the width and the height of your artboards. And we'll go ahead and generate that for you. Down here, it'll be x t will give you a link to some of their articles where you can actually explore some of the features available. But of course, we're going to go through those features and much more depth throughout the course. Moving down here, on the left side, you'll see your files. So right now because I don't have any files created, I won't see anything here. But once I do start working on new files, it will show up over here. And I'll be able to create new folders from here to organize my files or see them as lists or grids. And if other people have shared projects with me with my Creative Cloud account, I can see them from here. If I have designs published, I can manage the links over here for projects I've created, published, or shared. And if I have any deleted files, it will go ahead and show up here. Which is great because if you accidentally delete a file that you're working on, you can access it from worrying over here, kinda like a trash can on your computer. So without further ado, let's go back to the home screen and learn how we can actually create new files together in the next lecture. 6. The Layout: So now that we're familiar with our file browser here in Adobe XD, why don't we go ahead and learn how we can create new files and quickly go over the layout of the software. So as mentioned in the previous lecture, the easiest way to create a new file is by clicking new file over here. Now if you're working with a specific device, as mentioned, you can go ahead and click on either of these options. If you just click New File, which was what we're gonna do right now, XD will go ahead and open up a window for you, just like this one here. Now by default, it uses the web 1920 pixel size for the artboards. So if I just quickly go home just to show you the other options, if I want to go ahead and work on a mobile project, then I click on this iPhone 12 Pro Max option over here. Then it will go ahead and generate a new file. And the artboard here will actually be an iPhone 12 Pro Max Size instead of the website. So that's all it means, all the differences between those options in the file browser. Now I'm gonna go ahead and close this file here that I have and just continue with this file that we have over here. Again, you can create this file by just clicking new file in your XD file browser. First things first, this is the name of our file. By default, Adobe generates an untitled, followed by a dash and the date and time that the file was created. In order to change this file name, you can just double-click over here. We're going to just call this our first file. Just for the sake of the lesson. We'll go ahead and click Save. And now as you can see, that's been replaced by first file, which is now the new name of our file. This little cloud icon is just indicating that we're connected to Web and this project is being auto saved into the Creative Cloud, which is where your files are stored by default. Cool. So working our way from the top, from here, we can go back to our file browser or the home. This is the prototyping mode that I briefly mentioned where you can create prototypes and connect to your artboards. From here, you can share your projects easily by creating links where either anyone can access it or only certain people will explore all of that throughout the course, we're going to go back to the Design tab and continue on the right side over here, working our way through the right side, you'll see a little Share icon where you can add the email address for someone that you were working on this file width and that will invite them to the project where they can collaborate with you on it. Using device preview, we can actually go ahead and see our designs on an actual device. And when we get to the prototyping section, we'll definitely explore this and it's super cool. Or over here you have the option to just preview your prototype in the desktop that you have instead of opening it in an actual device. And on the very right side we have the zoom level here, so we can go ahead and pick different zoom levels. Or I can just scroll in and out using your trackpad or your scroll wheel on your mouse. Cool. Now the very left side over here we have a little tools panel where we can click on certain shapes and draw them in our artboard. Now, for the sake of this lesson, don't worry about following exactly what I'm doing here. I'm just showing you very briefly what XD has to offer. When we do go over it in detail, you have some idea of what we're working with. Continuing from the Tools panel, we can create ellipses, polygons, or triangles, lines. We can use a pen tool to create custom shapes. We can use a text to write texts in our artboard. We can use this little button to create new art board. So if you just go on the right side over here, I can create an art board of my liking with whatever size I want. Or if I want a specific size for a specific device size, I can use the little panel on the right over here to pick a size. And over here we have a little Zoom. So essentially this will just allow you to zoom, kinda similar to the zoom option over here, but just giving you this magnifying glass where you can zoom to a certain part. And we'll explore some of the zoom features later on as well in more detail. Now using these little three buttons down here, you can switch this panel that we have. You can go from the layers panel which has actually shows all of your art boards as well as objects inside of those artboards in this little panel over here. So if I just go back to this little icon, I can see all my shapes as a click through this art board or just all of my art boards in the layer panel. Now as we work on projects, you'll see how useful this layers panel can be in order to sort and organize your project. Then from down here we have libraries. So anytime we're reusing certain colors or character styles are components, we can go ahead and add that to our library and we can actually even share this library or publish it so that we can use it across other teams or other projects. Just super cool, we'll explore that in a bit. Now finally, we have plug-in over here where you can actually discover plugins. And if I click this little plug-in icon over here, we'll go ahead and open the plugins. Page. Plugins usually allow us to automate our design process or help us really boost our design productivity, will explore some plug-ins as we go through the course. So definitely keep an eye out for that. Let's go ahead and close this right here. Now working our way on the right side over here where we have our properties panel. This panel here will change according to what you have selected within your Canvas. And if I haven't mentioned this before or this middle part right here where you do have all your artboards and your objects in your shapes and everything is referred to as a canvas and your project, this canvas is really infinite, so you can add as many I'm objects as you'd like, and it will go ahead and just get bigger. It's kinda like a little universe for your designs. If you'd like to think about it that way. I don't know why, but that's just an analogy that I like to use. Now, if I go ahead and select an artboard by clicking its name over here, you can see that we get some options including transform options. So I can change the width of this frame over here by just entering a new width pixel. I can change the height. I can choose to fill color of this art board. I can even create grids across my art boards. So that's the Properties panel for when you have an awkward selected. But if you have an object selected, you'll see that that will soon change. And we'll give you more options to work with more configurations of your object. Now, we'll explore all of these options in detail as we go through learning how to create shapes and such. And of course, if you select the text, you get different sets of options such as your font, your font size, and so on. Now you'll notice that there are certain things that are shared among its most objects or texts or art boards. And some of them could include effects or appearances as well as the transform. Usually these are shared between a lot of the objects, but there are different things such as texts that will only come up when you have a text selected in your Canvas. And if you have nothing selected, then it will go ahead and just show pretty much nothing. Another cool thing, when you have something selected, you can go ahead and adjust its alignment within the artboard. And we'll explore this when we're learning alignment and distribution in XD. Cool. So that's just a little overview of what we're dealing with in terms of our layout here. I hope now you're a little bit familiar, but again, we're gonna go through each part in detail. So don't worry if you didn't understand much so far, that will soon change as we start designing and getting yourself familiar with XD. Now in the following section, we're gonna go in depth with most of these panels that we talked about in this lecture. So I'll see you there. 7. The Menu Options: Without going extremely into the details, I wanted to also go through the menu options that adobe XD has at the very top. I'm on a Mac machine obviously, but if you do have Windows, this menu over here, it will probably be different for you. There'll be under a hamburger menu somewhere over here. So I'll put a screenshot over here that you'll be able to see where you can access the same menu from. So if you are falling on a Windows, just be aware of that a little change. But the menu options should still be similar. So you'll still be able to fall along the same, regardless of whether you're using Excel on a Windows or Mac, working our way from the left to the right of our menu. First up we have file. From here we can create new files, open files, open from your computer. If you have a file on your machine to open up, you can access recent projects. If you have multiple projects, you can quickly switch between them here. But because we only have one project is opened up, it will just show you this one project. You can get UI kits from this menu here, which will go through in the next section of this course. We can manage our libraries, which we talked about in the previous lecture very briefly. He can go ahead and save that your Adobe XD file through here. If you want to save it somewhere, specific projects are by default saved to the Creative Cloud, which will show up under your files. From file, you can also access your document history. Now this document history you also have access to by clicking this little arrow over here. It will go ahead and show you the different versions of your project as you've been working on it over time. So you can go ahead and click on different versions by time to see what's changed. Now of course, because I haven't really changed much. It's the same right now between the two. But as you go through more changes in your project, you'll see more Document History will add up, which is pretty useful if you, let's say you made a mistake and you want to go back to a certain point in time. Under edit options, we have undo, redo your usual cut copy and paste. But we also have something called Paste appearance, which is cool. We'll go ahead and essentially allow us to copy just an appearance of an object, but not the object itself. We'll go through that as we're exploring our shape tools. And we have the usual delete, select all, de-select all, and so on. On our object option, we have Group, Ungroup. So if you're working with multiple objects, we can group them together and ungroup them. And this will show up in the layers panel as well. You can lock or high objects from your art boards, your Canvas. You can add colors to your asset panel. At character styles, you can create components from here, which will allow us to create reusable objects throughout our project. And we'll explore components because it's one of the most useful things in XD. If you're working with a component and we wanted to reset it to the main stage. We can do that from here. We can mark things for export. So for working on multiple things, we can select the ones that we want to export and make them ready for export through here, we can create masks or repeat grids. From here. We'll go through both options in this course. We have some path options that we'll go through. We have text. So if you want to make your text bold, italic, you can do that from here. We can arrange things. So in our Layers panel as well, we can do this, but if you do want a shortcut, you can also come over here to bring things to the front or bring things forward. Backwards. We can transform stuff by flipping them horizontally, vertically. Here, we can align things to the left, center, right, top, middle, bottom, which we also have access to. Up here. We can distribute stuff horizontally and vertically. So this will evenly spaced things out. And we'll go through this as we're learning about distribution and alignment aren't under our plugin. As explained. Plugins allow us to automate our design work and make things a lot faster for us. So we'll definitely be using some plugins in our designs. And once you do install some plugins that will go ahead and show up over here so you can easily access them at any point. Under our view, we have our zoom in, zoom out features. We can use our command or control and number options here to zoom at certain levels, will go through zooming all in a separate lecture. We can enter full screen axis. Our libraries layers are plugins which essentially are the same as what these buttons down here do. We can create layout or square grids, which we'll explore as well. And under a Windows option we have the usual minimize, Zoom, so on and so forth. Now we can preview our project by hitting Command Enter on a Mac or Control Enter. And it will go ahead and open it up. But it's essentially the same as clicking on this present icon or desktop preview icon over here. And under Help if at any point we do want to search for a certain task. So let's say we want to access our Zoom tools that we can quickly type in Zoom and access the option that we want easily. And that just makes it a lot faster for us to find exactly what we're looking for. So at any point you can use this Help feature throughout the course because it's just a little brief on what the menu option and has to offer. And the next lecture I'm going to share with you some shortcuts that you can have access to that are useful. You don't have to memorize these shortcuts. In fact, I think that's probably not the best way to learn them. The best way is just to take a brief look at this document. And then over time, as we worked on the project, I'll be using them and I'll be reminding you to use them as well. And so this way through practice, we can use these shortcuts, these keyboard shortcuts, to make our design process much more efficient. 8. Creating Shapes: Okay, we're ready to jump into exploring some of the tools that we have in XD. And first things first is shapes. And of course, shapes is really important because it makes up a lot of our objects in our designs. Whether we're working with buttons or profile pictures or menu icons, everything's really consists of shapes InDesign. Now, of course it could be as simple as a rectangle or as complex as a uniquely draw an icon using the pen tool, the possibilities are endless. So before we jump in and explore some shapes, Let's just get rid of this file and create a new one by going to our homepage and clicking New File. Now you might notice that XD won't close your original files. So if you're already in a file, it will go ahead and keep it open and just create another window, at least on the Mac that is. So if you want, you can go ahead and simply close that file. And don't worry, it's saved into the Cloud so you always have access to it at any point from the home screen. So there's your new file. Let's go ahead and rename this one to exploring XD tools. I'm just going to go ahead and title that because that's literally what we're doing with this file. You can name it really whatever you like. There's no really right or wrong here. It's just I like to keep my files organized so I know exactly what It's regarding. First things first, our shapes are accessible through the tools panel or the very left of the window. So we have access to a rectangle, ellipse, a polygons lines, and we can create custom shapes with the Pen tool inner brackets. You'll see the shortcut to creating these shapes. So if you're already on your art board and you want to quickly create, let's say a rectangle. You can simply press the R key on your keyboard. And this little cursor will come up where you can actually draw your rectangle. So if I go ahead and start clicking and dragging, you see I'm creating a shape or rectangle based on what my preference is. When you're creating any shape. If you hold down shift while you're creating that shape, XD will go ahead and lock the proportions of the width and the height. So this way you can create a perfect or perfect square or a perfect circle if you're working with a circle. So let's go ahead and create a square. Just letting go right here. As you can see, I've created a shape. I can press Escape on my keyboard to get out of the shape tool once they press it twice. Or another option is that I can just press V, which will select this little Select tool so that we're out of creating rectangles. Otherwise, if you stay in the rectangle mode, you can go ahead create multiple rectangles if you want. And whenever you want to leave that tool, you can go ahead and click this little icon or V on your keyboard. And now I'm out of that rectangle tool. And whenever a drag, I'm just selecting objects in my art board. I'm just going to go ahead and select these ones and click Delete to get rid of them because we just need the square for now. Now that I mentioned, the properties panel will change according to what you have selected. So right now our shape is just consisted of this little border over here. But if we want to add, let's say, a color inside of it, we can simply click on it right here. Now, if you have the layers panel opened up here, which, which I do suggest having it opened up by default. You can see within a my web 1920 artboard, I have a rectangle layer. Now if I'm outside here and I selected through the layers panel, it will go ahead and do the same thing and we'll just select it for me. And the right side, I have a certain options. I can go ahead and repeat this square if I want multiple copies of it throughout my artboard, which is super cool, this will come in very handy as we're working with our designs. Can escape out of there. And just select the option again. If you want to go ahead and just do ungroup and to go back to my rectangle. As discussed before, I can go ahead and change my width and height here. So if I want to change my width here, I can change it to 400. And now I have a rectangle as opposed to square. But if you do want to lock the proportion so that when you do change your width and height, they do stay the same. You can click this little lock aspect icon here. And once you do, if I change my width to 400, now both my width and height will change it for 100, which is super cool. That's a little x and Y indicate where this little shape is in my art board. So this little point over here and every top-left corner is essentially what these two points represent. This little point here, my artboard is x 0 and y 0. So essentially 88 means this little shape or this part of the shape is 88 pixels horizontally and 93 pixels vertically. So if I move this around, you'll notice that little x and y are changing. And if I do put it in the corner, which one of the cool things is that when things come close to corners or edges, XD will go ahead and automatically snap it into place. And now as you can see, 0000, and of course I can imagine that changes by just typing the number. Now from any point, I can go ahead and rotate my square. And I can hit Command Z to undo that or Control Z on Windows. It's working our way down in the properties panel. I can go ahead and change the fill as we discussed. So by clicking this little fail icon, I can go ahead and choose a new color, like a little blue over here. And I can change the hue to choose exactly what I want without wanted lighter or darker. So we have a fill rate now as well as a border. The border over here has a size of one pixel. So if I change this to mislead and 20, you can actually see the border now much more clearly. We can change the color of the border as well. So if you can do sort of a gray border right here. And I can just go ahead and close that. I can create round edges for my border. So if you do look right now, if I just zoom in more, because kinda hard to see at that zoom level. If you click this little round join, it will go ahead and just round the edges of our border. Or you can do this option here which will just create a bevel join. Or you can just do a melter join, essentially just without any rounding. Let's just go ahead and zoom out. I'm using my scroll on my trackpad to zoom in and out. You can put some effects on your shapes, but doing inner shadow. So there's this little inner shadow right now is kinda hard to see because it's probably being hidden by my border here. But if I do an excess of 20 and a Y of 20, and maybe change this blur radius to 20 as well. You can kinda now see it back here. And if I click on it, you'll see the transparencies kind of lower rate down. So I can go ahead and make it more opaque or more visible. So as they make it darker, you can see the shadow is getting stronger, or if you go closer to the bottom will be lighter. You can even change the color of your shadow if you don't want it to be black. But typically for shadows we use the color black. If you want outer shadow or drop shadow, you can do this option over here. And same thing. You can go ahead and control it. And as you can see now on the outside of my shape, I'm getting a little shadow, which is pretty cool. I can choose the x and y of it. So if I want it to be a little bit further away and more blur, so it's a little bit more blurred out. I can do that option as well. Again, you have full control over the color slash obesity of your shadows by just clicking on this little icon over here. And at any point you can just click the little check box to remove your shadows. Will explore background blur further on, as well as marked for export. But that's essentially how you create shapes. If you want to explore with other shapes such as circles, go ahead and create different circles or different triangles and explore your shapes. So that's essentially how you create shapes in Adobe exceed. Most of these properties are pretty much same when it comes to different shapes. So you can go ahead and create ellipses and play around with the fill of the border, the shadows, and go from there. One thing I do want to note is that if I exit out of the way shape, click this little square over here. This right here is essentially the opacity of that square shape in my artboard. So if I do L4, it, as you can see, it will go ahead and feed. And if I put other objects underneath. So if I put this little ellipse in the corner over here right now because it's on top of my rectangle, is completely taking it over. If I go ahead and move it under my rectangle. Now, my rectangle is on top of the ellipse shape over here. So if I change the opacity depending on how transparent it is, it will go ahead and either completely hide that ellipse because it's on top of it, or show a little bit of it based on how visible you want your shape. And the following lectures we're going to also explore our line and pen tools as well. But before we do that, I'm going to give you a little exercise. And that's to give this little circle an orange fill, as well as a black border, just so that you can get a little bit of practice in terms of customizing your shapes in XD. And I'll see you in the next lecture. 9. Shapes Exercise Solution: All right, so I hope you had a chance to take a look at the shape tools and explore it around a little bit. Now, I did give you a little exercise to create a circle and give it an orange fill, as well as Puerto That's black. So we're going to do that together and this lecture and then go over just a few other things that I want to explore it with shapes with you. So first things first is go ahead and just delete this circle that I already created. So as I mentioned before, there are shortcuts to create shapes. So the one for ellipses, which is what you use to create a circle is E. So at any point, if you were in your artboard, you can go ahead and simply press the E key on your keyboard, um, which will put you in the same mode as the ellipse mode over here. If not, you can always pressing Escape. I'm going ahead and clicking on the ellipse tool. Now, I didn't mention exactly what size the circle should be or how thick the border should be. So I left that up to you. But for the sake of this lesson, we're just going to go ahead and make it a circle that 400 pixels by 400 pixels. Now, one thing I do want to note is that if you do want to make a circle or a shape that's a specific size, you can go ahead and simply click on your canvas and then go ahead and start drawing your ellipse here. Now, right now I don't know what size my ellipse is, but what I can do is I can go ahead and first of all, hold shifts that it's a perfect circle. Otherwise, I'm going to be making an oval shape. And then on the right side here and the transform property panel, as I'm dragging my shape, you can see the size, the pixel size here. So if at any point I do let go, the shape will be created at that size. Now, what happened here, but you can sometimes happen is that I let go of Shift before actually created my circle. So if something like this does happen to you, you can just simply go ahead and either deleted or just press Command Z to undo that and then do it one more time, making sure that you hold shift all the way through while you're dragging your shape. And so if I just like over here, this is the perfect 400 by 400 pixels. But again, you can always adjust your shape or object size from here, the width and height. Since we already have the perfect for a 100 pixels by 100 pixels circle, we can leave that as it is. Let's go ahead and select our select tool over here. Click the circle which we already have selected. And then going ahead to the fill portion over here, let's go ahead and give it a fill of orange. So on the slider over here, you can just go ahead and pick a kind of an orange hue, something like this works. And going ahead and dragging this little color selector or Q selector on the color that you want, There's a good orange color. And then for the border, Let's also go ahead and give it a size of 20 pixel, similar to what we have with this square over here. And then for the border color, we can just go ahead and click on this. And for black, we can simply go ahead and drag this little color selector all the way down to the bottom right, which we'll go ahead and give us black border color. Cool. So now we have a circle or an orange circle with a black border around it. Two little things I want to mention in this video. One of them is the cool feature of pasting appearances. So if you remember what we were going through the menu options for XD, we talked about how we can actually copy and paste appearances between different objects. So let's say I want to apply this orange circles appearance on this square. I have two options. I can go ahead and click on the square and then make those same adjustments here. Now, one cool thing is that I can click this little eyedropper tool over here, go ahead and click on this orange to give me exactly that color. So this little eyedropper tool allows you to give your fill or your border color the same color as your cursor. So wherever your cursor is looking at. So if it's on this little black border here, then we'll go ahead and change the fill to black depending on where you click. I'm going to use Command Z to undo that two times and go back to my blue square. Now, I'm going to show you an easier way to actually give your square the same appearance as your oval. And simply, you can do that by clicking on the square, pressing Command C, which is the same as copy or Control C on Windows, clicker square, but instead of actually pasting, which will paste another oval. Instead of doing that, I'm going to just use Command Z to undo that. We're going to go ahead and click your square and press Option Command V, where she can also do by going to Edit, Paste appearance in your menu. So essentially what that's done is it's gone ahead and given my square the same appearance as the circle. Now if I gave that circle a shadow or a blog or anything else, beyond that seem effects will also be copied over to the shape. So this is very useful and it saves us a lot of time if you want to go ahead and use the same style between different shapes or objects. So it's a little neat trick for giving your objects the same appearances. And other cool thing that I want to share it with you about rectangles. You can actually go ahead and round the corners of your rectangle. So whether it's a square or rectangle, you can go ahead and go to any corner. So as you can see, this little corner over here, make sure you're not clicking the outer circle was we'll go ahead and let you resize your shape when you use Command Z to undo that. But I'm talking about this inner circle over here. This inner circle, if you go ahead and hold it and drag, will allow you to actually round the borders or the corners of your shape. So the more I drag within, the more it will turn into an ellipse and become fully rounded. Especially because it's a square. Or if I go ahead and just do a slightly rounded corners, I can do something like that, which we can use for buttons, shapes, app icons and so on and so forth. Now you can always tweak this corner radius, but going to the right side over here and down here under appearance, you'll see this little corner radius option. You can go ahead and change this number over here. So right now we have a corner radius of 75. But if you set it to, let's say 25. And I can see your square will have a slightly less rounded corner. And if you want, specific corner radius is four different corners. We can go ahead and actually click this little icon over here. And then it will give us options to change our corner radius on specific corners. And this goes in the format of top left, top right, bottom right, and bottom left. So if you change the top-left to, let's say 75. Now we have a more rounded top-left corner than the other sides. And now if I go ahead and tweet this, it will go ahead and change all the borders again, or all the corners. Radius is again. But if I just undo that and hold Alt while I do that. Now you can see by holding Alt, I can just alter that corner radius by itself without impacting the other ones. And I can do the same thing at other corners as well. Pretty sweet. That's a little neat trick for giving your shapes around it border. I'm going to use Command Z bunch of times to just go back to a perfect 25 on all sides or all corners for the radius. And just leave it as it is. In the following lectures, we're going to come back and explore our line and pen tools for creating more custom shapes. 10. Drawing Lines: Okay, So far we've created a square, we've created a circle. And now it's time we explore our line tool. So lines are really useful if you want to go ahead and create things such as the hamburger menu icons or dividers, or really anything where you don't require an object like these with a fill, but you just want simply aligned through your designs. So I can go ahead and click on this. So let's go ahead and click on this little line tool over here on our tools panel. And then go ahead and draw a line by simply clicking in our artboard and holding and dragging to where we want our line to end. The while you're holding down your cursor. If you go ahead and hold Shift while you're drawing your line, you can go ahead and actually create straight lines. So if you want a perfectly straight line like this, you can go ahead and let go over here. Or if you want an angled line at a 45 degree angle, you can go ahead and rotate your cursor to get those perfect angles at the 45 degree kinda marks. So you can do a straight downward or vertical line like this one or a little angled wanted a 45 degree angle or just a 0 degree or simply a straight line like this one. And like go over here, make sure while you're drawing your shapes, if you are using that Shift to let go of that shift after letting go of your cursor. So make sure you don't do it before. Otherwise, that whole angle thing can get messed up if you just let go of Shift before you let go of your mouse and create the shape. Just going to go ahead and delete that one. Now we can click escape to get out of that line tool, going ahead and clicking our line over here. So from here you can see the width of our line, 368. So when we go ahead and change that to 400, awesome. So now we have a line that's 400 pixels and doesn't have a height. If you do give you a liner height, as you can see it nothing will happen because a line is essentially simply aligned. There is no height to a line, it's just a width. So if you do want to make your lines thicker, you can simply go ahead. And you see we have the border over here, which is what's showing here. We can go ahead and simply add size to our border. So if you make it five pixels, now you see I get a bit of a thicker line. You can do 10 pixels, so it's even thicker. Now, if you want to give our line a little dash, every five pixels, we can go ahead and change it like that. Or let's say 50 pixels. We can create dashed lines like that. If you want specific gaps between our dashes, we can go ahead and input a specific number. And now our dashes will have this gap between each other. So feel free to play around with those numbers to see what kind of shapes you get. So we can create, for example, a dash that's 50 pixel with a gap of a 100 pixel, or a perfect dash, that's 50 pixel with a stroke gap of 50, and so on. So we can set those back to 0 whenever we want to reset to a straight line. Now with a line similar to what we had with our border option for r square, we can go ahead and actually give it a specific end caps so we can do a round and so we have a line as rounded now on the edges. Now I want to show you some neat tricks, tips and tricks while you're creating shapes. Now this applies to any shape, not just lines, but if at any point you want to let say, make this line shorter or longer, of course, you can go ahead and grab each end and make each end shorter or longer. Now, because now I'm adjusting my note over here for this line. It will go ahead and be in free form styles, so it's not straight anymore, but again, holding Shift, I can make it straight. So if you want a shorter line, we have to go ahead and grab each node and make the line shorter. But if I actually undo that, now while I'm holding one node, if I go ahead and hold Alt, I can go ahead and drag one node and have both sides change. And again, if you want to hold Shift and Alt together now we're tweaking that hole straight line without missing it's straight angle. So for example, this little circle here. If I hold Alt, I can go ahead and edit all sides. And again, by holding Shift, it will go ahead and constrained that proportion of the width and height. Just going to let go and leave it as is. And yeah, so that's creating lines in XD. Now we're going to come back in the next lecture and learn how we can actually use the pen tool to create more complex lines and shapes for specific cases where we're drawing certain icons or you want to trace an object and so on, so forth. So I'll see you in the next lecture. 11. Using the Pen Tool: So what is this little pen tool over here? We keep talking about it. It looks pretty fancy. And sometimes it's actually not even used as much as we think. But it's always good to have an idea of what we have access to in our tools panel. Just in case, there are those rare cases where we need to use certain tools. So why don't we go ahead and grab a pen tool by just clicking on this little pen tool icon. Or you can always press P on your keyboard and it will give you the same kind of cursor. Now I'm zoomed in here. So I'm gonna go to this side of my art board here. And I'm just going to go ahead and create a little custom shape here by just clicking and creating nodes. So when it comes to the pen tool, think of it as creating a shape with multiple lines. So I've created the first node by just clicking there. If I click again, it's going to create a second node. And if I click again somewhere else, it's going to create that third node and so on and so forth. Now one of the cool things is that while you're drawing a shape in the pen tool, it will give you that little guide, such as that blue line here to tell you that you're right now in a straight line or Vaughn and create something that's within the seam line or same y position as at other note that I have over here. Then I can go ahead and see where that blue line snaps. And that's my indicator that this is at the same level as this little note here, which is cool. And same thing when it comes to the other node. So I can just go ahead and keep clicking. Then I can just create some couple other random nodes. Now one thing I would do want to mention is that unless you close your note over here for your shape, the pen tool, we'll just keep going on and on without letting you stop at any point you can press escape to get out of that tool. And so now you just have this. And if I press escape one more time, I just have this path that's kinda of like not closed. Or I can always double-click back into it and then keep drawing. Or it can just tweak every node that exists. So I can go in and tweak that node or tweak this one over here, or this one. Or if I want to keep drawing, then I can simply go back and click the pen tool and complete this shape. Now, while I'm here, I can go ahead and click on this node here. And now I'm back into my Pen tool braking, go ahead and just close my shape off by clicking over here. And so now as you can see automatically, It's pleased us outside of that pen tool, I don't know if I've created some sort of diamond looking icon here. But I guess we can go back in and drag this little note down here to make this look a little bit more like a diamond. So that's essentially what the Pen tool allows us to do is to create these custom shapes. And once you have a closed shape, so that means a shape where all of your nodes are connected. You can give it a fill as usual. So you can go ahead and give the give this little shape. I don't know. Let's see blue fill and maybe even remove that border from it. Just like any other shapes. And now with this shape, one thing to note is that he can always go back and edit it. So if you double-click to go inside of that shape, you can always edit those nodes. Or you can even do stuff like go in the middle of 22 nodes and add even more nodes. I really play around with that and create shapes, custom shapes that you like. I'm just going to undo those by clicking Command Z. I want to show you one more cool thing when it comes to the pen tool. So far we've created a shape using just straight lines. But if you want to create a more sophisticated shape that uses curved lines, we can always double-click into our shape over here to go ahead and convert these nodes into curved notes. And I'll show you what that means. So if you hover over any of these nodes over here, you can double-click it to actually turn that into a curved node. So now if I drag this little point over here, as you can see, it joins the other two nodes using a curved line. And I can adjust this curved line using these little points over here. So I can do a little sideways curve or vertical curve like this one. Just keep it street by holding Shift. And as mentioned before, while you hold Shift, it'll go ahead and snap into specific angles. I can make my curve more, more rounded or it can make it more subtle like this. Arguments leave it as is like this. And you can do this with any node. So by double-clicking, you'll go ahead and convert those nodes into curved paths. So you can do things like create very custom shapes. Now at any point, if you want to go ahead and undo that and turn your notes into a straight line. You can just undo that by double-clicking on each of those nodes that are curved. And we'll go ahead and take you back to that street shaped or a street lined pen path that you had. So I don't think I mentioned this, but a path is essentially what we've created here using the pen tool. So on the left side here by default, this is called Path 1, which is by default the name that is given our path right here. You can always exit out of a path by just clicking Escape or by pressing V to go back to your select tool. And that's the pen tool for you in XD, where they can make in the next lecture and look at Boolean tools and how we can actually combine or use multiple shapes together to create, combine shapes. 12. Boolean Options: As mentioned in the previous lecture, there are still more two shapes. We can do this really cool thing, which we briefly went over in the menu, which is called path down here in the object. So if you click on the object in our menu and go down to path, you can actually go ahead and add, subtract, intersect, Exclude, overlap, convert path and Outline Stroke. Which right now you probably have no idea what any of those do, which is totally fine. That's the whole point of this lecture is that we're going to go through these. We're going to go over each of them briefly so you have an idea of what they do. So first things first, I'm going to go ahead and just bring my shapes together right here. That there are kind of overlapping on here. This is just for the purpose of this lesson so you can learn what those Boolean tools do. So if I just drag and click both of the shapes. And now that now I can see they're both selected because they're both highlighted in my layers panel. And right here I can see they both have this outline or within which means they're both selected. Another way you can select objects is by going to the Layers panel, clicking on one object. And then while holding shift, you can click on another object. And now both are also selected, so either or words. So go ahead and select both of your square and oval shape over here, and then go down to Object Path and do Add, which can also do by holding Alt command. You cool. So now what it's done is it's created a union sheep based off of those two shapes that are half. So what that means is that it's gone ahead and join those two shapes to create this one shape that I can now use as a lake. Now, those shapes are still contained within that union groups. So if I double-click into the shape itself, I can still access my ellipse and rectangle layer over here. And I can still move them around. So if I move it around and put it over here in the corner and then exit out by either clicking away or pressing Escape, you can see the shapes now changed. And it's still one sheep. Although I can still access those individual layers, which are super cool. This allows us to create unique shapes that need to be created out of a combination of multiple shapes or multiple ellipses, squares, triangles and so on. Cool. Now I'm going to Command Z to undo that a bunch of times. And now we have our shapes back as two different layers as it was before. Now if we do the other path which is called Subtract, it will do the exact opposite. It will go ahead and actually subtract and, and remove any shared part between those shapes. So because the circle and the square had this little half circle area as this shared space between them. It's gone ahead and remove that from the combined shapes where it gets subtracted shapes. Same thing with subtraction. You can always go in there and edit your shape to create different types of subtractions. Now of course, if I take this circle completely out of the square, there won't be any subtraction because there are no places where these two shapes kind of combined. So for Boolean options to work, your shapes have to be overlapping, otherwise there isn't anything to add or subtract. So I'm going to undo that a bunch of times, go back to my shapes, and then we're going to try the intersect. So what Intersect does is it will go ahead and find the shared region between those two shapes. So if I just go back, as you can see, this little area is what both shapes overlap. So we will go ahead and just going to hit Command Shift Z here to redo that. So as you can see, it will go ahead and combine those two and find the area where those shapes intersect and create a unique shape like this one, which I can always, of course tweak. Let's undo that and go back to object. Explore, exclude overlap, which will do the opposite of intersect. It will go ahead and find the area that's shared and remove that from the new shape. Finally converted path. We'll go ahead and actually convert these two shapes to a path, which is what we had with this kinda gets diamond looking shape over here. So now if I double-click into my circle, I can edit each node. And I can make a really unique shapes from my pre-existing sheep that he had access to before. Remember that in order to access those nodes, you need to double-click into your shape. And then going ahead and tweaking that shape. If you're not inside of the path and nothing will change. So you've gotta make sure you're inside of the path itself. And the way you do that is that once you are inside the path, you can actually edit each node. Let's Command Z bunch of times and go back to our shapes. Now I'm going to command Z until I see my ellipse and rectangle instead of the paths. Finally, last but not least, is Object Path Outline Stroke. Or you can achieve this by pressing Shift Command O. And what this will do is, right now we have the borders and the shapes. Or if actually go back, as you can see in the layers panel, we have an ellipse. We have this square, and it's intact with its border by pressing Alt Command O instead of shifts. So if you press Alt Command 0, now you see I've created an outline stroke. So what that's doing is it's separating my border from the sheep. So now the ellipse is a separate shape. And the border here is the stroke, or the border here is a separate shape as well, or a separate layer, I should say. So now I can kind of move these around and they will be separate from each other, then are really related anymore. And if I delete one, you see you that outline stroke is still there. And if I delete the stroke here, the shape is still, or I guess to ellipse here without its stroke is here. So if at any point you want to separate the border from the shape, you can do that by going to Object, Path Outline Stroke. Once you have your shapes selected. Again, I'm gonna do Command Z a bunch of times. They go back to having my sheep's as the word. And then it's just going to go ahead and separate that out of that. So as little exercise before we move on from Boolean groups, I want you to go ahead and create a shape similar to this one. I guess it's kind of a dumbbell looking shape. And of course, use your path options under the object to achieve that by combining multiple shapes to achieve this similar design. One little neat thing that I want to tell you. If you want to duplicate shapes, you can always hit Command D. And then we'll go ahead and create another shape, another copy of that shape for you. A little tip. If you're trying to duplicate this little oval and place it here. So yeah, I'll leave that as a little exercise for you and then we'll do it together in the next lecture. 13. Boolean Options Exercise Solution: All right, so how do we make this shape using our Boolean tools? Well, it's actually not that difficult. You simply need three shapes and then you're gonna go ahead and join them together or add them together using the Boolean tool. So I have two ellipses here and one rectangle for the middle part here. So I'm going to go ahead and just delete this one and redo that again. So first let's go ahead and create our ellipses. So I'm gonna go ahead and press E, create an ellipse. I'm kinda like this. Width and height. It doesn't have to be exactly like this. Just doing it for the sake of the exercise solution here. And then you can use Command D to duplicate that ellipse. And then going ahead and moving it right on this side over here. And let's create a rectangle by pressing R. And kind of creating a rectangle to join those two ellipses together. Cool, escape out of there using her escape key. Now let's go ahead and select all the shapes together. Make sure you have all three selected. Right here. Go to object path and you guessed it, add. Or you can also use Command Option. You done. Now we have one shape or one union cheap that combines all three shapes. And I can even go ahead and change the fill to give it whatever Phil I like and do a little agree fill over here. You can even go ahead and remove the border if you don't want it. Cool. So that's how we use the Boolean group to create kind of a dumbbell looking shape like this one, will need to know what that is. That right now I'm just designing this shape outside of my art board. So anything that you designed outside of your artboard will go under this pasteboard kind of part of the layers. I can go back and to see everything over here, all my art boards. Or click on this pasteboard to see anything that a place outside of me. Artboards. Cool. So now that we have some familiarity with shapes and how to create shapes, joined them and use the property panel to tweak them. When we come back in the next lecture and work with text. 14. Adding Text: It's finally time to explore our text tool in XD. So the text tool essentially allows us to, as the name suggests, add text to our design. So at any point I can hit the T key on my keyboard or just go to this text option here. And then go ahead and just click anywhere on my artboard to add text. You can go ahead and start typing. So I'm just going to read this is sample point text. And then at any point you can just click Escape to get a text box or just click somewhere else outside your textbox. And let's go ahead and just go back to our Select tool. And now as you can see, I'm just going to scroll in. We have this text over here. And all the properties are listed in this property panel here. So this is a text with helvetica new font. It's currently 20 pixels in terms of the font size and has a font weight of regular. And of course we can change or font by scrolling to the fonts that we have over here. These are the fonts that I have installed on my machine. So it might look different from yours. If at any point you want to install new fonts, you can simply install new fonts and it should load up to your XD without any problems. And as we start our project, we'll explore custom text and installing new fonts as well. For now, I'm just going to change it to this other font, Avenir Next that or how you don't have to do this. I'm just showing you the text properties of you have access to. So I can change this 20 pixels to 50. And I will go ahead and make my texts larger. As you can see. I can change its way. They can make it italic, ultralight. You make it bold, heavy, so on and so forth. Now, these options will be different based on what font you have installed and what font weights you have installed for that font on your machine. So not all fonts might have this many options. Some of them might just have the regular the ball, and some of them might have the medium. So this might be different based on what font you have installed and which one you're using. From here, we can adjust the letter spacing. So if I put 10 pixels, then it will go ahead and increase the spacing between each of the letters. And so there's some very visible. But if I do 50, you can start to see that the text is starting to become more spread out are the spacing between each letter. I can go back, set that to 0. Now this is for your line-height because right now we just have a single line. You won't really see this make any difference. And similarly, this is for my paragraph spacing, but because this is just a plain texts, which means it's just a text that's in a single line. We won't really see those options. Much of other cool things you have access to. You can go ahead and make your text fully uppercase, fully lowercase. You can make a title case. So each letter or each words first letter becomes uppercase. You can superscript or subscript your texts had underlying, and even add a strike through it. So these are some cool features that you have access to when it comes to text. Everything else is pretty much the same as shapes. So we have our appearance or transparency. We can change the fill or the color of the actual texts over here and give it a nice blue. We can still add a border to it as well. We can even go ahead and add shadows as well. Now one thing I do want to note is that when you do have a point x like this, if you want to edit it, you can just double-click into it and it will just let you edit your text. Now if I just keep typing on and on and on, as you can see, the texts will just keep going on and on without any spacing. So the text will go on and on because it's a point x. At point x don't really have spacings. You could technically press Enter. I'm at certain points to create multiple lines, but there's not the best practice because as your texts adjust, it won't look very even. So. I'll show you exactly how you can actually make paragraph type texts as well. One of the neat features that if you do want to make your text larger without editing the font size over here, you can somebody go ahead and drag this little note over here and drag it down, or up for a smaller font size or down for bigger one. And as you can see on the right size, that number is changing. Just going to make that back to 50 pixels. And go ahead and just remove that extra part and pressing Delete and escape out of there. So now this is a sample point tag. Now error to create a text wrap or a paragraph text, you can simply press the T key on your keyboard and instead of clicking this line, simply go ahead and drag, just like you would drag with a shape where you want your paragraph to be or your text wrap to be. So if I go over here now I have a text box that I can simply go ahead and start typing in. And as I'm typing, you can see it will go ahead and enter into a new line based on that shape or that frame that I've created for my text. So that's kind of how you create that paragraph text. And now if I skip out of there, I can go ahead and increase this in terms of the width. So I can have a longer text box. I can do the same over here by increasing the height. So if at any point my texts does kind of go of the height, it might be hidden, so I will have to go ahead and make sure my height matches that text so that no Texas hidden or left out of that textbox. So make sure that when you're adding text in your projects, some other cool stuff that you have access to, the texts that will go through. So now we have a line-height that we can go ahead and edit. So if you change this to 200, you'll see the line or the spacing between each line has increased to 200 pixels. I think by default it was 68. So go ahead and keep it at 68. You have new paragraphs, you can change the spacing right here. So if you do 50 pixels, oops, 50 pixels. And I'm gonna go to a new paragraph. As you can see with each new paragraph, that will give me a 50 pixel spacing between them. Now, right now because we have a fixed size, I will have to adjust my textbox based on the size of the text. But if I do auto height over here, who actually go ahead and adjust my textboxes height based on how long the whole text, the text inside of this textbox is. So as you can see, the height becomes locked because now it's on auto height. At any point I can go back to fixed height and then give it my own height. I'm sure that I want to give it a specific height. At any point I can go ahead and also do auto width. So that would be the same thing, but in terms of the width. So you can either choose an auto width or an auto height. So whether you want to have a dynamically change the width of the text box or the height. You can choose that accordingly. Or again, you can pick a fixed size if you know specifically your textbox needs this width and this height. So that's how we add text to our projects. 15. Grouping Layers: So as we start to add more and more stuff inside of our art board for just click this over here so we can see on our Layers panel, things will start to kinda get pretty busy over here and pretty hectic if you don't want, have them grouped up. So that's why in our Layers panel, we can actually group things together that are irrelevant. So that later on we can have certain objects belong to a group and we can make edits easily and know exactly what belongs to Y. So in this case, it might not make sense to group everything together because really we just kind of experimented with a sheep's tools and the text tools. We don't really have any relation between these things. But let's actually just create another art board by pressing a, just drawing an artboard over here. I've just gone ahead and create another artboard and I'm going to click Escape to get out of that art board tool. For some reason it created this art board here. I'm going to delete that one. So yeah, instead of my artboard, I'm just gonna go ahead and create some rectangles. Now. I'm going to do C rectangle like this. And then I'm going to hit the T key on my keyboard and write a title. And maybe, and go ahead and duplicate this one using Command D. And I'm going to press V and go back into my select tool and maybe to change this to description. And maybe I want to include these in my kind of square over here and I'm going to create another rectangle over here. And so we can use this sort of layout to maybe put images inside here and use these as kind of cards. And our design was essentially is an organization of certain things such as the description, a title, and a bunch of images, let's say. So now these things are kinda relevant or related together. So what we can do is we can go ahead and actually select all of them. And we can make sure on our left layer panel over here we have everything selected. Again, you can also select things from here. We can click the most top object over here and then also go down to the bottom object. And while holding shift, if I click, it will go ahead and select everything in between my first and last layer here, right? Most top and bottom layer. And then if I go ahead and click Command G or Control G on Windows, it will go ahead and actually place those objects inside of a group. Now of course, you can also do this by going to Object and clicking Group. So now these objects actually belong to this group, one over here, I can see it in my list. And now if I actually move this right here, this is all moving together because it's part of a group. Now, just because things are part of a group doesn't mean I can't edit them individually. So if I still want to make changes to my title here, Let's see, I can still double-click into the group and then go ahead and select the title over here. Another neat trick is that if we're inside of our group here, if I want to quickly select something inside, instead of double-clicking to go into the group, I can just go ahead and hold Command and then click what I want. That does the same thing. And we can go ahead and for example, upbeat this title to some other thing that we do, header, not know. So that's how you actually create groups in XD. Now of course, my group here has a group one name right now. But if I go ahead and click on this group 1 or double-click on it, I can actually go head and give it a name. So I can name it to cart. So now we know what exactly this group has. And at any point, if you want to see the contents instead of a group, you can just click this little folder icon or click it again to hide those layers that are contained inside that group. Chemical things. We're using this height option over here. I can go ahead and actually just completely hide that from my artboard. So this is useful if you're working with something where two layers, let's see, you're on top of each other or to different groups are on top of each other and you just want to focus on the one. And then you can go ahead and click this again to show them. You can lock this layer in place. So now if I actually go back to my design, I can't really make a change to it. And if I go here you see there's a little lock icon and I can click on it and then unlock it again, or can do that same thing from here. And you can also mark things for export. So let's say I want to export this whole group. I can go ahead and export it from here, or market for exports so that once we're ready to export, it will be included as part of our batch export. And you can also see this little check mark icon will show over here when we do have it as marked for export. But of course we're going to explore exporting in future lectures. So that's essentially how you group things in your designs. And at any point, if you actually go ahead and hit Shift Command G, They'll go ahead and ungroup the whole group here. And now I see I'm back to my previous layout where I just have my layers without them being in a group. So now if I move things around, they won't have any relation to each other and they won't move together. Again to group things, select everything together, and hit Command G or Control G on Windows. And that will group things together. Just as an example, if you remember, we played around with this repeat grid. Now you can kinda see how useful it will be if we're actually repeating a group. So for example, let's say we have an app and we want multiple cards to show up with different images and different texts. We can actually do this and we can even go and replicate them throughout horizontally as well. So that's a neat thing that we can do with a repeat grid. And we're definitely gonna be using it in our designs. Hitting Command Z two times. I'm just going to undo that and do ungroup grid over here. Just go back to having it as a group. And yeah, so that's how you group things and organize your objects within XD. 16. Grids: So what do we need grids in our designs? Well, using grids, we can actually go ahead and align objects and place them accordingly in a more organized way throughout or Artboards. By clicking any artboard, you can go ahead and actually access those grid options in the properties panel on the right side over here. And we have two types of grids. We have a layout grid and a square grid. And we're going to quickly go through those in this lecture. To use a grid, you can go ahead and click this little checkbox over here. And then we'll go ahead and create a grid for us. And now this is a column grid that has 12 columns across or art board with a gutter width of 16 pixels between each column, the column width of 221 pixels. And this right here is our margin on the sides over here. So the left than the right side. If he said this to 0, it will go ahead and remove that margin and create an evenly spaced out column. We can increase or a gutter to, let's say 50 pixels. And so now there's more spacing between our grids or our grids columns. We can increase or decrease our number of columns, and so on and so forth. Now a default in web type of design, 12 column is pretty typical. So we're gonna kinda go back to 12, 16, and 243 and add to a 100 margin on the sides. So if you were in this optional rehearing, you can actually go ahead and set the left and right margins together, but you can also go ahead and change it to this option if you want. Custom margins from each side, the top, the right side, the bottom, and the left side. But typically we just do the left and right side like this because we want spacing from the left and right corners. And then we can go ahead and actually align our objects to our grids so that we create kind of a organized layout. And we know exactly how much spacing we're using between each object. Now one neat thing is that while you're working with objects here, and it will go ahead and show you that little pink box in-between your objects to show you that you have an even spacing between all these three objects here. Or I should say groups, which is pretty cool. So again, grids that will help us align our objects throughout our design evenly. And as we work on our project, you'll see us use grids every now and then in order to make sure everything is aligned and distributed properly throughout our designs. Now, if the blue color here is a little bit distracting, we can go ahead and click on this little fill and decrease the transparency of the columns so that they're more hidden and they don't interfere with our designs. And at any point we can go ahead and simply turn it off. And now we see our objects are much more nicely and neatly organized throughout our artboards. The other type of grid is a square grid. And essentially this is kinda like a grid and evenly square grid all cross that design. We can go ahead and change the square size here. You can make it, let's say 50. And so now you have a different type of grid where it has both the horizontal and vertical lines all across evenly. So you can definitely use a square root if you want more specific alignment. Especially if you're maybe putting together an icon or something that requires more detail in terms of the spacing. But otherwise we typically use a layout grid. When it comes to web and mobile apps, you can always turn it on and off again, as I mentioned from right over here. If at any point you want to use this grid as a default grid, you can go ahead and make this the default grid. And so this way if I make some changes, let's say 20 grid. And I want to use custom grid over here. And I want to, let's say now I want to go back to that default grid. I can always click the US default. And I'll go ahead and change back to the settings of my default grid that I've set, which is pretty handy. So that's how you use grids in Adobe XD. And the next lecture we'll explore how to align and distribute our objects across her art boards. 17. Alignment & Distribution: So now that we know how we can actually use our grids to align things a little bit better inside of our art board. I'm going to also show you the alignment and distribution features in XD, because more commonly we're going to be using those features in order to align our objects within our designs. In order to demonstrate, I'm just going to go ahead and click the a key on my keyboard and just draw another artboard here. Just for the purpose of showing you how distribution and alignment works. You don't have to follow this step if you don't want to, but I do encourage it so that you get an understanding of how our alignment tools work. Now using the R key, I'm going to use my rectangle tool to create some rectangles, vary randomly across my design and create five rectangles. And I'm just going to go ahead and escape out of that rectangle two. And by holding Shift, I'm going to go ahead and click all of my rectangles. And just so that you can see it better, I'm going to give them agree fill right here. Cool. So now we have a bunch of rectangles that are all very unevenly spaced out throughout my art board. So let me just zoom in here so you can see it better. So first things first, if you have any one objects selected, it doesn't matter if it's a rectangle or a textbox or anything like that. But using the Alt key on your keyboard, you can actually see the spacing of that object within your artboard. So for example, this rectangle here is 270 pixels from the top, 1185 pixels up from the bottom here, 5, 11 pixels from the right, and 2551 pixels from the left. And you can repeat this process. So not only can you see the spacing between this object and its art board, you can also see the spacing between this object and another object by simply holding old and hovering over a different objects. So this way you can see what the spacing is between each different object. And as you kind of go through that, you'll notice that my objects are not evenly spaced at all. They're very randomly spaced out. So this is where a woman features come in handy in XD. So by clicking and dragging and selecting all my shapes here, you do have to have all your shapes selected or the ones that you want to align based on your art board. And then using these tools over here, we can actually go ahead and try different alignment features. So the first one is aligned to type I click this. Xd will go ahead and align all of those rectangles to the most top layer between those objects. So if I just undo that, because the most top layer is this rectangle over here. Within all of my selected rectangles are selected objects. Xy will go ahead and push all of those rectangles to match this one over here, since this one's at the most top. Similarly, if I do this one right here, it will go ahead and do the same thing, but in the middle of my entire parent box over here. So we'll go ahead and vertically align them to the middle. If I undo that and do it the bottom line, we'll go ahead and do very similarly what it's done with the aligned tab, but to the bottom, to the bottom object there, which was this one right here. Using this option, I can go ahead and distribute all of my objects horizontally. So that means XD will go ahead and create even spacing between all my objects. So now if I actually click one and check the spacing by holding Alt, I can see it has a 450 pixel spacing roughly between each object. And now if I select them all back again by just dragging across all objects here, I can also do a very similar thing called distributed vertically. So that will go ahead and actually distribute all my objects are vertically so that they have a similar kind of vertical spacing between each other. And these are the horizontal alignments. So aligned left, we'll go ahead and align all of my objects to the most left side of that parent selection over there. So this entire kind of parent view that we have over objects, the most left point would be here. So we'll go ahead and push everything to that point over there. If I do middle, it'll go ahead and push everything to the middle of that box. And then, as you'd expect with the line right, everything will be aligned to the most right object within my selection. So again, one thing to note is that everything is being aligned relative to what you have selected. So if I do have only these, let's say three objects selected, and then these features are going to work differently depending on what I have selected. Now what if you want to actually just align all of these? The entire selection here horizontally within my artboard will, if I select all of them together and drag, by default, XD will snap into place when I'm at the middle horizontally, and then similarly when we're at the middle vertically as well. So now this entire parent container is aligned to the middle of my artboard, both vertically and horizontally. And so that's your alignment and distribution in XD. And the next lecture when it come back and explore some of our wireframe UI kits that will make designing a lot easier in XD. 18. Wireframe UI Kits: So I hope you are familiar. So I hope you're getting familiar with XD. Now, we're almost ready to actually get our project started. And this is going to be obviously the more fun portion of the whole course. So I can't wait to get started with you on that one. But before we jump in and do that, in the next section, while we had started our designs brutally using wireframe kids that Adobe XD provides, which are super useful. And you'll see why in just a second. What should you go to file in your menu option and go ahead and click on Get UI Kits. Once you do that, XD will actually go ahead and open up your browser. And it should land you on a page like this one. If you are not on this page, you can just go ahead and take a pause here and make sure to follow this link right here. But you should be taken to this page by default. And so what are UI kits? Well, UI kits are essentially user interface kids that have already been put together by other designers for XD, so that you can actually use them in your designs to speed up your design process. And so what that means is that companies like Apple, Google, Amazon, and so on have created these frameworks, design framework so you can actually go ahead and get these kids. And so instead of having to reinvent or redraw a navigation bar like this one here, you can actually go ahead and just use this one in your designs, which is essentially what most designers do in order to mimic what the app will look like in an actual iPhone or iOS app. This is really important because I've seen designers are redraw or recreate these from scratch. But really there's no point because these are available to you for free to use from your XD UI Kit website. So whether you're designing a Bootstrap project for web or you're putting together an app for Android. You can always go ahead and use the kid to be able to speed up your design process. And of course, we'll be using this in the next section while we work on our mobile app. Just giving you an idea of how this works, I'm going to go ahead and get the kit on the Apple design. Depending on when you're watching this, these kids may be different or may look different. So don't panic if you don't see exactly the type of kit that we see here, or these images might be different. And depending on what iOS is out at the time. So let's go ahead and click on get the kit, which will take us to Apple's website. And from here we have access to iOS and iPad OS kits, which we can download using this little icon over here for dialogue. Now this is a bit of a big file, so it might take some time to download, so be patient with it. I will take its time. And eventually it will open up. Just take a pause here if you need to. If you're on a Mac, then go through your usual setup process. And you should then be able to see this little file or folder, I should say. And once you go ahead and open it up, you'll get these design template for iPad. This one's for iPhone, I believe. And last but not least, this is for your textiles. This is the one we're interested in if we're designing for an iPhone app. So let's go ahead and click on the design templates plus components plus guides and dash iPhone dot TXT. By double-clicking it, XD will go ahead and open it up. Now if you do get prompted to X key to open files from downloads, go ahead and click Okay. It might take some time to open this file, so be patient with it. But once it does load, it should look something like this. So with my design template opened up, I can just simply go ahead and let's see, I'm working on adding maybe an activity view controlling this one over here. I can simply go ahead and copy this one by clicking it and clicking Control or Command C, or Control C on Windows. Going back to my project and then just paste the end wherever I want. So of course, right now we're not working on an iPhone. Apps is not as relevant. But one thing I do want to note is that when you do import or paste something from another file, you may get this missing font. So this is simply because Apple's using certain fonts inside of the design here that we don't have on our machine. So that's where we're getting that little missing font. But you can totally go ahead and find these files and install them and then this error should go away. So don't panic if you get something like this. This is usually why it happens. So that's how you essentially use UI kits to speed up your design process. And this might not make a lot of sense right now, but once we do start working on our project, you'll see how useful it will be. 19. Zoom Shortcuts: I keep saying we're gonna get to the main project that we're going to work on and we keep coming back to the introduction, but we're almost done. This is actually the very last lecture of this part of the section. My goal here is to make sure that you have enough familiarity with the software before we actually jump into a big project. But of course we're going to take it step-by-step and still keep on learning. The whole idea is not to memorize everything we talk about throughout these lectures, but do it enough with practice that it becomes natural to you. That's really the best way I figured out that these design softwares or any software in general works when it comes to learning it. All right, so enough talking about that, Let's talk about zooming. So as I mentioned, we're going to explore zooming in XD. The simplest way to access Zoom option is under view and your menu. So we have a bunch of options here from going from a 100 percent, which will show us the true size of this project. So, you know, if this project was a 100%, this is what the user will actually see. So this is kinda like real size if you want to think about it that way, then when you do have to 100 percent, which of course is even a higher zoom. And now these are just presets, but these are the more interesting ones, which it's command 0 will go ahead and fit everything you have, all your artboards into the entire view. And that's to access those a 100 percent to a 100 percent and fit all options. You can also do Command 1 for a 100 percent committed to four to a 100% Command 0 to answer between 0 to fit everything in. At any point, you can also do Command plus and minus if you want to zoom a little bit in and out. If you want to zoom to a specific section, let's say I want to zoom into this little dumbbell thing here. I can press the Z on my keyboard and then just draw a little rectangle around it and it will go ahead and zoom to that area. I'm going to Command 0 to undo that. Another neat trick is that if we're working on, let's say the certain art board, whatever I have selected, I can go ahead and click view, zoom to selection. Or it can do Command 3. And we'll go ahead and zoom on to exactly what we're looking at. So if I have, let's say this group select it and hit Command 3. And we'll go ahead and zoom exactly onto that group. Which is great if you're working with, let's say, just a certain design. You want to, you know, focusing on the design and maybe at a certain layer on top or be more precise and use that. And then go ahead and go back to maybe a 100% or 200% zoom level. Or just use your pinch on your trackpad or your scroll on your mouse to zoom in and out manually. Like so. And of course as I zoom in and now you can also see the zoom level change here. If you do want to Custom Zoom with you on, Zoom are worth 25 percent. You can also achieve that by just typing it up here. But that's kinda rarely used for yeah, Essentially that's your Zoom options. And the two more important ones that I want you to remember, a simply pressing the zed and drawing around the area that you want to Zoom. And also doing a selection by clicking something that you want to zoom into and then pressing Command 3. I think those are the most used Zoom options and they're pretty handy. And so with that said, let's jump into the new section and start working on our new mobile design project. 20. Healthy Bites: Project Introduction: All right, Welcome to the new section. We're ready to finally get started with our mobile app design. Super excited for this section, and I think you're going to love it. So before we actually jump into the project itself, I do encourage you to go ahead and download the resources from this lecture. You should be able to find a file. You should be able to find a folder like this one right here, healthy bites, mobile app assets. So that will include all the files and documents and icons and things that you need for actually designing this mobile app with us. So take a second there to download that, go ahead and unzip it and open it up. So inside of that folder you should be able to find a little file like this called healthy bites design briefs are PDF. Go ahead and open that up from the folder. So essentially this is our design brief that the client provided us. So the client in this case is called healthy bites. And the project we're working on is called the healthy bites mobile food ordering app. So if you don't know what to brief is no problem at all. Essentially, a brief is what provides us with the initial information for the project provided by our client. So within that brief, usually we have something about the client and that explains what they do. Maybe some keywords around their company and their projects, project goals and objectives, what they're looking for out of this project. And then in more detail, sometimes you'll see a target market Slash audience. So this is who they're trying to cater this product 2. So this will allow us to really make sure that when we're designing, we're designing for that specific target audience. Along with other things such as project deliverables. So this is what they're looking for us to deliver to them at the end of this project with them. And then other things such as schedule, budget, what direction they want to take it in terms of the creative direction, maybe who the primary contact person is at this company, and then some other notes that are provided by the client. So this brief is usually what's provided initially when you start working with clients or even maybe a company that you're working at? My provides something like this that includes what they're looking for it. Now sometimes it might include more details under the deliverables. So right now, we'll go through the brief here. And then in the next lecture we're going to come up with the pages that we'll need in our mobile app. So we can design this for our client. But sometimes even those pages or features will be included in this brief so that they'll let you know exactly what they're looking for. Or sometimes they can be more broad like this one. And really it's your job to come up with those features and pages and what they'll need in their mobile app. But for now, let's go ahead and go through this brief. So for healthy bites, healthy bites provides customers with an easy to use mobile ordering app for healthy foods and their city. So it's essentially a mobile food ordering app, but for healthy foods only. Pretty cool. Here's some other brand keywords. Healthy food, clean food, low carb, diet, et cetera, et cetera. You can read that in more detail. So our goal is to design a simple to use food ordering app that helps customers browse nearby healthy restaurants and place an order from their menu displayed in the app. Customers should be able to set a delivery option and see the progress of their orders as it's being prepared and delivered. Cool. So the target customer, or young professionals between the ages of 22 and 40 who are looking for healthy meal options only and the care about their fitness and health obviously. And they rarely cook food at home and they prefer to eat out most of the time. So of course, the one that healthy option. And so that's what healthy bites his company here provides. And does the project deliverables were designing a mobile app design for iOS, as well as the prototype, and then also a logo for their company as well that will put together throughout the project. And there was a schedule. We have an initial mockups due in two weeks, a prototype in three weeks, and final mockups and deliverables. So right here, due in four weeks. Now of course, these are just kind of made up for the sake of this project in this course. Usually these may be longer depending on how big the project is. And of course they said IT budget here of 6 thousand US dollars. Now you might be charging lower or higher depending on where you are in your design career. So if you are starting out, you might be charging a lower amount for your project, which is totally fine. And then all the way up to bigger projects that might be in the 45 figure ranges go. So in terms of the creative direction, we want to develop a company's branding including logo, color, font styles. And then we want to keep the logo and app clean and modern. And it suggests that we use a green color, of course, to show the healthiness of the product for lack of a better word, and so on. And so these are primary contact person is just made up again for the project. You don't need to actually worry about this, but usually you will have primary contact person or any other stakeholders and people who are supposed to approve the people who will be approving the project once it's completed. So further nodes, some icon assets will be provided for the mockup. So this is included in that folder that you should have downloaded from this lecture. So let's come back in a following lecture and put together in more detail what pages we need to design before we start wireframing and creating our art boards. 21. Getting Inspiration: All right, so what do we need for this mobile app? So because the client here is just provided us with the deliverable as the mobile app design. They haven't specifically given us what pages you need to require or we need to have inside of that design or inside of the app. We're going to be coming up with those on our own. So I've gone ahead and opened up a Word document here, you can simply go ahead and open up pages on the Mac or a Word document on Windows. Whatever word editing you use. I'm just going to be taking some notes here so we know what pages we're going to include in our designs. It's gonna go ahead and type in healthy by mobile food ordering requirements. This will also be provided in the folder that you downloaded. So in case you don't want to follow along and make the same notes here. You can go ahead and access it in your resources that you download it as well. So how do we know what pages we need to design for a mobile app, for Web App, for any project we're working on for that matter. Well, what I like to do personally is actually go ahead and install other similar apps that are doing similar functionality. So we have tons of food ordering apps out there. Whether it's Uber Eats, skip the dishes. There's so many out there that we can actually go ahead and install, play around with, maybe even try out and actually order something with so that we can see all the designs that's required and all the pages that go into such an app. So that's the first step to doing this. Now what if you've already done that and you're looking for more inspiration, well, don't worry, there's more resources out there. I'm going to share a couple of resources with you that you can use to come up with inspiration when you are looking at what you need in your mobile app design. Or it's. So I've opened up three resources that you can use for free to figure out what you need or come up with inspiration when you're working on a mobile or web app. And I've included the links to all three and a little text documents they can download from this lecture as well. So first one is this website called moveon dot design. You can actually go ahead and browse iOS and Android apps here. So they've gone ahead and downloaded some screenshots from each app. So we have delivery which is kinda similar to what we're designing. And a bunch of other apps such as LinkedIn and so on and so forth. You can go ahead and browse. Those are filtered by the app category. So if we're looking just for food and drink apps, it will prompt us to first login. So I'm going to go ahead and just click login here. I've just gone ahead and logged in here. I may ask you for a little survey year or so. I'm going to go just go ahead and skip that. But essentially, once you do log n, You can actually go ahead and filter by the type of apps that you're looking for. So we can do filter by category, food and drink. And so now we see a bunch of apps that do food and drink. So just click this first one here, Deliveroo. And so as you can see, they've included all the screenshots from different parts of the app. So anything from their splash screen to location sharing, browsing, restaurants, phone verification pages, so on and so forth, all the way down to the delivery details and such. Now for our project, we're not going to go as detailed as an app like this, because obviously an app like this will take much longer to design. So we're going to focus on keeping it simple. Can we get basic to the core functionality of the app, which is just ordering food, healthy foods through the app. Now of course, you can always take it further design further pages and send those designs for feedback from me, which you can do by sending your project or sharing it with hello clever at gmail.com. And I'll try my best to reply to every project and leave feedback for you on your projects. But yeah, we're gonna go ahead and use resources like this one to come up with inspiration on what pages we need and what we need to include in those pages. To other resources that you have access to or Adobe Stock. And of course, this is more for downloading stock images. But if you do search something like food ordering app, you'll still get a bunch of pages that you can use as inspiration on what you can include in your mobile apps, such as this one right here. So feel free to experiment with that and browse those resources. Lastly, dribble is another great one which you can do another search food ordering app I've done over here. And they have tons of people uploading sample food ordering types of apps. Where once you do log n, You can actually see it at full screen. Or you can just gonna get the idea from the thumbnails over here. Pretty cool. So if you're wondering how I'm going to be coming up with the pages that we're going to design. I'm simply going to be using this. And so let's come back in the next lecture and put together the pages that we're going to be designing for our app. 22. App Requirements: All right, Let's make your list of the pages that we need to design for this food ordering app here. So as we went through in the last lecture, you can use websites such as mobile design to come up with inspiration and see what pages you might need. So based off of these kind of mockups and other mock-ups that I've designed before for food ordering apps or already know a bunch of pages. So I'm going to go ahead and put those together in this document. So just as a reminder, this document is available for download. The resources at the beginning of this section. So the first page we're going to need splash screen page. So this is the page that you see right here that usually shows it a logo and a little loading which acts as kind of a loading screen. And then we'll need a login page, which is where users will go ahead and login with different accounts or using email and password. And then we're probably going to do some sort of verification so we can design a phone number verification. There we go. Then we'll have a main page that shows the restaurants. So we can either call this main page or the restaurant or the browse page, really any that works. I'll just call it the main page because it is, we're typically users will go when they do launch the app after they've logged in. And then we'll probably want some sort of map page or location where users will be able to enter their address for delivery. Will definitely want to profile page from where users will be able to access their information, their credit card, et cetera. And speaking of credit card, we definitely need a payment page. So this is where users will be able to add their method of payment for the app. Let's see what else. Now, if you remember, in our brief, the client does want us to show the progress of the order as it's being prepared and delivered. So based on that, then after our kind of main page, we'll definitely want menu page from where users will be able to access and menu of that restaurant of the select, as well as an order page, which is where they'll go ahead and please their orders for the food that they want. And then I guess a Progress page where there'll be able to track their progress of their order, see when it's going to be delivered, and so on and so forth. Now this Deliveroo app here that I have opened up on moveon dot design from the previous lecture. Bunch of other pages like filters and offers and so many other options such as selecting your dietary options and such. We don't need all these features right now because we want to design a simple ordering app. But as mentioned, you can definitely design these and use the opportunity here to get better at designing these pages. So we have everything here that we want for our client. As an exercise, I'm going to actually add a past order page as well where you can actually access the orders that the customer is placed in the past, so customers will be able to see their previous orders. I'm going to leave this pages and exercise page for you to do as we go through designing this app. So there we have it. That's our app requirements. Of course, it's always a good idea to send this to your client at double-check with them to see if this is exactly what they want, if there's anything missing, because this is a back-and-forth process. You've got to work and communicate with your clients on what you're designing and what their needs are so that you meet them. And there's no discrepancy here between the two. So once we do get our approval from our client, which we can assume we've already done. We can go ahead and move forward with designing these pages. But before jumping into 16, actually designing them, we're going to be putting together what's called a low fidelity wireframes, such as this one that you see here. So if you do Google low fidelity wireframes, you'll be able to see some examples of what these are. Essentially wireframes allows us to create a blueprint of our app that mentions what we need inside of that page and where things should go. There's no color involved, it's all black and white. You can even go ahead and sketch this on a piece of pen and paper to begin with. And I think that's what we're going to be doing in the next lecture to put together the wireframe for our pages before we jump in and actually start designing them. So grab some pen and paper and I'll see you there. 23. Drawing Our Wireframes: For this next part here and go ahead and grab some simple pen and paper, because we're going to be actually drawing our wireframe on pen and paper and then moving that into XD. So let's jump in and start drawing or wireframes. Hey, they're ready to get started with our wireframing here. So hopefully from there you'll be able to get a good idea of what we're drawing here. So let me go ahead and just open my pen. And then I'm going to start writing down the name of the project of first. So we're going to do healthy bites mobile mockup. And I'm going to just go ahead and create a box around each page that we have for our project. You can use a ruler if you want to be very precise with this, but I'm just going to hand draw these. They don't have to be perfect. Remember, we're just getting an idea of what we want where. So just to be able to make it a little bit easier for you to see. From our previous lecture, we have nine, 10, and 11. So we have ten pages that we're going to be designed with one as an exercise. So we're going to be designing the 10 pages, or at least wireframing them here on our paper. So I'm going to try to fit in 4 on this page. So she's going to go ahead and draw. I'm sort of an app box over here. For each page. Again, you don't need to go perfect with this. The whole idea is to just get an idea of what we're designing. So I'm not really going to draw the splash screen page because we just have the logo there so we know what that should look like. We're gonna do the login page. We're going to do the phone verification. We're going to do the main page and we're going to do the location page. I will just go ahead and go to a new page. Put that one aside for now. We're going to create four over here as well. So we have profile, left. Profile. We have payment menu. So this is the page where we'll be seeing the menu of the foods and then an order page, just going to save space. I think I can fit in the progress page here as well. Apologize if it's a little bit hard to read my handwriting from there, but the idea is just to put together the wireframes here. So starting from here in our login page, as we've seen before in other logging pages. And again, you can get inspiration from apps that you have on your phone or simply browse those websites that we went over, we'd probably want or logo somewhere over here. So we could do logo, an e-mail and password option here. So as the login button. And if you want to do maybe login with Google or other options, we can list them down here as well. So I'm just going to write other login options. And then maybe a little text over here for our terms of service and privacy policy. Link for the user to click if they want to see their terms of service or their privacy policy. Usually they put this somewhere on the login page or maybe under the profile pages. For the phone verification is pretty simple. We just want a little box here for them to input their phone number with a little home button to go next. So that they can verify that. And pretty straight forward, we can put a little text here to describe exactly what we want them to do. Main page, I want to go ahead and hit a little navigation bar here and maybe have a little search box in there so they can search for specific restaurants, as well as maybe a little hamburger menu. So they can see the menu, which speaking of, we actually haven't designed a menu page. So this menu page really making take us to the profile page and from there they can have access to other options. And over here we're just going to have cards that will show the restaurants. So we can have a little image of the restaurant here, as well as the title of the restaurant. So I'm just going to point to this. We can include a little title. We can include the rating. So title slash name of the restaurant, include a little rating, maybe some dollar signs to include the price range, and then maybe the type of food from that restaurant. And then we're gonna go ahead and repeat this for all the restaurants that we have and so on, so forth. For location, we just want to go ahead and allow them to search for their dress. So this will be a little address search box over here with a little map. And it'll be able to save their address. Maybe we'll have a little pin icon to show them where their address is. We can do a little currentLocation as well. Maybe here we'll have a little text box to write the actress. So that's kinda like our low fidelity wireframes for these pages. For this one, Let's come back in the next lecture to complete it. 24. Completing Our Wireframes: It's done here. Let's go ahead and just complete these five other low fidelity mockups for a project as well. So starting with a profile, we're going to go ahead and use this profile actually a sort of a menu page as well. Because as you remember in or other page from the main page, I wanted them to click this little hamburger menu and from there, and they'll be able to see their profile slash menu. Somebody would maybe we can do a little menu here and to little X to close the menu, maybe have their profile picture here along with their name. And from here we can give them access to a bunch of options so we can do a count if they want to go ahead and edit their account details and we can do payment order history. What else do we need? We need the location or address we'll do now, we'll do a little logout button and I think that's all we need. Remember if at any point we're missing something, we can always come back and update these wireframes. So the idea is just to put what we think we need for now. So we'll do log out. There we go. That's our little menu slash profile page. We have a little payment page here. So here maybe we can have them be able to add a payment. And then we can list or their previous payments here. But the last four digits. And then we can tell them maybe which ones primary, and then allow them to add from here as well if they want. Another little exercise, I'll leave the adding page for you to do. Just as a reminder, you can always send these designs to me and I'll give you some feedback on them by emailing them to hello clever at gmail.com. Perfect, We're almost done here. The menu will have the name of the restaurant here. And then we'll do a little kind of subcategory where we can show them maybe drinks and have each kind of drink option here. And then maybe mains. You know what you'd see typically in a menu. We're gonna go ahead and write down what we need in this little card here. Obviously we want the name of the drink or menu item. We want a little description. We need the price and I think that's all we need for now. We could do like a calorie count as well. Because remember that we're designing this for our target customers who are kind of conscious of their calorie intake Probably. So this will be nothing good feature right there. And then maybe we can have a little plus minus button for them to be able to add that item to the order or move it 90. Of course, like a food ordering app might actually be way more complex than just these pages. But we're keeping it simple here for the sake of this course. So this order page can then include your order. So it will show you what you have added so you'll be able to see each item that you have added. Item number 1, item number 2, we can have a little minus here or something too. Remove that item from the list. And then maybe on the bottom here we'll have a little kind of total showing how much your total will be, maybe with tax. And then a little button that says order with the total red in here. And the button can have something like that for order page. And obviously on these pages we can have a little back button to go back to the previous page, so we'll figure out the navigation as we go through. And lastly, we need a little progress page. So, so in this page will include the progress. So we can show a little, maybe a little bar here that will show which stage their order is add from where place to deliver it so we can show them exactly what's going on right now. Then under the here we can do delivery and include the address that it's being delivered to. Which speaking of, we can definitely have this somewhere here as well. So maybe a little location icon for them to make sure that this orders being delivered to the right address. And that could take them to that location page we drew. So we have the address and then order details. And here they can click to go through that, their order page to see what the order. We can also include a little call, restaurant option, or maybe even a council order. Cool. So there you go. This is our low-fidelity wireframe for our project. These will be included in the resources that you've downloaded. So you can go ahead and use these designs instead of having to draw your own. And I do encourage you to also draw that extra page as an exercise, which has the previous order page or order history page. So now that we have our wireframes, what do we come back in the next lecture and start creating our XD file? 25. Creating Our XD File: So if you drew the wireframes with us over the past couple of lectures, then you can go ahead and use those wireframes as you're designing your project. But otherwise you can go ahead and open up the healthy bites wireframes a PDF from the resources as well. And over there I've included the sketch that we did for our wireframes. So from here you'll be able to see what we should include in each page. And of course, if there's anything we left out, we'll go back and add it to our mockups. But this gives you a general idea of where to start. So for this lecture, let's go ahead and set up our art boards for each page. So here we know we need a total of 1, 2, 3, 4, 5, 6, 7, 8, 9 art boards as well as an extra one for you to do the past or pages law. So we'll create 10 artboards there in our project. But before we do that first, we need to actually go ahead and create a new project in XD. We're going to go ahead and just minimize this and go ahead and open up our XD. So we're designing an iOS project according to the client briefs. So I've done a little Google search for the most used iphone model in 2021, and it appears to be the iPhone 12. And the reason I've done that is that designing for an iOS or even an Android app, you want to figure out what the most commonly used device is designed based off of that. And then go ahead and create some sort of a responsive design that we'll go ahead and still work on smaller or slightly larger screens. So I'll show you how to do that throughout the project. But for now, let's go ahead and create a project for the iPhone 12. Will go ahead and close that. And right here in our XD, head on over to home. If you're already in a project, go ahead and close it and head on over to home and, uh, go ahead and click this little arrow beside the iPhone 12 Pro Max, or whatever iPhones displayed at the moment. And then go ahead and click on iPhone 12. Now, at the time that you're watching this video and the most commonly used iPhone is different. Then of course you can go ahead and use that as the option. We're going to go ahead and click this iPhone 12 comma 12 Pro for our artboard. And XD will go ahead and open up a new project with that iPhone 12 size as our default. So we know we need 12 or actually ten pages for our mockups. So let's go ahead and select this little artboard here, the first one that we already have. And then go ahead and hit Command D nine times though we duplicate our art board nine times. And she's going to hit Command Zero to just see how many I have. Nine. Okay, Perfect. I'm gonna do that one more time for that extra page for our order history. So now we should have 10 artboards. And by hitting Command 0, we can fit them all in one view. And now we're just gonna go ahead and rename these artboards accordingly, right after we rename our actual file itself first. So let's go ahead and click on this untitled and cheeses project name to healthy bites. Mobile mockup. V one. Those little V1 is just to indicate that this is our first version. As we work on our designs, we might want to create multiple versions. Especially if we're exporting this XD file and sending it to our client. And that is if we're not using the sharing feature because otherwise it's a sharing Fisher will kind of make that redundant. Or you can always go ahead and then tweak your file to maybe 1.1 as you make small changes, or maybe V2 if you make bigger changes. But for now we're going to leave it as V1. Go ahead and click Save. Now, at any point if you're falling the lectures and you're lost after each lecture, I'll be saving that mockup file, XD file and inputting that into a mockup files. So from this lecture you can go ahead and download those mockup files. And if at any point you do get lost, you can follow the latest or the mock-up that's available closest to the lecture you're watching it on. So let's say you're watching lecture 23. And you see in a mock-up folder there's a lecture 22. You can go ahead and use that lecture 22 to fall on one. Otherwise, I do encourage you follow each step so that you go ahead and learn as much as you can out of XD. So let's go ahead and rename each artboard. Do the first one as splash screen. Second one has login. Now I'm just double-clicking here to edit the name. You can also do that in the layers panel over here. Take a quick look. What else do we have? We have phone verification. So when you phone verification, we have our main page profile, payment, menu, order, progress, or we can even do it with her progress. And last but not least, or we'll call this one order history instead. For this profile one I'm actually going to do profiles slash menu. So this is the menu of the app, not the menu of the restaurant. So now we have all our artboards at any point we can arrange them and move them around. But for now I'm just going to go ahead and leave it as is. Now we're ready to jump into starting with our splash screen and working our way through our design. 26. Splash Screen: All right, So first things first we're going to design our splash screen. So of course, splash screens are one of the easiest pages to design. So I'm gonna go ahead and just press zed and zoom into there. So for our splash screen, we probably want to color background and then a logo in the middle here with the name of that company. So obviously we don't have our logo yet. We're going to be designing that in the future lectures. But for now, we can give this page a fill of green color, since that's kinda like the color scheme we're going for with this project. And then go ahead and add a little text. And then maybe a little place holder for where the logo will go once we do have it designed. So first things first, go ahead and click on this splash screen page. Make sure you have it selected. The artboard over here. Then go ahead and click on appearance. And you can actually go ahead and change the fill of this art board to whatever you like. So for me, I'm going to go ahead and select the little green colored that I think will look good for this app. Now of course, I'm just kinda eyeballing it here. I don't have a specific color that I'm going for. And there's very good chance we're going to be updating this color when we go through our color assets lecture. But for now we're gonna go ahead and go with a similar color like this one here. And I can get exactly this color by inputting this little hex code into your color selectors. So if you want to go ahead and write this exactly down over there, you should get exactly this color. Now using this little plus icon, I can go ahead and add this color to color swatch so you can go ahead and reuse it in other objects as well. So the real, we have a little color for our background. Let's add a text by pressing the t key. And then right in the middle of the page. Let's go ahead and do healthy bytes, which is the name of the company, of course. And I click escape a bunch of times. And then obviously the font size a little bit small. So I'm gonna go ahead and make it a little bit bigger. So it's kind of taking up a decent portion of the screen size, but not too big. I probably want to give it a white fill instead. So by default, you should get this helvetica new font. If not, go ahead and change it over here by searching for this font. We'll also be looking into fonts in the future lectures. So for now, we're just going to creating this as a placeholder until we use our custom fonts. And now let's go ahead and kind of bring this lower. So it's kind of in the middle, but not exactly. So this is right in the middle of the page because these two kind of lines show me that this is random middle of the page. But if I do bring it a little bit lower, then I can kind of create room for my logo here. So I can do a little rectangle by pressing the Alt key. And I'm going to actually do a square by holding Shift and just kinda let that go over their head escaped bunch times to get out of that rectangle tool. And then for the fill, let's just go ahead and just remove it and just have a little border so we know exactly where our logo is gonna go. And I'm just going to bring this a little bit lower. So this is where our logo is going to go. Instead of this little rectangle, we're going to come back and add that as we get our logo designed. But for now, this is our slice screen. We're gonna move on to a login screen in the next lecture. 27. Adding & Masking Images: All right, So now we're ready to design our login screen. I promise you this screens much more exciting than the display screen because it includes a lot more contents are going to be learning a lot. And we're going to learn how to use image masks as well, which is pretty cool for your images. So just go ahead and zoom into that area are here. And from our resources folder, you should be able to find an images folder that includes a login page folder. So go ahead and under the images, find that login page folder and open it up. And in here we see we have two images that we're going to be using in our login page. So what I have in mind is that over here we're gonna have our main content as we have in our wireframes. So we'll have our logo or email and password and login button, as well as the terms of service and everything down here. But what I have in mind is that in the corners right here we can have a little images of some healthy foods. So economic goes along with that theme as well. And of course, for our login button, we're going to use the same green color and simply have an e-mail and password field and should be good to go from there. So going back to our XD, first thing they want to do is import those images into our file. The easiest way to import images is to go ahead and select the images that you want. So you can go ahead and hold Command and select both images here. Now, I gotta give credit to unsplash.com for providing these images. If you want to use free images across your projects, definitely check out Unsplash. They have a ton of images that you can search and use throughout your projects. And so what I've done is I've simply search for healthy food. And so this way I can go ahead and filter by those healthy food options. And so from there I've downloaded these two images and to import them to my XD, I'm going to go ahead and simply drag them into my login page. Now, as you can see, the images are humongous compared to our Artboard. So we're gonna go ahead and simply hold Shift and resize them. And the reason why we're holding shift is make sure we don't mess up the proportions. So we have this one image right here. And I believed my other image went into this order history page for some reasons. So let's go ahead and resize that one as well. And let's go ahead and move it to our login page as well. Whoops. Make sure when you're dragging, you don't go on top of these little buttons. Otherwise, you might actually be editing your image instead of dragging it. So make sure you're in the middle or somewhere where there's no node. So what I wanna do is go ahead and actually crop these images so that we just have the plates instead of the background. And the easiest way to do that, because these balls are kind of circles, use what's called an image mask. So to actually mask or images, we can go ahead and create an oval shape. So let's go ahead and press E and create a perfect circle by holding Shift and dragging across and then letting go. Let's go ahead and escape out of there and just make sure that this is sort of on top of that ball. And at any point I can bring the appearance down to make sure that it is on top of the ball and it looks like it is. And so now we can do is go ahead and click on the circle as well as the image. So hold shift and make sure you have both selected and then go to Object, Mask with shape. And there you have it. So the image has been kind of crops into just that area. I can still go ahead and double-click into this and edit the image and move it around. But this is essentially the easiest way to create image masks. So it looks like I haven't fully masks that properly. So if you do see that you still have areas like this black border here, that's actually not part of the border because we don't have any borders right now. So if we take the border out, that's still there, we can go ahead and double-click and read Justice circle to make sure it's a little bit smaller than the image. And so this way, when we do crop in it, we'll go ahead and remove whatever is on the outside. Cool. So there we have it. We're going to go ahead and select this and just make it a little bit bigger and place it maybe down here. And then let's do the same thing over here. Creating an ellipse. Go over the plate, is escape out of there. And let's go ahead and select both. Go to Object Mask with shape. You can also achieve this by pressing command shift M. And that will do the same thing. Cool, and let's go ahead and make this bigger as well. So now this entire layer, as you can see, it's called a mask group. But similar to our Boolean shapes, we can still access both the circle that we have and the image underneath as we expect. So we can always go in there and tweak the image and make it bigger or smaller and then go back. And we'll make this a little bit bigger and leave it there. So let's come back in the next lecture to complete our login page. 28. Login Page: Right centrism, the login page, I do want to leave it with a white background as is. And then we're gonna go ahead and add our email password. And then a logo over here with the login button. So let's go ahead and add those elements in now. So we need a rectangle and a text for our email box. So let's go ahead and do that by pressing R and then dragging a little field over here. I'm gonna make this one about 50 pixels in terms of the height. I can see that right here. And then I'm gonna go ahead and exit out of there by pressing Escape twice and then hitting texts and adding a little email texts over here. And I think this is a little bit big. So we're going to do 16 points for the email center that are a year and maybe do 20 pixels sort of n to the desert email text box. And we're going to put it right over here. And then using Command G, We're going to make this a group and duplicate the group by holding Alt and dragging a copy away. So this is another way to actually duplicate objects. You can hold Alt and while holding Alt, create another copy of that object. I'm just going to delete that extra one. And let's go ahead and name the email here to pass words. This is going to be the password field. And then we want a button. So we can actually go ahead and use the same rectangle. We'll just bring it down here. And instead of this text ping here, we're gonna go ahead and move it to the middle. And we're going to call this one log n. And so one thing to note is that as your text grows or shrinks, It's not exactly in the middle. So what you wanna do is adjusted after you've entered your text and make sure you have this centered text option here so that if you do end up typing more, the texts will stay in the center. So we have our button there now. So we want to change the fill or the background of this to that green color, but make sure you don't do it at this level because right now we're editing the group instead of the rectangle itself. So if you do add a fill at this level, you're actually adding a fill to both the text and the rectangle, which is not what we want. So what we want is a white text and a green rectangle. As we do that, we hold command, press the text, change this one to wait, and hold command. Press the rectangle and change this to green. Maybe I'll make my text a bolt so it's kind of more credible. And we'll also need these over here. So let's go ahead and select these from our splash screen. Hold Alt again and bring this over to this page. So we just drag the copy by holding Alt ahead and make a little bit smaller holding Shift and bring it up here. And let's go ahead and change the text here from the weight that we have two black. Lastly, we want to have our little Terms of Service here. So let's go ahead and create a new text, right, terms of service and privacy, policy. And escape out of there. And bring this a little bit to the left side. And as you notice, I'm keeping my things aligned here. So it's very important that you make sure everything's the same size and everything is aligned. And so that is visually correct. Let's go ahead and change this 21 font size to 14. We don't need this text to be super big. And in fact, we can bring the fill down to sort of a light gray color. And let's go ahead and just bring everything down a little bit. So it's not fully on top of each other. Thing is slowly coming together. Let's do a couple of small changes to make this look a lot better. First of all, I recommend doing rounded corners when it comes to text boxes and buttons, um, and also removing the harsh borders around the buttons at least. And then for the text boxes, you can totally go ahead and make it a little bit more subtle. So two things here. First, let's go ahead and remove the border from the button. So that button has no border anymore, which is good. Let's go ahead and select the rectangle here and bring the corners and to have a corner radius of, let's do 10 and then apply the same thing here. So I'm gonna go ahead and select just the rectangle here. Again, in your Layers panel, you can make sure you only select the rectangle as opposed to the group. And do the same thing over here. I'm just holding Command to select both layers. Then I'm gonna go ahead and type in a 10 pixel radius here. And instead of this kind of harsh, kind of darker gray border color, Let's go ahead and bring it a little bit down to maybe around this color, maybe a little bit darker than that. I think this looks good. So we're slowly getting there. Obviously, there's still a lot of work to be done. One other thing you can add, for example here is to duplicate this little text here and maybe put it here. So we can have a little forgot password option and just go ahead and align that to the left or the right, Sorry, printed down a little bit. Bring our button down a little bit. I think that looks good. One other small thing is that we can go ahead and both the text here, the privacy policy in the terms of service. We can even go ahead and underline them by hitting command you. What we have that portion of the text selected so that we can show that these are links to the user. Let's go ahead and just move this image a little bit too close to them. And I think that looks good. So there you have it. That's the login page. And in the next lesson we're going to come back and work on our phone verification page. 29. Phone Verification Page: All right, We've put together the splash screen page, the login page. We're moving forward with our phone verification page. Let me go ahead and zoom in using that key and then drawing the Our view is quit out of that zoom mode. For now, I'm just going to quickly go back to my wireframes. All right, so I've got my wireframe open here. So what we want in here is maybe a text to say this is the phone verification with a little description of what they gotta do. Of course put there for number 4 verification, as well as a little text field and a next button. So this should be pretty simple and straightforward. We just need two lines of text. A textbox here that we can use from the login page and a next button. So we can also use the same login button and we'll just put it over here for the next. Let's go ahead and do that in our artboard for foreign verification. So to start, I'm going to go ahead and select my email field, as well as my login button. I'm holding shift here to select both of them. So you can see both groups of field and buttons are now selected. Let's go ahead and hit Command C for copy. Go to our phone verification page and press Command V. Two things I want to tell you first one, when you do copy something and the select another artboard and go ahead and paste those items in that artboard. Icsi will actually place it exactly where those objects were in the other artboard into the new artboard that you're pasting it in. So that's why it exactly P set our items exactly where I've had it in this page. So that's pretty useful if let's say you're pasting similar items that you want in the same position, instead of having to move it around and place it in that new position. But because as you can see in our wireframes and we have those, feel them but in the field kind of at the top, the button at the bottom. Then we're going to go ahead and just move that around. So we're going to bring this fueled up until we're about maybe a 140 pixels are actually a 170 pixels. We have some space for our phone verification texts. And let's go ahead and bring this button down until it's about. Let's do 35 pixels from the bottom. And again, while you're dragging items, XD will show you that little pink and blue line with a number that shows you how many pixels you are from the bottom or in relation to other objects. And just as a reminder, you can also hold Alt to double-check all sides. So now I see him in the middle. I have 29 pixels on the left, 29 and the rate, and 35 from the bottom. So sort of in the middle here. If you do have your button, let's see over here. And you want to center it again. You can use that horizontal align center. And once you click that, it will go ahead and center that button in respect to the artboard here. Same thing over here with this field. I can see I'm in right in the middle, so that's exactly where I want to be. But let's go ahead and change this email texts to phone number. And let's go ahead and create another text by pressing T on our keyboard. Writing phone. Verification. Now because the last text say created was white and fill, that's where you can't see the text is still there. It's just because it's white and the background is white. It's kind of blend the end. So let's go ahead and choose outfile two. Let's do like a green color here and go ahead and save that to our color swatches as well. I'm going to onboard that by hitting Command B. So you can use a regular font-weight and then go ahead and bump up the font to 25. Perfect. Let's go ahead and bring this up here. So we have our total for there. And then now we want a little description of explaining why they need to put in their phone numbers. Let's do the other texts this time we're going to create a textbox. Let's go ahead and present t here on our keyboard to create that description. Fueled. I'm just going to let go right over here and let's go ahead and tape. Please enter your phone number to verify your account. So one thing I do want to tell you is that since I'm editing the text right now, if I go ahead and change the text or the font size here, as you can see, nothing is happening. Nothing is changing. And that's because I'm currently in the edit mode. So whatever I took from here on will be a 15 point font, but nothing else will change. So what you wanna do is you want to make sure that either you select all of your texts in your textbox, Go ahead and press escape until you're out of that type tool. And then go ahead and select your entire text box and then go ahead and set a new font sizes. I'm going to do 16 over here. Tray think works well. And I want to just leave that right there. That looks good. Maybe we can bring these down just a bit as well as the phone verification here. And as you can see, things are kinda snapping into place as they're evenly spaced out. So I do encourage that you add a lot of whitespace in your designs instead of trying to cram as much things that you can, it's just good practice. And last thing we're gonna do is go ahead and change this login to next. So when they press Next, it will go ahead and then ask them to enter the verification code for the phone number. We won't be designing that screen, but it's very close to this one, except you're just asking them to put the verification code that they get on their phone number. Feel free to do that as an exercise if you like to. But I'm going to go ahead and skip that for right now. So we have a little phone notifications page now. Very simple, very straightforward. And in the next lecture when it come back and just organize our artboards a little bit because right now they don't really have any orders. So let's come back in the next lecture and work on that. 30. Organizing Our Artboards: So when we started creating our art boards all across, explained that we're going to come back and organize it a little bit because right now it's just sort of in a random order or in the order of the pages that we wrote down in our text document. But now I do encourage you to go ahead and organize your artboards in a way that makes sense to you, makes sense to your clients and it's just readable if someone from the outside opens this project up and is trying to make sense of what goes where. So the best way to do this, the easiest way, first of all, hit Command 0 to zoom out and see all of your art boards. What I'm gonna do is I'm gonna go ahead and separate and group artboards that are relevant to each other. So that's for the best way to make things work. So right now the splash screen and the login page go well together because usually from the splash screen we go to the login page or from this five screen, if the user is logged in, we usually go to the main page and then the login page and form verification are also related because usually after the user signs up, there'll be asked to verify their phone number. So the placement of these three initial screens are good. In my opinion. I think the main page is also good where it is. But what I wanna do is I want to separate the profile and the payment page, put them somewhere together and then the menu and the order slash order progress together. And then the order history should also go with a profile because it's going to be accessible from the profile as we kinda drew in our wireframe here. So let's go ahead and do that. That's move the profile menu just up here. A little bit of spacing. And then the payment should also go over here because it's accessible from the profile page slash menu page. We're gonna go ahead and bring order history up here as well. And then let's go ahead and select all these three and then bring them right over here. So now there's a bit of a relation between them where you go from the main page to the profile page. You can open up the profile page. And from that profile page you can go to the payment and ordered history page if you want. And then from the main page you usually go to the restaurant's menu. From the menu page you start ordering and then from your order page you can see your order progress. So this kind of flow makes more sense. Feel free to also add a text if you want. So we can, we can totally go ahead and add a text tool within our pasteboard, which is essentially this area on the outside of our artboards. We can do menu options. I'm going to go ahead and give that a black fill with a font size of a 100. Menu options. Drag a copy using alt here, login, and drag another copy over here. Order ordering. Let's go ahead and just bring these down a little bit. One cool trick when you're moving stuff. If you do press the down arrow, you then you'll go ahead and move things one pixel at a time, or the up arrow, same thing with a right and left. But if you hold Shift while you do that, you'll go ahead and actually do that process by 10 pixels at a time. So it's just much faster to move objects around. This applies to art boards, are objects, texts, anything caught. So now we have kind of organize our artboards in different sections. We have the menu options, the ordering screens, and the login screens, much neater and much more organized. So next, we're gonna come back and create a little navigation structure for our main menu order and order progress pages. 31. Using a Navigation Bar: So we have our pages or the artboards here all organized. Now, this is great. Now I think it's time that we put together the navigation structure. So if you take a look at this wireframe that we put together between these pages of the mean or the location or the address, PJ, payments menu and order. We do have a little kind of navigation structure here at the top. Now of course we can go ahead and place these here. But as I mentioned to you, Apple has that iOS UI kit that you can use to actually paste iOS navigation bars into your project without having to actually redraw it or recreated in your designs. And so that saves us a lot of time when it comes to designing and to get that UI kit. If you follow the last section, we went through it, but we'll go through it again. Simply, you gotta head down to file, Get UI Kits. Once that page opens up, go down to Apple design. It should be the first one here. What if not, scroll down and find it? Because we're designing for an iOS project, we're going to download the Apple design kit. So click on get the kit and then go down here to XD. Let's go ahead and do two things. So one, click Download on this X d option here for the iOS and iPad OS XD design template. So let's go ahead and do that. If you already have it from the previous lectures, you can use the same one. If not, go ahead and give it some time to download. And in the meantime, head on over to fonts. And if you don't have the Apple fans is also a good time to go ahead and download the SF Pro, which is a font that Apple uses by default in their apps. So we're gonna be using that SF profiles as well in our app. So let's go ahead and click. Okay, there are different variations of this sf font. There's an SF compounds and acids, mono, and other ones as well, but we're going to be sticking to just the SF Pro. So first thing for the iOS 15 design template, go ahead and go through the installation. As of now, you should have these two opened up. And are these pages might look different in Windows, but you should still be able to get the iOS 15 design template as well as an SF profiles package that you can go ahead and install. So first I'm going to go ahead and install the fonts by just double-clicking this one or here. I'll go ahead and take you through a little install, peach, which is pretty straight forward. And I Watson stunning. And go ahead and close this one. Move to trash. And let's go ahead and now double-click into our iOS 15 design template. Now let's open this one up over here. It's called design templates plus components plus guides Plus iPhone or iPhone dot TXT. Open that one up. Now it might take a second to load because it's large file. But once it does load, we're gonna go ahead and find a navigation bar for our mockup. And there you have it. So we wanna take one thing from here, which is the navigation bar. So let's go ahead and zoom in to the bar area over here. And we have are these ones here, specifically looking for this one right here, which is the one we're looking for. We have a bunch of different types as well. So we have a little search, one that we can use for our main page. As you remember, we have a little surge one here, even for our location and we can use that textbox style navigation. So why don't we go ahead and switch back to the apple kid here. And let's go ahead and select this one right here, as well as this one right here. So I want these two as well as from up here we're going to select this one too. I'm just holding Command and Shift select this one as well. So now we have these three selected. Let's go ahead and copy. Switch back here. And just on this side over here, I'm gonna go ahead and paste those n. Go ahead and just drag these out here. Just for the meantime. All right, so we're probably going to use this one over here for our main page. So let's go ahead and copy and paste that in there and drag it to the top. And we probably want actually the same one for our menu page as well in case you need to search sort, do Command C, paste that here in case you want to search for certain menu food items. For our order page though, we can do this one right here. We don't really need a search bar for over there. And then for the order progress, I'm going to copy this one and also paste it in here. Because then these pages, we don't really need to search anything. We don't need that search bar. And then under profile, we actually want a custom navigation there. We don't really need a navigation bar. And here, what we can copy this one right here into these two pages, the payment page and the order history page. As we're going through our designs, we're going to go ahead and change those titles and everything all across the Don't worry about it right now if you if you're wondering why we're leaving it as is for now, we just want to put the whole navigation structure together. Now we have the navigation structure on all the pages that I want, with the exception of a few pages that I don't think we needed, such as a phone verification and the profile page, which will have a little exponent here to close that. And as we go through our design, we're going to replace each button accordingly to what it should be. So let's go ahead and come back in the next lecture to continue working on our main page. 32. Creating Card Views: Designing Card Views. This is one of my favorite parts of UI design. So what is a card view? What essentially card view as any of you that has usually an image with a bunch of texts and icons and buttons, sort of like an organized pieces of content that include a bunch of information that's useful or relevant to that page. So for example, if we zoom into this, so I'm back again on mobile design. And if I scroll down to, uh, let's see this order page over here. You can kinda see this right here is a card. Essentially. It might not have much of a divider between the different ones, but you can totally create cards where it has a full divider and a shadow and everything with a border or just something like this where you have an image, bunch of information in here, as well as it could even have a button in there. So this essentially is called a card view. So in this lecture we're going to be designing one for our restaurants. So this is where we'll be able to browse restaurants that are displayed in that cart. Going back to my wireframe, we do have that pH here in our main page. So as you can see here, I kind of tried to sketch out this sample card here. And in there we want a title or slash the name of the restaurant. We want a little rating to show customers what the reading of the restaurant is. And then we want a little price and the type of food that they serve. So in this lecture, we're going to put that together in a nice little card UI. So let's go ahead and switch back to XD and zoom into our main page here. And using R, I'm going to go ahead and create a rectangle. Right over here. I'm going to do one that's about maybe 200 pixels high. And Let's go ahead and escape out of there and just measure the distance and that's not quite in the middle. So I'm going to use the arrow key to center that and that's pretty centered now. So that's my little card. I'm going to go ahead and place a bunch of texts in here that we want. So I'm just going to take some notes on the side over here. We want the type. Let's go ahead and change that to 14 font size. So we wanted the type of food. We want the name. I'm just gonna go ahead and left align this here. Whoops. I want to put this in my piece sports, I can just write what I want reading as well as the price range. So these are the four things I want. So I'm going to go ahead and create a textbox for each of those. So the first things first we're gonna do the restaurant name. So using the t here, I've created a textbox here. I'm gonna go ahead and exit out of there and place that somewhere over here, I think. And a row below it. And we're gonna do $2 signs just to show what kind of price range the customer can expect. So that's our price range. We want something for our reading. So why don't we go ahead and duplicate this one and do just as a sample, you can do 4.5. And then in the brackets we can put the number of people who have given this a restaurant, how many readings? You can bring this on the side? And I'm thinking we can place a little star icon over here as well. So when we are going through the icons, we'll come back and add this as well. Just gonna go ahead and space it out a little bit. And then these texts, I actually wanted to be 12 pixels. And the restaurant name, I want it to be 16 pixels for the font size. Lastly, we just need the type of food. So why don't we go ahead and place that on the right over here. So we can do just as an example, Italian for the type of food. And I'm gonna go ahead and just align that so it's 14 pixels from the right. And I'm thinking in the background here we can have a little image of the restaurant. And then we're gonna go ahead and actually input some data into this page. So it's not just a place holder like these over here. So let's go ahead and get rid of this now. So that's our little card. Let's go back in the next lecture. Input some real data and polish that up. 33. Polishing Our Card View: All right, so we're ready to polish our card view here. So we're gonna do a couple of things. I'm going to go through them. So feel free to go through the same steps with me here. And then I'll explain exactly what we're doing. So the first thing I'm going to create a rectangle, and here I'm going to use this to show our restaurant image. Then I'm gonna go ahead and just bring these texts down a little bit so they're kinda centered along that other bar. And then we're gonna go ahead and just align this one with these texts over here. Perfect. I want to take my alignment, make sure we're around the same number of pixels from each side. And again, I'm using alt here. So I'm going to round our card view here. So let's go ahead and click this little, this little rectangle that's holding everything here. And then we're going to go ahead and round the borders to, let's do 12 pixels. And then we're going to just do the same thing but with this rectangle for the images. But except we're going to only do it to these top two corners. So let's go ahead and hold alt. What we also tweak those two. Let's do 12 and 12 over here. I can see those array here as well, and I can tweak them from here. I think that looks good. So now what we wanna do is, first of all, I'm going to go ahead and make sure my border is very light by bringing the opacity down to maybe somewhere around here. And let's go ahead and just save that to our color swatch as well in case you wanted to use it later for these texts. Let's go ahead and first of all, on bolt them by pressing Command B. And we're only going to bold the smaller text down here so that there is a little bit more easily readable. And from the resources that you've downloaded, you should be able to find a little icons folder. And inside of that Icons folder there should be a main folder that you can open up. And then from there, this little icon here, star dot PNG. So we're gonna go ahead and import the startup PNG. And here this is go ahead and just drag it in. Now the size is way too big, so let's go ahead and first of all, let's go ahead and change this to 20 pixels. Actually, I think we can do 16 by 16. And let's go ahead and bring that in here and just readjust those. So everything's kind of aligned here. I'm going to go ahead and group these two together by hitting Command G while selecting them. Let's go ahead and actually create a group out of the whole thing as well. By pressing Command G on everything, make sure you have everything selected. Now this one here is just my navigation bar, so you don't need to select that one. There we go. And now we have a polished up Card View ready to be used and we're ready to add some sample data to it. But before that, let's go ahead and use a repeat grid and drag this vertical Repeat Grid 3 times. So we have three copies of that group. And so now we can actually go ahead and input three different restaurants in here. So let's come back to in the next lecture to input some sample data in here. 34. Inputting Sample Data: If you're ready, let's go ahead and input some sample data for our restaurant Peach here or the main page. So before that, I'm just going to go ahead and move this whole group up a little bit or repeat grid up. I think that looks better. So now I have 25 pixels from the navigation bar, which looks much better. So here's the really cool thing about Repeat Grid. When you use it to repeat objects and you can kinda see the power of it. You can actually go ahead and input data very easily. If you have a text file that has the sample data that you're working with. So if you open up your resources for this project and you go down to the folder sample data. Onto the folder sample data, you should be able to find the restaurant folder. Go ahead and open that up. And in each text file, there's a different set of data. So there's one for the names of the restaurants, there's one for the pricing, one for the readings, and one for the restaurant tape. And these are all in order. And so what we're gonna do is actually easily use this text file to generate that sample data. So instead of having to open it up and copy and paste each text, which we can totally do. Input and go and repeat that process. There is a much faster way to do that using the repeat grid. And that's by actually going ahead and dragging the text file in here. And I'll show you how to do that in just a second. Let's go ahead and first, undo that. As we would just have restaurant name with a bunch of restaurant name here. So what you wanna do is you want to have these text file is opened up. I'm just gonna go ahead and put it on this side over here. And I'll just restate my XD here. And now what you can do is you can simply go ahead and drag this restaurant dashed names dot TXT onto your very first restaurant name. And when you like, go, XD will go ahead and actually paste that data in for each restaurant. So if you look at this text file, It's exactly pasted these names. And that's because we've separated them by using the Return key or the Enter and put each restaurant name on a new line. So xc is already figured out how to actually go ahead and paste those in the right place. And so now we can repeat that process for the pricing by hovering over the dollar sign text. There we go. The reading. There we go. And finally, last but not least, the restaurant type. So now everything is pasted as expected and we have a set of sample data gonna go ahead and resize my exterior. There's just one thing I noticed is that our text file here or our textbox for the tape is not the right aligned. So let's go ahead and write a line that so that it's aligned to the right side. Note in the center, It's really important to keep things aligned so that you look visually correct. And lastly, I'm just going to go ahead and input the right images for each restaurant. Under the images, you should be able to find this main page folder. And now we can do the same thing, but now with our images. So we have three images here, each for the different restaurants. And they're an order as well, 123. So let's go ahead and drag them into this little rectangle in our XD file and not the entire rectangle because otherwise it will paste it in the wrong place but just as top portion. And so now if I go back, that looks a lot better. Now I think we're slowly putting our main page together. So we're gonna come back and complete this main page and go forward from there. 35. Completing Our Main Page: Already we're almost done with our main page here. I think so far we've done great work. We've learned how to create a card view and then use Repeat Grid to actually make multiple versions of that card or multiple repeats. And then we've gone ahead and input data very easily using the repeat grid paste feature in our project. And I hope you enjoyed that feature because it saves a ton of time. Now of course here we only have three restaurants. But if we kept this page going on and on, and we stretched it out and we use, I repeat grid, let's say ten or more times. You can see how much time that would save instead of having to input each data manually. So I hope now you see the value of repeat grid. So let's come back to this page and just finish a few things and just add a few things and we should be good to go. So I just want to double-check my wireframe to make sure I'm not missing anything. The only thing is that we're going to go ahead and change are the cards look good? So we only have to make some edits to our menu bar to have a little icon here for the menu, or to access a profile and then a little search bar that we already have. So let's go ahead and go back to our project. And actually on second thought, I think this navigation bar would actually apply it better. So we can have a little large title and so the small one. So let's go ahead and copy that one. Instead. Delete this one out of here and copy this large title navigation bar. And then we can go ahead and delete this action. Will leave that action because that's where we're going to put our menu icon. And we're going to go ahead and just resize. I'll just go ahead and move these up. Actually, we'll leave that one. Just move this up a little bit and go ahead and resize that. And instead there's large title this rate restaurants. And let's just shift this down by hitting Shift and the down arrow. So we have a spacing of 25 pixels. I think that looks good. And instead of this action's go ahead and create an icon for the hamburger menu. So for that one we just need three lines so we can use L to create line. And let's go ahead and create three lines that are 30 pixels wide. Going to exit out of there and then use Command D to duplicate that line. And then I'm going to hit Shift down arrow to space it out by ten pixels. And then I've done that one more time. So we have three lines. Let's edit those three lines by setting a border of two pixels. And let's go ahead and click this little round cap. And now we're gonna go ahead and bring this in here. And instead of the action, or it can go ahead and just remove the action. And just have these lines and I'm just selecting them all together and then hitting command G. And I'm going to rename this group Berber menu icon. And let's change the border color to the green color that we have for our app theme. And it looks good. Thing if you go a little bit less wide, Let's hit, let's select this guy group here. Actually, let's use command and the arrow keys to shrink the width. So this is a little shortcut where you can actually edit the width. And by holding Command and pressing right and left. So I'm just pressing less left to do 25 pixels. And then let's go ahead and change this size, two or three pixels instead. That's the border size. And I'm just gonna go ahead and just write a line that make sure it's in the correct spot. One thing I do want to note is that that icon here is actually not inside of our navigation bar here. So our navigation bar here is actually an instance of a component which we're gonna talk about in just a second. But because this is an instance of a component, we can't directly pieced an icon in here, and it won't be included in part of that instance. So it is separate. So if you do move this around, this one, move with it. So we could do something like group these together as a temporary fix. And so now it's related to each other, but other ways, That's why you can't input new items inside of an instance. You can only input new items inside of a master component, which again, we'll talk about in the lectures that are upcoming. As an RV zoom out. I have a nice little restaurant page and now we're ready to work on our menu page so that as a user clicks on a restaurant, it will go ahead and open the menu for that restaurant. So let's come back in the next section and do that together. 36. Components: So what are components? So we've been talking about them a little bit here and there. But we never explored what they do and how they're useful. So in this lecture, we're going to go through how you can actually use components to speed up your design work when it comes to reusing objects or groups within your designs. So on a high level, components are essentially objects that you reuse throughout your design, where they have some sort of shared element among them. So that when you do need to use an object in multiple artboards are multiple places. Instead of having to redesign them in each page. Let's say if you need to make a change, you can actually change them in one place, which is usually called the main component. And then have them change in all of your instances, which are the child of that master component, which is called instances in components. So if we look throughout our design, things such as input fields, buttons, navigation bars like these ones, are typically turned into components. And the reason being is that we've used it in multiple, we've used them in multiple locations. So let's say I decide to make a change, a small change to my button here and change the background color, the background color, or the size of the font, or the placement of the texts. Of course, right now, let's pretend I need to change the background of this button. I'd have to go in two places, set a new color, and then copy that color-code, go to the other button, and then go ahead and repeat that process for every in him that I have in my design. I'm going to just undo that. I was just driving demonstrating what life without components would be like. So we'll go ahead and turn those buttons into components in just a second. But before we do that, let's go ahead and see what components we already have in our artboards. And that's actually the navigation bars here. And so the reason why you see this green border around this navigation bar is because it's a component or instance of that component, we can actually go ahead and browse over components under our library. So if you go to the library, the shortcut hit Shift Command Y. We can see all of our components here. Now of course we haven't created these components, but what's happened is that when we dragged that navigation bar into our project, we've gone ahead and actually copied them as components from that iOS design project. So all of these are components and there are actually contained within this area where we piece it or navigation bars, not these navigation bars that we pasted or all instances. Now when it comes to components, how can you tell if a component is the main component or whether it's an instance where an instance with override will essentially you can look at the corner diamond on the shape around the green border. On the top left, you'll see a little diamond trigger like this one. The one that's felt like this is the main component. So any changes you made to this component will go ahead and apply to the instances. And speaking of instances, your instances will have an empty or an unfilled diamond shape. And then if you go ahead and make changes to a specific instance, so you override those changes and add those properties such as the text inside or the objects, then you will see this little shape with a circle in the middle. So that means you've over written the properties of that instance. So if we go back, we can see we have this one right here that will be overwritten because there were some changes made to it. We see this one where it's just an instance. And so we don't actually have the main component. And so the way to actually access the main component for these ones is to go ahead and right-click and click on Edit mean component. And so now this is the main components for my navigation bar. So any changes I make to this main component will go ahead and apply to other instances. So as an example, if I take the large title here and let's see, I make it 25 pixels. It will go ahead and apply to both. Grow here. If I move the search bar, will go ahead and apply to both. For you, remove the title. We'll go ahead and apply it to both. Now of course, if I go in here because this is an instance, if I go ahead and actually delete something from an instance, now, it won't be deleted from here because this is our main component as you can see. But because now we've overwritten that instance, we get that little shape and the corner, which means that now we've overridden or instance. So if he start editing things in here, nothing will be effected in here because again, this is our MainComponent and changes only work one way. But what will happen is that the instance will still share certain properties. So if there are still certain things present inside of this instance, it will still go ahead and make those adjustments such as the positioning of these items. But of course, if I go ahead and change this large title, nothing will change here because we've already overridden the text inside of that text field, but not really its position. Now if we do edit his position as well, we'll see that if we move this around, nothing will happen to the position of this and text here because we've overridden both the texts inside and the position now. But we can still change things such as fill, which will still apply unless again, we go in our instance and change that color as well and override it. So any type of override in terms of position Phil, effects, so on and so forth that we make, we'll go ahead and apply to our instance unless we go and override those properties. But if I want to go ahead and actually remove those overrides, I can actually go ahead and click on this instance and then do Reset to main state. And so what that will do is it will go ahead and change those properties back to what we had in here. And so now those overrides are gone. We can see in the instance that shape is now back to just an instance without any overwrite, this will make more sense as we start actually turning or buttons into components. And if you have any questions, please do ask along the way. So hopefully that makes sense. I'm going to undo that a bunch of times to go back to our navigation bar. As we had it before. There we go. That's components and hey, can actually create instances from them and overwrite them. Let's come back in the next lecture and turn those buttons into components. 37. Converting Our Buttons to Components: Okay, so now that we know what components are and how they are so useful, let's go ahead and convert our buttons into component so that we can reuse them across your project. So that later on if you do decide to make changes to them or make different variety of buttons, we can use them more easily without having to change them in multiple places. So I'm gonna go ahead and just zoom into my login page over here. Go ahead and escape out of my zoom tool there. And what I wanna do is go ahead and convert this button, which is already in a group. So if you do remember, when we were designing our login page, we converted or rectangle here, which is the background of the button and the text into a group. If you haven't done so already, you don't need to worry about it. Just make sure you have both the background and the text here for the login selected because that's what part of the component of the button itself. And to convert this into a component, you simply go ahead and right-click on it and hit Make Component. As an alternative, you can just hit Command K on your keyboard or Control key on Windows. There's multiple ways to tell that this is a component now. So first you can see that over here we have a little diamond that's filled, which means this is the main component. And over here on the Properties panel, there are also says component and in the brackets mean. And we can go ahead and create, and this is the default state of the button. We can go ahead and create multiple states, which we will in the future lectures and also in our layers panel you can see this little diamond shape. So those are indicators that this is now a component. And because it's a filled diamond again, we can see that this is the main component. So what we wanna do is actually place our main components somewhere separate from our designs. And the reason for that is that this way we can know exactly which ones are the main components and which ones are just instances of that component. So later if you want to make changes to this button instead of coming to the login page and making changes here, we can make our changes outside where we have our components and then go ahead and simply see the changes take place all across your design. So let's go ahead and now drag this main component out of our login page. And I'm going to go ahead and just place my components in the corner of my art board here. So somewhere over here. And we can go ahead and even drag a copy using all of that text here and title this our components. Oops, there we go. Just going to go ahead and align that here. Like keeping things in line so that it just looks visually better. So while we're here, I'm gonna go ahead and do two things. One is that I'm gonna go ahead and change this login text to just button. And the reason being that now that we've made this a generic sort of button, the text here shouldn't be anything specific. So it could be something as general as a button so that in each instance we can go ahead and edit that text. And so that's the first thing. And the second thing I want to do is I'm going to go ahead and click on our libraries over here. And now you see this little button. Now I see this button is called component 14 over here. You can kinda see a little thumbnail of it. So we know that this is a button and drag that component 14 into our Artboard. We'll see we've created an instance of it now, but we don't need that renounce. Let's go ahead and rename this by double-clicking on this component 14 title here and change it to just save button. Perfect. And so now if I go back to my login page, I can simply go ahead and drag instance of that button into my login page. Go ahead and just align it over here. Make sure it's nice and aligned. And then let's go ahead and now change our texts by double-clicking into it and writing login as we had before. Where do the same thing. I'm going to hit command C on my instance here and go ahead and go to the phone verification hit Command V. Let's go ahead and change the text of this to, you guessed it next. Let's go ahead and get rid of this group that we have for the button, because this is no longer an instance. This is just simply a group of rectangle and a layer that we have. Let's go ahead and just drag this out. Let me just check the spacing so it looks like we're at 35 pixels from the bottom. Now we're going to go ahead and delete that and move that over two are the same position for that button. So now we're using instances of that component. And as you can see, there's a little dot inside of this diamond shape, which means that this is an instance with some overrides. And that override is that texts that we just change. So as an example, if I go back to my button and all of a sudden I decide that I want my button to have, let's say a blue background. I can simply go ahead and change the background color here to, let's say you blew my button. And if I click away and go back to my designs, I can see that those instances have also taken up property of that background color. And so this is really why it's useful to use components for things that you do. Repeat your designs, like these buttons, like the text fields over here. And so now with that said, I do want to give you an exercise to turn these text fields into components and go ahead and create instances and drag them to the same positions over here. And we'll do that together in the next lecture as well. 38. Components Exercise Solution: All right, first thing I wanna do is actually go ahead and just redo that color change for our buttons before we jump into our exercise solution. So let's head on over to our component. Double-click to select the rectangle and change the fill back to that green color. If you don't, if you haven't created a swatch for that color, go ahead and input this hexadecimal point into your color picker and click this plus icon to add that color to our color swatch. And so this way we can easily access it. Perfect. So the exercise was to turn these text fields into components instead of just groups here. And so we're gonna do that really quickly by simply duplicating this text field outside using ALT. I'm just taking this back to my components section here. And I'm going to go ahead and hit Command K to turn this into a component. Let's go ahead and make sure you have your libraries opened here and rename this to text field so that we know what this component is regarding. And while we're here, let's go ahead and click this e-mail field and let's go ahead and type in, Please. Please holder, there we go. Just a single line. Let's go ahead and create instances in the login and the phone verification page and replace it with these groups that we have. And we do that by simply going to the library's page and dragging a text field onto my login page. And there is another way to also create instances without using the library panel. And that is to actually go to the component, to your main components. Go ahead and hit copy. By hitting Command C or Control C on Windows. Go into your login page and then hitting Command V. And so what that's done is created an instance of that text field in our login page. I'm gonna go ahead and change the text in here to email. And I'm going to go ahead and drag this here and then create another copy of that instance over here and change this to password. But of course we do have that group, those groups of the email and password text fields under these layers. So let's go ahead and get rid of those as well by heading on over to our layers. And I believe it should be this group 2 and group 1, which we can kind of see because it creates that blue highlight. So let's go ahead and click both of them by holding Shift and hitting Delete. There we go. So now we have instances of those texts fuels. We could do the same thing by copying an instance into our former education and changing this to four number. And doing the same thing and deleting this group one. Perfect. So now we have instances of those text fields. And let's see at any point with the site to, for example, make the color of this placeholder text a little bit later. Like so to this color over here, it will go ahead and apply to all of my text fields. Perfect. We'll take a quick break here and then we'll come back in the next lecture to work on our menu page. 39. Menu Item Cards: We're ready to work on our menu page. So this menu page, not to be confused with the profile page slash menu page there. This is our restaurant menu page. So what we want in here, if I quickly switch back to my wireframes, here is simply menu that separates the categories of items, such as the drains and the mean, courses, dessert and all that into different sections with cards that display those food items to the customer so that they can go ahead and browse what the restaurant has. And this way they know they can pick what to order from there. As we're presenting our menu page, we're going to use two important tools in XD. One of them, which is what we learned already, which is the components. We're going to use components for these cards here for the food items. So if you want to reuse them, Let's see in our order page or Progress page or anywhere else, we can simply go ahead and drag instances instead of having to redo that. So we can also make different states for them as we designed the components. The second thing we're going to learn is how to use stacks in xy, which is super useful. So in a table view like this one where we have items after items, also similarly to the restaurant's page here, which is a TableView of items or restaurants. In this case, stacks is a useful tool, similar to the repeat grid, but different in some ways. And I'll show you how that works so that you learn how you can use different tools to create those kind of use. So without any further ado, let's jump in and work on our menu food cards over here. Since this page is mainly composed of that as well as the different categories which will create those sections as well. So first, let's work on our food cards, and then we'll go ahead and design the different sections. And then we'll go ahead and wrap up the whole page as well as use stacks to organize our items. So let's switch back to XD. The first thing I wanna do is go ahead and create a component for those food items based on what we need. Before doing that, let's go ahead and write down everything we need in our cart view so we can go ahead and easily design those text fields and images. So of course in here, we'll need an image of the food. So that's one thing that's missing from this list, but it's kind of implied that there will be an image of the food here, as well as the name description, price, calorie, and a plus a minus bi. So let's go ahead and make a note of that by simply heading on over to our components section in our designs. And I'm going to hit T to create a text field. Drag here, make some notes by rating image. A little bit dark for my texts here. So I'm going to go ahead and make it black. Let's go ahead and write image. Food, slash item, name, description, calories, buttons to add slash, Remove item. Is that I believe that's everything and the price, of course, yes. Let's go ahead and add price. So these are the five pieces of data or contents I need in my cart view. So first let's go ahead and create a rectangle for the background of my card view. And I'm going to make this rectangle about a 100 pixels in height, in 325 pixels in width. And you can see that from right side over here, you can go ahead and tweak these as well. I'm going to go ahead and zoom in here and just bring this text over here. Let's zoom in and decide what to put where. So the first thing I wanna do is actually give this rectangle a similar style as my text field over here in terms of the roundness or the borders, as well as the color of the border. Now if you remember how we do that, we simply go ahead and click on our rectangle here, make sure you have the rectangle selected and not the whole text fueled component. Hit Command C. And I, go ahead and click your rectangle here and hit Option Command V. And as you can see now we have the same styling. Perfect. So what I'm thinking here in terms of the image is going ahead and creating kind of an image over here for our food item on the left side. And then on the right side we'll go ahead and list those texts. So let's go ahead and duplicate this rectangle by hitting Command D. So now we have two of them. And I'm going to go ahead and shrink this one by dragging from this side. That's all I have a width of about one 35. One thing I do want to note is that most images have a ratio of four to three. So typically, when we're creating images or adding images to our design, we wanted to actually be that four to three ratio. So if you want to be precise, you can simply search for a ratio calculator on Google. And then I'm going to go ahead and click on the first link. So if you want a 43 aspect ratio, then we know our height here is fixed, which is a 100 pixels. So going back here, or height represents the three over here. So we want to calculate to see what C should be. And as we can see, it should be 133 pixels. So that will give us a 4 to 3 aspect ratio. And so if we go back, I have 135 here. I can use command and the left arrow key twice to shrink that to 133. So now we have pretty much almost a perfect four by three aspect ratio. And the reason this is important is that as we drag images into our card here, almost like they look descent without it being stretched or looking like it's the improper size. One of the things I wanna do here is go ahead and click on my rectangle. Go down to these two corners that I have and use Alt to set these to 0. So make sure you're holding old to drag those corners back to 0 roundness. So we have our image and then we're gonna go ahead and write our other text. And here, as a to-do that, we're going to quickly create a bunch of text field. So the first one will be item name. I want this to be 10 pixels from the top. Now for the description, I wanna do a text box by hitting T, dragging over here. So if you look right over here would look good. I go ahead and write description. And I'm going to change this fill color to sort of a lighter gray color, something like this. And we're gonna go ahead and change our item name to this color that we have here, which is sort of a dark gray. If you don't have that color, input this hex code and you'll get the same color. Let's bring a description a little bit up and make sure that it has a fixed height until over here. So if the descriptions any longer than this textbox that we'll go ahead and sort of get cut off. So whoever's I'm putting the data should make sure that the description is in way too long. I'm going to go ahead and copy this other text field down here. And we're going to put the calories. We're just going to do 0 calories here. And let's go ahead and do a 10 pixel size for this as well. And put it down over here with the same pixel from the bottom, ten pixels. So we got the image, item name, description, calories, and last two items that we need is the buttons to add and remove this item to our order, as well as little price here for the item. I think we can put the price just to the right of the calories over here. So we can go right over here and put just as an example, dollar 000, since this is just a text field, that looks good. And lastly, we just need our buttons to add and remove this item. So we'll take a quick pause here, come back in the next lecture to work on those buttons and turn this into a component and complete our menu page. 40. Creating a Button Counter: So because this button here to add and remove items as a bit more complicated than a normal button, we want to show the customer who's using this app the ability to not only add and remove items, but also see how many quantities of items they've added to their order. So we want to make a unique designed that it works well and it's also functional. So I'm just opening up my notepad here to do a little sketch on my phone. You can follow along if you'd like, or you can just kinda see what I'm doing here. So I'm gonna go ahead and just take my pen tool here in this notes app that I haven't opened up. So what I wanna do is of course we have the right side of our card, which is sort of I'm going to visualize like this. So what I wanna do is go ahead and show them the number of items that they have over here. So let's say they have two of those items at it with a little plus and minus icon over here, or buttons to lead them, remove or add items to their order. Maybe you do a little rounded kind of shape over here to allow them to add and remove those items. So let's go ahead and work on designing this button set over here in this lecture. So let's go ahead and create that similar design in our XD now. So I have my XD opened up. And what I wanna do is actually create a separate component so that we can go ahead and reuse that kind of counter button. I like to call it in other places in case we need to. So let's go ahead and come down here in a separate just at the bottom of this card view here, I want to create three rectangles by hitting R. And I want to create three squares. And I'm holding shift here to lock the proportions. And I wanted this to be 28 pixels by 20 pixels. Perfect. So now let's go ahead and exit out of the Rectangle tool and hit Duplicate or Command D two times to create two copies. And I'm just going to go ahead and use Shift and the down arrow key to bring that copy down and the other copy as well. And I'm gonna go ahead and just bring that rectangle up so that they're kind of on top of each other like this. Same thing with the one here. And I'm just using the arrow keys to move them around. First thing I want to go ahead and select all of them and change this border color to a lighter border color that we have here. Second thing for this rectangle here, I'm going to go ahead and click this button to separate the border radiuses. Now for the top left and top rate, let's do a corner radius of six pixels. For this rectangle here, Let's do the opposite. So the six pixels for the bottom left and the bottom right. And now I want to go ahead and create a little minus and plus icon. And we can do that by using the line tool. So let's go ahead and click L and draw sort of minus icon here. Press Escape to come out at the line tool. And I'm going to go ahead and give it a size 2. In terms of the border with rounded cap, make sure that's aligned in the center and not to create a plus icon. I'm going to go ahead and create copy of this line by holding Alt and dragging a copy away to this side here. Then hit Command D to duplicate that and rotated by 90 degrees. So now we have two lines. One rotated 90 degrees to kind of create that plus icon. Let's go ahead and give this rectangle a fill of green, the same green that we have. And this one here, I'm gonna do sort of agree color like gray here. You can copy this hex code to recreate the same color. And then for my plus and minus icons, when I hold shift, click all of these lines, make sure you have all the line selected and then change them to wait. And lastly, let's add a little counter in here by pressing T, coming into the center of it here, and writing 0. And make sure you have a 16 pixel for your font size, line or to the center. So that if you do change this number, let's say to ten, it will go ahead and be centered. But of course it's not centered, so I'm going to escape out. I'm going to click Escape to leave the text tool and bring this down until it's centered. As of now we have a little counter button I like to call this R that we can use for our items so we can add or remove items to our order. What do we go ahead and click everything here and hit command key to turn this into main component. And now I'm going to drag an instance of this main component by holding Alt and bring your copy in here with nine pixels from each side. Let's go ahead and drag across everything and make sure that we select everything and our layers panel. And then hit Command K to make this component as well. Head on over to the libraries and renamed this component right here to our item card view. And then this component here too, Let's do. But in counter. Perfect. One thing I wanna do is just go back in here, select this text and give it a fill of that gray color that we have instead of the black. Light can be a little bit hard sometimes for texts. So we do a little bit of a slightly darker color to it, a little bit easier on the eyes. Perfect. And that will apply automatically in here as well, since this is an instance of that component. And there you have it. We have our cart view. And now we're going to come back in the next lecture to use stacks in order to work on our menu page. 41. Using Stacks: So what is stags? How do we use it to make our design process a lot faster and more efficient? Well, I'm going to show you how stacks works as we design our menu page. So I'm going to zoom out here, rid of this text here, and head on over to my menu page. And first things first, I'm going to go ahead and choose a title here to Menu. And then change this action button here to cart, which are going to also do a little icon as well later if you want. And then change this to restaurants. And so this is now kinda relevant. And then down here, what we wanna do is separate our cards by category. So we want categories of lessee drinks, as well as the appetizers, entrees, and so on. I'm gonna go ahead and select this menu page and actually drag it so that it's longer than my view here, we can fit more items in here, 1500 pixels in height. So what this little divider here shows, this is our primary view here. So when we do open this either desktop preview or preview it and our device, this is what the user will see. Anything beyond this will be cutoff unless we make this content scrollable so the user can scroll to see the remainder of the contents here. And you will see that as we start prototyping. But first, let's go ahead and create different sections by hitting T key on our keyboard and writing appetizers. And I'm going to place this here at the top, 30 pixels from the top here. Didn't move it until it's 25 pixels from the top. Now, because I was working on the fonts over here or the texts over here. Xy is gone ahead and given my text as similar styling, which is the 17 pixel SF pro text here. So feel free to go ahead and apply those changes. But in future lectures we'll go over texts as well. But please do make sure that it's a similar kind of font size. The font doesn't matter really at this point as much. We're gonna go ahead and change those in the future sections. Now what we're gonna do is go ahead and drag a copy of that item card view in here. And go ahead and align it to the left as well. And give it a 23 pixel spacing from the left. Similar to this appetizer here. Just going to go ahead and left align this appetizer text. And now one thing you do notice is that the card here doesn't fully fill the width of the view that we have over here. So we'll come back and fix that in a future lecture. But for now, let's go ahead and learn how we can use tags to add more items. So what I'm gonna do to use taxes, go ahead and actually group this appetizer texts as well as this instance. Head on over to our layers panel hears, we can see that. And we're gonna go ahead and group them by hitting command G. In order to use stacks, we need to group items so that XD gives us that option to use that stack feature. So we're gonna go ahead and click on Enable stack. And so now what happens is that this group has turned into a stack. We can kind of see how that works as we start adding items. So right now, our items here, which are only or appetizer texts as well as this item card Vue instance that we have. The spacing is 20 pixels. So now you'll see if we go ahead and click on this instance and hit Command D. We're gonna do that one more time. Xd will go ahead and actually placed those instances 20 pixels apart from each other based on this number that we have here. So if you click on the whole group based on this number, which is 20 pixels, this is what everything's spacing will be. If we edit this and make it, let's see, 30 pixels. Now things will have a bigger spacing or we can go lower and do 15. And I think for our purpose, 15 actually looks good. So now we have a little appetizer section. And I'll show you what this padding option here and why it's useful. So in our stacks, if you go ahead and actually click this little icon, it will go ahead and change our stacks into a horizontal option. So as you can see, it will keep going on and on horizontally instead of vertically, which is cool. If you have anything that we want a horizontal scroll to Brenna, we want the vertical one. So let's go ahead and change that to vertical. And because we've done that, we've moved our appetizer texts here. So we're going to go ahead and move that to the left side of our group here. And so now if I hit Command D on this entire group so that we can work on are on trees. I can drag this down here and I can set it exactly on the bottom of this other group. So the problem with doing this though, is that right now if we go ahead and create more items, my stack for the appetizers, this other section or this other stack wouldn't go down. So what I can do is actually create nested stacks, meaning that I can go ahead and hold Shift to select both of these groups and then go ahead and hit Command G and also turn this into a stack. And so now what happens is that we have a group that has two stacks inside of it. One for appetizers and this one we're going to change the text to entrees. There we go. And so now what you can do is go ahead and add a padding to this onto the stack here. So if I add a padding of 20, it will go ahead and give 20 pixels of spacing from all sides. If I want just the top padding, which is the main case here, we can go ahead and use this little button to create just the top padding of 20. So this way we only have spacing of 20 pixels. And the right and the bottom and the left aren't really affected. And so now we have a spacing. And in this case, now, if I go ahead and add more appetizers, the entries will get pushed down. Because this is a nested stack. Now you can kinda see the value of stacks, especially if you have multiple categories of items. Unlike our main restaurant page here where we used to use the repeat grid. This is super cool. You can use this across your designs and multiple sections. And I do encourage you that you play around with it and see what stack has to offer. So now that we have the setup, we're going to go ahead and select the group for the entrees and duplicate it by hitting Command D. And that's automatically created another stack here for me. And I'm going to go ahead and change this to deserts. There we go. Now we have a bunch of items. We can go ahead and delete this third one over here and just have two appetizers. And we can go ahead and duplicate this one twice to have two more entrees and do one more desert. Or go ahead and hit Command Z to undo that one. And so on and so forth. Everything will get resized properly. Gonna go ahead and just bring this entire group to the centers. So it also looks visually kind of centered, which I think it looks good. And the next lecture, Let's come back and fill or menu with some sample data. 42. Completing Our Menu Page: Alright, now that we have our stacks put in place for the items that are menu, we're now ready to finally fill our mini page with some sample data. So it doesn't look so bland here and get ready to move forward to our other pages. So in the folders for the resources of this project, you'll find two folders. One for the sample data, which is where we also access our restaurants sample data, as well as one for our menu page under images so that we can access some images for our items here. But I'll go ahead and just make a little bit smaller so we can kind of see or folders here. And what I'm gonna do is first go ahead and fill our menu here with the images and then followed by the text. So I'm gonna do it for the advertisers and then for the entrees and deserts, I'll leave it up to you. So for appetizer, let's head on over to the images under appetizers and drag this bruschetta, which is the first one over here. So what you'll notice is that the cropping for the image is not the best. So what you can do is double-click into the image here and actually move it around. So the main part of the food, which is what we want displayed is centered. Perfect. Use Escape key to get out of that item. Let's go ahead and do the same thing for our cheesy filled bread image here. And then for the text here, I'm going to go ahead and open our text file called food dash appetizers or TXT. There's also the deserts and the entrees for you to use. And so from over here I'm gonna go ahead and copy the name of this dish until the item name and then the description over here. And so as, as we mentioned, if there's a description that's too long, XD will go ahead and crop it to that text box that we have. But one thing I'm not super happy with here is the spacing between the description and this counter button. So I'm going to quickly go ahead and go to our components and make sure this description text size, little bit spaced out from the Counter button. So now if we go back, I should look a little bit better. For the calories. We have that over here as well. It's 540 for this one. So let's go ahead and put here. And then the price is 999 as well. And again, as we're putting the sample data, we're seeing some of the issues with spacing. So this could definitely be spaced out a little bit more. So I'm going to hit back to our component and make those small adjustments by moving the dollar icon a little bit over. Maybe 25 pixels. Much better. Gonna do the same thing for the cheesy filled bread sample. Enter the data in. And again, you can still see the same kind of issue with the text here. So over here for the item name, I'm going to change it to a fixed size and then drag this to over here as well. And as we change that to fixed size, I'm going to go ahead and also change the font size to 14. I think that's better. If I go back. Now we can kind of see it's a better sizing. Let's go ahead and change the description here. Perfect at the pricing as well. For this one, which I can see here is a 99. Calories are three, 95. Perfect. So now we have our appetizers. I'm going to quickly, fast forward through the rest of these. But as you get the idea by now and I'll see you in just a second. Now just a heads up, you might get hungry as you're working on this part of the app. I'm not going to lie. Happened to me a couple of times as well. So feel free to take some breaks here to gravity food if you'd like. And there you have it. Gone ahead and copied and pasted everything in here. So I know it's a bit of a tedious job, but our page definitely looks better with real sample data in here. Perfect. So now we have completed our login page or phone verification page or splash screen mean and menu page. And ready to finally move on to our order pages as well. And the profile payment and the order history as the exercise for you. So we're going to take a little break here and come back in the next section to continue our mobile app design. 43. UX Resources: So when it comes to UX and UI design, what are the differences? This is one of the first questions that a lot of new designers asked. And so I think it's an appropriate time to take a break to go through some of the UX tips that I have for you before moving on to completing our mobile design. When it comes to UI design, potentially UI means user interface. So this is the actual application or website or whatever interface that you're designing for the user to use. This usually consists of the visual design, the colors. I'm a graphic designer usually works on this interface. And it consists of the layouts of the objects throughout the page, the typography, really anything that you can get to see and interact with as a user. Now, UX is a bit more complicated, essentially means user experience. This is how the user actually interacts with the design. So not just the visual aspect of it and what it looks like, but rather how they interact with it. For example, wireframing and prototyping has to do more with UX design as you're putting together the experience for the user and the placement of objects does directly make an impact on how the user uses the application and so on and so forth. So essentially UI is the portion of the design that you can see and UX is a portion of design that the user can feel. I think one of the great resources available online that you can look at in order to improve your UX design skills, which could take some time. Usually UX design does take a bit more time to perfect and narrow down on. Now if you go to this link laws of UX.com, you'll be able to access a set of tips and tricks as a new UX designer that you can use. I'm going to leave this up to you to go over in detail. But in this website you'll find a set of tips and tricks all put together and forms of laws of what you should do in your design. So I'll give you an example. This law of proximity means that the objects that are near or approximate to each other tend to be grouped together. I can click through to read more about this. But essentially, it goes over why proximity is important in design and what type of relationship it establishes with nearby object and so on. Once you're done, you can go ahead and check out even more laws. There's a lot of great laws in here for UX design. Of course, you can go in more depth and check out all these laws over here. I'm not gonna go through them one-by-one. In this lecture. I do encourage you to take a pause, go through this and remember this is not exactly something you want to memorize, but rather something you want to have access to as a resource while you're doing your design work. So feel free to take a look at this website. And again, the link for it as laws of UX.com, Very helpful. 44. Designing a Logo: If you've been following along so far, we've put together our initial pages. We put together the login pages, the phone verification, the main page showing all the restaurants available as well as a little menu page or to let you order or add items to your order. We're ready to move onto our order pages, as well as our profile payment and order history. And one thing I do want to note is that I believe I missed the location page as well while we were putting together the art boards. So I am going to go ahead and just move this over a little bit. Go ahead and duplicate this page. Then I'm going to go ahead and title it location. So essentially this is the page where you can get to set your address. If you remember, if I just open up our wireframes. Here we go, That's our wireframes opened up this location page where you get to set your address for where the delivery should go to. And so we'll design this in this page, location page over here. One more thing while I'm here, I'm just want to make sure that everything here with my art boards or as spaced out properly. I think that looks good. There we go. Perfect. So yeah, we're ready to move on to designing these pages. Before we do that, we were supposed to design a logo for healthy bites. And now if you remember as we went through the brief, one of the key deliverables is the logo for the company as well. So we're gonna do that together in this lecture. Now for the logo, I want to keep it simple. I want to keep it something relevant to the name, which is usually what you want to do in a logo. So I'm gonna come right over here, just outside of my art board and zoom in just to make a logo over here before I take it to my, Throughout my design. So what I want to do for healthy bites is to essentially have a little, maybe each letter and maybe some kind of bite marks taken out of that age letter to represent the name. I think that might look good. And so I want to do that with the help of our line tool and a bunch of ellipses. So feel free to follow along if you want to also create a version of the logo yourself. But the final version of this logo Walzer be included in the resources for this project. So you can simply use that if you'd like. Perfect. So for our logo, Let's go ahead and create an age by using the line tool. So we want one line over here, and I'm just using Shift to keep it straight. Now for the border size, Let's go with 20. We're going to go ahead and round the caps over here too. And then I'm going to use all to just duplicate this side of the age two. Over here. I'm going to use Command D to duplicate that one more time. And then go ahead and rotate it. Using this little node. It's straight. This way. We're going to just put that somewhere in the middle of this perfect selected altogether. Let's give it a border size of actually 25. And let's change the border color to our green color. I'm gonna go ahead and actually group these lines together using Command G or Control G on Windows. And then I'm going to go ahead and just zoom into this side of the age. And I'm going to create some ellipses using E, gonna represent this kind of a bite mark like this. Now I'm gonna go ahead and just group these ellipses together, move them down a little bit. So make sure you're in a group. Your H shape is in a group. And actually I'm gonna make this a little bit bigger as well. So it takes up more space here. Make this a little bit bigger. I think that looks good. There we go. Because this is this Hs created of these three lines. We need to actually use the outline stroke so that we turn this into more of a shape. We can do that by going to Object path. And if you remember Outline Stroke, now, the strokes here kind of turned into shapes. So we can actually go ahead and use our Boolean tools to create that bite mark out of that age. We can do that by first making sure that these are all grouped together as I have over here. And select them both together. And do Object Path subtract. It looks good. Again, if you want to make changes to your shape, you can always go ahead, go in here and rearrange circles to make it look more Smith Cole. Really do as you please. I think that looks good. I'm just gonna go ahead and actually go ahead and duplicate this group and bring this group also down here. On this other side of the age as well. I think that looks good. Again, feel free to tweak your circles if you're not fully satisfied with where you have. Perfect. So there we have it, That's our little logo for this project. I'm gonna go ahead and save it as a resources role for you can use. The next lecture. Let's come back and place this logo throughout our design. 45. Placing Our Logo: Okay, so now that we have our logo ready to go, Let's go ahead and place it in our splash screen. And the login page, I think that's pretty much all the main places we need to place it. If you don't have the logo or you haven't designed it with us in the previous lecture. You can access it by going to the resources for this project. And under the logo folder, you'll see there's a logo green dot SVG and a logo white that SVG. Another reason why exported these as SVGs and not PNGs or JPEGs, which is usually what you use for images, is that SVG gives you that ability to edit the logo and resize it without losing any quality. So that's one of the reasons why we use SVG for some icons and logos and things like that. Whereas for images where you have a photo, let's say typically use the JPEG and PNG. We'll go over that in more detail later as well when we're exporting our files. For now, you can go ahead and import both of these into your project by simply dragging them into your XD project. Now, we see we have two over here. I think the other one imported in here. So this white one we're gonna use on our splash screen. So we're gonna place it right in the middle of the screen like this, or where we have our placeholder. For the placeholder, Let's go ahead and now delete it. Just move this text up a little bit too so it's close to the logo. For the size I like it, how it is here, which is 91 by 126. Then for this green one, Let's go ahead and drag that. You guessed it. A login page centered within our placeholder here. Delete this one. I think we can move it up a little bit more too, so we have some spacing from our company name over here. Speaking of the company name, it looks like it's a black fill, so I'm going to just change that to this gray that we have. You can go ahead and input this hex code and save it as well, just like me for our color swatch, but not a problem at all if you haven't done so because in the following lectures, we're going to come back and talk about color and how we can actually easily access colors throughout our designs. There we have it, That's our logo, and we're ready to move forward. 46. Creating a Color Scheme: Or a color schemes. There are a lot of fun because we get to actually play around with a bunch of colors and see what looks good and what fits our branding. When it comes to our app design. I personally love the color scheme picking section of the course because it's where we get to really be creative and set up some sort of branding for the company that were working for. In this case, because they've only given those kinda like green color as part of their design briefs. In terms of the color scheme. Of course, he just mentioned, use a green color scheme to show the healthiness of the product, etc. So that's why we're going to use this little online tool to come up with a color scheme for them based on green color that we have. If you head on over to coolers.co, there's three O's in there, so just make sure you type it properly. Coolers.com. This is a great resource that you can use to quickly generate color schemes for your projects. Once you head on over there, it's simply hit to this Start Generator, and then it will go ahead and put you into this little color scheme generator. And from here you can simply hit the spacebar on your keyboard to go ahead and generate new color palettes that look good together. You can use this throughout your project as well. It gives you the hex code for each color in that palette. Because we already have one of the colors for our app, soapy head on over to XD. I really liked this green color that you're using here. So if I just hit on over to, uh, one of the, let's say the splash screen here, click the fill. I can go ahead and actually copy this hex code from here that head back to coolers for one of the colors over here. Let's see the first one over here. We can go ahead and just double-click to edit this color too, by pasting in that code. Hitting Enter. Then what I want to do is go ahead and click this little lock button over here is this means that this color will stay the same. It won't change as we just press the space bar. And then what the website we'll do is try to use this color to come up with similar colors or colors that look good in combination with that color. Now if you go ahead and click Space After you make sure you lock this color in the website world generate scheme for you. Then you can go ahead and pick the one that you like. I don't want anything that's too different. At any point, if you'd like a certain color, you can go ahead and lock it. And then based on that color, you can come up with more colors for your color palette. But let's go ahead and keep pressing Space to see what we get. I kinda like this color scheme over here. I think it looks pretty good. It's monochromatic, which is what I liked for this kind of palette over here. So why don't we go ahead and actually use this color scheme over here. We can even go ahead and save this palette by logging in and clicking Save. Or we can go ahead and export it by copying the URL. And so now we have the URL for that palette. So if you do want to send it to anyone else, or if you do search it in our browser, it will go ahead and bring this website up. So I'm gonna go ahead and give you a minute here to write these hex codes down if you'd like, if you'd like to use exactly this color scheme, feel free to use your own if you'd like. But if you do want to follow along with this color scheme, you can go ahead and use this color palette here. Let's take a quick pause and come back in the next lecture to apply our color palette to our project. 47. Applying our Color Style: It hurts so now that we have a color palette that we generated using Coors or Ko, I've gone ahead and actually placed a little PDF of this color scheme in the healthy bites mobile app assets as well. You can access as PDF and then go ahead and use these hex codes to generate the same color scheme for your project. But again, as I mentioned, you can feel free to use your own color scheme as well. So what we're gonna do now is go ahead and head on over back to our XD. Just on the side over here, up here. I'm going to go ahead and create another section in my pasteboard here and call this one my color scheme. Like so. Go ahead and just align that left, align that with the components. We get down a little bit and then what I want to do is go ahead and create, let's see, 12345. And we're going to create five ellipses here to generate that color scheme for our project. I'm just going to go ahead and put this over here, the ellipse. I'm going to remove the border from there. Go ahead and just create five of those. Perfect. One-by-one. I'm gonna go ahead and just input those hex codes into my ellipsis. So the first one being this hex code for color one. Kind of go ahead and change the fill to that code. We get that color. Same thing over here. Get that color. Keep reading this process for all the colors. There we go. There we go. We have our color scheme in our project. Now, of course, we can go ahead and add these colors to our swatches down here and use them throughout our project. But one thing that XD does give us is the ability to use color styles in our library. If you head on over to our libraries, we see from up here we have a little colors in our asset panel. This way, if you do add our color scheme to this color section of the XD in our libraries. We can easily use them throughout our project. And if we do need to make a change to our color scheme, we simply just have to change our color scheme over here and it will be applied throughout our project. And you'll see how that's useful in just a second. In order to apply this color scheme, you can simply go ahead and select each object where you have that color and then go ahead and add it to our color like this. Or you can go ahead and select all of them like this. And click Plus. Both work. And so XD would go ahead and generate those colors as a color palette over here for us, with a title being the hex code. It's now if you want, we can go ahead and rename these colors. I'm going to do primary for this one right here. For the second one here, which is this color, we're gonna do secondary. And this one's gonna be your accent one. And this one's gonna be your accident. To do X and three for this one. Now our colors have a name as well. So now that we have our color scheme set up over here at the beauty of this is that XD will go ahead and see where you use those colors. And they've already been tied to our color scheme or our color styles over here in XD. Just to give you an example, if you now go ahead and edit this primary color by right-clicking and clicking Edit. If we do decide to go ahead and let's say change this primary color to some sort of looked at, let's say, let's say purple. Then it will go ahead and apply everywhere throughout our design where we're using that color. Now, with that, we can easily change our color scheme without the need to go throughout our design and change each color, each object using that color. And you can see how useful that can be. Now with that said, I'm gonna go ahead and just hit Command Z a bunch of times until we go back to that color that we have. Of course, as we use these other colors throughout our design, we can go ahead and see how useful this color scheme and color sets and our XD libraries will be. 48. Gradients: So all solid colors are fun to work with and apply for our color scheme. Even more fun than that is gradients. Gradients will essentially allow you to combine multiple colors to create some sort of a mesh between two colors. And you'll see how that works in just a second. If you go ahead and duplicate this little circle here using Command D and dragging a copy down. If you go to a fill over here, of course we can go ahead and change that color over here to any solid color as we've been doing throughout our project. But if you do want to create a gradient, we can simply head on over to this down arrow over here. We have multiple options. We can either do a linear gradient, which will go ahead and create a gradient between two colors. You can of course add more colors throughout the gradient as you'd like, but it will be blended throughout a solid line. You can do a radial gradients, which as the name suggests, it's a gradient that fades over a radius. You can go ahead and edit that radius and make it larger or smaller, and so on. We can do an angular gradient, which is less commonly used, but essentially It's an angled gradient as the name suggests. But most commonly we want a linear gradient. And with a linear gradient, we can even go ahead and move those two points throughout our object for those two colors. So we can do kind of an angle like this. Then we can go ahead and set the color for each node. So if we select one node over here, which we can do from selecting this node or this one over here in our color selector, we can go ahead and edit that side of the gradient. And then if we go to the other side or the other node, we can go ahead and edit that one as well. And so that's how we make gradients throughout our design. So for our first gradient, we're going to go ahead and apply a gradient to my splash screen. What do we do? The green color that we have over here. For one side and for the other side, we're going to do the secondary color here, which I've selected as a swatch color over here. If not, you can go ahead and put that 52796 f hex code in there. And we'll go ahead and give you the same gradient here as well. I'm going to leave it at this 45 degree angle that I have here. Now with this selected, you can go ahead and click the little plus icon over here to add a color from this selection. So now XD has gone ahead and created that gradient for us. And we can go ahead and even rename it gradient one in our color styles. Now if we go down to our splash screen and select the entire art board. Since this background color is generated from the art board. Instead of changing the fill here to match that gradient, we can simply click that gradient one color in our libraries. And we'll go ahead and apply that same gradient to our splash screen. That's how you use gradients in XD. 49. Setting up a Character Style: Similar to how we set up that color style in our XD. And now we can use it throughout our design. We can do the same thing with typesetting. And if you remember earlier on, I mentioned that we're gonna come back and apply the SF Pro font throughout our design. And we're going to use that as our primary fund. Typically in an iOS app, we use this font as it's the most commonly used by Apple or themselves. If you do want to go a little bit more creative and install a custom font, you can also do that and apply that font instead. But I think we're going to stick to using SF pro throughout this iOS design project. If you haven't done so already, head on over to developer.apple.com. Forward slash fonts. Go ahead and enter that URL and then you should be brought to this page where you can go ahead and download SF pro for free. Now if you're on Windows, I do want to note that it might be a little bit harder to open this file because it downloads as DNG file, which is the installer file for Mac. But if you do go ahead and install and download seven zip by heading on over to this URL over here, you should be able to use 7-Zip to unzip this folder where you'll then access the font files From where you can go ahead and open those font files to have them installed on your machine. Now we have installed those fonts, an earlier lecture, so I won't go through the install process, but I will give you a minute here to take a pause and install those fonts if you haven't. And then go ahead and follow along with what the rest of the lecture. Once you do have those fonts installed, I'm using this resource called type-scale.com to actually pick a skill for our font sizes. Now, when it comes down to an application, whether it's mobile or web, we usually want to set up some sort of typeset with different font sizes using some sort of scale. So that if you want to, let's say use a header tags, we can use one of these bigger fonts. And then for our body texts and captions, we can use some sort of a body font that's smaller. And so right now, I've simply gone ahead to this website. And our base size is 16 pixel using a scale of major third. So it will go ahead and multiply each font size by 1.25 to generate the next size. Of course, you can go ahead and play around with other types of scales for your fonts, and it will just get bigger or smaller depending on which one you select. But I think this major third one, or the perfect fourth work well, for the purpose of this course, we're gonna go ahead and use the major third. So feel free to take a second to figure those pixel sizes out. Then once you have them, keep that window open, we can use it as we set up our type sets in XD, head on over to XD itself. Close this. In XD. We're gonna go ahead and set up that typeset by heading on over here to where we have our color scheme. We're gonna go ahead and duplicate this color scheme text over here. And where are we going to set up a typeset? Perfect. And so now we're gonna go ahead and just zoom in. And let's go ahead and create a text and name this one, body one. For this one, I want the font to be ECIF pro, want it to be 16 pixels. For the fill. We want to go ahead and use that 333 hex code for my body font. Then I'm gonna go ahead and just place that down here, duplicate it one more time. And then we're going to do body to this one using my skill. It should be 20 pixel size. Going up here we're gonna do header three. This one should be 31.25. Duplicate that one more time. Do header two, and this one should be 39.6, sorry, 0.06. Will that might happen as you're working on this. So be careful. Lastly, we're going to do header one. This one should be 48.83. As we go throughout our design, we probably won't use the header one as much, but it's good to have access to these type sets throughout our design. Now I'm just going to place these over here. I'm just going to select all of these over here now. For my body one I'm gonna create another duplicate of it, but this one I'm gonna select medium for my font-weight and then call this one body one medium. Then I'm gonna select all of them together and then click the plus icon here to translate those into character style over here in XD. Let's go ahead and rename those. So this one should be a body one. I believe this one should be the body one medium. If I'm not mistaking at any point, you can press Edit here to make sure. It looks like I got it the other way round. The medium is this one over here. And then the 31.25 should be. Then we have the 20 as my body to the 31 to five as our header three, SF PRO 39 as header to the largest font here as header one. You can go ahead and even rearrange these textiles over here or even grouped them together. So let's say I want to group all my headers together. I can go ahead and select all of them and create new group From Selection. And these are gonna be all my header fonts. And then group these other ones together and call them my body fonts. You can go ahead and rearrange them as you like. This is just to keep things organized in your project. As I was doing that, I guess I messed up my typeset over here. So at any point you can go to the font that you want to change. This one to set them to the ones that you are working with. So I'm going to select header three, site that a three header two should be at or two header one. There we go. Okay, Now, these are my type sets that we're gonna be using broader design. Next lecture, we're gonna come back and apply those throughout our designs. 50. Applying Our Character Styles: It's another we have our character style setup over here. We're gonna go ahead and apply that throughout our designs. I'm gonna start at the very top here. For our navigation bars, we're gonna leave them as is, because this is typically what typeset or character style is used in the navigation bars. We're not gonna really change that up. We're going to keep that as is. But for wherever else we have our own texts. We're gonna go ahead and use our own character styles. So with that said, starting from the splash screen, Let's click healthy bites over here and use our header two. Of course what happens is that by default, the character styles do come with that color or that Phil are added to them. So by default, XD will go ahead and use the same color for those styles that we set up in here. But we can go ahead and make changes to our fill for the specific cases here. So let's go ahead and do that here. Just as we go through font change. Remember that? Because fonts or different, your alignments might change. So just beware of that and keep realigning things as we go about this. So for the second one, we're gonna do header to or header h3. Going to go ahead and again, align things up properly. If need be. We're gonna go ahead and move things down a little bit as well. Of course, we have the buttons here, so we're gonna change those texts in our actual components in just a second. But for these two, we're gonna go ahead and select both of them and use our body one medium for the two over here. Forgot Password. I'm gonna go ahead and just add a little question mark to the end of that. Move it over. So I do want to actually make this body one medium more subtle. So what do we go ahead and click Edit on this body one medium by right-clicking, clicking Edit. And I'm going to just go ahead and actually change the font color to a little bit more subtle, maybe something around that kind of light gray color. You can input this hex code to generate the same color for your body, one medium character style. Over here. I'm just going to go ahead and move this to the side to allow room for this text here. Let's go back to our components and apply our new typeset throughout this button, we're gonna do body one. Then I'm gonna go ahead and change the fill to white and also apply a medium. Or actually let's do a semi bold thickness here. I'm gonna go ahead and save that style and call this one my butt in my button text style. For this placeholder, we're gonna go ahead and use use body one and just bring the color to more of a subtle color right here. For this one, we're gonna do body one. We don't have a font for this size here. So I wanted to change the font size here to SF Pro and create a new character style out of that as well by pressing plus here. This one, we're gonna name it. Caption style. Remember as you go throughout your design, you can totally create as many characters styles as you need. Whenever you think there's something unique with your character styles. Even for the 0 calories and the $1.1 over here, we're going to go ahead and use that caption textile. With the difference being we were gonna go ahead and change these to a semi bold actually, for this little 0. And here we're gonna change that one too. What do you want? Our components are now up-to-date with our new font. Throughout our designer components should be using that new font set and our textiles as well. For the phone verification, which is the title of the page, we're gonna do header three. For this one, we're gonna do body one. Looks good. Of course, this one here. We haven't made this a component that we can go in here and set those two for the title. We're gonna do. One for the dollar. We're gonna do the caption textile. It. We're gonna go ahead and change it to semi bold. Same thing over here. For this one, we're gonna do caption text style, semi bold, and just move it up. For this Italian we're gonna do also the same thing. Caption textile and we're gonna do semi bold publics. Good. I think that's all the fonts that we have. So we've set everything up now as the new SF Pro font. And as we go throughout our design, we're gonna apply the same fonts throughout our designs. 51. Order Page: Now that we've gone through some of the essentials of putting our project together, including setting up a color scheme, organizing our type sets, and adding them to our character styles. In XD, I think we're ready to move forward with designing the rest of our mockups. Moving on, we have the order page next, so we're gonna be working on in this lecture. So essentially, if he pull up our wireframe, in our wireframe for our order page, we do have a couple of things including the items that were added or the users added to their order, as well as a little section that we can include to show the address it's being delivered to in case they need to make changes to their address. Then we have the items here where they can also add or remove them from the order, as well as little section down here to explain what their subtotal after-tax and everything, maybe delivery fees and all that is with a little Order button here to for them to complete their order using. So going back to our XD, we're going to go ahead and do a couple of things. First, let's go ahead and start by changing this large title text to complete quarter. Let's go ahead and get rid of this title over here. For action button here we can do back to menu. And let's see what else do we have here? We want our location icon. So what we're gonna do is we're gonna go ahead and get rid of this plus icon here. Then we're gonna go ahead and add our order cards in here or item cards in here. So why don't we go ahead and drag. I'll see a copy of these two. Let's do. We're going to select the chicken parmesan instance here. So I'm gonna go ahead and copy that one by pressing Command C, go into my order page and pasting that in there. Then let's just do one of the desserts. Maybe, maybe the lava cake looks good. And paste that in the order page. I'm gonna go ahead and just rearrange that. So I bring that to the top. We want to keep spacing here pretty consistent. So I wanted to do 25 pixels from the navigation bar. And again, I'm using Alt to see the spacing difference between objects will keep that also the same as what we have here, which I believe it's 15. We have 15 pixels from each order. We're gonna have the items here and then we're gonna go ahead and draw a little rectangle here at the bottom of this page. For this rectangle, I'm gonna go ahead and select my accent to color. That looks good. We're going to create a little text box here and write subtotal exit out of there. And we're gonna use the, Let's do body one. Body two would look good. For this. We're gonna set the fill to the accent three color. Well, I'm gonna go ahead and duplicate that and put a copy over here and right align it as well. Perfect. And we're just gonna go ahead and add these numbers up. So $19.99 in 1999. That should give us if I'm not mistaking 2998, then we're gonna go ahead and duplicate this one more time. Both of them. And we're going to do tax. I'm going to go ahead and actually left the line this as well. The light to the left for the tax here. I'm just gonna go ahead and make this up. Put 499 is for the purpose of completing this page. Then I'm gonna go ahead and duplicate this one more time. Bring it down this time because we want to put the total we're going to use. Instead of the body two, we're gonna do a header three. We're gonna go ahead and change the fill again to accent three. And instead of tags on right total, whoops. Then adding these up should give us 3497. One thing you could do here is you can go ahead and totally group. These objects are lines of texts together using Command G and then he can use stacks. This way. First we can go ahead and set an equal spacing of, let's say 20 pixels. This way, if you want to let say, duplicate this group and create another line, we can do that easily. Can create as many lines as possible so we can even add, let's say delivery fees. Let's say 299. I didn't go ahead and update this. As we please. There we go. That's right. Then let's go ahead and complete this page by adding one or the delivery location or the address and an option to change that, as well as a little Order button at the very bottom. So let's start with the Order button, since we already have our library opened up and we can drag a button here. Place our button here. Let me just make sure we have a consistent spacing. So we want 35 pixels from the bottom. Then we're going to go ahead and change this to please order. There we go. And then what I want is another version of this button with another color, potentially maybe our accent color. So what I have in mind is that inside of that button we can have them see their delivery address. So I'm gonna take a quick pause here and we're gonna come back in the next lecture. We're going to create another variation of that component for this button with a different color. And they use that one to add our delivery location in this page as well. Let's do that together in the next lecture. 52. Component Variation: All right, So as promised, we're going to complete our order page and this lecture. But before we do that, we're gonna go ahead and learn about creating different states of components as I promised in the earlier lectures. Let's head on over to our components section of our designs. Right here we have our button, of course, that we created and turned it into a component so we can easily reuse it throughout our designs. In this lecture, I want to make a light version of this button and use that accent color for my button here. So what we haven't really explored is this little plus icon here where we can actually create different states for our button here. If you click Plus, it actually gives us a couple of options such as new state, which is whatever we would like our state to be called. The common hover state and toggle state for buttons as well at that XD automatically suggest to us. But we're not going to create these ones for now. We're gonna do a new state. We're gonna call this state lite version. This will be the light version of our button. In order to edit this state now, we just have to make sure that we have it selected on the right panel side over here. If we select the default state, right now we're making edits to our default state. But if we select this light version, suddenly my component is being edited, but that the light version only and not the default state. So under this light version, we can go ahead and double-click into our button, select the rectangle again, make sure you have the rectangle selected and not the entire button component. And then go ahead and click on X and three so that our button background will be that acts in three color. Then for the button color itself, I want to go ahead and do accent too. There we go. Now we've created a light version of our button, which has this color. And at any point we can go buy toward default state and ended that state. It more creative and more states such as the hover and toggle state as well. But for now, we've created two different versions or states of that component, not want to use that other version. We can go to any of our buttons and go ahead and switch it to the light version instead. And then go ahead and make those changes to that button. Here what I want to do is now go ahead and find my button from over here. Drag another one over here into my order page. But instead of the default state, I want it to be the light version. Actually on second thought, I want to create another version from my life version that has the text aligned to the left side. Why don't we switch back up to here. Go to our light version and from our light version we can create another version or another state. And we're gonna call this light version text left, like this as a. Now in this version I'm going to go ahead and actually align or bring my text here to the left side. But 25 pixels from the left side. While we're here, let's go ahead and select Text Align Left, and then go ahead and exit out. So now we have three versions. Default state, a light version and then a light version with the text aligned to the left side. Like so. Perfect. So now if I go back to here, this instance in our order page, I wanted to do texts left and then go ahead and enter some sort of fictional address, something like that. So they know where the delivery is going to and they can tap that button to change their address, which will take us to that location page up here that we're going to design in the future lectures. With that, I think that completes our order page. So let's come back in the next lecture to work on our order Progress page. 53. Order Progress Page: Alright, so time to move forward with our order Progress page. So don't grade work with the pages we put together. For my order Progress page. I'm gonna switch back quickly to our wireframe. Just see what we have in our sketches. On the progress page, we have a little, of course progress texts with a little kind of scale showing from the time that they place the order To delivered, uh, where they currently stand. I'm thinking maybe a little text to show the current status of the order and the little marking here that we can create with a line and circle. Then down here we just want to put the delivery address one more time and maybe say delivering two. And then we want to give them the option to change their order called the restaurant castle the order and such. And I'm thinking we can put these in a little action sheet that iOS gives us. And that's gonna be given as an exercise at the end of this lecture. But before we jump into there, Let's go ahead and design the other pieces. Also, I'm gonna give this page a little more whitespace then what I sketched out here, because later I want to come back and as we're working on prototyping, and maybe we'll add a cool little animation in here to show that the order being prepared or something like that. I've seen it in other delivery apps and I think it looks cool. So we can totally do a little animation here for the user to see what state their orders in. First, let's get started with the navigation bar. We're gonna go ahead and remove this little title from here, the plus icon as well, and change this to quarter progress. For this action button, we're going to go ahead and we're gonna do View order. Then what we want to do is we're gonna go ahead and set the background of this page to accent too. So I just selected the entire artboard and then I selected accident took to give the entire background this color. Now we're gonna go ahead and use a line to create a straight line across here and give it a border of five pixels around the caps. And we're gonna go ahead and change this border color to our secondary color, which has this hex code. We can't, because this is line and lines have a border and these color styles are just fills. We can't use them, but we can go ahead and told the hover over them and take the hex code and use that as our border color instead. Now if this was a rectangle and we had a fill, we could totally use our color shortcuts over here. And so that's why I'm inputting it manually into here. But again, you can also use your color swatches to cool. And then I'm gonna do a little ellipse with E about this big. I'm just going to use my trackpad to center that over here for this one because it has a fill, we can do a primary color, so we can show where are their order stands. Let's go ahead and create a little text box here and write your order is being prepared by the restaurant. You want to go ahead and give this body one medium and use x and three for the color. Replace this at the top of the scale and the bottom. We're going to duplicate this and write, please. And another copy over here. Right align it and align it here and right order or actually dried delivered. So they know where they stand. Let's go ahead and copy this button or this instance of that button into our order Progress page. I'm gonna leave it as is, and then I'm gonna go ahead and do the T Heat and right order being delivered to exit out of there and just bring that here. Perfect. Let's see what else we have. We're gonna do a little button for them to edit their order from here. When we go ahead and copy this button as well into here. And instead of place order, we're gonna change that to edit order. Perfect. So again, we're gonna leave the middle empty here for a little animation we're going to put together later on. But for now, I'm gonna give you a little exercise. If you still have this document opened or you have it in your XD, go ahead and open it up. If not, you can access it from developer.apple.com slash design slash resources and then go ahead and download the XD version. And then open that up in XD. And once you do have it opened up, it should look like this again, where we drag the navigation bar. And so from this I'm gonna give you an exercise to drag the status bar into all of your art boards. At the top, I want you to, you to place this at the top of your art boards where it applies. And also, let's go ahead and find the action sheet. There we go. It's under views, a UI component views. So this is an action cheat. You can totally go ahead and use this one. So once they press on it order here in our design that could pop up and show them the different options they have. Which going back to our mockups, could include editing the order itself or calling the restaurant or canceling that order. So as an exercise, I want you to use this action sheet to police those options into the design there, you can feel free to go ahead and duplicate this artboard and then place that action sheet on top. Or you can just separately designed the action sheet or bring the action sheet over here on the side of our art board and place that over there. If I don't think the second option is easier because you don't really need to duplicate this entire page. I'll leave that as an exercise as well as putting the status bar on all of the art boards. And then the next lecture we're going to come back and do that together. 54. Exercise Solution: I hope you had the chance to take a look at those two little exercises I gave you. If not, don't worry about it. We're gonna do that together in this lecture, starting with the status bar across all of our art boards. And then coming back in here and using an action sheet that once the user clicks Edit order, it gives them some options. First things first, let's head on over back to our Apple UI kit. Because we have mostly a light background across our navigation bars. We're going to use the status bar here instead of the dark point over here. So let's go ahead and simply copy the status bar from here. Go back over here, and I'm just gonna go ahead and paste it with our other Apple assets here so that we have our instance here. Then we're gonna go ahead and just copy that over to our, all of our pages. We don't necessarily need it in our splash screen, but we do want it on our login page. Let's go ahead and click Login page. Paste that in there. Using Command V. I'm gonna go ahead and just use shift and the up arrows a bunch of times until it's fully at the top there. Perfect. We're gonna come back and add a little cool blur effect to that in a bit. It's a wall. We're on our login page. What I'm gonna do is I'm gonna go ahead and select the status bar. But this time, make sure you only select the status bar in here that this group here without the BG layer over here, which is the background. So make sure you only copy the status bar. And then go ahead and select the phone verification, hold Shift, select the main menu while holding shift, slightly order and order progress pages to go ahead and click Command V. All across is I will go ahead and paste our status bar across our pages, all in the same location as we have here. The only thing I want to do here in the foreign verification is just bring or shift everything down by 20 pixels. There's enough space. We can even do 30. I think that looks better. The more whitespace you have between things that better. You don't want to cram your design into a small screen, such as a iPhone screen. So we're gonna do the same thing. We're gonna go ahead and copy the status bar. We're gonna do the same thing. Go ahead and do that one more time by copying this entire status bar group over to our profile payment location or history pages too. Now, all of our frames have that status bar in them, which is what we're looking for. Now we're ready to move on to our action sheet over here. And so for that one, we're going to switch back here and go to our action sheet which should be under here. There we go. I'm going to copy the entire action sheet over here. Make sure you select this group. Go ahead and copy it over to your design here. I'm going to paste it here in the pasteboard on the side. And then we're gonna go ahead and edit the title to edit order. In this little description we're just gonna write make changes order for this first action. We're gonna do edit order. For the second action we're gonna do cancel order. And for this third one we're gonna do contact restaurant. Perfect. It's now if they click on this Edit order, it will open up this alert or action sheet over which we don't have to worry about right now. But when we are prototyping, you'll see why this is useful. That's the exercise. We're gonna take a quick pause here before we come back and continue on our designs. 55. Adding Blurs: All right, So we've done a great job so far. We're almost completed with our mock-up here. We've got a couple of more pages up here to design. And then we're good to go in terms of our mobile mockups. We then move forward with exporting and sharing it with our colleagues and team members. Now before we move on to completing these pages, I wanted to show you some of the effects that XD has to offer and how they work on objects and images and so on. To do that, the login page, I want to go ahead and just zoom in. Just on there. We have this little status bar here, of course, that we put together in the previous lectures. This status bar in this page comes with the background over here, which is what we want because there's this image here. And if he didn't have this background, it would kind of interfere or this clock over here would interfere with this image. So we don't want that, and that's why we want this background here. Now one of the cool effects that you can apply on a page like this or an a status bar like this is to apply what's called a background blur. Xc has two different types of blurs that it offers. One of them being background blur, the other one being object blur. And we're going to explore both of them in this lecture here. The first one I wanted to explore as a background blur, which applies to the status bar. So let's go ahead and select the status bar. And instead of selecting the whole thing, Let's double-click to only select the BG or the background layer over here. Make sure in your Layers panel you only have that background layer selected. Once you have that BG layer selected, I then go ahead and enable background blur. Now if right here it's this object periphery, you go ahead and change it to background blur instead, and then go ahead and enable it. There's three properties here that we can edit. The first one is how strong or blur is. The higher the number we set over here, the more blur will be applied. Right now, we're not seeing much because of the fact that the transparency of this background layer is at 100% as we make it less transparent, you'll see that the blur will be applied on what it will look like. So to do that, I'm going to go ahead and bring the transparency of this down. So now if you look at the top, you can kinda see the blur. Right now, my background doesn't even have a color anymore, it's just a blur. And if I select it again and lower the blur, you can see it gets less and less blurry. And if I make it higher, it will get more and more blurry. So what this is doing essentially is it's taking that background layer and making anything underneath it and adding a blur to anything underneath it. And that's what the background blur does. Now this option over here, if I go ahead and bring it down and we'll make this background layer darker and vice versa. If I go the other way, it will go ahead and make it more and more lighter. But it's kind of what we want in this case, so that we create enough contrast so the user can see the status bar. So why don't we put this at 25 with a background blur itself being at 15, I think would look good. Now if you look at it from the little bit more zoomed out, you'll see that looks pretty good. Before we move on, I also want to show you how object blur works. So if I select this logo over here, if we go ahead and instead of background blur, select object blur, and go ahead and enable that right here. What will happen is that XD will go ahead and blur just that layer itself. So we're not blurring anything underneath that. We're blurring the logo itself. Of course, with this, you can create some cool effects if you really like. Just as an example, you could do something like this where you create maybe a one kind of a background for the logo and maybe make it a little bit larger. And then go ahead and for example, duplicated and this one, you can remove the blur and make it a little bit smaller. I can get really creative and create stuff like that with an object blur. And you can even go ahead and make it less visible. So it's not fully transparent. Something like dad could look cool. But again, that's really up to you and how creative you want to get to with your blurs. And I'm just gonna go ahead and just command Z to undo that. A bunch of times I don't really want that. They're just wanted to show you what object blur has to offer. That effect that we created for the logo kinda look like a shadow. So what we're gonna do in the next lecture is come back and learn how we can actually create shadows for objects in XD. 56. Adding Shadows: Another really useful and practical effect that you can add to your designs to really polish things up is called shadows. Now of course, you can apply shadows to any object that you want. And the purpose of the shadow is to really separate your foreground, which is the main parts of your interface, such as buttons, text, fields, and so on from the rest of the page, from the background. Anything else behind those objects? Now one thing you want to do, especially if you're a beginner designer, is to be more subtle with shadows. I noticed a lot of designers then to make the shadows a little bit too strong. So the purpose of the shadow is not to create a really strong effect on the object. In fact, we're trying to be as subtle as possible while making sure that shadow service its purpose and also makes our design look more polished up. And you'll see how that looks in just a second. I'm gonna go ahead and as an example, apply a shadow to my button here. Now of course, because our button is an instance here of that components, we can actually go to the component by just clicking here and clicking Edit main components. So it just takes us up to that component where we have it. So this is our MainComponent. And the beauty of components is that we can go ahead and add shadows to them and it will be applied throughout our designs. So just as an example, I'm gonna go ahead and add shadows to this button here by double-clicking and selecting the background layer or this rectangle layer. When it comes to the shadows, we have two options. We can do an inner shadow, so this will be a shadow inside of the button. Now this is typically used when you're trying to create a 3D type of button or you want to create maybe a touch state. So when a user touches the button, it will go ahead and show this inner shadow that typically we see in the shadows, more in game design rather than app's UI design. But of course, this is really up to you as a designer. But again, might've do is to go subtle with it. We'll go through what the shadows has to offer. Shadow essentially has an x and y position. So the exposition is where that shadow falls in relation to that rectangle. If we change this to, let's say 20 or shadow will move 20 pixels to the right. And if we do, lets say the same thing for the y. You'll see our shadow completely moves 20 pixels to the right and 20 pixels down as an effect. And this right here, similar to the blur effects, is how blurred our shadow is. If we change this to 20 or shadow becomes more blended a. Yes. And if he'd said this to 0, it will be very harsh and just a straight line kind of thing. Again, inner shadows, not so much what we're looking for, but we're looking for a drop shadow, which is more typically used in UI design. So if enabled drop shadow, it will go ahead and create a shadow outside of that rectangle here, which is what we're looking for. Xd will by default set to 0, x, three pixels for the y and six pixels for the blur itself. But he can play around with these numbers. So just to see what this itself would look like, you can go back to your designs. We can kind of see now what that shadow will look like. I think what I'd like to do is to create a bigger blur around that shadow and maybe bring it a few more pixels down. Just to apply those effects, we're gonna go ahead and double-click it, select the rectangle, change this white and maybe a six, and change this blur to maybe at 15. Let's try that and see what happens. That looks a little bit better. Go back up here. One thing I do want to note is that you can actually go ahead and change the color of the shadow by clicking this color selector icon over here. Of course, you can apply a color to your shadows. We can do a red shadow or we can do that green shadow. But typically you'd want to go with a black shadow. That's more commonly used. And you want to go again, very subtle with it. You don't want a strong shadow where the OPCD is way too high. You want something where the opacity is maybe anywhere between five to, I'm gonna say maybe 20 to 30%. But this of course varies with what you have going on in the rest of your page. I like to use 10% here or actually even lipid lower, maybe 8% because I want it to be very subtle. But as you can see, it's still a shows that effect. It's still, you can still see the effect of that shadow here. We can do the same thing with our TextField here. So we can go and select the text fields background to a drop shadow and do the same five pixels, 15 pixels, and set the opacity to 8%. Now if I go here, you'll see my fields also have a shadow now too. But as you can see, it's a little bit strong stole from me. So what I'm gonna do is I'm gonna go back here, select this and tweak this a little bit. So I want to actually lower the blur a little bit and change the opacity down to, let's do 4%. I think that looks a little bit better, more subtle. We don't want it to really kind of come out of the page too much. We want it to be subtle. And so I think that looks pretty good. Some other things we can apply shadows to in our design includes these cards here. So typically we see card designs or card UIs have some subtle shadow, just kinda separated from the rest of the page. What I'll do is I'll leave that as an exercise for you to do. Go ahead and add a shadow to our card over here and the court over here and make sure it because this one's a component to apply it to the main component. And again, keep it subtle. Do a drop shadow with an 8% opacity. And you can leave the XY as it is 03, and then you can go ahead and apply a blur of ten pixels. So I'll leave that to you and then we'll do together in the next lecture. 57. Shadow Exercise: So I hope you were able to apply that shadow for our cards here. We're gonna do that together in the next lecture if you haven't done so. So no worries at all. The effects that we want to add as to these card UI is over here, this one on the restaurant page and the ones on our menu page. Now the beauty of both is that because here we're using repeat grid, we just need to apply it to this one. And it will apply to all the other hard UIs. And then similarly here, because we're using instances of a component, we only need to apply at once and it's applied throughout the rest of our designs. And so this is another reason why components and repeat grids are so useful because it really reduces the work of needing to keep repeating the same pattern, reply the same shadow all over and over and over again. Let's start with the restaurant page. Zoom in over here, select our card. What you want to do is select the background layer again, and then we'll do a drop shadow. Keep the x and y unless it is. We'll click the police city, bringing it down to 8%. I think it looks subtle and clean. And then we'll do ten for the blur. Cool, I think that looks pretty good. Now of course you can play around. There's no right or wrong in terms of what numbers you sit here as long as it looks good. If you want to add more blur, you can definitely go ahead and do that. Or if you want to make it more visible, your shadow, it totally do that as long as you keep it. Pretty subtle. So going to this card UI, Let's go back to our components page and just apply it here. It's easier that way to select that background layer. And I'm just double-clicking to go into that component to that MainComponent, select my rectangle layer here, the one that's covering the entire component. And then we're gonna do a drop shadow. And same thing. Ten pixels for the blur and 8% for my opacity. I see that looks pretty good, too, pretty clean, Very nice. Now you can see we're adding those subtle details that really make our design stand out and look great and professionally done. This is very key when it comes down to putting together mock-ups that clients lake. So as you can see, really starting to polish up our designs, starting to look really good now, really like what we've done so far. So when we come back in the next lecture and continue by working on our profile slash menu page. 58. Profile Page: Alright, so we're finally ready to get started with our next design, which is our profile page. For a profile page, if I just pull up our wireframes that we put together, we see we want to have basically a simple background and then essentially have a picture of the user here with the first and last name, little X. To close the window here or close the menu or the profile. A few buttons for them to go through different pages. From the Count page to payment order history, updating their dress, and finally to law Yacc from the app. So we want to go ahead and put together a profile pic, a little text box here, little close icon here, and then the rest of the buttons here, we're going to place them. And I know in my wireframe here we haven't put any icons on the left side here for these options. But what I do want to do is go ahead and actually add some icons to them as we're designing this page. Let's go back to XD and set that up here in our profile page. Already have it ready to go with our profile page selected or the art board itself. I'm gonna go ahead and open up our libraries and then go ahead and select the axon one color for the background. Right now, little issue that we have is that our status bar is now the dark version. And so we really want the light version as a little tip here. Of course, we can go back to our apple files and pull that white version or the light version of that status bar. But there's an easy way to get around that. And that is to select our status bar here. And I'm just going to switch by two layers panel and make sure I have it selected. And then go ahead and just give it a white fill that will do the same thing here. That looks much better. We want a little X close icon over here is let's design that by creating two lines. So I'm just gonna go ahead and zoom into this area here. Just create two lines. I'm going to make them 35 pixels width. And I'm going to go ahead and change the border color to four pixels and do a rounded cap and a color that's white. I'm gonna go ahead and duplicate that by hitting command D. For one of them, we're gonna set a 45-degree angle. And for the other one, we're gonna do a negative 45 degree angle. That will go ahead and create sort of this x looking icon, I guess, for our close button. And I'm going to select both of them together. And maybe later we want to use this elsewhere. Let's go ahead and create a component of this by hitting Command K. Then this is the main component and we're just gonna go ahead and drag this one, since it's a mean component out here to my components. Put it here for now. Then I'm going to go ahead and go back to our profile page and from our libraries, let's go ahead and drag this one out here. We don't have a name for it. Let's go ahead and rename it. Close button. Just so it's a little bit more organized in here. I'm going to place that roughly somewhere over here. We don't want to be we don't want it to be way too close to the top and we don't want to be too low either. That's that. Now we need a little ellipse. So we're gonna do E on our keyboard and drag a little ellipse here for our profile picture. And then we're gonna hit the T key on our keyboard and create a little text box here, right first and last in here. For now we're gonna, we're not gonna put any sample data will come back later to do that. But for now I'm just creating the fields that we need. And I'm going to create this one, leave a spacing of 20 pixels. I think my profile icon is little bit too big, so I'm gonna go ahead and just shrink it down to 80 pixels in width and height. Go ahead and align that to the middle of that. There we go. For my font here I'm gonna go ahead and select. Let's go back to our type sets. Let's select the header h3. Header three, looks good. And I'm gonna change the fill to white. Let's go ahead and create. Let's see how many buttons do we need? 12345. Let's go ahead and create five buttons or incidences, our buttons in here and then welcome back In the next lecture. To complete this page. Let's select our button that we have here. Let's go ahead and find the button carried out here. We're gonna go ahead and center that along our page. And I'm going to go ahead and actually bring these to match the same kind of pixels from the left side here. And I'm gonna go ahead and duplicate that a bunch of times and use Shift and the down arrow keys to bring them down. So we need five buttons here, 12345. And then I'm going to go ahead and just select all of them and bring them a little bit down. I'm going to group them together so I can use stacks. So let's go ahead and enable stacks just so we can easily set the spacing between them. So I want to set a spacing of, I think 15 pixels looked good. And of course we want it to be vertical and not horizontal. Let's go ahead and do that and leave it as it is. I think that looks good for now. Then we're gonna come back in the next lecture to assign these buttons, title, and create a different version that has an icon as well. 59. Adding Icons: It's time to add some icons to our buttons and then go ahead and wrap up or a profile page. I personally love using this website called flat icon.com allows you to access millions of vector icons and stickers that you can use for free. As long as you give the correct attribution to the authors or the creators of those icons. And it's great because you can search for things. Let's say you're working on a profile icon. You can search profile and you'll be hit with tons of profile icons and vectors and so on. They can download easily and use it in your project. I've already gone ahead and downloaded the icons we need for our profile page. And I've put them in the Icons folder for the resources of this lecture or this project. Under the profile page should be able to find these five SVG icons that we can use for our profile page buttons. But first things first, let's go ahead and set up a new stage for our buttons so we can use that state or four icons. This way we have buttons that allows for icons. So I'm gonna go ahead and go through my component here. Then I'm gonna go ahead and select it and create a new state. Like so. And we're gonna call this one lite version because we're gonna make it a light version of this one and call it Icon left. So in this version, I'm gonna go ahead and first select our background here while holding command. Goes through our library and select that accent color for our button. And we're going to select accent to color. And I'm gonna go ahead and bring it to the left ear somewhere over here for now. Then we're gonna go ahead and drag one of those icons. Let's just do the count one over here and bring it, going to bring it outside of here. Then I'm going to go ahead and just move this one. Move it inside the button here. We're gonna go ahead and select both the rectangle and the icon. Align it to the middle vertically. And I'll do the same thing with the button texts as well, but that should already be centered. So I want this one to be 15 pixels from the left. And I want my button texts to be 15 pixels from the icon. Looks good. Now for the icon, we're gonna go ahead and also change the fill to that accent too. Because this is an SVG icon, we can change the color easily. That's not the case for PNG icon. So when you're using icons, it's best to use SVG for that reason. One last thing while we're here, let's go ahead and make sure our text over here is left aligned as well. And then we can go back, and let's go back to our profile page. I'm going to select each one and select the light version with an icon left. Same thing over here. Until all of them have that version. And I'm going to go ahead and change the button of this button texts here to account. We're going to change this to payment, followed by order history, address, followed by last but not least, lawyer. While we have that payment button selected, I'm gonna go ahead and select the account icon over here. While you have that selected, let's go ahead and drag the credit card SVG and here. So now this God dried into the button itself, which is what we want. And I'm gonna place it directly on top of the profile icon, which is what we should have it. And then delete the profile or the account icon. Lastly, we're gonna go ahead and assign it that accent to color. There we go. Now for the order history, same thing. Go ahead and select the account icon, make sure it's selected in the layers panel. And then drag this time dot SVG and here, move it inside. I'm very happy with the size of the icon, so make sure you have a similar size for your icons. This one is 22 by 20 to go ahead and delete the other one. And of course selected, go to Colors, select x and two. We're almost done here, two more buttons and we're good to go. So let's go ahead and select the account icon over here. Go to our folder and drag the pen dot SVG. Drag it over. Now you can zoom in to make it a little bit easier to drag stuff around. We go this one, select this one and assign it an accident to color. And last but not least, liked your account icon here. Drag the logout SVG. What? This one's got, paste it as a huge icon. Let's go ahead and lock the proportions here and change the width to 22 pixels. And we move it over here. That looks good. Now change the strikes and to go to Layers panel, account and delete. Just going to make sure this one is centered because it looks a little bit off right now. A little bit, I think that's a center or as aligned to the middle as we can. There we go, That's our buttons for the profile page. I think it looks good. We can go ahead and bring these down a little bit more. I think somewhere right here will look good. Maybe actually on second thought, I can add more spacing, maybe make it 20 pixels between them. I think that's pretty good. Now one thing to note is that because we made changes to these buttons and there were instances of components, we've overridden all of them. So while the icons itself won't change in-between them, if we still go back to our states for this light version icon left, we can still change things. For example, we can change the location of the button. And it will still change in that instance as well. If at any point, let's say we decide to change the button background here so we can always go back to our button here and still make that change, because we haven't overridden the color of each instance. It will still go ahead and apply it to my page here. So feel free to play around and use the color that you like. I think I like this color over here. So I'm gonna stick with this one instead of the light version. This way I can go ahead and actually even take my texts over here to remove this light version and just say icon left. So this is my kind of default button with an icon left. Looks good. We're gonna come back in the next lecture and work on our payment page. 60. Payment Page: It's time to work on our payment page. And I'm just gonna go ahead and bring up our mockups to or the wireframes to see what we have. So what I had in mind for this page is to allow the user to see their payment options or their premium cards that they've added with the ability to choose which one's the primary one, as shown with this little checkmark over here. You can choose between the different payment options or they can go ahead and add a new one. And if you remember, as an exercise, an assignment for you, I want to have you designed that payment page where the user will go ahead and input the credit card information into that page. And now I'll give you more details on what you need for that assignment. But before we get to that, let's design this payment page together. What we want here is simply a rectangle showing the last four digits of that card. And then a little checkmark to indicate that this is the primary card selected. We need a plus over here, back icon and an Add button on the bottom. So let's get going. Let's open up XD. We have our payment page. Let's go ahead and get rid of this title over here and change our large title to payment. For the back button here, we're just gonna write back. We already have a plus icon over here, which is great. And so now we're gonna go ahead and design a rectangle here. And I'm gonna make this one about 65 pixels in height. If you don't exactly have 65 pixels, you can go ahead and let go at any point and use command and the arrow keys to either shorten or make your rectangle taller. I can do the same thing with a right arrow key to make it longer or the left arrow key to make it shorter. So with that said, we're gonna go ahead and make this rectangle 29 pixels from each side. So let's use the again, the command arrow keys to move that around until we have that portion that we want. It looks good. So I'm gonna go ahead and round the borders and set the border corner radius to ten. I'm going to give the background, the accident one color. And then I'm going to add a text in here using the Alt and the eighth Here. I'm gonna generate these dots, icons and then just type in 1234. And so that's kind of representing the last four digits of the card. That's typically how it's shown in apps. So we can go ahead and also give our text there. Let's do the body one medium and change the font color to next. And three. I'm gonna go ahead and put this one on the right side over here and right align it as it is. I'll go ahead and duplicate that text, put it on the left. And for this one, we're gonna go ahead and left align it. And we're just gonna write what this card is. We're gonna do visa. And instead of little check mark, I'm actually thinking we can go ahead and just write whether this is the primary card over here. Why don't we move this up, duplicate this text, bring it down, and use the caption textile up here. We're gonna go ahead and change the color to the axon three. And here we're gonna write primary in all caps. Like so. I'm just gonna go ahead and align these to the middle and have 25 pixels from the left side over here. I think that looks good. We're gonna go ahead and group these together by dragging across and select the command G. Let's go ahead and just move it up a little bit over here. Duplicate that. Bring it down here. For this one, we're gonna go ahead and remove this primary and bring the visa down. This way the user knows which ones are primary card. And if they want to make this card primary or another card primary, they can go ahead and select that one. And in the pavement detail page they can go ahead and make that primary food like or we can even do something where they can select the card and an action sheet like this one can pop up asking them whether they want to replace that as their default method of payment options. There are really endless. Before now. We have our payment page sort of completed here. We just need a button at the very bottom to, for them to add a new card. So let's go ahead and find the button. Drag one across the middle and align it to the bottom with 35 pixels from the bottom and change this. But in text to add card. Added card by clicking that one. Now, I'm going to give you that assignment on putting together the payment page. I do suggest you take a look at a few different examples or inspirations to come up with that payment page. One we have opened up over here from delivered through on mobile. So here you can see we have a card number, and of course you can add other fields such as the name of the cardholder, the expiry date, the CVE, and so on. So take a pause here, Google, a few payment, mobile payment page to get inspiration. With that said, I'll leave that page up to you and if you do want my feedback and send it to hello clever at gmail.com. And I'll provide you with feedback as well and you can go ahead and upload your project. And I'd love to take a look at, but yeah, feel free to take a pause here, work on that page. You can go ahead and duplicate your art board over here and place it maybe somewhere else, maybe up here or somewhere else. Once you're done with that, we're gonna go ahead and move on to our location page. 61. Location Page: We're ready to work on our location page. Go ahead and open up our wireframes to see what we have in here. Of course, we have the search for the address up here. What we can do here is we can go ahead and swap this navigation bar for one of these search ones. And then we'll go ahead and use our plug-ins to create a map in the following lectures. And then we need a pen to show their address on the map itself, as well as a little sort of rectangle to show them the exact address that they've input, as well as a little button for them to find their current location in the map. A little, little save button down here. For the map itself, we're gonna go ahead and use plugins and the following lectures to generate a map in the background here. But for now, let's go ahead and place these elements on the screen. And then we'll go from there. So first things first, let's go ahead and swap this navigation bar that we have. Four. This one right here. Let's go ahead and delete that one and place this one instead. You'll notice because we've placed that navigation bar in our Layers panel on top of the status bar. It's currently covering the status bar. We can see that in our Layers panel as well. Another way you can rearrange layers other than dragging them over here. You can actually go ahead and right-click and click on Send backward, which we'll go ahead and send it one layer back or send to backwards. We'll go ahead and send this object all the way to the most bottom layer in that art board. Then he can go ahead and do the opposite by bringing things forward and bringing things to the very front. As a shortcut, you can do Command open bracket to bring layers down, or command close bracket to bring layers up. I'm gonna go ahead and use command open bracket, take that layer all the way down. And then we're gonna go ahead and change the title to address. There we go. Let's see. We don't really need the back over here. Let's go ahead and just get rid of that and just changed this action button here to done. There we go. We can search their address here. They can click Done when they're finished. And then let's go ahead and drag the button for my libraries down here with 35 pixels for the bottom, and then change the title to save address. Very go. Then from your resources, from the Icons folder, you can find the location folder where you can open it up and drag these two icons in our screen. Perfect. This one. We will go ahead and place it somewhere down here and give it some generous spacing from the button. This button is to help the user find themselves on the map. And then we're gonna go ahead and give this button or location icon secondary color. Let's try accident one. Same thing for this pen over here. We're going to use this one to show the user the dress that they're looking at on the map. So we're just going to put out in the center and give it also the acts and one color. Let's see what else do we need? We're almost done here. We just need our rectangle with our address in here. So why don't we go ahead and create a rectangle. And I'm just gonna go ahead and sort of align it with my button down there. There we go. Gonna go ahead and exit out of there. I'll give this a ten pixel corner radius. Along with a fill of my accident, one color replaces very close to the pin here. And then we're gonna go ahead and create a textbox. And here for this one, let's go ahead and drag a text over here, because it might be multi-line. So we're gonna go ahead and just type in a random fake address. But in a full format. So we'll do city postal. That should be good. I'm going to left align that over here. And let's set this as the illustrated caption. Nothing that's too small. So let's do body one. Perhaps body one medium would work yet. And then for the fill, Let's do accident three. We're gonna go ahead and just center that along here and stretch it out in case there's a second line. I think that looks good for now. Why don't we come back in the next lecture to create a map using plugins for this page. 62. Using Plugins: It briefly mentioned plugins and how they can help us in our designs and make our design process a lot faster. In this lecture, we're going to really see the power of that and use the plug-ins available to generate a map for our location page here. To access plugins in either go to the menu bar up here and click on plugins and access to once you have installed or manage or browse them. Of course, this might be under a hamburger menu if you're on Windows. Otherwise you can also access his Plugins panel over here or hit Shift Command P. And we'll go ahead and open up the same thing. Then you can go ahead and click on Discover plugins to discover the plug-ins that are available on the marketplace. Made available tons of developers who've put together all these plugins that you can use to generate icons for your designs and just access a ton of plug-ins that are useful for different use cases. Whether you want to automate something or you want to find plugins for publishing in hanging off your projects. There are tons of plug-ins available that you can browse. Go ahead and browse all the plugins available from here, and really go through it and see what each one can do. For example, this one here. You can use it to generate avatars for a profile icon, or you can go ahead and get plugins by clicking. Get over here once you open it up, like so. Once you've installed, it, might ask you for your password. So go ahead and input that and it will go ahead and start installing that plugin. You can access that plugin by stretching user profile. I'm up here under featured plugins. And in this search bar, we want to install that once we can use it in our profile page. But for now, let's go ahead and search for maps. I think I want to try this fancy map one and see for worse for us, let's go ahead and install this fancy map plug-in. And if you can't find this one, go ahead and search fancy maps and you can even search the author's name and it should come up. It seems like it has decent ratings as well, which is great. You can see the ratings for different plugins that are left by users. So this is installed here. Now, we can go back to our XD. We're inputting stuff in here. And now in under plugins, you can see it, the plug-ins that we haven't installed. Let's go ahead and click on that fancy maps plugin. In order for this plugin to work, you just need to go ahead and create a Mapbox account, which is a free. And then you'll go ahead and enter your access token in here. This plug-in requires that in order to generate a map for you. Once you do that, it'll load up this page. Go ahead and fill this form to sign up for an account. Once you've done that under your account, you should be able to find access tokens to go ahead and copy this default public token in which you can use to generate maps are using that plugin. So once you've copied that over, go ahead and paste it in here in XD. And then once you're done, you can go ahead and browse different cities from here that you can input. You can create a surprise destination, but for now let's just select New York. Then it will go ahead and generate this map for us. It will tell us what zoom level we want. So we want the sort of close zoom level somewhere over here. Maybe we can even have a generator marker, but we already have that over here. And we can choose a satellite type of map, different types of map based on what we're looking for. Let's just go with a default one over here. And then it will need to create a rectangle for the map to go into. So let's go ahead and create a rectangle over here from the top all the way here. Takes it out of there and then click on apply map. There we go. So we have the map generated. Now, I want to use Command Shift and the open bracket to send it all the way to the back of the layers. Perfect. We just need a few final touches and then this page should be good to go. Why don't we come back in the next lecture to polish this page up and go from there. 63. Finishing Our Location Page: We're ready to complete our location page. So we just need to add a few shadows here to separate the foreground from the background here. And we should be good to go first things first, I'm gonna go ahead and just go out of the plugins there and zoom in. Go to our Layers panel here. There we go. I'm going to start with this pen and just double-click into there so I can select both my shapes here. And while holding shift, I've selected both lines here or shapes. I'm gonna go ahead and enabled drop shadow. For the drop shadow, Let's do a blur of ten and a y of five. And maybe make it, It's slightly darker. So I think something like 20% should work. Let's go ahead and apply the same thing for the background of this textbox here. Do a drop shadow with y of five and a blur of 10, 20% opacity. That looks good. Now, I noticed that this rectangle has a border, so I'm gonna go ahead and just remove that. We don't really need it. Then let's go ahead and apply the same shadow to this cursor icon over here. So I'm gonna double-click to select my shape enabled drop shadow with five as to why, ten as the blur and 20% as the opacity. I think that looks good. It's slightly separated from the objects here are slightly separated now from the background, which is exactly what we want. Now, with this page completed, we're ready to move on to our order history page, which if you remember, during the wireframes I gave this page as an exercise for you to complete. So go ahead and work on this page. So to give you an idea of what you need in this page, essentially we want a list of orders that the users placed in the past. So what you'd need to do is come up with a new UI card design. In this one, you're going to go ahead and include some of the order information. You can include things such as the total, the restaurant they ordered from, and maybe how many items were in that order. And of course, the date and time that they placed that order. So if you put those four data sets into a card UI like these ones here, you can go ahead and even duplicate this card UI and create a component out of it, and use that in your order history page. So the idea is that users can see their previous orders from here with those four important datasets in that card UI. So again, the four datasets that you'd want is the name of the restaurant, the ordered from the total dollar amount for their order. Maybe how many items were in their order, and what date and time, the place that order. So we'll take a pause here and I'll let you do that on your own. And then in the next lecture we'll also do it together. 64. Past Orders Page: It's time to put together our order history page. I hope you had a chance to put something together for it as well. If not, no worries at all, we'll do that together in this lecture. And that should pretty much wrap up our mockup for this mobile design project. And then we're ready to slowly move forward with exporting, cheering and prototyping. But before we do that, let's go ahead and work on our order history page. And what I wanna do is get rid of this small title over here and change the large title to history, or we can actually do past orders. I think that sounds better. With that, I'm going to go ahead and change this order history to also pass the orders. I think that just sounds better. Let's go ahead and change this action button to back. We can remove this plus icon or we can let them create a new order by pressing this plus icon. So I think we'll just leave that in there in case they want to, let's say start a new order from this page. Now, I'm going to go ahead and copy one of the restaurant cards over here. I'm going to use that to create a new component and input those four data points that we talked about in the previous lecture. Let's make sure we select all the layers here in your Layers panel. And then let's go ahead and copy one out here and we're going to use Command K to turn that into components. Let's rename that to order cart. We know that's the card for orders. Instead of this image here, I want to go ahead and create a rectangle on top of it. And have it take the same width and height and then give it by holding Alt, I'm going to give it the same corner radius of, I believe it was 12 pixels. So let's go ahead and ensure this point is 12 pixels as well as this one here. Perfect. Let's remove the border and give this a fill of this gray color. You can input this hex code just as a placeholder for our images. With that, we can go ahead and get rid of this image layer over here. Now we have a placeholder for our restaurant image. That's not fully necessarily in the order history page, you could totally remove that from there. But I think it's nice for them to see which restaurant they ordered the food from. So that's really your call. Will leave this where it is, the restaurant name. We're going to just double-click and remove the rating group from here and change this dollar sign to the total amounts. So we're gonna do $1. Instead of this Italian wanted me to input how many items they ordered. So just as an example, I'm gonna write one item. Lastly, we need the date and time they placed that order. So why don't we move this two over here, make sure it's left aligned, and then go ahead and duplicate that. And we're gonna go ahead and make sure the spacing is the same, 14 pixels and this one's gonna be right aligned and we're gonna write the month, the day, the month, and the year. Then the time here, just as a placeholder, so the user can see when they placed that order. I think it looks pretty good. We still have space if you want to add somebody else over here, another point of data, but I think for now this is pretty good. Now for the restaurant image, I think we can make it a little bit smaller since it's not really as important here. And then we can go ahead and move these items up. I'm just holding Shift. There we go. Let's go ahead and shrink the entire rectangle over here as well. That looks good, pretty clean. We can use this now in our order history page. Let's go back to our order history page. Click on order history. And then let's go to our libraries from here and find that it looks like I didn't properly name or components. So let's go ahead and name this order card. There we go. Now in our order history, I'm going to drag that order cart in here. Perfect. Then we can go ahead and just use the repeat grid here to repeat this a bunch of times. And I'm going to remove that spacing in-between to 0 because I think the spacing, we already have this pretty good. I think we can even add a new button here, up here. And for this one we're gonna start start a new quarter. There we go. If they want to start a new order, they can do that from here as well. Now if you use this repeat grid to come up with new cards, this button will collide with the view. So I'm gonna create a little gradient background here to kind of fade out any cards. And we can do that by creating a rectangle here from at the very bottom of the screen. That kind of covers the button up to here. And we're gonna take this one layer down so that the button is on top of it. We're gonna go ahead and remove the border first and change the fill to, instead of a solid color be a linear gradient. Now for this color over here, the bottom node, we're going to set it to white. For the other node we're gonna set it to. We're going to leave it at weight and we're going to bring the OPCD all the way down to 0. I'm going to go ahead and just try that a little bit higher. I think that's pretty good. Now as you can see, behind this button, any card that shows up will fade out, which is what we want. We don't want that button to collide with that card. And so I think that looks pretty good. And now for our data, Let's come back in the next lecture or two inputs, some sample data in here. Just one thing I'm gonna do is I'm gonna go back to the card here and replace this with a generic restaurant name. We'll just do restaurant name because it is a component. We don't really want a specific restaurant name in there. And so I think that looks good. Now we're going to come back in the next lecture to input some sample data into here. 65. Adding Sample Data with Google Sheets: It's time to input some data into our past order page. You can go in and fill in each card with some sample ran data and add some random images for different restaurants. But in this lecture I want to show you something really cool they can do with the plugins that ECC provides. And we're going to use a specific plugin called Google Sheets, which will allow you to actually input data from a Google sheet into your design. And you'll see how cool and how useful that could be for inputting some sample data into your projects. Over here, I've put together a sheet with five restaurants and sets of data including the day, the total price items, and even the restaurant image and name over here. We're gonna be using this sheet in order to input some sample data into our design. And in order to use this sheet, you're gonna go ahead and I'm going to go ahead and copy this link over here, which is also provided under the resources of this project. If you go under sampled data, you should be able to find an order history, Google Sheets link, dxdy. If you open that up, you can go ahead and copy this link. We should open up this spreadsheet for you. And we're going to use that to generate the sampled data. So let's go ahead and just minimize that and go back into XD. Now for this plugin to work, before we go ahead and install it, we would need to make a small change, will need to actually go ahead and convert our component back into a group instead for this plugin to actually work and using Repeat Grid. So first things first, I have five sampled data in there. And over here we only have three with a fourth one behind this screen over here. So what I'm gonna do is I'm gonna go ahead and just bring this page up a little bit and stretch it out. And then let's go ahead and bring these to the rectangle layer with the gradient and the button all the way down to the bottom of the page. And then we're gonna go ahead and use the repeat grid to make sure we have five items in here. 12345, Perfect. That should be good for now. Perfect. So and then the other thing we want to do is go to our component for this order card, which is right over here. And what we're gonna do is we're going to right-click and do ungroup component that we'll go ahead and essentially do the reverse of making the same components. So now this is not a component anymore. And what we're gonna do is we're gonna go ahead and drag this into here instead of the one we have over here. So let's go ahead and delete this one here. And we're gonna go ahead and drag this one instead. But first we're gonna go ahead and group that together and input that in here. Just going to go ahead and maintain the Spacing 25 pixels from the top and make sure we're in the center as well. Perfect. And now we're going to use Repeat Grid and do that one more time. But this time I'm just going to go ahead and make sure that we also minimize your space to 0 right here. Perfect. Now we can actually use that plug-in. And in order to install it, we're gonna go ahead and open up plugins. Down here. You're gonna go ahead and click the plus sign. And we're going to search for google Sheets. Press enter. And the first one over here by impermeable, should be the one that we're going to use to go ahead and click the Get button over a year to install it. I already have it installed, so I'm gonna go ahead and skip this step. One more thing I want to do is go ahead and double-click to select this rectangle and rename this layer our image restaurant. Please hold her just so we know what this is for. Now, ready to input that sample data. So let's select the entire Repeat Grid group here. I don't know where it's plug-ins from the plugins panel. Let's go ahead and click on Google Sheets panel. And then over here it will ask us for a file source so you can either upload a CSV file or sign into Google Sheets what we're gonna do paste URL link because we're working with a public file over there. So go ahead and copy that link that's available in the resources for the sampled data of this page looks like there was something wrong with my repeat grids. So I just went back and read it that part again. If you see something that's off there, take a second to also fix that for yourself. But for some reason my repeat grid was using the same cart as the one in here, which is not what we want. We want this card for the past orders. So make sure you're repeating grids working properly and then go ahead and click on it. And under the plug-ins again, you wanted to paste the URL link and click on Import. This might take a second as the plugin is importing all those fields. What we want to do is we're going to go ahead and map each set of data to the correct field or the correct right angles. So the first one rectangle is 17. We don't really need anything in there as a background for the restaurant name. We're gonna go ahead and map it to the restaurant name in the Google Sheets for the $0, we want to go ahead and map that to the total price. So it shows the total price for the one item, which is the one over here. We're gonna go ahead and map that to our items. And this date field over here. We're gonna go ahead and map it to the date. And last but not least, for the image restaurant placeholder, which is this one over here as we renamed it. We're going to go ahead and click on restaurant image. We don't really need to select randomized content, otherwise there would put it in a random order. We're gonna keep the same order and just click on Apply and make sure you have your entire repeat grid selected while you're doing this. So the plugin will work correctly. It might take some time, but wallah, it will go ahead and input the data as we'd expect. And I think that looks great. Much faster than inputting data manually. And as you can see, the image URLs ended up working pretty good too. I'm going to go ahead and just select my layers over here and bring them up using command and the close brackets. And just make it this page a little bit smaller. In terms of the height. We don't really need it to be this long. Just make sure my putin has 35 pixels from the bottom and it does. Perfect. So now we have our order history page ready to go as well. I'm just going to go ahead and reorganize some stuff by moving these art boards here down a little bit. There we go. I including these labels, this action sheet here just to kind of keep our designs organized. And there we have it. That's how you input sample data using Google Sheets. And with that said, our designs pretty much ready to go. We're gonna come back in the next lecture and just take another look at everything and do a final touch-up of a small little details that we may have forgotten. And then from there we're gonna go ahead and move on to exporting this project and sharing it with our team members or colleagues or clients and so on. Let's come back in the next lecture to polish and wrap up this mock-up. 66. Polishing Up Our Designs: The end of every project, I like to kind of take a look at the entire project, organized things if they're out of place or Polish each page up a little bit from where I see there could be improvements. And only is this good practice, but also allows you to kind of get that eye for detail for your designs. We're gonna go through this and see where we can make some small improvements. This lecture together. In terms of the organization, I think we've done a pretty good job. Everything is sort of where we want it to be, just to kind of keep things organized. I'm going to go ahead and bring these Apple assets to the right side over here alongside my components. Just to kind of keep these together. Our color scheme, type sets, everything looks great. Here are components are all organized over here. We have an extra logo here, so we're gonna go ahead and delete that. Now. We're going to work our way from the splash screen into all the way to the right. And then at the top, we're gonna go for the profile page all the way to the right as well. So starting with the splash screen, I think things look great here. Login page looks good. Let's just make sure that the spacing or everything's correct and it looks like things are pretty good. I'm just gonna go ahead and space out my Forgot Password a little bit, maybe 15 pixels from the field and bring this button down a little bit as well. And make it 30 pixels from the forgot password. Over here. We're just going to go ahead and set the privacy policy to semi bold, as well as our terms of service. There we go. Our phone verification looks pretty good. Just bring that down. Everything's aligned properly. We can go ahead and just double-check that as well. Double-check the aligning of everything here. One thing I wanted to do is I'm gonna go ahead and copy this Menu button and place it in my other navigation bars as well. From here, there'll be able to also access the menu. The speech looks good to me. In terms of our menu page, the only thing I want to do is just space things out a little bit more. So we're gonna go ahead and just space things out too. 25 pixels. Over here. I'm going to go ahead and just select the entire stack over here and change this spacing to 25 from here. Same thing for my deserts stack. Do 25 instead of 15. The reason for that is we want more breathing room. We want more whitespace. We don't want things to be way too crammed in here. Let's go ahead and stretch that menu page a little bit more so it fits everything nicely. Let's go ahead and change the number of orders for this item to one. And same thing over here. We forgot to do that in the previous lecture, so we'll just do it here and double-check the spacing of everything. And same thing over here. I'm gonna go ahead and bring this down a little bit. So it's 25 pixels in the spacing. This looks pretty good to me. Or order Progress page looks good as well. Maybe I'll just bring these down a little bit more, little bit more spaced out. And everything else looks good. We're gonna come back and add a little animation in here later on. Let's looks good. And at the top over here, instead of having first and last year, we're just gonna go ahead and input a random name. So we're just gonna first left, align it, right. John Doe. For the profile icon here. I'm going to use that plugin that he installed earlier on called user profile. If you don't have it Ticket pause here to install that plug-in, but that allows us to insert some random photo in here and we can go ahead and even insulate the gender. Now we can go ahead and select the ellipse here and click on insert random photo. If you don't like the photo, you can totally go ahead and keep pressing until you have four. You like to use. The plugin here will generate as many photos as you'd like. I'll leave it just as that. And then the R button here looks good. Everything else looks good on this page are payment page that looks good. Or address page also looks good. And our past Orders page looks good as well. Or else looks good over here. And I think that's pretty good for our project here. It's pretty polished up and pretty nice. I don't think there's anything else we need to add at this point. Now we're gonna come back in the next lecture to talk about responsive resize, which allow your design to be responsive to different device sizes. We're gonna do that together and then next lecture. 67. Responsive Resize: While we're getting ready to move on to exporting our project and prototyping. I want to also show you one more cool feature that adobe XD has. This is really useful when it comes to working with multiple screen sizes and device sizes, and especially when you're working on a web project. But what this, what this feature called responsive resize, allow your designs to work on multiple screen sizes rather than just the one over here. Right now we've set up this iPhone display size here for our artworks, and they're all the same in terms of the width. Particularly suggest as an example, if our devices run a little bit larger, right now you see our designs, a certain kind of fall apart, didn't really fill the entire section. So if you do start stretching the width of our devices based on what device you're looking at. This design on. The design might not start working. And so that's why adobe has put together this feature called responsive resize. And what I really liked about XD is that it does a lot of the work for you using the auto responsive resize mode. So essentially, with responsive resize, you can allow your elements inside of the screen to be able to, as the name suggests, re-size based on what the display size is. As an example, in his profile menu page, we're gonna go ahead and turn on the responsive resize. And then what will happen is that now our objects in this art board, we'll go ahead and resize as a shrink or expand my screen size. And as you can see, the auto mode does a pretty good job. There are certain things that could be improved, but overall, it's pretty nicely done in terms of how it handles the response of re-size. But then when it comes to certain elements such as this name over here and the text in these buttons. We can go ahead and fix those so that it actually works flawlessly. The way to do that is to actually go ahead and click on a certain element in that art board. And then over here, as we can see, for each element, we add an auto option in terms of responsive resize any manual option or we can go ahead and altogether it turn that off. But by default, all the responsive sizes are on and on the auto mode for each object inside of your art board. But if you go ahead and click on this manual option, now, all of a sudden you get some certain options for your object here in order to be resized and manually by how you'd like it. And using these options over here, we can go ahead and fix this object to certain sites as a screen. So essentially if we do this option over here, when it turns blue, this means that now this object will be fixed to the left. And of course we can combine multiple fixes together such as the left and the top. Now what will happen is that this text-box, no matter what the width and the height of this artboard will be, will always maintain this certain pixel from the left side at this certain pixel from the top of the design. With these options enabled. Now if we go ahead and expand or design, you'll see that textbox won't move because it's maintaining that spacing from the left and the top side. Similarly, if you do shrink the design, as you can see, the textbox now won't move up anymore. We'll go ahead and maintain where it is in terms of the spacing from the top. But if you go ahead and disable that now and just do fixed left. Now as you can see, the text box will start moving regardless of their spacing from the top. For example, for this button here. Now again, most of the things we'll be done manually by XD, so you don't need to do a lot of tweaks. But we can go ahead and apply manual responsive resizes for certain places. And if you want to keep elements together, like these buttons sets over here. When you do group something together, it will go ahead and maintain that spacing or the proportion between those buttons. So in that case, if we do, for example, shrink the art board size, the group will be untouched and it won't mess up the spacing between them. Now, what would happen if we select this image, for example, do a manual resize and we actually go ahead and turn off the fixed width and a fixed height. What will happen then? Well, well, you'll notice now is that as the art board shrinks or expands, that image will go ahead and actually scale with respect to the size of the device. Whereas if we go ahead and undo that and actually go ahead and fix its width and height. No matter how much we stretch this art board out, the sizing of that image won't change. That's what the fixed width and a fixed height two. So again, we can go ahead and enable responsive resize and multiple art boards and see how the workout in some art boards, it's almost flawless and you don't need to make any changes at all. Whereas in other art boards, you may need to make some tweaks, such as this one over here for the address. We can go ahead and group these two together. Then set of manual response, set of manual resize and fix the width. But then one issue will be that now it's aligned to the left side because it's always gonna be fixed to the left side because as you can see, we have the fixed left. So we're gonna go ahead and turn that off so that it will be centered across display, across the display, which is what we want. Now that looks much better. As an exercise, you can totally go through the design. Go ahead and enable responsive resize on any artboard that you want. And go ahead and play around with it until it looks right. They get uncertain pages in certain designs you may need to make tweaks and change it, whereas on other ones, it will work just as you'd expect. For example, we could totally see on an iPad display something like this would look good for the past Orders page. So that's one of the reasons why responsive resize is so powerful. So go ahead and take this time to pause and explore more of the Artboards and try to apply responsive, resize until things look good. Don't be afraid to jump in and make certain tweaks to your objects. So as an example in this menu page, you'll see things start falling apart with these texts here. Of course, what you'd want to do is apply a fixed left manually to all these textboxes. So as an exercise, I'll leave this page at this menu page for you to do. And remember, you can apply the responsive resize enemy component themselves. So you can go in here and change the responsive resize of each element in your component. And that will be applied just like everything else with components to all your instances of that component. As an exercise, take a pause here, go ahead and apply responsive resize to the menu page and the carts here specifically. Then we'll do that together in the next lecture. 68. Responsive Resize Exercise: Alright, I hope you were able to apply that responsive resize for the menu page. And we're gonna do that together this lecture. If you go ahead and enable that responsive resize for the art board, which I've already done. So go ahead and expand that design and we can sort of see what elements need to be fixed. And in particular, it's these texts over here. So what we want to do is make sure those texts stick to the left side of that card and they don't resize with the screen size. As I do that, we need to go to the main component of these cards. We can go ahead and go Edit MainComponent, and that will take us to the component itself explained by default, your components will have responsive resize. But if you want, just like any other art board or objects inside of our art boards, you can go ahead and click objects inside of a component and tweak it's responsive, resize yourself. Now, what we wanna do is we want to go ahead and fix this item to the top and the left side so that as the component stretches, it will go ahead and maintain its pixel, this many pixels, 145 pixels from the left side of your card view. We want to do the same thing with this description here. As you can see by default it was fixed rate, which is not right. And then we're gonna go ahead and select these two by holding shift as we can. Go ahead and set the same one for both of them, which is fixed left and fixed bottom. For this right here, it's already correctly set to both fixed top and bottom as well as fixed rate what we're in here, we could do two more things for these elements over here, we can go ahead and remove the fixed width. So now back in our menu page, we can go ahead and expand or shrink. This design will work, almost fall asleep, but I'm gonna go ahead and just set the width back to my original width here, 390 and leave it like that. That's our exercise for the responsive resize. And that pretty much wraps up the design portion of our mobile app. So we're gonna come back in a following lecture is to learn how we can export our designs and shared with team members in XD. 69. Select Export: So we've done a great job designing our mobile mockup here. Things really look good and I'm pretty happy with how it turned out. This is the part where we asked, Okay, So what's next? What can we do from here? What are the options in terms of exporting our assets out of here, our art boards, or sharing it with other people and creating prototypes out of them. Well, that's what we're going to explore together in the following lectures. Starting with the exporting of items as well as art boards from our XD. Xd gives you options for either exporting single items or elements from your designs, as well as exporting a batch of items while also allowing you to export entire art boards. So we're gonna go through those three one-by-one. The first one being a select Export, which allows you to export a single object or maybe a group out of your designs. So just as an example, if I zoom in and I want to export a certain object here is whether it's the logo or let's say this image here so that developers can use it in their development work. We can export that individually. So as an example, let's go ahead and export one of these menu cards out of XD into our files sooner to do so, you can go ahead and select what you'd like to export. And I remember whatever you export, that exact thing will be exported. So if I select the entire group here, all of these will be exported in one file. But if you want to export a specific thing, whether it's just a text here or the entire item card view here, which is what we want. Then go ahead and make sure you have what you want selected because only that, because only that layer will be exploited. In order to export this out of here, we can go ahead and either go to File, Export and do selected, or as a shortcut, you can hit Command E or Control E on Windows. And XD will now go ahead and ask where you want the file to be exported. And if you see something like this and a Mac, you can go ahead and click this little arrow so you can choose exactly where you want to save it and you can rename it as well if you want. Once you're ready, you can go ahead and click Export By. Take a second here depending on what you're exporting. But once you have that export it, if you do open up that location or that folder where your item is, then you can see the card view husband exported as you'd see. Now one thing I want to note is that XD will go ahead and export exactly at that resolution because that chord was originally the size. If I go ahead and stretch the image, it will lose the quality. So one thing you could do is when you are exporting, you can go ahead and tweak the size of your export so that it will have a higher resolution. If I do a a3x now and go ahead and save the same thing. But I'm gonna do at a3x in the name. Then what will happen is XD will go ahead and export the same item, but now at three times the resolution of what you see over here. Now if you look at the original item card view and the item card view at a3x, it's much higher resolution. So typically you'd want to share something high-resolution with developers so they don't have to look at it at this size. Of course, keep in mind that your file size will also be bigger if you do set a higher resolution. There are other options available as well where you can export for web, iOS and Android. That's how you export single items out of here, you can do the same thing. So let's say you export a single object or element or group out of XD. Now remember you can do that with anything again. So if I select just as an example, this entire text group here and I just export that. You'll see XD will just export those texts layers with the same font, the same color as a PNG here, and there's no background here as my texts over here don't really have IT background. So that's how you export single items out of XD. We're gonna come back in the following lecture and learn how we can export multiple objects at the same time using batch export. 70. Batch Export: So now that we know how we can export single items out of XD, what if you want to select multiple items for export from XD? Now of course, you can go ahead and select a certain element, let's say this button here and then hold shift and select another element. And then go ahead and export those together. That will work as expected as well. But the other option here, which makes it a lot easier, especially if you're doing this process over and over is called batch export. Batch export allows you to export multiple things together by marking certain objects for export. So as we're going through our designs, let's say we choose to export a certain object, this image that say, you can go ahead and click this little marked for export in the Properties panel for that object. Now again, same thing as a single Export. Make sure you have the correct item selected. We can go ahead and mark that for export and then move on and select something else as marked for export. And as we're growing through our designs, we can select multiple things. Let's say we want to export this menu button here. We can go ahead and select this hamburger menu icon again to make sure you have this thing selected and then do mark for export and so on, so forth. Now, once you have multiple objects selected, then you can simply go ahead and either hit Shift Command E, or you can go ahead and select File, Export and do batch export. Batch export. You get the same options. We'll go ahead and ask you to choose PNG as the format, or you can go ahead and actually change them to SVG, PDF or JPEG. Now typically I like to use SVG so that our icon over here, it can be resized without messing up its quality. And I'm going to go ahead and just create another folder here called batch export items, so that I know exactly where I'm saving it and then go ahead and click Export. And as expected, those items have now been exported as SVG now. And that's why they look like this in the preview on Mac. But just as expected, important this back into XD and a works flawlessly. The quality won't be butchered based on the size or the resizing here. That's how you can export multiple objects at same time using XD. Now remember, because we selected those items as mark for export, they've not really been an unselected. So as we keep adding items to our batch export, those items will be exported over and over again. So this might be good for something that you want to make tweaks to an export different versions of it and send it to your team members or colleagues for feedback. But if you want to undo that, you can simply unmarked things for export. And now only the things selected for export will be exported out of your XD. And so that's how you use batch export in XD. Now, what if you want to export the entire artboard here? Well, we're gonna come back in the next lecture and explore that together. 71. Exporting Our Artboards: Now we know how to export individual items out of XD, how to export multiple items using batch export. But what if you want to actually go ahead and share our entire art board designs for someone else. Exporting artboards is as simple as exporting objects. All you need to do is simply select the Artboard they want to export. And of course you can go ahead and hold Shift and select multiple art boards. And go ahead and click Command E will go ahead and save it as PNG, which is going to create a folder called artboards. Here, you can go ahead and click Export. And now XD will export your art boards into that folder. I've chosen the a3x resolution, and so that's why it's so high quality. That's how you export multiple or if you want individual art boards and you can go ahead and just simply do it on what our board. Now, what if you want to export all of the art boards in our designs? Well, XD makes it easy for you because you can simply head on over to File Export and do all art boards here. By doing export all art boards. Because we already have those three art boards there. Xd will ask us, Do you want to replace those? Are you sure as it will overwrite those? But we'll go ahead and click Replace. So now XD has gone ahead and exported all were art boards here into that folder that we selected, which is perfect, looks great. And these artboards cannot be shared with anyone. You can send them over to your developers or fellow designers or clients or whoever this project that you're working on concerns. But of course, there's a much easier way to share artboards. You don't need to keep sending them PNGs updated over and over and over again because that process can get really tedious. And you'll end up with lots of version names such as VU on V1, T1, T2. But the design software is nowadays really make it easy for us to be able to share or projects with clients or other team members without needing to actually export things out of XD. So essentially if you want to export your art boards, especially if you know that this is the final version of your art boards, you can do that like so in XD. But if you do want to actually share your art boards within XD itself, we're gonna be doing that together in the next lecture. And I think it's one of the really cool features that XD provides that we don't really see and many other design softwares. But I think XD does a really good job of allowing you to share art boards or share assets with other designers and developers or clients. And so we're gonna do that together in the next lecture. 72. Sharing Artboards: Now we know how to export multiple things including art boards out of our designs and send them to maybe team members or clients. But is there an easier way to share our art boards with other people and maybe get their feedback on or ask how we can improve our projects from them. Whether their clients or team members. Xd actually gives us that ability using the Share tab over here. So if you've been wondering all this time what this shirt does, we're gonna be exploring that together in this lecture. By heading on over to the Share tab over here. Xd will allow us to share our art boards with other people within XD itself. What I mean by that is it will go ahead and create a link for you where you can share this link with other people. You can get their feedback on them. You can ask them to leave comments depending on what view setting you have. And we're going to explore those views settings in just a second. Before we do that, let's explore what we have over here in our shear tab. Within the properties panel, XD will assets to choose a flow or a float name. From here you can go ahead and rename this wherever you like. So let's say we do healthy bites mockups. And so now this link will be called healthy bites mockups. And we can go ahead and manage our links by clicking this managed link here. From there, XD will take us to the Creative Cloud website where we can go ahead and delete flows that we don't want anymore and view all the files or the published links that we have. That's how you can manage your links from there. But what we're really interested in is to explore what this feature actually even does. So that's the link name. We can go ahead and set the view setting. If you wanted to just get feedback on our designs, we can go ahead and go with the default option, which is design review. If you want to share this design or our prototype with the developer, we can go ahead and select this option, which we're going to explore in the following lecture. If you want to just present our project and keep it as simple as possible. This is best for presentation. User testing is great for when you're testing your prototype, which we will be working on in future lectures as well. We can also set a custom viewing experience where you can go ahead and choose exactly what you want. Whether you want to allow comments or you want the file to open in full-screen, include design specs and so on. For simplicity, let's go ahead and choose a design review and explore what that does. You can go ahead and choose who has access to this link. So you can either invite specific people to this project, go ahead and write an email address and invite that person to view this file if I just want to share it with a specific person. So in that case, I can go ahead and set the link access to only invited people. But if we want anyone with that link access to be able to see my art boards and I can go ahead and choose anyone with a link. Anytime you make changes up here, you can go ahead and click Update Link, and XD will go ahead and generate a link for you that you can share with your colleagues. And so once that's done, you can go ahead and simply click on this Copy link where we'll go ahead and copy that link to your clipboard. And so now, if I do go ahead and open up a browser window and input that URL in there. We'll put our designs on their website here, where again, only people with this link can access it. If you've selected that anyone with a link option. And so now they can go through your designs all the pages and leave comments over here if they'd like. Of course, if they want to do that, either they can continue as a guest or sign in with an Adobe account. You can go ahead and simply continue as guests and leave feedback on these designs. And go ahead and really browse all those art boards. The beauty of this is that if you make any design changes and go back to your share, you can go ahead and update that link by doing a simple refresh. Now that update has been applied on our shared assets as well, I'm gonna go ahead and just simply undo that and I'll leave the link here. But now you can really see the power of sharing art boards rather than exporting them and sending them to others for feedback. Now if I'm signed in, I can go ahead and see all my comments for my project and go ahead and leave replies to them. Pretty cool. While you're here, you can also go ahead and browse all of the assets that are shared with you. We are that link. You can go to a specific page if you want. And what's cool is that he can even share prototypes. So once we do start prototyping, these pages will go ahead and even become interactive so they can actually use it just like an app. But we're going to explore that in the future lectures. For now. We just want to learn how to share our art boards with other people. So what if I just want to actually share specific Artboards and not all my art boards. You can do that too by simply heading on over to the design tab, selecting the art boards that you want to share. So let's say I just want to share my restaurant page and the menu page and nothing else. Then you can go ahead and hold Shift, select those art boards, and then go ahead and click this little Share icon up here. And XD again, we'll go ahead and take you to that shirt up. But now, only leaving you with these two art boards, nothing else is selected, meaning nothing else will be shared via that link. Now the only issue here is that because I already created one link, I can't create another link. Because XD, with a basic account will only allow you to share one link at a time. If you want more link sharing, you need to upgrade to the next level. You need to upgrade your account. But we're gonna go ahead and simply get rid of this. I'm gonna go ahead and simply permanently delete this link here so I can create new links. So now I can head back, select those two pages again. Now, XD will allow me to create a link for those pages and rename it as we'd like. If you've created a link now and then go ahead and copy that link and shared with others. Go ahead and reenter that URL, enter that URL in. Now as you can see, we only get two pages here, the two that we export it. So that's how you can share specific art boards. Instead of all your art boards with other people. We're just gonna go ahead and delete that as well. We don't really need it. Go ahead and undo that as well. That's how you can share your art boards using XD. There's one more thing I want to show you about sharing art boards, and that's the developer handoff that we talked about. So why don't we come back in the next lecture to explore that as well. 73. Developer Handoff: What does the developer handoff and how can we make the life of a developer easier as a designer when we're sharing assets with them? Well, we're gonna explore that together in this lecture because I think this is super cool feature that XD has. That's really great along with its other sharing capabilities. So to go through this, we're gonna go ahead and go back to our Share tab. Then instead of Design Review in the view setting, we're gonna go ahead and actually select development. Once you do that, XD will go ahead and ask you, is this a web project, iOS project or Android project? So that accordingly it will give you the developer or the right assets or the right code for certain platforms, and click on downloadable assets. So if there's any assets that you can download, they can do that from there. Anyone with the link. We're gonna leave that as is and create the link it a second here. And once that links generated, we're gonna go ahead and copy it. There we go. Now in my browser, I'm gonna go ahead and input that in. And now we're gonna see what the differences are between just sharing it as a design review versus a developer review. Now XD will go ahead and show you that you have this specs mode here we can go ahead and toggle and see the useful stuff as a developer when you're working with a design. I can of course, go ahead and leave a comment as usual. And I can go ahead and even place a pin on a specific part of the design where I can leave feedback on that specific part. So of course we have that option as we did before. But now we have this little tab over here and we can go ahead and view the specs of this page. So actually we'll go ahead and show us a screen details such as the size, the colors available in this page. And we can go ahead and click on this to copy that color to our clipboard. We can see what font sizes are being used and what fonts. We can go ahead and even change these values from hex to RGBA and so on. And even cooler, we can go ahead and select individual items within our design and actually see even the component and what that button it looks like in different states. We can go ahead and see more information regarding this but or this text. For this image, we can really go ahead and select anything and it will give us that property. We can go ahead and of course go to different pages and see different properties based on that screen and somebody else, that's cool. If I go back to my XD, Let's say we're designing this for a web project. So I'm gonna go ahead and change that to web and update the link. Something cool. What happened? Because XD has CSS capabilities and for go ahead and refresh this now, it will go ahead and actually give me a CSS code right here. If I'm working on a web project as opposed to an iOS project, I can go ahead and actually copy the CSS code and use this in my web development projects as a developer. This will show up on all pages. And you even get this new tab over here when you're working with a web project called variables, which we'll go ahead and allow you to access those variables that we created in our libraries, such as the accent colors, the primary colors, and so on. The font sizes. I can go ahead and download it from here. As a CSS project. Really, that's the difference between design review and development review. In development mode, we have access to a lot more. We can even go ahead and access our assets and download, for example, images, which is great because this way you don't have to really send images and items back and forth between your developers. That's really what makes XDS sharing features so useful. With that said, we're going to come back in the next lectures and learn how we can actually work on XD projects with a team member or with multiple team members working on it with us. So say a quick pause here and learn together in the next lecture. 74. Inviting Editors: So if we're working on a design project with other people, Let's see colleagues or team members on this project. How can we share our project and collaborate with him at the same time? Well, actually has an invite feature where you can go ahead and share your project, your XD file with other designers. They can actually go ahead and join you and co-edit this project with you. Because your files are saved on the Cloud, then you can go ahead and simply invite people to your documents so that they can help you edit it as well. Error to do that, you can simply go ahead and click on this little Share button over here or Invite button over here. Xd will go ahead and allow you to input an e-mail address into here. We can go ahead and invite your colleagues or team members to this project. You can go ahead and write a little message if you want, or you can simply go ahead and invite them to edit. Once you've done that, the mutation will be sent to that user. And they'll receive an email about it where they'll go ahead and open that project up and have the ability to actually co-edit that project with you. If at any point you want to remove that person from your a document, you can go ahead and simply click on Remove over here. And there'll be removed from the project. And that's how you can invite team members to work with you and co-edit projects with you in XD. 75. Document History: As you're working on your project and you're making changes to your designs. Xd will go ahead and keep track of different versions for your designs. So let's say if you want to compare two different versions that you have or go back to a certain stage of your design. You can do that using the Document History feature that it has. If you go up here in the bar over here where it shows you your filename and hover over this arrow, you'll see you have access to the document history, where you can access auto saved and bookmark versions of your document. So the equilibrium that will go ahead and show you the different versions at different times for your project. Because your project is being auto saved, XD will go ahead and automatically save your project and give you certain ones that you can go back to. You can even go up to the past ten days. And if you want to keep certain versions, you can go ahead and actually mark those, bookmark them and access them at any point. For example, if I just roll back to one of my versions here, so I can go ahead and click on this little three dots to open this version in a new window, I can name this version of I want. I can go ahead and bookmark it using this button over here. Go ahead and open it in a new window. Xd will go ahead and open that up. At that point in time, which is now in the name of the file as well. You can see this is the point where we were working on our order history page. So we kind of went back in time with this project right now. That's really the use case of this document history feature. You can go even more far back. If you don't want to go ahead and rename this version, you can name this working on order history just as an example. They can even go ahead and put the date here if you want. Go ahead and click the Okay button here, and it will go ahead and save that version for you. Or if you want to just save any version without renaming them, you can do that by clicking the bookmark here. You can also access your marked versions from up here so you have easier access to them. This is one of the benefits of having your file saved in the Cloud, as opposed to saving it somewhere locally on your machine. Xd will give you access to that document history, which has come in quite handy, especially if, let's say you make big mistakes on your design that you want to go back to a certain version of the past, or you want to save different versions for different parts of the design process. Let's say you can use a document history in XD. 76. Sharing Libraries: As we went through the course and we started putting things together in our libraries over here. We're able to see how useful this Libraries panel B. And we can really go ahead and take advantage of this libraries and use it across multiple projects as well. One thing you could do is you can go ahead and actually share your libraries or publish your libraries into a Cloud document asset. We can use them across multiple projects or with multiple people. If you put together a design system that you want to share across the sea, multiple projects for your company or for your clients projects. You can go ahead and publish this library by going over here and clicking this little icon over here. And then we'll go ahead and actually we'll go ahead and open up your libraries from where you will be able to publish your library. Now, one thing is that this is a feature that you need to upgrade for in order to use. Xd will ask you to upgrade if you want to have access to publishing libraries and using them between projects and with Teams. Alongside a couple of other features such as having unlimited editors shared documents, shred links, and so on. If you do have the upgraded account by clicking publish, you'll be able to go ahead and publish this library and even invite people to it. Go ahead and invite a certain person to it. I can go ahead and either give them viewing permissions or editing permissions if I wanted to have the ability to edit this library. Otherwise by inviting them, they'll have access to the library here across your projects. And they'll get an email from where they'll go ahead and have access to that library. So that's how you can publish libraries using XD and share them with other team members. 77. Importing Sketch Files: Now if you've worked with other design software as before, you can go ahead and import them into XD at any point. If you are in your file browser like I am over here, of course you can go ahead and create new files, but you can actually go ahead and open other files including Photoshop or Illustrator files, sketch files or other XD files. If you're working on a sketch project where you have a sketch project that you're bringing over to XD. You can simply go ahead and click on this sketch option. And then XD will ask you to locate that file. And once you've done so, you can go ahead and click Open. Now from there, depending on how big the file size is, it might take a minute here for EC2, import it, but as you can see, uh, we'll go ahead and import your project into an XD project. You can go ahead and use it just as expected. Xd will go ahead and even move over your components from sketch into XD components as well. And he'd go ahead and edit those components just as you'd expect. That's how you can import sketch files into Adobe XD and use them as you'd like. Now you may notice that things are in different pages. In Sketch. They might appear as different sections inside of your Canvas that you have here. That's why things are broken down into different sections, but everything else should be the same. One thing I do want to notice that if you don't have the right fonts installed, it might not work properly. So you might want to go ahead and make sure that you have all the fonts in that sketch file installed before you import it into your XD. Let's say you can import sketch files into XD. 78. What's Prototyping?: We briefly mentioned prototyping. And then the earlier lectures we talked about coming back to our designs and putting your prototype together that we can actually use a but what is a prototype in design software? What does it do? What is it good for? And why should we create prototypes from our mockups? Well, as simply put, a prototype is essentially a sample or a model type of product created to test what the process of that product will look like when it's actually programmed and built. We put these designs together, but they don't really have any relation to each other. They're not really a product yet. Using a prototype, we can actually go ahead and create or mimic what an actual product developed out of this design would look like and would feel like anything from creating connections between the buttons to the different pages, all the way down to showing what different types of animations pop-up on our designs or opening overlays on top over design and so on and so forth is all part of prototyping. But he used prototypes to share our vision for this product or for this design, which would then be turned into an actual product with help of a software developer. The reason why prototyping is so important is that it costs a lot less to put together a prototype using a design software such as XD, as opposed to going ahead and actually developing such app or product, as opposed to actually coding such product. And then realizing what changes need to be made. And as we send out this prototype for feedback, we can go ahead and improve it before we actually hand this off to a potential developer to put together using code. So we're gonna go ahead and connect these pages together in the next lecture and create a prototype out of our designs. 79. Creating a Transition: So how do we actually create a prototype and create connections between our pages in XD? Well, you simply go ahead and head on over to the Prototype tab up here. Now once you're in the Prototype tab, as you can notice, the properties panel will completely change. And now you can go ahead and create interactions between different pages, different buttons, and so on and so forth. And we're gonna do that together in this lecture. And the way we're gonna work through this As to work our way from left to right, which is essentially the order of the pages that we expect to go through or the we expect that the user goes through. What we're trying to do here is create a flow that takes the user from the initial pages of the app all the way through the final pages, which in this case will be viewing either order progress, then having the ability to also open the menu and access these other various pages as well. So we're gonna take our time, go through each page carefully and add proper connections between the buttons and the pages. I want to go ahead and just press that and zoom into this section over here and work our way from here. Now in a prototype, there's always a home screen that you can choose. So what this means is that when you do open your prototype, this is the first page that the prototype will start in. In our case, we want to make the splash screen, the homepage. So we're gonna go ahead and click on the Artboard for the splash screen, and go ahead and click on this homepage. Now we've created a flow one. The first connection we're gonna make is from this page over here, the splash screen to our login page by simply dragging this node over here from the page and dragging it to the page that we want the user to go through once they've seen that splash screen. Now or the right side over here, we get a bunch of options on how we want this transition to happen. So one by one, we're gonna go through the action types that we have over here. The first one is transition, which will simply as the name suggests, take the user from one page to another. We have auto animate, which essentially tries to do the same thing, but animate that transition. So if there's anything that's similar between the two pages, the auto animate toward go ahead and create a smooth transition that looks like there's some silver animation between those pages. And because these pages are unrelated, really, I don't have any shared elements. We don't really want to auto animate it. We can choose to open an overlay, which essentially what this will do is open up the page that we're pointing to, which is this one over here on top of this page over here as opposed to, as opposed to transitioning the user from one page to another. So again, on the page will open on top of this page. And usually we see overlays used in action sheets and Alert Views and smaller screens that were just temporarily popping up and going away. We'll explore that as well when we put an overlay for our action sheet. Previous artboard will take the user back to the previous artboard of the prototypes or wherever they were previously. We'll take them back, their audio playback, as the name suggests, plays an audio. Of course, when we select that, we can go ahead and choose an audio file and speech playback. We'll go ahead and actually playback a speech as the name suggests. And you can go ahead and write that speech and here. So that's cool if you need to play back his speech, but we don't really need that right now. We just want to transition one over here. With each of these options, you'll get a different set of options right below it or properties right below it. To edit, we're gonna go through those in more depth. For now. We just want to go ahead and create a symbol connection from our splash screen to a login page after a certain duration. So we see our destination is the login page, as we've already pointed at two. Now if at any point we want to change this connection, we can go ahead and drag this to another page that we want to appoint two. But for now we're going to go ahead and create these two connections. Of course, you can create multiple connections if you want. We can create one connection between the splash screen and login page and one between a splash screens defend the following replication. But I'm gonna go ahead and just delete that connection by simply clicking Delete. If at any point you don't want to connection and you want to remove that connection, you can simply select the connection and click Delete on your keyboard. So for this transition, we wanted to login as a destination. And for animation we want to have a dissolve. These are the animations available for transitioning between two pages. Now, some of them will be applied in different places of our Apple for this page, dissolve is the appropriate one, which essentially fades from this page to this page. Now over here for easy, we get different types of easing options to choose how we want our animation to look like. Typically we see ease in or ease in and out excused. But of course you can go ahead and try the different types of animations, easing to see what the differences are. So let's go ahead and choose ease in and out. For the duration, I want to go ahead and select zero-point four seconds. So essentially this is how long that animation will take. The longer you set it, 1 second or more, it will go ahead and transition between these two pages in more time. Whereas if you said it's shorter, it will happen faster. That's essentially what that region does. So let's go ahead and actually preview our prototypes so far right now, because our trigger is a tab, if I go ahead and tap on this page, it will go ahead and animate to this other page. But what I want to do is instead of tap, we want to go ahead and choose time. We wanted to go ahead and have it change to that page automatically without the user having to tap on it after 0.6 seconds. Now if we go ahead and open the desktop preview one more time, as you can see, without me tapping the transition automatically happened. That's what the trigger up here it does. Then you have other triggers such as voice. So you can use a voice demand if you want. You can use keys and gamepads. User presses certain key, then it will go ahead and animate or a drag and attack. So typically we use a tab. What time is also, of course useful in a case like this, we've created our first connection here, which is awesome. Now we're gonna come back in the next lecture is to create more connections between the rest of our pages. 80. Connecting Our Pages: Congrats on creating your first connection for the prototype in our mobile app. I think it looks pretty good, but go into the desktop preview up, up here, you can go ahead and preview that animation that we've created or that transition. I think it looks pretty good. Now from here we want to go ahead and go through each page and see what connections need to be made between the different pages. Now of course, you can get more detailed with reporter type if you'd like. For example, if you'd like to go ahead and mimic the user putting in an email address or password, and then maybe a keyboard popping up using the Apple assets, you totally get more pages designed over here, maybe right below this login page and have each of those separate types of designs and then transition between them. If you want to create maybe a more realistic type of prototype. But in this course we're going to keep it simple and create connections between the pages we've already designed. From here, I want to go ahead and create a connection from the login button into the next page of the app, which will be the phone verification. So we're gonna assume that it's the first time that the users logging in. So we'll credit connection from the login page to the phone verification page. Now one thing which is cool, but prototypes is you don't necessarily need to create connections between pages. You can actually go ahead and create connections between any element in your design. This way you can actually go ahead and hook up this button with this page so that when a user taps on this button, it will go ahead and navigate the user to this page. And that's what we're gonna do. We're gonna click on our login button. Make sure you're in prototype tab over here and not the design. Otherwise this wouldn't work. Then go ahead and drag a node to create a connection between that button, Login button and our phone verification page. Now we get to see the trigger. We want it to be a tap, this case. So when a user taps it will go ahead and trigger that transition. And we want to go ahead and leave this as is. And for animation, instead of dissolve, we're gonna go ahead and pick slide left. And you'll see what that will look like in just a second. I want to leave the rest as is ease in and out at 0.4 seconds for the duration. Now if we go ahead and preview that by Crick, by clicking the login, go ahead and transition us into then for verification. But as you can see from here, we can really click anything else because we need to now create connections within our phone verification page. Something cool about the desktop preview that we have opened up here is that as we click on different pages, we can go ahead and preview what that will look like in our prototype without the need to actually close this window and open a yen. That's really nice because you can go to different pages and really repeat that prototype if you'd like, or repeat that transitions if you'd like. And this is great because you don't need to keep reloading your desktop preview. I'm just going to go ahead and minimize that. Bless our preview and moving on. And we're gonna go ahead and create a connection between the phone replication page into our main page. Because once the user's completed adding a phone number, it will go ahead and open up the main page of the app. And we're gonna leave this the same as the previous transition, which is slight left. He's in and out and 0.4 seconds and on tap. From here, because we only have one menu, we can only really create a connection between one of these restaurants and the menu over here. Now if you want to again, get more complicated with this, you can go ahead and design different menus for different restaurants, but there will be a little bit redundant because again, what the goal of this prototype is not to make it perfect and not to make every connection work. The main point of the prototype is to get our idea, our point across based on what we have. In this case, we want to go ahead and select the Italian restaurant here, Frank's passed the House. The very first option and critical section to this page over here. And we're gonna leave everything else as is. At any point, you can also hit Command Enter to open that desktop preview or Control Enter on Windows. Login. Next. Then more you'll realize is that if you do click on these other options, Nothing will pop up. But if you hover over this one because we've created a connection for this one, my cursor will change to this link type of cursor. So we know that there's a connection here. So we can go ahead and click on this. Open the menu for us, a beautiful part because this page is a little bit longer. Axes already gone ahead and created that scrolling, vertical scrolling for us, which is amazing. But the only issue as you notice is that the navigation bar on the status bar are also scrolling, whereas they should be sticking to the same part of the page. Regardless of how much we scroll down or up. We're gonna come back in the next lecture to learn how we can actually go ahead and lock those elements in the page. They don't move while we scroll up and down. Once we do that, we're going to go ahead and continue creating connections in our prototype. 81. Vertical Scrolling: So as I mentioned previously, are gone ahead and created a vertical scrolling for us. Because of the fact that this page over here, our menu page is too long in terms of the height. Now, using this option over here, when I do select our menu page, you'll see this is actually the viewport line. By adjusting this, we can actually go ahead and choose how much of our page is shown in our prototype. So if we stretch it out, we'll see more and more in one page. What we want to do is we want to go ahead and set this to be the same height as the actual iPhone device sites are our case. That would be right over here where it was before. And so that's what this line over here shows. Now, one issue with a vertical scrolling, as I mentioned, is the fact that our navigation bar and status bar here shouldn't be moving while we scroll up and down. So how do we fix that? Well, XD gives you the option to select certain elements in the page, regardless of whether you have the Design tab selected or the prototype while you have the navigation bar we are selected, you'll get this fixed position when scrolling under the scrolling part. Or if your InDesign, you'll see this fixed position when scrolling. They both actually do the same thing. So if you go ahead and click on that, what will happen now is that if I go ahead and scroll in our prototype, the navigation bar or wool stay there. But of course our status bar still needs fixing. Now the reason why that navigation bars right now behind all the other cards here is because we've pleased at first and in our Layers panel, it must be lower than these other items. And we can confirm that by going to our Layers panel here. And as I mentioned over here, as you can see, on the lowest part of the layers, whereas we wanted to actually be at the very top. And as you can see, now we'll go ahead and cover in our prototype, which is awesome. Now, one thing we want to do is bring the status bar up because that should be on top of the navigation bar. And do the same thing. Do fixed position when scrolling. Again, you can do the same thing in prototype mode and you can go ahead and click fixed position and when scrolling, and I will achieve the same result for you. Perfect, So that's how you fix objects. So when you're scrolling and prototype, now what connections do we need from here? We need one connection to take us back to the restaurant page over here. And we need one to take us to the cart page or the order page actually maybe connect one of these cards to go to that order page as well. Now that I'm thinking a button here would be nice in our menu page. So similar to the one that we have in our order history page. So instead of starting a new order, they can go to their cart or they can go ahead and complete the orders. So let's switch back toward Design tab. And again, the great part about prototyping is that as you're going through the prototype, you start realizing certain user experience elements that you're missing. This way, you can go ahead and copy those elements or create those elements in your designs as you're going through prototyping. So we're gonna go ahead and copy these two layers that rectangle, that's a gradient over here and the button using Command C and come back to the menu page and copy those or paste those in here. Because this is outside of our view port over here, we can't really see it. So we want to go ahead and bring this up above this line to right when it touches that line. And we're gonna go ahead and do fixed position when scrolling for both of them so that this way they don't move around. I think that looks pretty good. Now instead of a start, then instead of starting a new order, this should say go to cart or go to order. There we go. So that you can go ahead and press this of the quarter or a year to go to the same page. Let's create those connections with the button down here and one of the cards over here. To do that, we're going to go to the restaurant option over here, switch by two prototyping. Now remember, you can create another type of interaction instead of that, which is to create that interaction. And on top instead of transition, you can do Previous Artboard that will do the same thing. So that will take the user back to the previous artboard that they came from. In this case, if they press this button and they pressed restaurant, it will take them back to this page. So instead of creating a connection back to this page, you can also do that as well. That's super cool. Also create a connection between our cards to the order page or a carpet. And over here and the go-to Order button over here, click on that cart button up here, drag connection. And I'm gonna leave everything as is over here. For the go-to order page. I'm gonna do the same thing. Now our connections for that page should be completed now. See, Perfect. That's pretty good. Let's come back in the next lecture to continue creating more connections. 82. Creating Component Connections: So with those connections created between the menu and the order page, now incomplete or order page and the connections in prototype mode. Let's go ahead and click on that back to Menu and go ahead and click on this button here to create a connection. And we're gonna go ahead and click on previous artboard. And while we're here, why don't you go ahead and connect our menu button over here to that menu slash profile up here. Go ahead and minimize that so we can see here. And we're gonna do a transition here. And we're gonna do, instead of dissolve, we're gonna do slide up. So it slides up from the screen. Now that we've created that connection, of course I can go ahead and add the same connection between our menu button in this page and the menu up here as well. But one thing we can do because we're creating the same connection between that button and the same page, is we actually go ahead and create a component out of that menu icon. Since we've used it in multiple places as well. And then only create the connection once and be done with it and all the other pages. So to do that, let's head back on over to our Design tab. Let's go ahead and copy one of the menu buttons to our components here. We're gonna go ahead and hit Command K to make that a component. And I liked the name as it is, hamburger menu icon. And now over here, we're gonna go ahead and now we're gonna go ahead and drag this hamburger menu icon here. And just place it on top of that other one that we have. And I'm gonna go ahead and first copy this one, and then head back to the layers and delete this other group underneath it for the other one, for the one that's not an instance. And let's do the same thing for our order page. Let's just go ahead and delete this and click the entire artboard and hit Command V. Same thing for order Progress page Command V, because we've deleted that now that connection that we had over there is now gone. But what we can do now is go ahead and go to our component, head back to prototype and connect this button or this component to this profile page. We're gonna leave the options that slide up, ease in and out and 0.4 seconds. And so now what will happen is everywhere we're using that button will have that connection between the bottom and that menu page. I just noticed I didn't properly copy the instance into my main page. So I'm gonna go ahead and just delete that one over here and copy one from here to our main page, so it's the proper one. Now, if you actually click on each one of those menu buttons, you'll see the connection has been copied over from that component connection that we've created. Go ahead and just move this over here with my other close button and then click on the main page and hit desktop preview. I can go to the menu from here. If I click on the order page, you can go to the connection from there. Same thing from the order Progress page, which is awesome. So that's how you can actually use components to create one connection and have all of your instances copy or carryover that interaction to throughout your designs. Now let's go ahead and complete the order page and the connections over here. We want to go ahead and connect the police order to the order Progress page. For the transition, we're gonna do slight left. Keep everything else as is in our order Progress page. We're gonna go ahead and click on this note and create the previous artboard action. So that's the connections for our order page. Let's come back in the next lecture to work on our order Progress page and learn how we can open overlays using prototypes. 83. Creating Overlays: I think it's time we try the overlay because on our order Progress page here, as I mentioned in the previous lectures, we want to go ahead and create a connection between our edit order over here and this UI action sheet over here. To do that. Instead of having this open up as a separate page, which wouldn't be correct. What we wanted us to do is to pop up on top of this page as an overlay. To do that, we can simply create a connection in our prototype tab between our edit order and our action sheet over here. But one thing you might notice is that if you try to create a connection right now, it won't work because our action sheet is actually instead of our pasteboard and it's not in an art board. So anytime you want to create a connection, you need to have an art board around that object. So to fix that, Let's hit back on over to our Design tab and hit. Go ahead and draw an art board around this action sheet. We're gonna go ahead and remove the fill because we don't want to feel for it. I'm gonna go ahead and exit out of that art board and just make sure that our action sheets centered a longer artboard here. I think that's pretty good right here. Let's go ahead and rename this or edit order action sheet. And now we can go ahead and create that connection in the prototype mode between that edit order and our action sheet art board. But instead of transition, we're gonna go ahead and click on overlay. And so as you can see the line here, it kind of changed to a dashed line to show this as an overlay and not a transition. The options here are pretty much the same. It's asking you where do you want to animate from? And usually action sheets animate up from the bottom of the page. And then what will happen is that you'll get this little pop-up over here where it will go ahead and ask you, where do you want that overlay to actually pop up so I can actually go ahead and choose. We're exactly in my page. Do I want that to pop up? Do I want it to be in the center, but I wanted to be at the top or I want it to be at the very bottom. I can move that around as I'd like. Typically we have this at the bottom and as you can see, it will create that kind of overlay effect. So it'll show me what that would actually even look like once it does slight up into my page, I think over here is perfect. Now by default you will get this connection here, which on top, we'll go ahead and take you to the Previous Artboard. So if you click on anywhere on the action sheet, it will go ahead and essentially take you to the previous artboard, which means we'll go ahead and close that overlay. We can test that overlay by previewing yet over here. And go ahead and click on this page. So we jump directly to this page by clicking Edit order, that action sheet will pop up and clicking anywhere. We'll go ahead and dismiss that. You click anywhere outside. It will also dismiss that action sheet. So at this point, if you go ahead and assign any connections you want, so if you do want to create, let's say a page for them to cancel their order or contact restaurant. You can do that as well. But essentially that's how you create overlays on your designs. This is a cool way to pop art boards on top of each other as opposed to transitioning between them. Now, it's coming in the next lecture to explore auto animate in prototyping. 84. Using Auto-Animate: For the purpose of showing you how auto animate works in prototype. Because I think it's super cool and it can be really useful in more complex UIs. What I want to do is go ahead and duplicate this order Progress page and create another state of that order Progress page. Essentially, we can have another stage where the progress of this order could be delivered or maybe on its way to the customer. So we're gonna go ahead and just make two small changes and see how automatic animate works. And to do that, I'm gonna go ahead and just move this action sheet down here. Go ahead and click on my order Progress page, switch over to design tab and hit Command D. What I want in this page is to go ahead and move the circle to somewhere over here, closer delivered using Shift and the right arrow keys. And instead of saying your order as being prepared by the restaurant or we're gonna go ahead and change this to your order is being delivered to you by Sam. Go ahead and exit out of there. Now the rest of the things here, we want to go ahead and keep it the same as on our water and our order Progress page. Let's go ahead and create a connection between RVU order. Go ahead and click on the node here and do on top. Go ahead and go to the Previous Artboard. Menu is already connected because it's a component. And two connections we want to create here is to go ahead and create a connection between the address over here to our location page up here. And instead of overlay wanted to transition, I wanted to slide up. But the cool thing with prototypes, if you have the same connection between the same objects in different pages, you can go ahead and hit Command C on that connection. Click on your other art board where you have that button and paste that connection in there as well. And go ahead and paste that same connection between all your pages. Now that button is connected and all we need to do is create a connection between this order Progress page to the order progress dash one. We're gonna go ahead and actually rename this to dash being delivered. Now, let's go ahead and create a connection from this page to this page over here. Instead of tap, Let's go ahead and do time. And for delay, let's choose five seconds here. Of course, it's a great delivery speed if that was actually real time. We're going to go ahead and choose type auto animate. That's what will happen is that XD will try to animate all the items and the objects in that page Towards the items in this page. So if the same items are present, we'll go ahead and try to create an animation between those items, positions or text and so on and so forth. Because we move, for example, this ellipse over here, XD will go ahead and understand that it's the same ellipse and we'll go ahead and animate it between those pages. So let's go ahead and close our prototype here. Select Order Progress page, and then go ahead and click this our preview. And I'll after five seconds, this page should automatically animate towards that other page, which is awesome. As you can see, the ellipse moved here and the texts kind of faded between those two different states. This is pretty cool. You can really play around with that and move items around. One thing you do want to note is that you don't want to read the auto animate pages that have nothing to do with each other. Because it will go ahead and create some weird looking animation that's not actually realistic. You want to use the auto animate feature between similar pages where most elements are shared. That's why these two pages makes sense in terms of using auto animate. But let me not so much. The pages between the restaurant and the menu page. That's essentially auto animate and how we can create some cool animations with the help of XD doing most of the work in prototype mode. When we come back in the next lectures and complete the connections up here. 85. Completing Our Prototype: We've done an amazing job. So for putting together the prototype for our healthy bites mobile mockups. Let me go ahead and complete our mockup by creating the rest of the connections in our other pages. Let's go up here to see what else do we have left, starting from the very top left or profile menu page. We're gonna go ahead and link each button the proper place. Firstly, I noticed there's a mistake here for a logout login button should actually be at the very bottom. Let's go ahead and just drag that all the way to the bottom. One cool thing about stacks is that you can go ahead and easily replace your buttons. It will snap right into place. Let's just go ahead and make sure that's in the right place. So now let's go ahead and link each button to where they should go. We don't have an account page that we're gonna leave that button alone for our payment. We wanted to go to the payment page And we're gonna go ahead and change the auto animate to transition. We're going to show you the animation to slide left for our past orders. We're gonna go ahead and link it to our past Orders page. And leave everything as is for address. We're going to go ahead and link into our location page. Leave everything as is, and our logout will take us back to the login page over here. Instead of slide left. And we're going to go ahead and choose dissolve for the animation towards the logout page for the x over here, we're gonna go ahead and click. I would go ahead and select. Instead of transition, we're gonna do Previous Artboard. So we'll go ahead and close that window and go back to wherever it came from. For our payment page, Let's go ahead and connect the back button to go ahead and click and do. Type previous artboard as well for adding a payment page. If you've put that payment page together that was given as an assignment, you can go ahead and link that up to your payment detail page. If not, you can leave that as is same thing with the add card. We're gonna go ahead and move on to our location page and link our Done button to add an interaction here and do type Previous Artboard. Same thing with this address over here. We're going to add an interaction and to Previous Artboard. Everything else looks clean. And for our past Orders page, the only connection is we want to make here is the back button up here. So we're gonna do again tap and Previous Artboard for our ad. We wanted to go to the restaurant paste they can browse the restaurants and starting new order. We're gonna do dissolve for the animation and start a new order. We'll also do the same thing. Go back to our main page will dissolve as the animation. Let's go ahead and preview our prototype in the desktop mode and just see if they're missing anything here. So over here we're gonna go ahead and press login. Click Next on our phone verification. Now because we only have three options, there's no scrolling here vertically. We can go ahead and click on menu here to test that out, close the menu. Let's go ahead and click on this first option, browser order. And I'd see we have an issue here already. So we're gonna go ahead and make sure our go to Order button is sticking to the same position vertically. So let's select the button and do fixed position when scrolling. And that should fix that. There we go. We can do go to order or cards to go to the order page. From here we can click the address to change the address if you want or click Done. Let's see. Yes, to save address works too many words from here to be in place. Our order, CR order progress, and then after a couple of seconds it should change to different state, which is awesome. Using the auto animate. This should work too perfect. So we haven't linked or reorder buttons. Let's go ahead and select that into type. Previous Artboard. That should work too. There we go. Place order works. Many words from here as well. We don't have an account page. Payment works as expected. Pass orders works as expected. The only thing we've got to do is we got to just lock those, the navigation bar and the button over here. So let's go ahead and do that over here. Let's select the button here, hold shift and select the rectangle underneath. Do fixed position when scrolling. And same thing with our navigation bar and status bar here. And make sure that we bring these two all the way up in our layers panel. If you notice, we have to bring our Start new order all the way up here so that it's within our viewport frame. There we go. Now that should worry. We can start a new order and hit bite to the restaurant page and repeat that process over again. Lastly, if you do logout and we'll go ahead and take us back to this login page here. So there we have it. That's our flow for our prototype. We've put together a really good-looking prototype and we're gonna come back in the following lectures to test it out on our own mobile device. And then learn how we can share that prototype with others. 86. Mobile Device Preview: All right, So we put together our prototype and tested it in our desktop preview, and it looked pretty good. Now I want to go ahead and show you how you can actually preview your prototypes on your actual mobile device. If you go over here and click on device preview, XD will go ahead and prompt you to connect your iOS or Android device to XD using a USB cable in order to go ahead and preview your designs in real-time. Now in order to do that, you can go ahead and head on over to this link, or in your App Store or Google Play Store, you can go ahead and search for Adobe XD. And I'm going to quickly switch over to my phone now to show you how that works. Once you're in your App Store or Google Play Store, go ahead and search Adobe XD. This should be the one that you're looking for. It's the Adobe XD. We can go ahead and preview your prototypes. Go ahead and download that. Once it's finished installing, we're gonna go ahead and open it up. Now may prompt you about notifications and such. Just gonna go ahead and skip this step for now. No, you're gonna be asked to login within the account. So I want to continue with Adobe and sign-in with my Adobe account. Once you're logged in, you'll be taken through the tutorial here where you can go ahead and learn how you can use this app. One important thing is to note that at any point you can triple tap to access the menu while we're proving or mock-ups. While we're preparing our prototype, you can triple-click to go to the menu. So that's one thing we're going to take note of. Then we're gonna go ahead and click Okay, once you're in here, we're gonna go ahead and click on this little tab over here called Live Preview. And then I'm going to go ahead and grab my USB cable. You do the same. Connect that to your laptop and then connect your phone. Once it's plugged in, x is automatically actually opened it up in the app as you can see, and it's prompting us here that I didn't point. We can triple tap to access menu. I'm gonna go ahead and click away. So right now it took us directly to the healthy bites login page. Of course, just as before, I can go ahead and select a different pages and see those pages on my device. I can go ahead and even make changes. For example, I can go ahead and switch over to my Design tab over here in XD, move things around and at the same time see those live changes happen in our app, which is super cool because you can make small changes and see how they look on an actual device rather than just on a desktop. As this really gives you the visual representation of what the user will see and feel while they're using this mobile app. Since it's meant for a mobile device. From here, you can go ahead and interact with your prototype. As you normally do. Go ahead to go to the menu, browse different pages just as you'd expect, two things to note is that if you do scroll left and right, it will go ahead and show you different pages. So you could do that as well or you can go through the actual prototype as you would. You might notice some of the buttons here and things like that might not properly show up. If you see that question mark button, it usually means the icon wasn't important properly or displaying properly here, one of the other cool things is that if you do click anywhere randomly, XD will show you it or highlight exactly where you should be clicking in order to interact with the prototype here. So if I click on anywhere outside of that, it will go ahead and show me. You can only tap on these areas in order to interact with his prototype on this specific art board, which is super cool. Then if I go ahead and triple tap on the display, will go ahead and give me some options. We can go ahead and share that green as an image of her life. There's a couple of other options to hide those hotspots that we just talked about or disabled site for navigates so that you can swipe to navigate this prototype, you have to actually interact with it. You can go ahead and play around with those options or you can add any point, just go ahead and exit the prototype. That's how you can preview your prototype on an actual device. Let's come back in the next lecture to learn how we can actually share that prototype with others. So they can also preview it as well. 87. Sharing Prototypes: We've created this great interactive prototype and it works great with that. Sit on our desktop preview and also in our mobile devices as well. So how do we share this prototype with someone else? They can also explore around and see how this product works, whether it's a client or a team member. How do we actually share that prototype with them? Well, it's actually super simple. Head on over to the Share tab. And from over here, if you do simply create a link for your floor over here. So because we already have this flow one that we created by pressing create link, not only are we carrying over the designs and the art boards here, but also that interactivity between all the pages that we created. So once that link is generated, I'm gonna go ahead and copy that link over to your browser from where you can enter that URL in. And now this time around, as you can see, this design now works as a prototype, similar to our desktop preview. If you do tap anywhere outside, it will show us exactly where that hotspot is, where we can tap and interact with our prototype. This is super cool, is, is exactly what we want in order to share with someone. And they can still leave comments as they would with just the designers themselves. But now this design is interactive and the prototype is available via that link as well. Now remember, we've created one fluoride now. So this is the flow for users who are new to the app. But we can also create another flow, for example, for a user who's already been signed into the app and they don't need to go through the initial sign-up pages. The next lecture we're going to explore how we can create another flow. But before we do that, I also want to mention that you can totally share this link with someone who's using a browser on your mobile device and they can actually preview this app on your device. Now, they experience might not be as good as having it on the Adobe XD app on your phone or on the client's phone. But it will be very close to it in terms of the interactivity and opening the different links and stuff by seeing the different connections that we've made and such. So that's how you share your prototype with someone else. And we're gonna come back the next lecture and create new flow for our prototype. 88. Multiple Flows: We learned how to create a flow in prototype. Essentially, a flow allows us to pick where our prototypes starts and where it ends. This current flow, which by default is named for one. User goes through the splash screen, goes to the login page and so on. But let's say we want to create another flow for a user who's already logged in and we want to have them go directly to the main page. How do we do that? Well, let's go back to our prototype page and we're gonna go ahead and click on this main page and click on this little Home icon right next to the main page. So now we've created another flow That's on now from here, we can actually go ahead and choose where our starting point in that new flow will be. And if you want to go ahead and preview that flow, we can go ahead and click on the flow. And we can go ahead and rename the flow. So instead of float to, we could do signed in users. We can change this flow onto new users. Now, in our sign-in users, we can go ahead and preview what that would look like. As you can see, we directly went to the restaurant as opposed to the new user flow. If you do click the new user flow will take us through the flow of signing up and all those pages before getting to the main page. Now we can even go ahead and share that specific flow with someone else. By choosing the sign-in users, you can create a link and share that link instead of the new user flow link. Now one thing I do want to note is that if you don't have the upgraded account, you might be limited to just one flow. So you can go ahead and go to the managed links over here and go ahead and delete any other flow and make sure that you are you have only one floor in order to be able to share it or create that link on Adobe XD for it. That's how you can create multiple floors for your prototype, depending on what stage maybe the users add or what type of user they are and so on and so forth. Things pretty cool that we can create those multiple flows. This way we can provide our clients who access to certain different flows. What the difference between each state could be. With our prototype and markups during rush being completed, we're just missing a few things. Here are a few touch ups that I promised we're gonna come back to and that is a little animation in our order progress pages. So why don't we come back in the next lecture and use a plugin called Lottie to add those animations in. 89. Lottie Animation: It's our prototypes looking great. I want to go ahead and add a little animation to the order of Progress page. If you remember. For the order Progress page, I left a little bit of space here to show the user what stage they are ordered preparations at. Adding a little animation to your design can really improve the quality of the user experience and the entire design. And one great resource to do that is the tool here called Lottie files. You can go to lobby files.com, spelled like this. Once you're there, we're gonna go ahead and sign up for an account. Once you're logged in, we're gonna go ahead and continue here. I can select Designer. Lets go. Now we're logged into here. And now we're gonna go ahead and go to the plugins tab over here. We're gonna go ahead and add a plugin and search for Lottie. Once you do search that the first one should should come up Lori files forward, we XD, go ahead and install that. Might take a second here. Once it is installed, you can go ahead and click on Open XD and use it from here. Now we'll ask you to login via your browser. So go ahead and click on Login. And once you do click that, it will ask you to grant access to your files. To go ahead and click on grant access. There we go. We're logged into our Adobe XD plug-in. What we're in here, let's go ahead and click on the Search and search for cooking. On second thought, I'm going to use this one over here or the food over here. So let's go ahead and click on order progress and click that a little animation. Now some of the animations have a white background. So this one I found it doesn't have it. So it, which is what I like. Let's go ahead and insert that in here. We want to insert it as latae, which we'll go ahead and be playable. Want to make it smaller so it's fitting in here. Now we can preview this to see what it looks like in just a second. Now, because this is an interactive media, you can go ahead and choose for it to loop playback, which is what we want. Since we wanted to keep playing over and over and we wanted to play automatically. And then we can go ahead and even choose to edit the playback and add any delay or trigger or anything like that. But we don't really want to change that. So let's go ahead and go back to our design and choose play automatically, and then go ahead and preview that page on our, I'm gonna go ahead and just go back here and preview that page on our desktop preview. I think that looks pretty cool. We make it look just a little bit smaller so it doesn't interact or overlap with the other parts of our designs here. So I think that looks better, So yeah, that looks much better. Perfect. So I'll leave the order progress being delivered page up to you as an exercise to do so, go ahead and use Lottie to find an animation for your delivery page, and then we'll do that together in the next lecture. 90. Adding a Delivery Animation: Let's see if we can come up with an animation to use in our being delivered page as well. Go ahead and minimize this and hit back to Lottie files. And I'm gonna go ahead and click back and let's search for the delivery. Let's see what comes up there. That one looks cool. Actually. Also read version over here. So let's go ahead and select this one over here and insert it in our being delivered page as Lawdy, going to go ahead and make it a little bit smaller. And place it in the middle of our screen over here. Make sure that it's centered. Perfect. Now. Now let's go ahead and close this. And now the issue here with the desktop preview is that if we do loop that animation, it won't take us to that other page after five seconds as we had before. So one thing I'm going to do in the Prototype tab is I'm gonna go ahead and change this time to tap instead so that when we tap on the page, we'll go ahead and take us to that other page. As with the animations at the time, feature in the prototype interaction doesn't work as well. Go ahead and test that out. Now, we have this page and then if you click, we have the page for the delivery. I think this looks pretty good. As you can see, the animation is really spice up our designs. And I really like what we've done so far. One thing I noticed is that our view order here doesn't work as well because it's supposed to take us back to the order page, but it doesn't. So instead of the tap to Previous Artboard, we're going to actually send it to the order art board. Instead of dissolve, we're gonna do slight rate. Let's just test that. Okay, That looks right. Now it works just as expected. Feel free to go through your designs and your prototypes. And if there's small changes that you need to make along the way, please do make those and make sure that your design is polished up before sending it off to a client or a colleague. There we have it. That's how you can use Lottie animations to create cool little animations inside of your prototypes with fake bomb. Another cool thing you can do is actually import videos and use videos similar to how we use these animations in your designs. I've put a video in the resources for this project as a little exercise, I want you to go ahead and use that video as a background in this login page. And then go ahead and also put an overlay on top of it so that it doesn't blend with our foreground here, which is the fields and the buttons and the logo. So go ahead and take a second to do that. And then the next lecture, we're going to insert that video together as well. 91. Adding Videos: Alright, so we're gonna go ahead and insert a video in our login page. So in the resources or the app assets for this project, you should find a login dash page, dash video dot mp4. This video has been downloaded courtesy of Pexels.com. They provide great resources. Now, I gotta give credit to pixels.com for providing this video. They have tons of videos that you can search for your projects and they are completely free to use, which is awesome. So I'll let you explore this resource. But in the meantime, let's go ahead and learn how we can insert this video into our login page. So just like images, importing videos is as simple as dragging a video into your XD file. Now one thing to note is that your video has to be a maximum of 15 megabytes. So you may need to compress your videos if it is a little bit larger in size. This one, as you can see, it's already humongous, so you might have to go ahead and first of all, let's make sure we're on our Design tab and let's go ahead and shrink or video to fit our frame over here and then go ahead and center it along. Make sure it's fully covering the height. We want to go ahead and place this video all the way at the bottom of the page. That's probably a good time to switch our healthy bites logo. Go to the library and set this as our accent color. And same thing for our forgot password here. We don't want it to blend and we want to create that contrast between the background and foreground. Now if you play this, let's see what this would look like in our desktop preview. And one more thing we want to go ahead and set up play on top, which would play this video. When we tap on the video, we wanted to play automatically. I want to click this. And now from here you can actually go ahead and trim the video. We can make it shorter if you want. Choose exactly how long we want it to be. And we can go ahead and choose to loop it, and whether we want the audio to be playing or not. So we're gonna go to mute it. We can choose even the thumbnail photo for it from here as well. So we want to loop the playback and we can even test to see what it will look like from here. Or we can go ahead and just simply play our new user flow and see how that would turn out. Beautiful. I think it looks amazing. Now is a little bit crowded in here. So if you do decide to use the video, I do recommend taking out these two images of the food bowls so we can get rid of those and just make it a little bit cleaner in here. There we go. Much nicer and much neater. And if you do want to add an overlay to this page, or we can go ahead and simply create a rectangle layer on top to cover the entire art board. Click on it and change the fill to black. Remove the border and set the pace city as we wish. But we want to go ahead and make sure that we bring that rectangle layer on top of video and below everything else. And so we can go ahead and control this based on how dark we want the overlay to be versus the video. In this case, we can actually even go ahead and change your status bar to white. There we go. I think that looks a lot better. So there we have it. That's how we can add videos and backgrounds with Adobe XD. Now with that, that wraps up our mobile design project. We've done an amazing job and we're going to come back in future lectures to work on the website or landing page for healthy bites. 92. Landing Page Requirements: Or it's so we've done an amazing job with our mobile app and putting together a prototype and learning how we can share it with our team members and colleagues and clients and so on. In this part of the course, we're gonna go ahead and learn how we can actually put together a landing page using Adobe XD for the same client, healthy bites. In this lecture, we're going to quickly go through some of the requirements that we have for this landing page, which essentially is a website for that company that allows the users to learn more about what that company does in a sort of a one-page website type of design. So they can learn more about healthy bites before they choose to download the app and sign up and use it. So our clients have asked us to put together four sections for this landing page. So the very top and the first section, which is usually what you see in websites nowadays, it a little header section, which typically includes some sort of image or video in the background, or some sort of design with a logo, with a navigation bar that allows us to go between different parts of the landing page and a little companies slogan, which is all provided in the resources for the lecture. So go ahead and take a second to download that resource, which includes all the assets that we need for our landing page design. We also want a little Download Apps section. So in this section we'll have a little screenshot of the app with Download badge for the App Store. You can go ahead and click on that to download the app on their device. And then they also want us to include some other popular restaurants as little cards. In a restaurant section. It will have a little restaurants section where we'll feature maybe three or four of their restaurants and allow them to see whatever restaurants or unhealthy bytes in a little cool card view. And then we'll have a little Contact Us form at the very end with some name and email field and a little picture of their team. Pretty straightforward, pretty simple for Section landing page. So when we started our mobile design project, as you remember, we downloaded the app whole design assets. Now for this web project, we're gonna actually go ahead and use the template or the bootstrap platform kit for XD. If you go down to this link over here, or if you simply google Bootstrap, Adobe XD, you should be able to find this page where you'll be able to get the kids from here. From here, we're gonna go ahead and click on get the kit. Gonna go ahead and save that file. And that should download this XD bootstrap kit over here, dxdy. So you can go ahead and double-click to open that using Adobe XD. Once it does open up, you'll be able to find this bootstrap framework assets over here. They've already put together a lot of the things that we're gonna use in our websites such as carousels or headers, footers, image cards, and so on and so forth. We're gonna come back in the future lectures to use assets out of this framework into our landing page for healthy bites. Bootstrap is a very popular framework that allows you to design websites much more easily because a lot of the components are already designed and so you don't need to do redundant work when you're designing. That's where we're using Bootstrap in this project. So let's come back in the next lecture to sketch out a little loaf at all the type of wireframe, right, with an XD itself. Before we go on and designed the real thing. 93. Wireframing the Landing Page: Now that we know are requirements for this project, and we've gone ahead and downloaded that Bootstrap XD file. We're gonna go ahead and put together a low-fidelity wireframe for our project, right, with an XD itself. Of course, you can go ahead and sketch out the wireframe just like we did for the mobile app design. But you can also do this process in XD itself. Some people might find this a little bit easier, as opposed to switching from pen and paper to digital. Let's go ahead and try that together in this lecture. First things first, I'm gonna go ahead and go to the homepage here. And we're going to go ahead and create a new web file from over here. And we're gonna keep it as 1920 by 1080, which is typically the default size for a web project. So let's go ahead and open that up and we're already in a new project. Perfect. First things first, let's go ahead and click on this untitled over here to change the name to healthy by its website. Go ahead and save it. There we go. So now we've renamed the file. We have our first web art board over here, which is perfect. So based on our project requirement, we know that we need four sections in our website here. So why don't we go ahead and make this art board that we have long enough to fit four sections. We wanted essentially four of these to be able to fit in this landing page. So the height here we can see it's 1080, something we can do, which is super cool. And XD is we can go ahead and either add to this height by doing plus. I don't know, let's say ten pixels, which will now go ahead and make this 1090. We can go ahead and actually do multiplication as well. So what do we multiply this by four? And I'll go ahead and give us exactly the length of the project that we need. So this is going to represent our landing page with a four sections. Brain of course is just one long page over here. We're gonna go ahead and create a rectangle to represent each section. So why don't we go ahead and create a rectangle here and then go ahead and resize it to 1920 by 1080, which is the correct size over here. And we're gonna go ahead and just put downward right there. Let's go ahead and duplicate that one. Bring one down to represent our second section. One more time. One last time. There we go. And we can now even see the separate sections by the borderline over here, which will get rid of at some 0.1. Other thing I'm gonna do is I'm gonna go ahead and enable a layout grid. And we're gonna leave this as is for 12 columns. And that looks pretty good. And Bootstrap tends to use the similar type of layout for their grids. The only thing I want to do is go ahead and bring the opacity of this layout grid kind of low, so it's barely visible. Just enough for us to be able to make it work without it interfering with our design. So now that we have this, let's go ahead and put together the wireframe. I'm going to use rectangles here are a bunch of times to put together different parts of the wireframe that I want. And then remember, we're gonna go ahead and actually turn this into a mock-up a little bit later on. But for now, let's go ahead and create a little rectangle about this height over here and taking over the full width. So that's gonna be our navigation bar. I'm going to pull that, put that at the very top. We want this navigation bar to sort of have this main button over here, which from there we'll be able to go ahead and download the app maybe. And we're gonna go ahead and just bring that over here. I'm going to use my layout grid there to space everything out. And then we want a few other buttons over here for the different sections of the app. So of course, these buttons might be a little bit smaller than these, but that'll be in our navigation bar and that's where it will go. We're gonna have an image in the background over here. And then on the right side here I'm thinking of putting the company name over here, healthy bites, along with the slogan. Of course, you can go ahead and even add a text in here to explain what we want over here. So what we're gonna do company name, exit out of there. I'm gonna go ahead and duplicate that and do companies slogan. Remember this doesn't have to be perfect. We're just putting this together so we know what's going to go where. And then we're going to have the different buttons over here. So we're going to have one that goes to, Let me go ahead and center align that one that goes to the different restaurants, then one for them to contact us, and then one for them to be able to download the app. Like that, will have the image in the background here. These would look good over here. And let's go ahead and duplicate those two layers over here. So this will be the section where our app will go. So we'll have, we're gonna go ahead and central line that and do text for downloading up. And then down here we're gonna do a little button for them to download the app, download something along these lines. And then we're gonna go ahead and create a little rectangle to show where our mobile app kind of device. Preview. We'll go ahead and duplicate one of those texts over here. Remove that fill from there, and do screenshot. Know exactly what this is. And then we'll do our restaurants section down here. We'll do a little maybe title over here that says popular restaurants with all card over here. For our card here, we're going to have to just stretch this out. Bring this over here and maybe do restaurant name. And do another, another rectangle for the restaurant image. Remove the fill from here and do restaurant image. There we go. So as we're doing this, I want to also mention that there are templates that you can use for wireframing in XD. If you do a little Google search for wireframing kits or templates for XD, you might be able to actually find some unused them as well. We're gonna go ahead and duplicate this kind of card four times. Let's go ahead and select everything over here. Group them together with Command G, I believe. Looks like this one over here wasn't added to the group. So let's go ahead and move in rectangle 19 into that group. Remove any fill. Again, we're gonna go ahead and space things out so that it fits within our grid. Something like that would look good. And then lastly, we have our Contact Us section. So we're gonna go ahead and copy this over to a little Contact Us. Text over here. Alongside maybe we need the image of the team over here. So we'll do, when we do an image from here. Image team will have our form over here on the left side. Get in touch with us. We'll do a few kind of texts fields in here. Remove the fill here, will do name, text field here and e-mail. Little button here to submit. That'll be kind of form over here. Alongside the image of the team. My wireframe, we're going to select all these rectangles, layers and just go ahead and lock them like this so they don't move. That. I can go ahead and then select all these and group them together and these ones and group them together as well. I think we can bring this one a little bit this way and leave that one and bring this one a little bit more. Might look better. So we'll go ahead and just center that along the page. Make sure everything else is kind of centered along. Kind of test out the spacing of everything we have and see what that looked like. So now if we go ahead and click our art board and take away our layout grid will be able to see what this layout with a wireframe would look like or what this website would look like based on this wireframe. Again, this is supposed to be some sort of a blueprint for your project. This is just to give us an idea of what should go, where, not exactly how things should be or any of the details of what the color or what the fonts should be. This is just simply to tell us where things should go and what should be there. Now that we have some idea using this wireframe, Let's come back in the next lecture to get started with our landing page design. 94. Navigation Bar: To design our landing page at why don't we go ahead and duplicate this art board over here by hitting Command D on it. And then we're going to go ahead and get rid of everything inside. So we're gonna go ahead and just select all these layers all the way down to the rectangles for each section. For a section that we have. Let's go ahead and click Delete. We're going to use this and actually place our designs in here. We're going to use the wireframe on this side to actually generate the markup in here. Let's go ahead and rename this art board, our landing page. There we go. And this one, our wireframe, lets as reference. So the first thing I wanted to put together is the navigation bar up here. One thing I notice I'm missing is that typically in a navigation bar, we also have a little company local slash name over here that actually brings the user back to the top of the page or back to the home screen. This is what we want in our navigation bar. So let's go ahead and switch over to the Bootstrap UI kit in XD. And if you haven't downloaded this, make sure you go ahead and follow the previous lectures in order to learn how you can download this one. Once you do have it downloaded, you should be able to find a navigation bar down here, as you can see it as an art board called navbar, which is what we're looking for. So of course, they have different types of navigation bars that we can go ahead and use. This one over here would be sufficient. Let's go ahead and copy it. From here. Switch back to our healthy bites website and paste that. Here. Got pasted in here. So we're going to go ahead and just bring that up here. Now because we only have really one page or here we don't need to really make that a component. So let's just go ahead and use this as is, stretch it all the way across our project. And instead of 56 height, we're gonna give this as 70 height. So a little bit larger. Let's go ahead and now center these links and move them all the way to the right side here. Let's go ahead and enable our layout grid over here. What I want to do is go ahead and align these quadrants, width or layout grid and this navbar text as well, which actually we want to go ahead and replace with healthy bites. There we go. Now the resources for this project here we have the logo. We're going to drag one out here. And we're gonna go ahead and just make it. Let's do. Now let's go ahead and lock the proportions and make the width 45, strike 35. Think that will look better. Right here, we're going to fit that in and drag or healthy bites text over here. That looks good. Now remember for the fonts and the colors and things like that, we're gonna come back and apply those later. For now, we're gonna focus on being the main things together. So over here we're gonna go ahead and apply the same restaurants contact us and download app. Let's go ahead and delete this one over here. This one we're gonna do restaurants. So we don't really need to drop down type or disabled type for now. We're gonna go ahead and just duplicate that two times and do contact us. And now one thing is that this is actually a stacked, one cool thing is that you can go ahead and actually change the spacing between these buttons over here. So you can go ahead and do, is go ahead and do 20 pixels between them. There we go. That one's already 20. Perfect. So instead of this restaurant, we're gonna do download app, but I'm gonna go ahead and actually go back over here. And we're gonna go ahead and drag one of these buttons, like the Search button over here from this navbar. Because I just want the button itself into this navbar over here. Go ahead and try that in. Go ahead and ungroup the component here for the navbar. And this way we can go in and actually place our search button in the nav bar here. And we're gonna place it on the very bottom, which will place it on the right side here. Get a rote, get rid of this extra restaurants and change this surge to download app. Perfect. From over here, we'd actually go ahead and even tweak the spacing. So let's go ahead and increase the spacing here to 30. Actually. Same thing over here. Then. Now if you move this here, should look better. Perfect. So now by disabling the layout grid, we can see our navigation bar looks pretty good over here. With that completed, let's come back in the next lecture to work on the rest of our header section. 95. Header Section: They tend to design the rest of our header page. As we mentioned in the wireframing, we want an image in the background, but with a company name and the slogan over here. So let's go ahead and go to the images in the resources of this project. And let's go ahead and drag this header photo into our landing page. The sizing is way too big. Let's go ahead and hold Shift and make that smaller while maintaining the proportion. We're gonna put that right over here. Expand a little bit outside of our sort of height here. And what we're gonna do is we're gonna go ahead and actually mask this photo to our rectangle one layer over here. Once you have that over here, we're going to go ahead and unlock that rectangle one layer. Go ahead and select both of them and do right-click through Mask with Shape. Now that image has been sort of crops to that rectangle's dimensions and everything. Go ahead and bring that layer all the way down. And that mass group. Now we have the image. Let's go ahead and add a little overly as well. And we can do that by adding a little rectangle on top. Over here. Bring this just above our mass group, set the field to black and our opacity down to, let's try 30%. Think that should be good enough. Now let's go ahead and add some texts layer over here. Actually on second thought, let's do a little bit darker, maybe 38%. So let's go ahead and add some texts in here. Let's press the T key on our keyboard. Go ahead and type healthy bites, and we can barely see this here. So let's go with a font size of 55. Let's try 75. It can be a little bit bigger there. Let's exit out of there. Change the fill to white. Move that right over here. Let's enable our layout grid one more time. We can properly align things. Perfect. Let's go ahead and create a text for the slogan by dragging over here to somewhere over here. We're gonna do 45 for the font size and it will do healthy food delivered right to your doorstep. And one-click, That's where slogan for the company here. Now, one thing I don't like here is a space in-between the two lines over here. So I think we can increase this to from the 54 that we have to. Let's try 85. That's way too much. Let's do 65. Better. Now if we disable the layout grid, that looks pretty good. The only thing I want to do is bring these down a little bit more. Over here. I think things look good. I think I want to make my overlay here a little bit darker, so I'm gonna go with a forty-five percent instead, just so we don't have a lot of blending between the foreground and the background here. I think that looks pretty good. Let's come back in the next lecture to work on our next section. 96. Mobile App Section: So we've completed the first header section of our website here, which is great. I think it looks pretty good. And I remember we'll come back in future lectures to brush up our design and make it look even better and add more style to it. For now, we're gonna go ahead and move on to our mobile app section. This is the second section of our website where we want to actually go ahead and put a little screenshot here of the app, as you can see in our wireframes, as well as a little texts for them to download the app and a little Download button for the app. We're gonna go ahead and put that together in this lecture here. So let's go ahead and open up our resources for this project here. And you should be able to find this mobile app dot PNG. We're gonna go ahead and copy that over or dragging that over into our website. We're gonna go ahead and just make it a little bit smaller and hold Shift to maintain its proportions. And things somewhere around, maybe a little bit smaller, so it's fully fitting. Indeed. Section over here. A little bit bigger than this sort of center that along. There we go. I think that looks pretty good. And ROS go ahead and enable our layout grid one more time. And use that to our advantage when we're aligning things perfect. So let's go ahead and insert some texts on the left side over here. If you go back to the resources again, you'll be able to find the sample text dot TXT. And in there you should find the download apps section. And for the text here we're just gonna do download the app to store your order today. Kind of copy that over. Why don't we go ahead and just drag one of the textboxes, this one over here, down here. And instead of white, we're gonna go ahead and change the fill to gray color. Something along this line would work. Let's go ahead and align that and bring it somewhere over here. And I'm going to double-click and change the text to what we have. There's our texts, or we want to go ahead and input a button in here as well. So as we drive that button up here, inner components, we should have a button over here. There's a button default success, and we can just pull into here. This is from the Bootstrap template that so we're just going to go ahead and change the text of this button to download. The app. We bought in here is a little bit too small. So why don't we go ahead and edit the padding over here to add more space between the text and the rectangle. So instead of nine and make this 120. Same thing over here for the 16, let's change this to 40. Here. That looks better. We can just align that up here. That's good. Let's go ahead and turn off our layout grid just to see what that would look like. It's coming together slowly. So that's our mobile app section that's come back in the next lecture to work on our popular restaurants section here. 97. Restaurant Section: We want to go ahead and move on to our restaurants section over here. So in order to work on this part of the app, we're gonna go ahead and open up our Bootstrap UI kit once more. If you don't have this file handy, you should be able to find it from your recently opened files, which would be available under File and Open Recent. So go ahead and find that Bootstrap UI kit that you've downloaded. What we want now is to use the card UI that they have. So why don't we go ahead and find a card UI that works for our restaurant cards. If we zoom into here, we'll, we'll find a little cards art board. Now, I like this one over here. When we go ahead and use this one, Double-click to select it and go ahead and copy that. Switching over to our landing page project. And go ahead and paste that over here. Let's go ahead and just make this a little bit bigger. So it's snapping to that part of the grid. We want to make some small changes to this. Bring the title and the description here down. For the button here, I want to go ahead and center it. And for the image. Let's go back to our layers panel. For our image over here, I want to go ahead and make it a little bit larger. Right over here. Perfect. As we learned in our mobile design project, we can either use stacks and do a horizontal stack or we can use the repeat grid. This is what I'm gonna do over here. I want to do Repeat Grid. And instead of going vertical, which was what we were doing in our mobile app, we're going to go horizontal this time with a repeat grid all the way up to here. So we have four. Let's go ahead and just adjust the sizing over here so everything matches up with our layout grid. And there we go. Now that's fixed up. Let's go ahead and copy the text. Healthy bites over here or down here. Change the fill to this gray color that I have for the text here. Go ahead and select that and input that takes over here and do popular rest restaurants. There we go. Let's turn off our layout grid. Need it anymore. Now if you weren't, one issue we had with Repeat Grids and components is that it wouldn't properly work when we're inputting data. Let's right-click on this very first one and do ungroup component. Now if we go to our resources, I will be able to find this sample dashed restaurant dashed names dot TXT. We can go ahead and drag that over the card title for the name of the restaurant. And we also have one for the description sample that restaurant dash description dot TXT. Let's go ahead and drag that one over the description text. Perfect. Let's double-click into the image over here and also ungroup that as a component. So this way we can go ahead and select all our images, one through four over here for the restaurants. Go ahead and copy that over. I should work. We don't really need this shape over here. So if we go ahead and delete that from there, that will look much better. That's our restaurants section. I think it looks pretty good. And we're gonna come back and polish these up in the future lectures. So right now might look a little bit plane. But the idea is to put together the elements that we need before we come back and fix that. Lastly, we have the Contact Us section, so we're going to come back in the next lecture to work on that one. 98. Contact Us Section: Moving on to the last section of our landing page here, the Contact Us section. We're gonna go ahead and put that together. And we're gonna need the image of the team on the right side here. And then on the left side a little form where we can put an e-mail or a name and an email field and ascend button. And it should be pretty straightforward from there. First thing is for us to go ahead and select the art board here and enable our layout grid. What do we switch back to? Bootstrap UI kit? Under this form section of our Bootstrap UI kit, you should be able to find formed an input groups. So we're gonna go ahead and zoom into that so we can use a form from here. We don't need anything complicated like drop-downs or things like that, but Bootstrap gives you access to those. You can go ahead and place things such as different types of fields that might be useful to you. So feel free to explore that it. But for now we want to go ahead and find a simple email input over here. Go ahead and copy that one and a button by holding Shift while selecting both of them. We're gonna copy that over to our project, select this rectangle here and paste it over. We're gonna put that somewhere over here. We're gonna go ahead and stretch that out too, right over here. Let me go ahead and put this button on the left side here. Let's duplicate this one more time. And instead of e-mail, we're gonna do full name. I'm going to delete this little footer text here. I want to go ahead and actually use tax for this form here, I want to go ahead and select all of them to use stacks and use Command G to group them first and then do a stack. Let's go ahead and lower the spacing here between the submit button and go ahead and swap the full name and the e-mail. Bring that spacing down to 15 pixels. But let's go ahead and increase this distance, 250. There we go. Instead of default input that's put first and last. And for the email, let's just do the example at domain.com. There we go. That's our forearm. And then we're gonna do a little image on the right side. Let's go ahead and go back to our resources. Were under the images folder, you should be able to find a team photo JPEG. And then we can drag into here. Let's make sure that the proportions are locked and do a width of 750. We made this a little bit smaller so it fits our grid. Centered along. Flip both elements and center them along the page as well. Let's hold Alt and drag a copy of this text, this header text, and change this to contact us. I think that's pretty much what we want. If you do disable our layout grid, we should get a better idea of what this will look like, okay? Not bad. So one thing we could do is put this form into a box or a card. So let's go ahead and re-enable our layout grid and work on that box over here. So let's do rectangle, and let's go ahead and create it around here. Go ahead and find this layer group for over a year and bring it underneath our group four. So please this in here. We're gonna go ahead and in our stack and we're going to add a little padding of 20 pixels. Now let's shrink this stack to fit our rectangle and bring this button into this corner here. And we can shrink the height of this box to somewhere over here. Now if we disable our layout grid, we can see that definitely looks cleaner. We can even go ahead and match the height of this form to the height of that image. To make things look a little bit cleaner. Of course, we're not done yet. We're gonna come back and polish up all our pages and add the button text over here and then apply the proper color scheme and even a custom font. So let's come back in the next lecture to start polishing up our landing page. 99. Applying our Color Scheme: Let's go ahead and apply the color scheme that we have for the project to our landing page as well. So take a second here to go ahead and open up your mobile project that we designed. And go ahead and select the color scheme section over here with all the colors that we have. And go ahead and copy it using Command C. Switch over here. And on the very side over here in the pasteboard, we're gonna go ahead and paste that in. Going to go ahead and just put that over here. And let's select all of these colors here as you remember, and hit the plus icon here to turn them into our color scheme for the project. So if you want, you can go ahead and rename them. Over here. Primary, secondary. I said 123. We'll do this as our gradient. Now. From the very top to the bottom, we're going to work our way throughout the design and apply some color to it. First things first, our button over here, we're gonna go ahead and select the fill of this text. And said that the primary for the board of color, we need to go ahead and copy this hex code from here. And to the border. There we go. So that button now has our color. That looks good. Let's go ahead and select the rectangle of this bottom over here, just a rectangle layer itself and set it to primary. What we're here. Let's go ahead and choose the button over here to store it. In order. Is replace that in the middle. And we're going to go ahead and right-click and ungroup component and have that apply all throughout. On second thought, I think it looks better on the left side here as opposed to the right side. Maybe bring down that entire button a little bit better. Let's look the right-angle layer and change it to her accident one color alongside with this text here, x and one. For this text, we're going to also do accident one. There we go, looking a lot better now for this Contact Us button and let's change the select the rectangle and change into primary. For the Contact us, we're gonna do accident one. Let's apply some color to our backgrounds as well. Let's go ahead and unlock this rectangle here. Let's try accent too for this background here. And change this text to a white. There we go. We'll leave the popular restaurants is white for the background and then for the Contact Us will unlock the layer and do accident three. Once you've done that, he hit Command elegant on that rectangle to make sure you lock it. Same thing over here. Perfect. That's starting to look better. Now, let's come back in the next lecture to apply some custom fonts to the project here. 100. Adding a Custom Font: I really enjoy the part of the project in any design project when we apply a custom font to the project and make it look a lot better, more crisp, and even more relevant to the brand. I personally love using Google Fonts because it's a free to use resource that you can use to find and download fonts for your projects. If you head on over to fonts.google.com on your browser, you would a secondary. So you can load that up. You'll be able to access tons of fonts to use for your projects. And as I was going through this, the Poppins font over here kind of caught my eyes. If you can't find this font, you can go ahead and go back to this page here and search Poppins up here like so, with an S at the end. Go ahead and click on that and hit on Download family. Go ahead and save that file. Once you do have it saved up, you should be able to open this folder here where you'll be able to select all the fonts here and then go ahead and double-click to install that on Mac. This process might be different on Windows, but on a Mac you just double-click to install the font. Once that's done, you can go ahead and simply close that folder and this website over here. Now let's go ahead and click on these two texts over here. Copy them. Out here. Let's set them to the accent to color. Let's select both of them and do Poppins over here. If you don't see that font load, simply go ahead and close your XD and open it again, and that should work for the header here we're gonna go ahead and select a medium font-weight. And we're gonna leave this one as regular. We're going to use this one as my header font and this one has my body fonts. We're going to select the healthy bytes. One, change it to header, H1 header like so. And use this one as our body. Gonna do just one more over here. In case we need an H2 header instead of 75, we're going to do 60 for this one. Let's go ahead and select these and add them as a character style. Here. We're gonna do body dash Poppins, H12, and rename this one to each one. There we go. Let's select this healthy bytes now set it to our H1 and change the fill to white. This one over here, we're gonna do body going to change the fill to white. And just make sure our alignments proper here. Looks like we have these not aligned properly. Use that layout grid to your advantage there. Go ahead and turn it off. And we're gonna do body for this one over here and change it to white. For the buttons. We're gonna select the buttons and then go ahead and just manually change that text here to pop in. There we go. Before we forget up here, we want to go ahead and change our fonts here and here as well. So let's talk the bytes here, change it to Poppins. And same thing over here. Select this one, change it to Poppins. Now, remember as a shortcut, you can just hit command C on the restaurants and do option command V on your other texts. And that will apply the same font. But if you do it over here to this download app, you just need to change it by two primary color because it also copies over that Phil, for those texts. I think these ones would look better as a medium font-weight. So let's go ahead and change those to medium font. We overhear supposed to medium. There we go. Looks much better. Let's do the same thing for this download the app, set it to medium so it's a little bit thicker. We can read it more easily. That page, it looks good. Moving on down here, Let's do one. Let's go and select the text and just center that horizontally. Here. Let's go ahead and hold Shift and slight alt-text over here and change them to Poppins because you can do that. You can change multiple fonts at the same time by holding Shift and selecting them. The only thing we got to fix our button, extending it a little bit more, making sure that it's centered. There we go. As you change your font, you might notice that spacing and alignment might change between your elements. So just watch out for that and double-check everything always attacked us. Looks good. Our form. Let's go one by one. Full name. Change it to pop in. First-last e-mail. Select this first last Control C. Option Control V. Change this one to Poppins as well. Lastly, or submit button should also be Poppins. And instead of regular weight, we're going to do medium. There we go. That should pretty much be Oliver fonts in the learning page, which I think it is so, so far so good. So that's how we apply custom fonts who are projects? Why don't we come back in the next lecture to polish the rest of our design and complete our landing page. 101. Adding Blobs & Illustrations: I feel like we can totally add more to our landing page. It's a little bit plane right now and I think you could use lipid more pop. And we can go ahead and use some cool plug-ins to help us with that. So I have two really interesting plug-ins in mind that we can use. And you'll see how they can help us really polish up our design and make it look even better. Without further ado. Let's switch back to our plugins tab down here. Once you have it selected, go ahead and click the plus icon. And we're going to search for two plugins. The first one, we're going to search people. This first one over here, this humans illustration. We're gonna go ahead and get, and we'll take a second to install there. Let it take its time. And we're gonna go ahead and go back to feature plugins also search blob, There's globular plug-in should show up. Go ahead and install that one to head on over back to our XD and you'll see what both from the very top and move to the bottom. So let's use the popular plugin here, which helps us generate these cool-looking blobs and go ahead and reset. And it will keep generating bloggers and give you a little preview of what it will look like. Go ahead and increase the complexity of it. Or go ahead and make it more unique or less unique as you'd like. You can even go ahead and set the hue from here. Of course, we'll change that in just a second. Let's go ahead and just insert that blob. Yours might look different of course, but that's totally fine. Really no, right or wrong looking blob here, if you all with a blob inserted, let's go ahead and head back over to our library. And I want to do the accent three color for this one. And now let's go back to our plugins tab and go back and insert the humans illustration. From here we have access to a lot of illustrations that are pretty cool to use for our projects and whatever is relevant could apply. You can even go ahead and get very creative and add different parts together. Kind of Lego for the illustration here. Or you can just go simple and select whatever you want. We're going to keep it simple and select this one over here. We'll keep it simple and select this one over here. It's been copied to the clipboard so we can hit Command V. Paste that over here, make it a little bit larger or holding Shift. I'm going to go back to the humans illustration one more time. Let's drag this little table out here. Once more. This time we're gonna do the lamp. And just bring that over here. For this last one over here, I'm gonna go ahead and double-click into that one and just make this one a little bit shorter here. So I think that looks pretty cool. We can come down here and add one behind our app if you'd like. Plugins, lobular. Want to reset it until I get something I like. Go ahead and insert that in the back and use command and the open bracket until I have that under the app or the mobile device. And now we have a hard time selecting it. So we've got to go back to the layers and select that path and go buy toward libraries and set the block to. Let's try the gradient color. That looks pretty cool. We can do it once more for our team photo over here as well. And even insert that team photo as a blob instead so we can mask that. So let's go ahead and select the plugins, reset it a bunch of more times until we have somebody that looked, that would look good for our team photo. I want something that's keep resetting it until I find something I like. Let's reduce the uniqueness and see what we get. I'm being a little bit too picky here. I think any of these should really work just as well. Go ahead and create, going to go ahead and use this one here. And go ahead and zoom it. So it kind of takes over more of the picture. And we're gonna go ahead and select both the image layer underneath and blob and do Mask with shape. We need to do is just make that image a little bit larger, like this. And then we go ahead and just make sure that it fits nicely. Now, we can make this a little bit smaller. Kind of fits nicely with our form here. One more time. Let's enable that layout grid and properly aligned things here. And make sure we have we used that alignment here. Or form looks good too, so that's pretty good. Turn off or layout grid and there we have it. That's how we can use some blobs to create some cool-looking effects. Nausea can see slowly our landing pages starting become more polished up and look more interesting when we come back in the next lecture to do a final polish up. And then right after that we're going to export our landing page. 102. Polishing up our Landing Page: What do you think you're done with the project? So always a good idea to just quickly go through the whole design from top to bottom or left to right depending on where you're working on and do a little polish up of everything in there. So when we start from the very top navigation bar, which I think looks pretty good, we can select these fields over here for the restaurant and contact us and excited the accident one color. Everything else here looks good. Making sure that these are sort of centered along our page, which now it is. Want to make sure that these are also sort of central along here. Perfect. Let's go ahead and remove this border from the rectangle over here. Same thing over here with this other rectangle. You don't want to eat border between them. And same thing over here with this rectangle alerts logs, we can unlock it and remove the border. And I'm going to lock it back. Let's lock back this one here. Command L here, Command L. There we go. Down here. I really like the way my cards look there too sharp. So we're gonna go ahead and add a little bit of a corner radius to the image, but only to the top right and top-left. So let's hold Option while we set it to a 15 pixel corner radius here. And you can see the pixels on the left side. 15, I think looks good. And we can apply the same thing down here. Right now it's already set to five, but I want to change that to 15. That might look better. That looks better. I'm going to select the background here. Also do 15 for this one, Double-click and also do 15 for this one, and finally 15 for this one. And you might ask, why are we repeating this process of reusing a repeat grid? The answer is simple. When you do have a component because it's card background as a component. If it is a component, we need to make that change every time as opposed to just one time and be done with it. Now I want to add a little shadow for our cards here. But the problem with Repeat Grid is that it's not very efficient to add shadows with it. So let's go ahead and ungroup that grid. In other words, done with a repeat grid. And let's go ahead and select this a background cart slash background layer here and double-click to select this rectangle layer and apply drop shadow. We're going to do a blur of 20. Leave everything else the same. I think that looks much better. Let's go ahead and copy that and select this rectangle here. Double-click all the way through. Hit Command, Option V. Same thing here. Same thing here. It looks a lot better. Over here. Let's go ahead and select this rectangle here. And I want to remove the border and use Option Command V to paste that border in here and a corner radius which automatically got applied. So that looks a lot better. I think we can make it a little bit wider here. So I'm going to hold Alt to widen it out. And it looks a little bit plane up here. So when we add a text in the middle to say get in touch, we can't see that because it's white. So let's exit out there and apply an accent. Color here. I think the body here is a little bit too big, so let's go ahead and change the font to 25. Right here. That looks much better. Select this layer, this background to unlock and remove the border again, lock it again. Now, I believe none of them should have any borders anymore. I think our project is pretty polished up and ready to go. So with that said, I'm gonna give you an exercise to create a prototype out of this landing page. And go ahead and connect these buttons to your prototype as well. And we'll do that together in the next lecture. 103. Creating a Prototype: Alright, let's create a prototype for our aligning page. If you go ahead and click on it and preview it in our desktop right now, it might be a little bit too big, so we can go ahead and definitely make it smaller here. Go ahead and just fix that here. So definitely looks cool. Of course, there's not too much we can connect here. The only thing that I really want to connect is our navigation bar up here. So let's go ahead and fix that navigation bar so they can navigate between those pages. So let's go to our libraries, select the navigation bar here. And ensure that we have all these layers. Holding Shift selected and do Command G. And we're going to name this group are enough for. And just make sure by hiding it that this is it has everything we need. Yes, it does. And I will do fixed position when scrolling and bring the layer, as you guessed it all the way to the very top of the project. So this way when we preview it, it should stick to the top, which is what we want. We want a couple of connections here. We want healthy bites. When you click on it to take us back all the way to this page over here. When you click on restaurant, we want to go down to this part of the app. When we click on Contact Us, this part of the landing page, sorry. And download app should take us to this section here. Or alternatively, download app could also go to the same link as this over here. Now because we were using Bootstrap, the already have some sort of hover state for their components here. We're gonna go ahead and get rid of that as well from there. So in order to properly prototype, we're gonna go ahead and a group each section together. All the elements in the group. Just go ahead and just group the entire section here using Command G. So that'll be our header section because the rectangle layer was logged, it wasn't dragged into that group. Just go ahead and drag that into the header group. Just make sure we bring it all the way down. We want to make sure our nav boards at the very top of the layers. This rectangle there, which I've unlocked should go in the header as well. Just right below over here. I believe this mass group is for our image. So let's also drag that into the header right here. For our app page, Let's go ahead and group everything together, select everything and do including the blob here by holding command and do Command G. So that should be our app section. I won't bring that right below the header. Popular restaurants is go ahead and just select all of these. Hit Command G. And of course, we have to just bring our rectangle layer, rectangle three here, unlock it and impulsive bringing that to group. This group here, but at the very bottom and rename the group to populate. Russ, trance section. Bring that over here. And for the Contact Us, let's do the same thing. Select everything command G. Move this rectangle there to group the very bottom of it and do contact section and bring it to the very bottom. So now it's much more organized. We can go ahead and check each group. Just one thing I want to do is read lock those rectangle layers. We don't accidentally interact with them. Now that we have that, let's go ahead and hook up our navigation bar using Prototype tab. Select the healthy bites and we're going to click is to add an infraction and we're gonna do scroll too. We're gonna choose Layer header. No matter where you are in the landing page, we'll go ahead and scroll back up to the header section. Let's do ease in and out. And instead of 0.3, Let's do 0.6. Now for the restaurant, we're gonna do interaction and we're going to scroll to restaurants section. Leave everything else has this. You guessed it for the Contact us. We're gonna do scroll to Contact Us section for the download app. When we do scroll too, Apps section. Now everything's connected. As we expect. We're gonna go ahead and remove this hover state from here. And over here, we're gonna do the same thing over here. Remove that hover state. Now, fee, go ahead and preview that. Every scroll down at any point we can click on healthy bites to scroll this backup. You can check out the restaurants section, Contact Us section, and the download apps section. Beautiful. I think this looks amazing, perfect. So there we have it. 104. Recording our Prototype: What cool thing I want to show you is that you can also go ahead and create recordings of your prototype if you've hit on record video over here and the desktop preview, if you're on a Mac, you might get asked to grant the app permission. So go ahead and open system preferences to grant those permissions. Now you might need to add this point, quit and reopen XD. So go ahead and allow Mac to do that. But once you've done that, you can go ahead and open up the preview, select the landing page, and then go ahead and click on the record. Now as you can see it's recording. I can go ahead and interact with the website as I'd like, and show people how it works. Any point I can go ahead and stop the recording and save that file anywhere I'd like. Do healthy bites website demo. Let me go ahead and save that. Now over here in my resources, I can go ahead and open up that recording and watch it to see how we've done. That's awesome. Cool. That's how you can also record your prototypes in XD. With that, that wraps up our landing page project. I hope you were able to learn a lot throughout this process. And I think we've learned a lot of useful tools, Features, templates and plugins, and how we can use XD. Awesome. 105. Conclusion: Alright, big congrats. On completing this course, we did an amazing job from getting started with Adobe XD, alerting what it has to offer all the way through designing or two projects at the mobile app for the food delivery service, helping bytes, and the website that we put together for them. And only dad who would create an interactive prototypes for both projects that we can now share with her friends, colleagues, clients, and show them what we've done and how this product could work. This is amazing, and this is just the beginning for you as a designer. From here on forward, I encourage you to take on design projects and keep getting inspired by projects and products that you have access to all these basis, the apps on your phone, to the websites that you browse. I proceed love keeping a folder of all the designs that inspired me so I can use that in my future design projects as well. I'm super happy with all the different parts that we've covered throughout this course as we covered a ton from components, Repeat Grid stacks, how to add animations to our prototypes. And a lot of the nifty little tools and plug-ins of used to polish up your design and make it look better. From here, I'd like to wish you best of luck and hope to see you in future courses.