Learn Adobe Xd Webdesign: Design professional websites from scratch - UI UX Design

1. Learn Adobe Xd Webdesign: Design professional websites from scratch - UI UX Design: Welcome to the Adobe XD Mastery course where you will learn how to create a beautiful website for web and mobile from start to finish while having a great workflow. Hey I'm Reno and I will be your instructor for this course. I discovered my passion for design almost 10 years ago and so that's why I went to design school where I learned the basics about design. I started a YouTube channel where I shared everything that I'd learned. This YouTube channel gave me enough exposure to start my first design company with my friends, and we work for a lot of smaller companies but also for a few big brands like Coca-Cola, Microsoft and Adobe. That was really cool. Currently, I spend the majority of my time teaching online because that is what I really love to do. I designed this course for anybody who wants to learn how to design websites with Adobe XD. There are a lot of fancy Adobe XD courses about app design, but in this course we're going to focus on web design. Because realistically, that's where most of us start as UI designers who want to make money with our skills. But we will design one full website with four pages and a few separate designs, and I will provide you with all the images, the icons and the fonts that are used to create these websites, so you can follow along with me. We will start off easy and gradually work faster so you will have enough time to become familiar with Adobe XD. By the end of this course, you will be able to work with Adobe XD to create web and mobile pages. The method that I'm going to teach is very powerful because it will allow you to re-use certain elements that you will only have to create once. After you're done with the homepage, things would get really easy and fast. I will also show you some of the design tricks that are used to make my designs look better. This means that we won't go really into depth on design theory, because the goal of this course is to teach you Adobe XD. This course is for anybody who has an interest in web design and wants to learn Adobe XD, but it's especially good for people who use Photoshop or Illustrator right now to design their websites. Because once you've designed one website in Adobe XD, I think that you will not go back to Photoshop or Illustrator. For example, just look at the repeat grids tool. All the way Adobe XD allows you to insert images, change the color or make whole pages clickable with the prototyping tool. It's just an amazing tool for UI design. So if you're interested in learning Adobe XD, then I hope to see you in the next video. 2. Welcome to the course! What to expect: All right, welcome inside of the Gore. Thank you so much for enrolling. I'm very excited to start. I've a lot of things prepared for you. I want to say a few things before we're going to start first things first. Chapter 1 is about the basics. We will go really slow into Chapter 1, because I really want to make sure that you know the keys to short keys and how to move, how to align things, because that will make things a lot easier in the future for you. The way I use my shortcuts the way I Zoom, the way I select elements. If you just tried to learn what I do, it's going to be so much easier for you. That's why Chapter 1 is really a deep dive into the control, the alignments, the colors and everything. Then once you start designing the Homepage, the Homepage will take a few episodes. But then, as I said in the trailer, the other pages will go really fast because the method that I'm going to teach in this course is really efficient. You prepare a lot of things upfront and then you can copy and reuse a lot of elements to create your pages faster. After you've completed this whole course and done all the steps, you can even use these elements for another project. Because for every project you need things like titles, you need text, you need buttons. Then if you have a new project, you just change the styles and then you can reuse that in other projects. I want to make sure that you stick to it because I really want you to get a result. If you have any questions, you can just leave them down below. Then I hope that you will really enjoy the course. I hope to see you in the next Episode. 3. Here are your downloads (don’t forget to install fonts): All right guys. I'm super excited to dive in to Adobe XD. First things first, I have made is very easy for you so you can follow along with me. I've created this folder which you can download. In this folder you will find the first exercise file which we're going to open in the next video. You will find my final design. You will find a lot of free fonts that you can install, and all the files that you need to create the website. What I want you to do is go to the link below and then you will go to a page. What you're going to do is you're going to click on download, download the zip file on your computer and extract it on your computer. If you're on a Mac, you can just right-click and click on extract. If you're on a Windows, you can also do that if you have WinZip or WinRAR installed on your computer. On most computers it's already installed. You can see extract with WinRAR or WinZip. If you don't have that on your computer yet you can download that for free, just typing in Google, WinRAR or WinZip. Once you have that you can see all the files inside. Then the first thing before you're going to click on an XD file is you're going to install the fonts, because I've used specific fonts inside of my design files. If you just open this before you install the fonts, you cannot see the fonts that I've used. What I want you to do is go through the font folder over here and select all of the fonts. If you're on a Windows then right-click and click on install. If you're on a Mac, you need to open fonts book. Just go to your fonts book, open your font book, and then just drag all of the fonts inside here. Just insert them in this list. I've already done that, so I'm not doing it again. Then you are fully prepared to go to the next episode where we're going to open our first exercise, a basic file. Install the fonts and I will see you in the next video. 4. Adobe Interface Basics: Welcome back in the previous episode, we have downloaded all the files that we need and now we're going go into the Basic file. This is the starting screen when you first open Adobe XD. I see all of my reasons files over here, you're probably not going to see that if you've never opened XD and they also give you some options to create a new all part. But for now, I have created a very simple Basic file that we will be covering, so just double-click on the "Basic file" and the first thing that you're going to see is this. The basics of the basics. I'm assuming that most of the people who watched this course have already a little bit of experience in create a software. Maybe you've worked in Photoshop, in Illustrator, maybe even in tools like Premiere Pro or After Effects. Then a lot of the things are the same in Adobe XD, but there are a few key differences, so even if you're completely new to create a software and this will be easy to follow. But if you have a little bit of experience, you will understand this really fast. First things first, the "Space bar" is the move tools. If you press this "Space bar", if you're going to see that your mouse will change in a hand and you can move around in the screen, so just click and drag to move around. Then if you want to zoom in, there are different options, but the easiest option and the option that I always use and is the fastest in my opinion, is the "Alt" plus "Scroll", so if you have a mouse, you can press "Alt" and then "Scroll", and where you place your mouse is where it's going to zoom to. If you don't have a mouse, I will also show you some options, but this is the easiest option. Now I'm pressing "Alt" and I'm scrolling with my mouse, so I will zoom in to this circle. Same if I want to zoom into this part, but I move my mouse and zoom in to that part. If you don't have a mouse and you have a trackpad, you can use just the zoom, the same way as you zoom on an smartphone, to zoom in on a photo, you can use two fingers and then zoom in on a specific area. If you don't want to move around, you can also use the "Space bar" and move it like this or use two fingers and then just move to two fingers in the same direction and this way, you can also move very smoothly inside of your Canvas, so this is also a nice way. Let's say that you don't have a trackpad and you don't have a mouse, which I don't recommend. I recommend you use a mouse while you're designing. They can also use the tool over here on the left and you can just select a part like this and then zoom, and then if you press "Alt", you can zoom back. But I never ever used as tool, I just used the mouse, so go back to the selection tool and then press "Space" and press "Alt" to zoom out, press "Alt" to zoom in, and just get familiar with the zooming. Just try it for yourself and make sure that you understand how this works. There are three more little things that I want to show you. First of all is the move tool, so if you want to move an item, you can just click and drag the item to any location that you want. Click and drag, and it will happen off times that you move an item on extend. You didn't want to do that, so then you need to go a step back. You can do that over here, "Edit" and then "Undo Move Object" like this and you can do it again. Boom, and then you're back and as you could see, there is a shortcut over here and it's called Command Z or on a Windows it's Control Z. If you just move it like this and you press "Command Z" or "Control Z", it will just move back. If you were like no, it was better in that old place, you're just press "Command Z" but then with "Shift" and then it will go back as you can see over here, so that's all you need to know for everything inside of this space. We also have a bar over here. We've talked about the selection tool, so if you have the selection tool selected, you can select things. If you have the rectangle tool, you can create rectangles like this. If you want to perfect rectangle, just use "Shift", that's how you create a perfect rectangle. Then if you want to release it, make sure that you first release your mouse and then release the "Shift". This is important because if you do it the other way around, so you first release the "Shift, then it's going to jump back, so first released the mouse and then release the "Shift" to make a perfect rectangle. This works the same for circle, so just click on the circle if you want to create a perfect circle, press "Shift", boom. First released a mouse and then release the "Shift", and then you will have a perfect circle. Same for rectangles, pretty easy and with lines, it will just create a horizontal or a diagonal or a vertical line. If you use the "Shift" and otherwise you could just use any direction that you want. The pencil we're going to talk about that in a future video. The text tool, if you're going to click on the "Text Tool", you can just press anywhere and you can start typing whatever you want, and then if you want to go back and you want to select a text, you need to go back to the select tool and then you can select it. This is the same for all the other tools, so if you are inside of the rectangle tool, for example, and you're inside of here. You want to move this rectangle, you need to move back to the move tool, and as a shortcut for this, which is "V", this is one of the keys that you're going to use over and over and over, so you can write this down if you want to. But this is one of the things that you will use very often. My cursor right now is not a normal mouse cursor. As you can see, that's little rectangles, so then you know that you're on a rectangle to see if you can see right now is a circle, right now is rectangle, and then if I press "V", I'm going to go back to the move tool and I can move those things around. I can even select different things by pressing and holding like this and then the deleting them with the backspace tool like this, pretty easy. Then the last thing of the basics that I wanted to show is the property panel, because now we've talk about this part. Now, there's also a big part over here with a lot of options, so if you click on an item, you will get a lot of options for that item. The item that has a blue outline that is now selected and you can now change these settings over here. For example, this is the font size. If you click on this and you type in 60, for example, this text is going to be bigger. Right now, I'm going to put it back at 52. If you want to change the color of the texts, you go over here to fill color. You can just change the color over here to another color that you want, so maybe something like this, purple, but you can also use the puppet tool over here and this is really nice. They have a short key finally for this edit, because they didn't have this in a previous version, it's now under "I" or just click on this and here you can select a color that you want, so for example, this color, and then it will change. If you just use the "I", you can just press "I" and be like, oh, maybe this color is nice, maybe this color is nice, and maybe this color is nice, so in this right panel you can change the color to any other color that you want. Over here, this is the position, so if you change this to 300 is going to change the position. I'm more like a visual designer, so I just like to move things around on the artboard and not really take a look at this. But sometimes if you want to create a circle who is, for example, 50 by 50 pixels, you can change that over here. This is the width, this is the height, the X and the Y position on the Canvas. That's really all you need to know about this side panel for now. That's the basics for the moving around and changing objects. In the next video, we're going talk about the layers panel. 5. Understanding Layers in Xd: All right. So in this video we're going to dive into the layers panel. This is important to understand. You're not really going to spend a lot of time here but if you don't understand this you're going to run into trouble. So let's just click on the layers panel. You're going to open it by clicking over here, and now you can only see one artboard and a pasteboard. If you click inside of your artboard, you're going to go inside of all the layers that are inside of this artboard. You can see different things over here for example, all these circles that you can see over here, you can see the text layers, and you can see the, a few folders over here. If you click on an item it will light up in light blue. If you select more items than once, then it will also light up in blue so you know what the layer is. So for example, if you are designing and you want to see how your design looks without this box, you can go over here and press the eye and that will hide this layer. So it will not be clickable but it will still be saved inside of your layers panel. What you can also do is lock this layer, this is also a nice feature because then it will be visible, but there will be this lock. So for example, if you have a lot of other items overlapping, and you don't want this item to move if you're moving other things around, so for example, you are selecting a lot of items over here that you want to move, and then the layer that has locked will also be selected but it will not move because it's locked. So this is also one of the nice things that you can do, and I don't suggest that you go into the Layers panel and click on lock because you can also use commands or Control L. So this is what I always do, I just press Command L to lock or unlock it. What you can also see is that this layer or this group I should say, is above this box visually. This is also true in the layers panel. So if you want to move this box beneath the main box, what you need to do is click on the image box and then move it beneath. So make sure you see this blue line, with a circle at the beginning and then release it so now, this is beneath the main box. Actually, this box is now beneath all layers so even if we move it up, you're going to see that it's beneath all the layers. So like I said, if you want to move this box all the way to the top, you can do it like this but I don't advise to use the Layers panel at all, and just use short keys, because you can also do this with short keys. So if you press Command, and then the brackets, you can also bring it slowly to the back one step at a time. I will open the layers panel to show you what I'm doing. So if you use to right bracket key it will go up with commands, so commands right brackets or left, then we will go up or down. So test this for yourself and see how it works. Then if you want to move it all the way to the top, you also add Shift. So you're pressing Control or Commands, then Shift, and then the right brackets. So that is how you move it all the way up or all the way down. I use this all the time so I advise that you also write this one down. Okay. So that's it for the Layer panel. 6. Selecting, moving and duplicating: Welcome back. In this video, we're going to dive into Selection. As selecting elements, moving elements is an essential part of Adobe XD. Let's just first cover some of the basics. For example, if you want to copy this, two times. What you can do is you can press Alt, and then drag it to the left. Press Alt, click it and drag. In this way you can make a duplicate, as you can see. Do that one more time and then release. To practice it one more time, I'm going to delete it. Make sure when you're duplicating, you first release your mouse-click and then the Alt. Now for example, if you want to test how it looks when you drag those two boxes down, you can drag them down like this or you can do it at the same time. You can do that with Shift. If you click on an element and you're going to hold Shift, then you can select two elements. As you can see in the layers panel now, two items are selected, so you can drag that down. Now if I hold Shift, it's not going to go outside of the vertical line. This is the same for the horizontal. I'm going to go back. If you want to select those three, you're going to click, Shift, click, click. You're just holding Shift and you click whatever you want in this Selection to move it. Another trick that I want to show you is the Selection with Command. If something is inside of a group, for example, we have an Image box over here, and then you can see the Button which is also a folder. For example, if you want to select this text, what you normally would do is you want to click, you want to double-click, double-click, double-click, and then you have the text. That means that you need to click eight times. If you want to skip that, just press Command, as you can see, you can just select through all the folders or groups. Recently, they've added a new feature which is really nice. Let's say you want to change the color of all of the text in here. Normally, you couldn't do that, but now you can. If you press Command and then go to this one, you press Shift, so you press Shift and Command, because Command you click through all the layers and with Shift you can select multiple things. Now, you can select different things, even though they are inside of different folders or groups. This was not possible before, so this is super nice. Now you can, for example, change the opacity. We're not going to do that in this design, but that's what I wanted to show you. Like I showed before, you can also select the different elements by just dragging, but sometimes you have a background. For example, if we have this folder and this is on top of here, and you're going to select it like this, you also select the background, that's not what you want always. You just click Shift, click, and click. Now, you can drag those down. Let's say that you like to use this feature, and you've also selected the background. You can deselect the background. Let me just close the folder, so you see what we're doing here. I'm going to select all of those. Now, if I press Shift and I'm going to click on the main, big box, it's going to deselect that main box. Now, I can just move these three parts, even though I started with the whole Selection like this. Again, you select everything and then you press Shift for the thing that you don't want inside of that Selection and then you can move all the other parts. All right, for now I'm going to move it back. I'm going to select those. I'm going to press Shift, going to go down and I'm going to leave it like this. That is for the Selection, very easy, but a very important thing to know. 7. Alignment fundamentals: Welcome back. In this episode, we're going to talk about alignment, also very important thing in Adobe XD, but in web design in general. If you do not align your objects properly and you do not understand white spacing, your designs will look messy. What I'm going to show you right now is how to align properly in Adobe XD. As you probably already saw, is that if you move an element in Adobe XD, a lot of purple numbers will appear and sometimes even these boxes. Those boxes are very nice because they will tell you what the distance is between those elements. Adobe XD will look at the distance between the elements and then he will tell you, hey, do you want the same spacing over here? A lot of times you want that, so it's very nice to use that feature. Let's just go to this text over here. For example, if I'm going to drag this text Adobe XD will at some point be like, hey, do you also want 10 pixels from this to this text, the same as you have over here. That is what you can do. The numbers that you're going to see on the screen are the pixels. The position of an item, you can see that over here, so if you're going to change this, the number over here is going to change as well. Now I'm just going to leave it at 30 because that is the same spacing as we have over here. But I have to show you one thing and that is that it will count the space from the bottom of your text fields. For example, it will calculate a space as you can see not to the bottom of this text, but to the bottom of this text fields. If I make this text field a little smaller, then it will be nine pixels more as you can see. That's one of the important things that you need to know about the alignment tool. What's also a really nice feature is that you can align items very quickly without actually trying to do it like this. For example, if you have a designer's very messy like this, what you can do is you can select all of your items and then you can move them to the top. Here are the alignment tools. For example, if you want to have this item in the middle of your canvas, you just click on it and you will click on this one. Now it's perfectly aligned in the middle. What you can also do with this tool is make sure that, for example, this button is in the middle of this whole box. For example, if you have a long button like this and you want the button to be exactly in the middle or let's just say this texts, you want to have this text in the middle of this button. What you can do is you can select a text at the button and then you can use the alignment tool. I will show you, you're going to press Command, click on the text, press Shift and then click on the button. Now I have to text and the button selected, and then if I click on this, it's going to align my text exactly in the middle. This is one of those things which is just super nice to work with. Also if I want to align this button in the middle of this box, I can do that with the same trick as well. But for this example, if I'm going to align this, then it will not be aligned to my texts and the title. For this example, I just want to know what the distance is between this and I also want to apply it over here. You can just select the buttons, so double-click on it and make sure you have the button with the text. Now if you're going to decrease or increase the size, XD automatically knows that you want this item to be in the middle. How does XD know that? Well, they know that because you have just aligned this text in the middle. Even though this text is left aligned, XD will even understand that you want to have this in the middle. If you want to get the distance from this to this badge, you're going to press Alt and then you're going to see that this is 50 pixels. If you just want the same on the other side, what you can do is you can increase it with your mouse to make it 50. Or if you know that this is 50 and you know right now it's 62, then you know that you just need 12 pixels more. So you can just go over here and type plus 12 and boom. Now it's on 290 and now you just know that this is aligned perfectly. Okay, so let's say you want these items to be perfectly aligned under this main box. What you're going to do is you're going to make sure that one of those items is just touching the outside of the box, doesn't matter, and the other one you also want to have that. You can even have it like this as long as it's aligned to the outside of that box. Now even if this item is like here, you can select all of them and align them to the top like this, so they will all be aligned and then use this. If you click on distribute horizontally, it will calculate the space between the items. You're going to have it like this, so this is super nice. Now you can just grab all of them and make them also 50 pixels to this main box, and now your alignment looks pretty nice. One more time to practice this. Let's say this is all over the place you select them, you make them, for example, in the middle align and then you click on this one and the space between those items will be the same. If you still think this is hard, Adobe XD has released a new feature and that's called Rulers. If you've used Photoshop or Illustrator, you already know this. But if you go to the site of your art board, for example, we have the same situation like this over here and you don't really see this line, what you can do is you can click on this item, then go to the side and then track in a ruler and just make it clip to the side. Do that also on this side like this. Boom, it will just stick like you see. Then you can just align it very easily to those parts, select them, make them even as it already was and then put it like this, select all of them and make them 50 pixels to the other item. By the way, you can also move items which are arrow keys. With one click it will move on pixel. If you use these shifts, you can move 10 pixels. Now this is 44, so now I just need to make it 50 pixels like this. That's it, if you want to remove these, you can just direct them off the side and boom, now they're gone. Pretty easy to use and it will make your design look a lot better. Okay, so that's it for this episode.I will see you in the next video. 8. The very useful Assets panel: Welcome back. In this episode we're going to take a look at the asset column. You can find the asset column over here. If you click, you're going to open it. This is also one of those things which beginning designers don't use that often. But it's so important, because if you use this, it will make your design look a lot better. Because you don't go all over the place with your fonts and whichever colors. What I want to show you is something very nice. For example, if you have your colors over here, this is a color palettes. It's super nice to have this in somewhere in your designs so you can just use the eye to pick a color. But what's even more nicer is use the assets. For example, if I'm going to select all of these layers, I can click here and a color, I can click on the plus. Now all of the colors with the actual hex codes will be edits to the color assets. This means that if I'm going to change a color over here, it will change in the whole documents. For example, we have this purple over here. This is the same purple on all the titles and the buttons. Lets just see it's 7768CC, as you can see 7768CC. Now, let's say that you're working for a client or you have your own website and you have decided that you don't like the design anymore and you want to have blue as your main color. Well, if you have a big website and you just want to change all the colors, you just need to find all of those layers. You just need to go inside of 100 different layers or maybe even more than that. It's horrible. This is why I use the assets. Now, if I'm going to click on edit over here in the assets and I know that these colors are all sets to that same color. Now I can change it and all of the elements inside of my document will change, like you can see over here. This is a very quick way to test the different colors in your design. Now I'm just going to click outside of it and press Control Z to go back. But I guess you understand why this is so useful right now. This is also true for the text layers. For example, if I've prepared some text blocks over here and I want this text to be the texts on all of the main texts on my website. This is 18 pixels and its 28 pixels in line height. That is by the way, the height between the rows. If I decrease this, you're going to see it that it will change. I'm also happy with the color. What I can now do is, I'm going to add a character style. Now it will add a character style. Now, if I'm going to go to this one, let's see what this is. This is 16. Let's say I want to have the same over here. I can just click on this and now it will change. Now these are all linked to the characters over here. It's the same principle. If I click on edit and even, let's just say I want another font arial, it will change in the whole documents. I'm going to put it back at montserrat right now. You can even change the color of the text if you want to like this, because the color is also saved inside of this character style as you can see over here. Now, I will show you a real life example. If you go back to the finder, you can open my final design, Rino file. Just click on it and it will open. As you can see I've added a lot more character styles in this document over here. If you're going to zoom in, you're going to see that I have different styles for this website. For example, this title over here is 36. You can also see that over here. It's the same for this title. But I've also added character styles, 40 different colors as you can see over here. There's one last feature that I'm not going to show right now, but this is components, it's also part of the asset column. This is for example, if you have a footer design that you want to repeat on all of your pages and you want the same design on all pages, you're going to use the components. But that's it for now. You just need to know the character styles and the colors. We're almost done with the basics so I will see you in the next video. 9. Artboards. All you need to know.: Artboards, why do you use artboards? Well mainly for pages. If I go back to my final design file. As you can see in this design if I'm going to close this one down. I have named my artboards. This is the artboard for my homepage. Then I have a different artboard for the Home Mobile design page and then for the Portfolio page and as you can see, these are the artboards that I've created and I've given them a name. You can change the name of your artboard just by double-clicking on it, for example, this is the V1. I've named it, but you can also change that to Vietnam, for example, and this one to Indonesia. This way you can just structure your design. One thing that you have to know if you zoom out too far, you're going to see those dots. You need to zoom in a little bit to see the actual names. You want to work with the names for your artboards. It's not only nice for your own workflow, but this is also important if you're going to work with the prototype in the future. Because with the prototype too, you can easily just right-click and then search the name of the artboard where you want to link to. I suggest that you always just use good names on your artboards. How do you create a new artboard? Let's go back to the exercise file. You can just copy it the same way as you copy elements just by holding down Alt and then tracking it, something like this and then you can change the name to artboard 2, for example, or you can click on the artboard tool over here. I'm going to close this one down and then you can see all the artboard options over here. You can use a Web, for example, 1366. That's what you can do. You can drag an artboard if you want to. But what I do most of the time is just make one good artboard and then I just duplicated. But if I want a mobile design, I'll just go to the artboards and I will go to iPhones 6/7/8 and then I can just make that artboard a lot bigger if I need to. What you will also see is this blue line over here. This is the scrolling position. If you go back to my final design file, you can see that over here as well. In the mobile design page, you can see that the line is over here. This is just the standard position and you will need this if you're going to click on play over here. Let's zoom out a little bit and if you're going to click on play, you will get a preview of your design. Now the scrolling position is on the bottom over here, and this seems pretty normal, but if I change this position, I'm going to copy the value, so I won't forget it. If you're going to change the position like this and then you're going to press play, you're going to get a preview like this and that is of course, not what you want. You want a normal phone design and that's why you should keep it at that and this is super nice if you're going to make a prototype or you just want to show your design to somebody else. You can also do this for your homepage, for example, I don't really have it on this homepage here because it sets a none, but you can set it to vertical and now it's on 4,000 pixels. That's not good of course, because then you will see the whole page and you cannot scroll through it. Now you're just going to put it at 800 for example, maybe something like this and then if you click on the preview, you can see your website in full screen like this. All right, that's all you need to know about artboards. Let's go to the next episode. 10. Where to get the latest pre-made templates: Welcome back. In this video, I'm going to show you where you can get premade templates. Let's first clean up the main exercise file for now. I'm just going to delete that and save to file right now. So if you are not a very experienced designer or you just don't have inspiration for a design right now, what you can do is you can access the premade template kits if you click on file and then you go to get UI kits, they have different UI Kits from Apple, Google, and Microsoft. I've already downloaded the right ones for you inside of the downloadable folder. In this folder, Premade Kits. So if you click on "Google Material Design" for example, and you're going to open this file, you're going to get a big file with a lot of different design elements from Google. So let's just zoom in for a little bit. You're going to see all of the fonts that they use, you're going to see their icons, and you can just take a look at those icons if you need an icon for example for your website and you can just copy it because this is just an XD file, super nice. Do I suggest you just copy everything from Google or from somebody else? No. I suggest that you use this for inspiration. But for example, if you want to create a Checkbox, here is the Checkbox from Google. So this file can give you just some nice inspiration. This is mostly focused on app design, as you can see, but there are a few nice things that you can also use for websites. So for example, Checkboxes, Radio boxes, and buttons like this. But you could just click on and you can copy them to your own file. Mac OS also has a nice kit. Click on the UI Elements and then click on this file. As you can see here are the Mac OS files for Adobe XD. Of course you're not going to just put a message like this in your website, but you can use this for inspiration. Here are some nice things for example, a tab bar with different items, a star review, a slider like this, or maybe a drop-down. How do you design a drop-down? The last one that I want to show you is from Microsoft. That's also a nice one. If you click on the WindowsUIXD. This is a pretty interesting moment because I think Windows has the most usable options for a website design. If you're going to zoom in, you're going to see all of their buttons, a hyperlink, for example. This is also one of those things that most designers they just want to use a buttons for everything because a Button looks pretty. But sometimes you just only wants to use a link to link to a specific page. So here's a design example for that. This is what you can use for input fields,for example. Here are more sliders and checkboxes. This is also pretty nice. Sometimes you have to design a drop-down with a Tree view like this. Here you can take a look at how much spacing, for example, Windows uses. What is a nice spacing, for example. So this files is also super nice input fields for a password. Sometimes you need to design and login. Just take a look at it for yourself. But if you want to get the most recent version, use go to file, Get UI Kits, and then for example, click on Microsoft Windows. Then you will go to a website and you can download the latest version of the Design tool kits like here, Adobe XD toolkit and you can download it. This is already super nice, but in the next video is going to be even nicer. I'm going to show you the website that I use to gets free fonts, free images, and free icons. So I will see you in the next video. 11. Getting free fonts & icons & images & color pallets & filler text: In this video, I'm going to show you where I get all of my free stuff that I use for design. For example, if I go to my design for over here, you can see a pretty cool, creative font over here, it's called RB sets of RB jets and that is from the website dafont.com. On dafont.com, you can get different fonts. Most of them are free to use, but not all of them. As you can see, for example, this font is only free for personal use, so if you want to get a font that is free, also for commercial use, you need to adjust your search. For example, if we're going to go into a category handwritten, I think that's a cool category. As you can see a lot of creative fonts over here that you can use. But then if you want to search, you're going to go to more options and you're going to click on 100 percent free or public domain and if you click on submit, then it will only show you the fonts which you can use 100 percent for free. You can even use this texts over here, so for example, if you want to know how this words explore looks like you're just going to type it in over here and you're just going to see how words explore looks like, and then you can just click on it, and then you can download the font over here and install it on your computer and then used in Adobe XD, this is a super, super, super nice website for all creative fonts. Another website that has only free fonts to use is Google Fonts. These fonts over here are not so creative. Even though you have some creative fonts over here, actually a lot, but not as much as Adobe fonts, so what you can do over here, you can also just use a text. For example, explore Vietnam. If you're going to type that in over here and click on apply to all fonts, you're also going to see how that text looks. You can adjust the size over here and you can select category, so for example, if you only want handwritten fonts, you can just deselect all of them and you will see the handwritten fonts of Google Fonts at a download experience in this as a little bit different, if you want to have this fonts, you're going to click on plus, and then it will just be right here. If you unclick on it, you can click on "Customize". Sometimes it has more versions so you can select the ones that you want, and then you're going to click on" Download" over here, so that is how you download fonts from Google fonts. Now, for icons', if you're going to click on an icon at this is the icon website that I use. If you're going to go back to this design, you can see icons over here. For example, this tour icon is a mountain. This hotel icon a path and this dining is a glass. Here are the icons that I used, and I've just searched them here in the search bar, flaticon.com, so if you want an icon for a house, for example, you are going to search for house and there are a lot of free icons that you can use. Some of them are bates, as you can see with the crown and he download experience right here is also a little different. You can just press on the plus and it will add it to your library. Let me delete the old ones. If you've selected a few icons like this, you can download the selection and if you want to use it in Adobe XD I would suggest that you use the SVG option, and then you can download it over here. I mean all the information, 40 credits are in the downloads folder, but the SVG is vector icons or as you can see over here, it doesn't matter how much I zoom in it will always be sharp and that's of course what you want, so always use SVG, but you can also use PNG, and then, for example, pick a bigger size, something like this, so it will also be sharp, but not as sharp as SVG because this is vector, so these are not pixels and PNG is always pixels, so that's what you need to do for the icons. Now for the images, the website that I always use is unsplash.com and there are a lot of cool hipster photos on splash, so if you, for example, need a picture of a bike, because it will happen a lot of times when you're working with a client that they don't have the images yet and you just want a filler image for your background, for your images, so what you're going to do, you can search for bike and then you can download to this file like this to your downloads folder. You choose press "Enter" and now you have that file in your downloads folder. Super high-quality picture, as you can see right here, so that is super nice. Another website that I often use is pexels.com, same principle as on splash. You can also search for bike and you will get different images. There are a lot of those websites, but if you're starting out, just save these and you can just start designing, and then another website that you need to save is color.adobe.com. This is a nice website to create a color palette. Like I had created in my design film over here, I use the Adobe website as inspiration, so you can just drag this like this and put it on purple, for example, and then create a palette that you want and you can do different options over here. For example, monogrammic, that's one I used for this website, and then you can just create a palette over here. Then you can copy it. For example, you can make a screenshot. You can bring it inside of Adobe XD, but just a base, and then just use the eyedrop tool to create the colors in Adobe XD and then of course, edit to your asset column, so that is how I use this website. I just use it for inspiration and then I transform it into asset color in Adobe XD. The last website that you want to save is this website, loremipsum.nl and on this website you can just get some fake filler text. Also a lot of times when you're working on a website, you don't have the text yet, so you can just copy a text like this and then go to Adobe XD, go to your file like this, place the texts in here, and then you will have some texts to work with. These are the website that I wanted to show you. Save them on your own computer because on almost every website you need fonts, you need icons, you need images, and you need filler text, and of course you also need colors, so that's is for this episode. I hope that you found this helpful, and then let's just jump to the next episode. 12. Preparing our first artboard & grid: Hi and welcome back. In this episode we're going to prepare our artboard. What we're going to do is we're going to leave those two files that we have opened over here because we're going to create our own file. In this episode we're going to create the actual file that we're going to use, that you're going to use to create the whole website. How do you create a new file? It's very simple. You just go to "File" and you click on "New". Then you will get a few options. The options that you're going to see over here, are not the options that you're often going to use for a web desktop website. We need to change it up a little bit. For now, we're going to make it easy and we're going to click on this web icon, and now it creates an artboard. As I said before, the artboards are over here. So if you click on the artboards, you're going see a few settings over here. But before you're just going to click on one of the options, I want to explain you how the web works because this is really important. Because the preview that they gave you. Now we're on our artboard that's 1920, but that's way too big for a website because you have to understand that most websites in with the content of the actual website. Let's just go back to my design file for a minute. The main box where all the content is in, so in this website, is this from this left part to the right part over here. On modern website, most of the time that's 1140. This is one of those numbers that you want to write down. I don't know if I've said this before, but this is almost always 1140. Sometimes it's 1200. Back in the days of the website were in 1960 and then our screens got bigger. Now the main content of the website is 1140. Why is this important? This is important because you want to design within that column. Because if you don't, you're probably going to end up on a website that doesn't look good on all devices. You also want your website to be visible on smaller screens. For example, a laptop that's only 11-inch. This is why you need to stay between those borders. Adobe XD has a great feature for this and it's called the grid. If you click on the "Grid" and you can see it in my file over here, you can see that the gutter width, which is the width between the contents is 1140. This is what we're also going to create for our own file. Okay guys, I have to say something. This is Rino, from your future. Adobe XD has changed the Grid feature. Now it's not possible to turn on the Grid for every individual artboard anymore. Now if you turn off the Grid in one artboard, it's going to be turned off in all the artboards. Please now that when you're watching this video, because this video was recorded a few months ago. As you can see on the sides over here, there is some space left, and you don't need a lot more, as you can see because the space on the sides here, this is enough for a website and this artboard is only 1400. That's the size that I often times use. Let's go back to our new file. We're not going to use this artboard. As you're going to click on "Artboard" again. You can better start for a website with this one, which is 1366. I'm going to zoom out. I'm going to delete this one and boom, here we are. We're going to actually change it to 1400, but you can also just put it at the 1360 because it doesn't really matter. Right now we're going to turn on the Grid because we want to make sure that our columns are perfect, and I've already put the information in right here. You need to check if you have the same numbers. I always work like this. You have two columns and you have 1140 over here. That's the space between. Then you have 130 on both sides. If you add that up at two times 130, and this number, you're going to end up with 1400. Also here, I've heard that for some people it doesn't work as I displayed over here. What you then need to do is try to first add the columns and the gutter width, then skip the column width and then go to the last one, and then the column width is automatically added. If this doesn't work for you, then change up the order of putting the numbers in. Some designers like to design within a grid. So you will have a lot of extra lines over here. But I don't because most of the websites, you just have a three or a four column, maybe a two column, sometimes a five column, and you don't really need the extra lines for this. You can also just use the align tools inside of Adobe XD. I only use the outsides grid like this. That's the most easy solution. Now if your page becomes longer, you can just click on the name and then drag it out as you can see. Then this line appears, and this line is the scrolling border. All right, then another thing that you will need to prepare, which I think is important, is the column for your mobile phone. If you go back to the artboard feature over here and you scroll down, I always use the iPhone 6. You also have Android phones over here. As you can see, the iPhone 6, 7, 8 is a little bit wider than the Android mobile, so you have a little bit more space. I suggest that you pick this one or you pick this one. I always pick the iPhone. Why do I not use the newest iPhone? Well, because the newest iPhone is very long and most people have a screen that looks like this, at least in the dimension ratio. So that's why I always suggest that you use this one. I'm going to change this to mobile. Here is also the same if you're going to scroll, you're also going to see that line. If you then click on "Play", you're going to see a normal phone size and you can scroll to the website if you have some content inside of it. On the mobile artboard, we're also going to set up the grid, so Check this box over here. This is how I've set it up, and maybe the default features on your screen aren't the same, but you want to have at least 20 pixels on both sides. As you can see, if you change this to 10, you will get less space on both sides, but you want to give it some room. So let's go back to my phone now. Click on "Mobile", click on "Grid" and as you can see, I've even used 30 over here, which makes it look a little bit nicer, but you need at least 20. But most designers like more whitespace, so for this project, we're also going to put it at 30. Because more white space on the left and the right side will just make it look more clean. At least use 20, but I prefer 30. Now we are fully prepared to start designing. Now what I want you to do is go to "File" and go to "Save" because we're going to save this file. This is also something if you're XD crashes and you have not saved your file, I think you know what that means. I always save it at my computer because I want the files to be in my Dropbox, but you can also use the Adobe Cloud. But if you don't have an Adobe Cloud I suggest that you just use your own computer. Now I do not want to save it at my desktop. I don't want to save it in the same folder. I'm going to put it in the Course Files" folder for now, and I'm going to give it a name, Xd Course Exercise File, and I'm going to click on "Save". Now you may be thinking, okay, why do we need to prepare so much? Because I just want to start. Well, it's very important that you prepare your artboards in a good way because if you design it too big for example, and you're working with a developer or you are making the website yourself, you're building it in WordPress or you're coding the website yourself, if you designed it in the right properties, you can just click on an item, and you can just see, oh, this is 46. If you've designed it too big, you need to make predictions on how big all of the items are in a real website. This is why it's so important to prepare your artboards in the way that we did right now. I know this is a little boring, but it's very important. Let's just go to the next episode where we're going to prepare our colors. 13. Preparing our colours: Welcome back. In this video, I'm going to show you how you can create your own color palettes, with the color of your choice. We're going to add the colors to our asset column, the actual colors that we're going to use for our website. For this website, I have this palette over here, and I always start with something like this. I have a white background, is just a pure white. Then I have a almost white, which is like a broken white, as you can see. Then a lighter one, then a super bright color, and then a few dark tones. All of these colors are within the same color range. What I mean with that is, that all of these colors have the same hue value, I will show you what I mean. For now I'm just going to copy this whole color palettes of my final design, Rino file. We're going to go back to our file, and we're going to base those colors over here. For now let's drag them outside of the art boards. As I said in the assets video, you can select all of them, and then add them to the assets over here. In this way, if we change the color over here, it will be changed on the whole website. As of now we are ready for the next step. But let's just say you are designing another website, because this website that we're going to build together is of course an example, and you will use Adobe XD for a lot of different projects. What I wanted to show you is how you can create your own color palettes. Let's just say that you have a client, and your client has a logo, so let's just say you are working for the company Nikon. That would be pretty cool. This is the client logo, so how can you create a palette out of this logo? What you're going to do is, first of all, you're going to make a duplicate of this one, where you just create your own circles with this tool over here. Then what you need to do is make another duplicate, and you need to know what the hue color is, of this main brand's color. You have one of the circles that you're going to use for reference, and you're going to take the eyedropper tool over here. You can click on it or you can click on I, so click on it and then drop it like that. Now click on the fill, and we're going to change the hex code, which is the color code over here, to HSB. Now you can see the hue value over here, so this is the hue value. This is the saturation, and this is the brightness. If you bring this down, it's going to be a darker color. If you bring this down, it's going to be more towards Grey. If you change this, it's going to change the actual color. Again, let's just, eyedrop it, click it, open it, and then you're going to see that the hue value of this color is 52. This one is white, we don't need to change that. But for this one, just open it, and just type in 52 over here. I'm also going to do that for this one, 52. Now, I've created a new palette out of this logo, so these colors will always look nice next to this main color over here. You can also add this color, of course, to the palette if you want to. But this is how you can create your own palettes out of a logo, or an image. Sometimes you need to make a few adjustments, because with yellow, for example, the yellow doesn't look that bright compared to this value. The saturation here is 94 and 100, and this is also the same. But this doesn't look as bright as this color, so sometimes you need to change it up a little bit to make it match. I don't always recommend this, but when it looks really different, you can change the values, and make a palette that looks almost the same as this one. Or another palette that you can find online, or use Adobe color, or maybe an image of pinterest, or something else. That's all I wanted to show for the color palette, for now I'm just going to delete all of this. We're going to click save for now, and the last thing that I want to do is create a new art board for all of our brand's elements. Now I'm just going to click on the art board title, press alt, and drag a new art board over here. Just give it a little distance like this. Turn off the grid, and grab your colors and put them inside of this art board. We're going to use this art board also for the next episode where we're going to prepare all of our texts layers. This will be really nice because if we have a lot of elements already prepared over here, we can just very easily drag an item from here to here. Then we can build up the page really fast. I'm going to rename this art board to styleguide, and I'm going to make the background's color something a little bit darker so I can actually see all of the colors here. That should be good for now. I'm going to save it again, and then in the next episode we will prepare all of our fonts. 14. Preparing our fonts: Welcome back. In this episode, we're going to prepare all of our text layers. This is also an important step before you actually start creating all of the pages on your website. I often see designers who do not stick to font sizes, font spacing, a line height, and then it starts to become really messy after a while. Let's just prepare all the main elements. We're not going to prepare everything, otherwise we would not have a lot of creative freedom. But you always need a big title, a medium title, unique body text, you need two buttons, you need those on every website. That's a benefit, and what's also have benefit is that you can already see if everything looks nice together before you actually start designing the page. That's what we're going to do. As you can see, for example, this is a very big title and this is a medium-size title. So go back to our exercise file. We're going to go to the style guide art boards, and we're going to grab the text tool. Make sure by the way, that you have the fonts installed. So in the fonts folder, make sure you have installed all of these fonts on your computer. But of course, you can also use your own fonts if you want to practice a different sign than I am creating right now. Okay, so for now, I'm going to grab the text tool and I'm going to make the big title first. Don't just click but make a box because we want to see the line height and that is the height between the different rows. I'm going to put this on the left over here. I'm just going to type, "This is a big title with at least two lines of text." Click on your selection tool. We're going to change a few settings over here. First of all, we're going to change the color, so press "I" and then go to the main dark color and click it, so now it's the right color. Also change this value to 54 and this one to 64, and this depends on the fonts you're using. But I almost always use something around 50 for my main big title. So just leave it like that and now make a copy of it with "Alt" and "Shift" and then drag, first release your mouse, and then "Alt" and "Shift" and now make our second big title. Now create our h2, which is the not so big title, but still pretty big. I always use something around 36 and now you need to adjust to the line height to something like 44. So then it looks like a smaller brother of this one. You can even change the text to something like this. Then on the website, I've also used another even smaller title. We have this title this is a big one, and mediums title, and a smaller title for my portfolio items, for example, which is 24. I'm also going to prepare that. Make another copy with alts, make this 24, and then change the line height to 32. Now you can see two lines because this box is too big, so make this one smaller, and now you can see the line height. You can see that these corrects. This line, we don't need this line right now because we're not going to scroll inside of this art board. Click on your art board, go to "Scrolling" and set this to none. This line will disappear. Now for the body texts, like I said before, we need a lorem ipsum text, which is just filler text that every designer uses. Just go to loremipsum.nl or I have a new extension that's called Lorem Ipsum generator and you can create a lorem ipsum text like this. For now, I'm just going to copy this one. Copy it, go back to your Adobe XD. We're going to make a copy of this one, "Alt" click and "Shift", make a copy, select all of the texts and paste your whole lorem ipsum text, doesn't matter that it's too long. Click outside of it and make this one 16. For body texts, which is the main part of your big text. Big long texts like this, I always use 16 and sometimes even 18. Because on most websites and most screens, that looks good enough. I would advise 18 or 16. For this website is 16. Bold doesn't look that good for body text, which means texts that are long for this website, I've used the medium. In a lot of fonts, it's also sometimes called regular and that should be good enough. Maybe sometimes light, but I always stick to regular or medium. There for the line height, I use something like 25 and then it looks like this. Okay, so now we have prepared the text styles, and for the main texts, what also looks nice, if the main text is not as black as the titles, but a little bit gray. That's why I've used this color. Let's just put these two next to each other, and I'm going to change the color over here. Let's just work with gray for now. As you can see, it blends in a little bit better if you pick a gray tone. For my website, this looks gray but it's not gray, it's actually purple mixed with gray. That's why it blends so nicely with the background and this color and this title, and it just looks very nice. Click on this text and for now, I'm going to pick the color that I've used for the text, which is this one. On this background it doesn't look that good but on a website it does look really good, so aligned it properly, and then we're going to create our main button. For buttons, I don't use the text block, I just use a single line. Click on the "T", click it and then type something like "Lorem ipsum" or "This is a button". Go back to your selection tool, and for your buttons, I, most of the time use semi bold. The text color for buttons in this website is white, and the background is a rectangle. I'm going to grab your rectangle and make a big rectangle like this. Unchecked the border. Make sure your color is set to the button color that we want. Now, place it beneath your button texts, but now it's above that text layer. So use commands and then left brackets, if you aren't used yet to the short keys, go to your layers and then just drag it like this, make sure it's under text layer. Now position at like this make it even a little bit bigger hold "Alt", so of the sides will be scale proportionately, something like this should be good. For the text itself, I always use 15, It's a little bit smaller for the buttons. I'm going to use 15 for now. Grab the selection again and align it in the middle. Now the last thing that I did is, I gave the buttons, rounded corners. For this website, I've used four. So you can grab the coordinates over here and then put it on four, you can see the number over here, or you could just type it and use your arrow keys to create something that looks good. But four is what I used for this website. Now group those two together, so click on the text hold "Shift", also click on the background. Now those two are selected and press a command "G" or right click and then "Group". Now this button is a group and we can move it around like this. Also one last thing, make sure you select a text, double click it, and then make sure that this is middle aligned. This is nice because now if you want to make the button bigger, it will automatically stay in the middle of that button. So that's also a nice little trick. Now we have prepared the most of the important texts layers, but this is only for web. Let me show you what I mean. For web, I've used a 54 point title over here, but on a mobile phone that looks way too big because this is 64. I'll show you what I mean because if I use the same title size on mobiles and let me just click on a the mobile texts, and I'm going to put this on 54, it's going to look way too big on mobile phones. You want your titles to be a little bit smaller on mobile. Go back to your design file, and you only need to do that for these titles. Because body texts oftentimes look also good on mobile. Grab all of your titles, drag them to the rights, release it make maybe your art boards a little bit bigger to our comment click on the background of the art board, make your art board a little bit bigger, and then we're going to make these field a little bit smaller. You can not use the same trick as for images, for example, and just use the "Shift" because then the font size will not change. We need to do it in a different way, which is needed to change the values over here. For example, make it a little bit smaller. For my website, I've used 46 and 52 for this title, I've used 30 and 36, 38, and this title actually doesn't look that bad on mobile. You know what? We're just going to only have custom titles for the big titles over here. This is the mobile sites and this is the desktop sites. Let me just create a title real quick. A desktop, I'm going to use another font otherwise, it's confusing. I'm going to use something really different, something like Helvetica. Going to make it smaller and going to make it another color. We will not confuse it with our own design, desktop and mobile. Now we know what, what is. Now the last thing that we want to do is add them to the asset panel. Open your asset panel again, select all of your desktop texts layers, and then press the plus on "Character Styles", and now also selected these two and also press plus. But for these two, you want to know that they are mobile. You can change the name over here. Click outside of it and then rename those too, and maybe put an m behind it, so you know, it's for mobile. You can also rearrange them if you want, like this. Your mobile phones are here together. All right, so that's all we needed to do to prepare all the phones. Now is going to be really easy to build up our page. We already have a button, we have a body text, and we have a few titles and all of our colors. I hope to see you in the next video where we're going to start building the header that we're going to see over here. Now we are fully prepared to start designing the actual website. I hope to see you in the next episode. 15. The big header image & menu: Hey and welcome back to this new chapter. Now we're finally going to start building our page. We have prepared this design in a very professional way. In this video, we're going to create this section that we're going to see over here. It's a beautiful clean section with a transparent header and a few different text layers. Let's just get started. We are here in the exercise file, and this is the art board that we have prepared. We have set up our grid as we can see, which we're going to use for the outline. We need a lot of files right now from this folder, the website file, so make sure you have this one opened. The first thing that we need is the photo, so this is the photo that I used for the header. But first, we're going to create a shape, so lets just grab the rectangle tool for now and create a shape because we're going to create the background first. Create a big shape like this and make it fit the screen, something like this, and now we're going to give it a background color. First, uncheck the border. Now it's white and now give it a background color, which is this dark color. Now there is a nice tool inside of Adobe XD and that is that you can drag in an image onto a shape and then it will automatically masked. I'll show you how that works. But first, we need to create a copy because if you drag the image right now, like this, it will automatically create a shape, but then the dark color is gone. We need that dark color because in our final design, there's a dark color beneath our image, and this image has a transparency of 30%. Let's go back to our file and delete that image for now with command Z. First, we're going to create another duplicate of this layer, so I'm going to drag Alt, and now I have two of those layers, place them on top of each other. Now grab your image and drag it onto the canvas, so now I have an image and a background. This is how I always do it. You can also set a background for your whole art board, but I want to have this white color for the background of my website, so that's why I make a separate shape for the background. Now I have an image, and I'm going to put that image on a 30% opacity. Just grab the opacity over here or just press 3, for example, or 4, depending on your image and your background, of course. For now, I'm going to put it at 30%. Now grab both of them. We're going to group them, so right-click and click on Group. Now we're going to lock them with Command-L or right-click and then lock, because then we can't move it anymore and we can easily place items on top of it. That's the first part, and now we're going to create the upper menu, so we need a logo. The logo is the white version that you can see over here, that's this one. Now I'm going to drag it on top of my canvas, and if I drag another image on top of a canvas that is not locked, it will replace that image too. That's one of the things that you need to be careful for. Sometimes you have a lot of images on your art board and then you want drag a logo outside of your art board, so it will not replace and mask within the shape that you're dragging it onto. That's just a little tip. For now, let's just drag this and use the grid that we've created and make this a bit smaller like this. Just grab it, zoom out, and that's good for now. Now we're going to create the menu. Grab the text tool over here and we're going to align it perfectly after this, so doesn't really matter where you click. Just click somewhere and type in Home. Now for the final website, we've also used semibold a lot of times. As you can see, we have a text over here, and this is semibold but we haven't added semibold to our character styles. What I advice you to do to make your life a little bit easier is to make another style over here that we're going to use a lot of times. Just copy this title, for example, make another one, just put it on 16 on semibold, line height's going to be a little different, 22 for now. We're also going to add this style to our ballot, and I'm going to drag it onto the bottom. Now we have two styles of 16. This is for the body text and this is for titles. Now go back to your file and now we can use this same style. If we click on our home texts and we click on this one, now it will be the exact same style. But as you can see right now it's black, so we cant really see it. Now we're going to click on white, and now we have this style but then with a white color. Now I'm going to make a few duplicate for all of my pages, so I'm going to hold Alt and Shift and then first release your mouse and then release Alt and Shift. Do that again and do that again, and then double-click and change the text. Click outside of it, outside, boom, and now I'm done. As you can see in my final design, there is also an active state beneath this Home icon. An active states means that the user knows on what page he is, so we're also going to do that on our design, but let's just first align it a little bit. I'm going to grab all of them like this, and I'm going to make sure that it's middle-aligned to this one. How I'm going to do that is I'm going to also select a logo and click on this one, so now it will be perfectly aligned in the middle. Now I'm going to drag these four ones, put them to the right over here, give it a little bit of spacing, select all of them, and then grab this tool. Now the space between them is exactly the same. Now we just need to create a line, so go to your homepage, grab the line tool, and just create a little line under your home text. I think I used two or three in size. Going to put it at two for now and the border color is the purple color that I used. Now go back to your selection tool, move it up a little bit, that looks good. Now what you want to do is grab your whole header and group it because we're going to need this header on a lot of pages, of course, so now we have one little group with all of the items in it. Now we need to create these texts and now this is going to be really easy. But the only thing that we have to make sure is that we have installed this font, which is called Abuget. If you go to your finder and you go to the folder fonts, make sure that you've installed Abuget, and now we can create a design that looks like this. This is the big title, 54, this is the 16 semibold, and it's just a normal body text. This will be really easy because we have prepared our styles over here. Grab this title, make a duplicate, hold Alt like this, and release it, grab one of your body text like this, and grab one of your semibolds like this, and then we just need the Abuget, but we don't really need a style for this because there's only one place on the website where Abuget is used. Now let's align this first. I select the bottom two and make them white and select the upper one and make it purple. I'm not going to make all the text layers in this tutorial series perfect because it doesn't really matter, so sometimes I will just leave the standard texts as you can see right here. For the Abuget texts, what you can do is I would just make a new text layer. Click it over here, just type in your name, go back to selection tool, select the font, make it white, and make it a lot bigger. For these kinds of creative fonts, the font sizes can be very different because they have a lot of different shapes. I would not recommend using the same sizes as we've used for this one because with creative titles, it's going to be very different. As you can see right now, I need to align it a little bit better to make it look nice. For the alignment, of course, you can grab all of these one and then press this tool to make them align properly. But Xd will align it to the bottom of the actual text box, so if I'm going to drag the text box until here, and then I'm going to use the same tool as you can see now, it will change. That's not always perfect. If you're on aligning and using this tool on text layers, I would suggest that you try to make it fit like this. Also for this one, make it as small as possible and then use the alignment tool because then it will look better on the eye. That's there is for this tutorial. I'm going to uncheck the grid for now to see what we've created. As you can see, since we have the styles prepared, this was a really easy process. You just drag it in, change the colors, change the text, and now we can move on to the next section, which will be this section with a custom shape and this bar or box over here with our custom SVG vector icons. I hope to see you in the next video. 16. The wave shape divider: Hi and welcome back. In this video, we're going to create this custom shape and this overlay bar that we're seeing over here. As I said before, these icons are effect door, so no matter how far you zoom in, they will always be sharp. There is a nice soft shadow beneath this bar. You don't really see it, but when I turn it off, you can see it. That makes it float a little bit. Now we're going to create this parts, let's just go back to our file. What we're going to do is we're going to create the custom shape first. The custom shape has this color, it looks white, but it's not really white. Grab the Pen tool because with the Pen tool you can create any shape that you want. If you've worked in Photoshop or Illustrator before you know this tool, but if you don't know this tool, you have to know two things. You can click, click, click, click, click to make a shape and to make a curved shape you click and you holds. In this way, you can create custom shapes like this, and then if you want to close it off, you go back to your first point and then you can fill it with a color, you can't see right now because is white. For example, you can create a shape like this. Go back to your selection tool, click outside of it, then click in it, and then delete it. Go back to the Pen tool via the P on your keyboard, and now let's create that shape. Let's look how that works. First, low then up and then low again. Click over here, and that's the first one, then click somewhere around here and drag it. Big wave over here, something like this, and we can adjust this later if you want to. Now you can go a little bit outside of your app, it doesn't really matter or just on the side and I just make the last shape. It doesn't look perfect, but for now, this is what we're going to do, click over here and then go back and click over here and then close it off like this. Now, we're going to give it a color, which we need to make sure it's on, and we're going to delete the border. Click outside of it, go back to your shape and move it up. As you can see right now, it looks like a pretty nice wave. It's not perfect so if you want to adjust the shape, you can double-click it and then click on your anchor points. That is what they call anchor points, and you can adjust the shapes like this. Change this up a little bit because I want a shape that looks a little bit more similar to my design. Also, it depend so you can add more points later on. For example, if you want another bump over here, you can just click and add another anchor point, move this up and then use the handles over here if you want it. Then if you want to delete one of those anchor points, you just click on the "Anchor point" and you click on "Delete," and now you're back at your original design, at least it changed a little bit. Sometimes you need to adjust it a little bit like this. Now this looks nice. Now what I'm also going to do is click on the whole "Artboard" and change the background appearance to a color that is on my palate. Now it looks like that this shape and the background is just one piece. Again, I'm going to lock this layer, so click on it and then right-click and click on "Lock" or "Command L." Now we're going to create the custom shape. Go back to this tool and create a shape. We don't know where the size of the artboard are right now, so I'm going to click on "Artboard" again, turn on the grid, then go back to my selection tool, click "Back" on the rectangle and place the rectangle like this. I'm going to place it in the middle of this line. If we're going to click on "Play" right now, we will see half of this box, which looks really nice. That is good for now, turn off the border and make it the dark color. Now for inside of this box, we have used the Semi Bold Montserrat again, and we have four icons. Let's just start with importing the icons. Go back to your finder, go to website files, and then go to home icons. These are the four icons. Now, before you're going to drag them in, make sure you are somewhere outside of your artboard, and just direct them in like this because they can be really big, now they're really small, but sometimes they are huge and then they mess up your artboard. Then sometimes you can't really find them because they clip inside of an artboard. Make sure you are outside of your artboard when you insert elements. Now I'll select them and drag them onto your Canvas like this. Sometimes you can't really select them like this, it's really frustrating because you really need to click on the actual shapes of your icons. As you can see right now, if I want to drag all of these ones, now it works, but it doesn't always work. You have to really be sure that you see those blue lines and then you can drag the icons. If you don't like that dragging, which you also can do is select all of them and then press "Command X" and scroll to the part where you want them, then press "Command V. " Command X is for cut and then V is for paste. Or you can also use right-click and then cut, as you can see right here. Now I'm going to align those properly and of course we're going to use the align tools for this. First to make our life a little bit easier, I'm going to lock this bar and now just place the icons like this. Make sure you have enough room for the texts over here. Now select all of your four icons. Use this tool, and then use this tool, and now get them into position. Now we're going to go back to our styleguide and we're going to grab this title because we need a semi bold so alt, and then drag, make it wide, and then we have our titles. As you can see right now, my alignment is not so good. Sometimes you want to start with the text, sometimes you want to start with the icons, and this time you want to start with that text. For example, if I have a surface that is called Web Design, for example, I can do it like this. Right now I don't need this text box because I don't use two lines, I'm just going to click on the "Point Text" and that makes it easier to align. Also make sure you click on the "Center alignment." Because then if you copy it and you make a new text, it will align from within the middle. I've made a four surfaces right now, Website updates, Backups, Development, and Web design, and now I want to align it properly. For example, if you select these two, align them like this, and now group them. Again, click on this one, shifts, click on this one, align them in the middle, and then right-click and group them. This is not one. That wasn't really handy. If you click on your icon, and your texts, and then press "Command G," you don't have to right-click because sometimes you misclick like I did right now. Now I want the space between those icons to be the same, and I want the space to be the same from this side. What I'm going to do is I'm going to align this one to a place that looks nice, and now I'm going to count the pixels to the side, so it's 130. I'm going to put it at 110. We're going to make sure that this one is also 110 pixels from the side, like this. Now I'm going to drag all four icons and I'm going to align them in the middle. Does that look nice? Let's uncheck the grid for now. No, it does it really look nice, I want them to be more close to each other. I'm going to make it more into the middle like this, 160, and also for this 160. Again, select four of them and align them like this. This looks a little bit better. Now we need to add the shadow. Go back to the background layer, unlock it with "Command L," and then add a shadow like this. Zoom in so we can see what we're doing, and as you can see right now, it's a very small shadow, and we want that big shadow to make it float. You do this by increasing this number, which will bring the shadow down. If you put this at 30, for example, you can see that it will bring to shadow down and if you then increase this number to 30, 60, which is values that are used pretty often. You can see that it becomes this very soft and nice shadow. You can even change the color of the shadow if you want to. But most shadows in black look good or you can decrease the intensity of the shadow like this. Now we are done with this part. Let's just check what we've created so far. Click on your "Artboard" and click on "Play" and as you can see right now, it starts to look like a real website. This is pretty nice. Let's jump to the next episode. 17. Floating images with shadows: Welcome back. In this video, we're going to create the floating images section that looks like this. It looks complicated, but it's actually one of the easiest things to do. We're going to use these shadows again, and we're also going to create a custom icon. As you can see over here, we create this icon inside of Adobe XD. If you really want to get into icon design, I suggest that you're going to use Illustrator because that is a software tool of Adobe that really focus on creating factor shapes. But if it's just for a simple icon like this, we can also create that in Adobe XD. Let's just see how fast we can create this left part. We're going to go back to our exercise file, and we're going to use our assets of course. Now we need a medium title, so hold Alt and make a copy of it. By the way, don't forget to turn on your grid, so we know what this side is. We also need a bolt deck, so I'm also going to make a copy of this one. Align it properly, and that's actually all I need. For this text, I made it's three lines high, yes. As you can see now, this text layer almost looks like gray, but it's actually dark purple grayish color. On this background, the combination of these two columns look really nice. So yeah, now we're going to create two things. First, we're going to create this little line, and then we're going to create the custom icons. Zoom in on your title, grip the line two over here and create a line like this. Hold it, and then make it a little bit thicker. I suggest that the thickness of the line should be the same as the elements around it. So right now we have this big text over here. If you want to make the design look nice, make sure it's almost as thick as this one. So maybe four or five. That should be fine for the color. Of course we're going to use the purple. So now it looks in line with this design. Now we're going to create our custom icon. So first let's create one line of text. For now I'm just going to create one line of text like this. Now we want to create our icon. So zoom in a little bit. Now take the pen tool under P, and let's create a check box. A checkbox is not really hard. So just follow me in this one. You can always adjust it later, so it doesn't have to be perfect. Just try to create a nice check box like this. Maybe you want to have a flat bottom, maybe you don't. Just looks nice. So let's just test if this is what we want. Turn off the border and for the fill color, we're going to pick our own purple color like this. I don't really like the flat bottom, so we're just going to double-click on it and I'm going to delete this one and just bring this one to the middle. Yes, this looks a little bit nicer. Now, just adjust a few points to make it look like a realistic check icon. This looks pretty good, so I'm going to click outside of it again. Now what I want to do is align it properly and maybe make it a little bit smaller like this, hold Shift. Then align it to the middle of the text. Align the text like this. You know what? I'm going to make it a little bit bigger. If we go back to our final design, you can see that I've used rounded coordinates over here. I will also show you how to do that. So if you want a rounded bottom, for example, just double-click on this anchor point, and then you can adjust the bottom like this. Maybe also do that for this side. Give it a little bit of custom feel, that fits your website. It's not perfect and you can spend a lot of time on icons, of course. But I just want to show you the basics on how to create a cool icon. Now what I want to do, is make sure that it looks good on just one line. Now just select both of them, group them, and then hold Alt and Shift and create another checkbox line like this. Now we have three of them. Align them properly, boom. Maybe give it a little bit more wide space. Then again, some people like to measure every little bar between all of their items. I just like to design on my eye because measurements are nice, but sometimes you need to adjust the alignment to make it look nice, even though it's not perfectly aligned. So just use your eye and your imagination to make it look nice. So let's now go and turn off the grid. So I'm going to click on the art board again. Turn off the grid. Go back to our final design. As you can see, this line is a little longer. So I'm going to stretch this one to make it something like this. This is three lines and I saw that this one is a little bit longer, and maybe a little bit less fake, but that depends on your website, of course. So now we are done with this part, and now we're going to drag in our images. So what you want to do is go to your finder, zoom out and make sure you drag it outside of your art board. So now as you can see, this one is a little bit smaller. So I'm going to make that the same size as the other ones, like this, and make sure that they are evenly big like this. Now select both of them, select all of them and make them a lot bigger. Now we just need to rearrange them in a way that looks nice and just direct them to make the one on top of each other, or we can use comments, and then left bracket or right bracket. That's something that I like to use because it's way faster. All right. This looks nice. I'm going to make all of them a little bit bigger again. Now we're going to add shadows. So select all of them, and then go to your shadows. Then we're going to adjust the settings for all of them. So put this on 30 again and put that on 60. Now as you can see, these items are floating really nice. Maybe it's a little bit too intense, so decrease this one, bringing it to 12, for example. Now if you click away, look at this design, looks really cool. So yeah, that's actually all I did for this design. So try it on your own. Then in the next episode, we're going to go the client section, where we're going to work with a new tool called the repeat grids, where we can change a lot of different things by just dragging like this. So I hope to see you in the next episode. 18. Client Logo section with the Repeat Grid tool: Hi and welcome back. In this episode we're going to work with a new feature called Repeat Grid, and we're going to insert some logos. It is going to be really fun. What I want you to do is go to our exercise file, and make our artboard a little larger. Selecting your artboard like we did before, you can just click on the name, but if you're really zoomed in, and you just don't want to scroll up to the top of your artboard, you can also command, and then click on your artboard, or let's just say, click on the background. Because if you click on an item with command, you're going to of course, select the item, so you need to click on the background, and then you can make your artboard longer like this. Now let's just create this new section real quick. We can of course, always go back to our style guide and a drag a new title from here. But since this is the same title, we can also track this title just like this, align it in the middle, and then copy one of our body texts lines here, and also align that in the middle. I want to align these two layers in the middle of my whole artboard. I'll just click on the layer, boom, click on this one, boom. Now, change the text, something like this. This text, I want that to be purple, so go back to your assets, and make that one purple. Align it put 15 pixels from the top, and now we're going to work with the Repeat Grids. What I want you to do is create a shape with your rectangle. We're going to create a rectangle like this. At first, let's just turn on the grid. Again come and click on the background, and turn on the grid because we really need the grid right now to align this. Because your Repeat Grid too is a great tool, because a lot of times you will have the same different item in a row. We could also use a the Repeat Grid for this one. Let's just practice that real quick. I'm going to delete these two, and if you click on this one, and you click on Repeat Grid, what happens is that, that XD knows that this group needs to be repeated in a direction. You can repeat it to the bottom like this, or you can repeat it to the side. A lot of times you have a grid inside of your website, and that's where you can use your Repeat Grid tool, and now you can really easily just change the alignment like this. For these benefits, we only need three rows. We can do it like this, make our lives a little easier, but for the client section, we also want to do that. Because if we don't use this Repeat Grid tool. By the way guys, the shortcut for switching between XD file is comment, and then the wave icon of a putty text on the screen, and on Windows this is hold and tap. If we don't use this Repeat Grid tool, and we want to change the shadow, we need to change the shadow on all of these individual layers, and then you need to ungroup all of them, or just click all of them, and that's not really nice. In this way, if you change the shadow over here, it's going to change everywhere as you can see over here. Go back to our file, click on this one, and then click on Repeat Grid, and now just create three blocks like this, and also to the bottom, and now we need to align it to the grid over here. You can just increase the spacing between the blocks. Wow, this is 50, which is almost perfect, but you can also of course, make the blocks a little bit bigger. Come and click on your ''Block,'' and then make it a little bit bigger like this. I want to same spacing over here, so that will be 36. This is just playing with the values until you get what you want. Now we have six boxes perfectly aligned, and now we're going to style them. Click on your first box, and then delete the border, and we're going to add a shadow like this. I think I used the default shadow on this. May be I increase or I should say, decrease the intensity of it, so it looks a little bit nicer. But I think that's actually all I did. Now for the inside, I've prepared all the logos in the client logo folder, and I have just downloaded some logos of the Internet, as you can see. By the way, this is just an example, I have not worked for those companies. But actually I worked for Coca Cola. That's the only company I really worked for in this list. But this is just an example. What I did is I already exported them with a white background. Because if you're just going to drag all of the logos inside of your artboard like this, I'm going to select all of them, not the export folder, I'm going to drag all of them like this, you will still see the shadows that we've just applied. The images will stretch from left to right, and that is not what we want. What I did in my final design file is that I created separate artboards for my logos, because otherwise you're going to get that problem. When I knew that my boxes were this size, I can actually make it 160 in height, that would be nice, 360 and 116 in size. What I did is I created a new artboard. I just grab, for example, this one, made a copy of it, and made that 360 by 180, and then called that our logo for example, turn off the grid. I duplicated that like you can see, and then I inserted the logos one by one because you want to align it properly, of course. Then I exported all of those images, and those images you can see them over here. We're going to go into exporting in another episode, but that's what I did to create these images. I just first created all ports and then I exported the images. But for now to make your life a little bit easier, you can just use my images, and drag them onto the Canvas like this, or you can drag in your logos one-by-one, and then place them onto the artboard. But then they are not a part of this Repeat Grid. Only if you drag all of them in like this, the Repeat Grids will work with these images. Because this image now is just on top of our Repeat Grid tool. If you want to use that Repeat Grid tool, you first need to export all the images which I will show you in upcoming episode, and then you can just insert all of the images like this, and then you have a perfect Repeats Grid's logo section. What's also really nice about this is that if you're going to create your mobile design, you can just drag it on like this, and then change it up, and it will remember the data that is inside if you only remember the logos like you can see over here. But that's also for an upcoming episode. This was the basics of the Repeats Grid tool. I hope you liked this episode, and then I will see you in the next episode where we're going to create this outline in number box. 19. Statistics section with empty boxes: Welcome back, in this episode we're going to create the statistics part. This will be a very easy video, but this is just a nice section to break up the page. Otherwise it will just be this one big color. On my real website, I've used this part to animate these numbers. I can show you the final result on my website. As you can see over here, this is the idea for this part where these numbers start animating. Let's just start creating this part. We're going to go back to our exercise file, and we're going to move these Rs board to the decide because we need to make our R board a lot longer. Come and click on your R board, make it longer and now let's turn off the grid because we don't really need that for this part. Crop your rectangle, create a big shape like this, turn off the border, pick the darkest backgrounds, then press V for the selection tool. Select this to make it copy with Alts and then they will be beneath our layer, and this is because if you create a new layer, it will be on top and this is a copy of an old layer. Put them over here and then press Command X and then press Command V. Then they will be on top. You don't see the title, but that's because it has another color. Now, click outside of this one, click on the title, make it wide then click on both of them and align them right. Then also align them left. Oh, said right, I meant left, of course. Now, align them to the grid and we will have some helping lines, like this. That looks good. My design and this text is a little bit shorter, something like this, maybe even shorter. Again, I'm going to lock this background layer. What I'm going to do right now is create two shapes. Just pick to your rectangle tool and create two shapes like this; the width of the shapes, we're going to align that to this part. Then it will look a little bit nicer. Press V again and then make them as big as the other two. We already know the width, that's 360 and 40 height. We want to make that a little bit bigger say maybe to 40, something like this. That looks good. Before we're going to duplicate it but first we are going to style the first one. Unselect the fill and for the border color, we're going to pick the purple and this is how you create an outline. Now, it's just a matter of two numbers. Just a text layer that has a middle alignment and is white. It's just a title that is just a point text. It's a big number. This size is not part of my style guide, but i just designed this on the eye. If you want to align all of these items in the middle, make sure you first select the item that you want and then your background and then press this one to make it align in the middle. Also, for this one, select both of them and boom. It was already aligned, as you can see. I think I used something like clients surfed. I don't use a text-box for now, align that properly like this and now make a copy of this one. But first let's group it so, Command G, and then click on the whole group and duplicate it and make it aligned to the right of our R board. We don't see where it ends. Does it end over here? I don't think so. Click on your R board again, turn on the grid and as you can see, this is not the end of our 1140. Now, just come and click and change the number over here for checks done or something like that. That's how I created this part over here. Pretty easy part, but a dark background. It just breaks up the website in a nice way. This episode was pretty easy. Let's go to the next episode where we're going to build the testimonial section. This is a little bit complicated because we need a custom shape with one shadow and we also used a repeat carrier tool over here. I hope to see you in the next video. 20. Testimonial section with the pen tool: Hi and welcome back. In this episode, we're going to create a D testimonial section. I think this is a really nice section. It has the same shadow style as the logo over here. Let's just start. First let's create a title. Grab this one and grab this one, old, old and Shifts and then release them and this title is this color. I'm going to make the board a little bit bigger by common clicking on the backgrounds and then dragging it down. Now let's create our first testimonial section. One thing you have to understand is that you cannot add shadows to a group. The easy way that you would think that we would create a shape like that is create a rectangle like this. Then create another rectangle like this. Then rotate that rectangle 45 degrees to something like this and then place it on top of each other, select both of them, un-select a border and group them. As you can see, you can't really add a shadow. This is not a solution for this part. What you want do is you want to use the pensils. First, just create a rectangle like this and make sure it has the width of the logo section over here so we can use the same kind of spacing, so that was 360. Now what you want to do is add a few anchor point. If you double-click on direct angle, you can see that we can select the anchor points and in the same way as we created that custom wave shape, we can now add more anchor points to this. To create a shape like this, we need three more anchor points. Because we need to start, we need a down point and we need an another appoint. Now if you click on this one and you track this one down in a straight line, try to make it straight, something like this. Now you go back, you click outside of it. You un-check the border. Now you can add a shadow to the shape. That's what you want to do. Click on shadow and decrease the capacity a little bit and make it a little bit nicer. As you can see, now we have discussed some shape. Before we start duplicating, let us first finish this one. We need a profile picture and a title. Grab the circle or the Eclipse tool and hold Shift and then make a circle for your photo. Yes, press fee and alighn it properly. Maybe this is a little bit too big, so I'm going to make a little bit smaller. Now let's create a title. This is the name of the person, select it and then left align it and make that the bowls version, make a copy of it, make that T small version and that will be the title of the version. I want to make this title, I want to make that birth pull align this a little bit to the left, something like this. Click on your image and un-check the border. Now we have created our first shape. We're not going to drag in our images yet because we need one more thing and that is the text inside of here. What I want you to do is copy one of our main text over here. Just drag this one as can see, boom, like this. Sometimes we didn't the shape. You want to change the font size 1 point smaller, because sometimes it looks a little bit big because it's inside of a shape. For now I'm going to put it at 15. Also make sure that you have enough white space on the left and on the right side. Maybe that means that your box needs to be a little bit bigger. Don't just drag it like this because then you're, a shape on the bottom will change. Then you need to double-click on your Shape layer, select both anchor points and then use your arrow keys to move this one up. Then go back to your textual and aligned this one in the middle until it looks nice. I think this one looks pretty cool. Now I'm going to select all of that and start the repeats grid tool and then duplicate it to the right until it matches this side of our grid, like this. The space between the items is now different because of additive shadow. Don't worry about that, just makes sure that it will not go over this side here. The only place where it will be outside of our 1,140, our board is for these images, but this is just a creative part of the website. That is okay for that part. We're going to use the same trick as for the client section over here, we're going to import our images. If you go back to your finder and you go to the testimonials folder. I've prepared three images of just mils over here. If you drag them onto the circle, exceed then will automatically fill them and mask them inside of that circle let's turn off the grid for now and look at this. It looks absolutely beautiful. Yeah, that was it for this part. Now we're going to create the last two bars of the website that it will be the footer, which we're going to repeat and all websites. And, this part, which has an image on top of an image button and D-shaped divider. I hope to see you in the next video. 21. Call to action section with gradients: Hey, and welcome back. In this video, we're going to create this down section. It's not going to be a really hard one, so let's just get started. So first things first, we're going to drag our art board a little bit larger like this, and we need the same background style as we have used in the header. So I'm going to scroll through my header, and then lock it like this, and then copy it, and then lock it again, and then go down and paste that. First I need to write image, so go back to our photos section, and then drag in the right image. I've used this image, and I'm going to just replace it like this. By the way, if you want to move image inside of your mask, you can double-click it, and then you can move the image inside of the mask. So now this is good for now. We also need the shape divider, but we've already created that, so we're just going to copy the one that we've created over here. It's over here, so we need to unlock that again, and then make a copy like this, and then go to the upper one lock it again. Then go to the down one, move it on top with command shift right bracket, or just go to your layers panel, and then move it to the top, drag it up, and then rotate it. So if you just go with your mouse to the side over here, you can rotate it like this, and then if you hold shift, for example, make it straight or just make a flat again. Or you can just of course, also type in over 180 to flip it. But for now, I'm just going to create the shape like this. Make sure it's beneath your testimonial section. So I'm going to use command and left brackets to make sure it's beneath this section. Now for this image, that is a group, move that up, and now it's on top of our shape layer. So I'm also going to move that down. As you can see right now, this looks pretty cool. In my final design, we have a title and a button, and we have already created these elements, so we're just going to drag one of this one, like this, one of the main text and a button. So that's all I need for now. I'm going to make both of those texts to white. Those texts must be aligned in the middle, center. Do the same for this one, align it in a middle, center it. I've used a different text something like this looks good. Hold alt to make it a little bit smaller. Move this one up, also for the button, move that in the middle. If you want to change the text hold command, click on it, and then adjust the text. Now if your button is too wide, command click on the background of the button, then hold alt again, and then make it a little bit smaller. I know I use a lot of shortcuts, but shortcuts make your life so much easier if you get used to it. So I know sometimes it can be a little bit frustrating, but just keep using those shortcuts. It really makes things easy. Now, move all of these a little bit up, so hold shift, and then move them a little bit up. We need way more room on the bottom here, so grab our layer, and now, I want to make the photo a little bit bigger. As you can see, since it's a mask, it automatically scales. So we will not have a background that is not filled with the image. So I think this is what I want for now. Go back to your finder and we're going to insert our two portfolio items. Yeah, just select two of them that you want I think I've used these two. Yes. So make sure you drag them outside of your art board because if you drag them onto here, it's going to replace it like I said before. So what you want to do is go outside of your art board, drag them onto here, and then make sure you place them on top of your art board like this. Then make sure that your grid is on because no need to create again for the site. Select both of them, make them a lot bigger like this. If you want more spacing in the middle, create more spacing like this may be something like 50. Then select both of them and make sure that they are inside of the grid. Now, if you want to cut them off, you also need to use a mask. In exceeding mask works like this. If you create a new rectangle, you can use your rectangular shape, to whatever, as a mask. So what you can do now is create a shape like this, that will cut off the designs like this, uncheck the border and make it a weird color because we're not going to see that. Now select both of your portfolio items, and a new mask, and then press command shift M, or just right-click and then click on mask. No, it's not even here, is it somewhere? Mask with shape, as you can see, command shift M. So you create a mask, and then it will mask inside of that rectangle. Now in my final design, as you can see, there's also a shadow inside of here, and that shadow is inside of the mask. So what you want to do now is create that shadow. To create a shadow, you also need a rectangle. So let's create a shadow outside of our board for now. Let's make it something like this. Turn off the border, go to your fill, go to linear gradients. Now, make it from black to black. But the upper section, of course needs to be low transparency, because then it creates a shadow. Then also go to this color and make that black. As you can see right now, we have a black 100 percent opacity to a black zero percent opacity. This is actually the gradient tool, but you can also use it for shadows. Make sure that this is on top of your images, and as you can see, this is way too intense. You could just leave it like that but if you wanted to have it inside of your mask, you just going to press command x, then double-click on your image like this, and then press command V, and then it will also be inside of your mask. Because we are still, as you can see, inside of the mask over here and sometimes you'll also want that, so that's why I am explaining it. It's way too intense, so maybe make it 40 percent opacity, something like this. Now it creates a little bit of depth inside of this section. So did we forgot something? I don't think so. Maybe the opacity of the background is a little bit different here, because the image is different, maybe I put it at 20, as you can see, maybe I've also changed the shape to make it a little bit less intense. So you can also do that if you want to change the anchor points, drag all of the items and make it fit in the way that you want. So now we are done with the homepage, and the last thing that we need to do is create the footer. But let's just see what we've created so far. So I'm going to click on my art board, and I'm going to click on play. If you've created the page so far, you should be really proud, because this item, you can already use this item in your portfolio. I suggest that you change the style of course, and the images because this is just my face and my logos, but if you can create a beach like this, you can just show businesses like "Hey, look at this, I can create a new homepage for you." So if you just change the items and the buttons in the text, you can already create a pretty decent homepage. So this is pretty nice. So I hope you also liked this video, and then in the next video, we will create the footer, which you're going to duplicate on all pages. 22. Footer as a reusable symbol: Welcome back. In this video, we're going to create the footer, as you can see right here. It has a green outline. This is because it's a component. This is one of the assets categories that you have over here. What is nice about a component is that you can use this item on different pages. As you can see right here, this also has a green outline, and if I change something in the main component over here, it will also change in all of the other ones. For example, if I drag this logo down, like this, you're going to see that it will change on all pages. I did not do this for the Menu, because in the menu I want to change this line to show the visitor on what page he is, that's not really a component. Like in this file, I've made it a component, but I don't really need that, because on the Portfolio page as you can see it's not a component because it's different. If an item is the same on all pages, you want to use this component, as you can see right here. That's what we're going to create right now. Make our board a little bit longer, get our rectangle to make a big rectangle, uncheck the border, give it a background color, raise this, and then align it. I'm not going to create this cell again, I'm just going to copy that from the Menu. Just copy the whole menu, go down and lock this one, and then press V and is already almost a footer. Click on this one and then ungroup it, right-click and then ungroup it. You can change the individual cells to neater line. I want a logo to be in the middle. On most footers by the logo is on the left and there's just a few items here on the right. But for this footer, I just want to keep it really simple. I just have it like this. I have an item over here, item over here, and an item over here. I just change the text to something like this. It's not the perfect footer, because the alignment is just a little bit awkward because some words are longer than other words. I don't really love this footer, let's just make it a little bit different now, let's just change up the style and just put the logo on the left here. It will be a little bit different from the actual website that I created. Let's select all of them, put it like this, and now we need to make it into a component. Again, unlock it and we need to select all of it and go to Components and press the Plus. Now it will create the green outline, so you know it's a component and this is the master component because you can see that over here it has this Saturn's triangle over here. If we create another page in the future, we can just drag this component which we need to rename, otherwise we don't know what this is. We could just direct this component like this boom, and maybe onto another page, boom. If we change the first one, it will also change other two as you can see. This is the component part also a very nice feature in Adobe XD. In the next episode, we're going to create another page that is the About page is going to be really easy. I think we can create this page in one episode, within like a few minutes. That should be really fun. I hope to see you in the next episode. 23. The portfolio page: All right, welcome back. In this episode we're going to create the Portfolio page, as you can see in the final design file over here. It's a pretty easy page, so let's just get started. I'm going to go back to my file and I'm going to make a duplicate of my main art board. Let's just put this too down a little bit. I'm going to click on the three dots. I'm going to hold Alt and Shift, and I'm going to make a duplicate of my main art board, and that's it. Now, I'm going to delete everything that is on this page, while at least almost everything like this, deleted. This one was locked, so we're going to unlock it, right-click unlock and then also delete it. We're going to zoom in here and this is only the background, so we need all of those icons. We need to hold Shift and then click on the Icons and the Background, and now that's gone too. The header on this page is a little bit shorter, so we also need to unlock this one, move this a little bit up, something like this, that should be good. We're also going to change up text. I've used the 36 over here. I've made it white, I made it center aligned, and center aligned it to the whole art board. As you can see that was pretty fast. Delete all of this because we don't need that and we're also going to change the menu because we're now on the Portfolio page. Now I'm going to press Command and I'm going to hold this line, then I'm going to hold Shift. Release the Commands and just hold to Shifts to move it on the horizontal and then I'm going to just drag it and make it longer. Now, do not use Shift or Command, just drag it. Now we have a little indication that we are on the Portfolio page. All right, what do we need on this page? We need an image, we need a title, a text, and a link. Let's see how fast we can create this. All right, let's go back to our file. Now, go to your Finder, go through the websites files and then Portfolio Items and here are your four items. Let's just drag and our first image, make sure you don't drag it over this one just on the background like this. This is good. It's a little bit too small. My exports are not perfect, but that's not a big issue for now. We need a title that is 24. I'm going to go back to my Style guide. I'm going pick this one, and I'm going to pick this one. I hold Shift and then I select both of them. I press Copy or come and see. I go back to my art board. I click in the art board and then right-click Paste, and now we have a title and we have a description. The title for a project, I just want it to be one line. Then I want a little bit of spacing. Let's say 20 pixels maybe make this three lines, and now we want a link. How are we going to create a link is by making a duplicate, so I'm holding Alt again on the texts. I'm going to just double-click and change this text to discovered the projects. I just make it a point X because we don't need this whole text box. I'm going to make it purple, and now I'm going to click on this tool over here and double create an underline on texts. This will make it look like a link. Now I want to align it, so I'll make sure it's also 20 pixels from this bottom and as I said before, make sure your boxes are cropped to the bottom of the texts, and now this looks cool. But now the sizing is not good, so we need to change a few things. First of all, the image needs to be a lot bigger. Let's just say that our image, we want it to be as big as this one. But before we're going to drag the texts and also make it white and use the Repeat Grid to, now first going to check if this is actually the width that I want. I'm going to make a duplicate of this one. Hold Alt and Shift, and now what is there? There's only 21 pixels in the middle. I think that is a little bit too less, so I'm going to make this one a little bit smaller, so hold it from this side, something like this. Make a duplicate again, and then in the middle is 55. That is a lot better. You can of course play with these settings, but this is good enough for now. Now I'm going to drag all of my texts and just drag them, and that is a nice thing about the text tool. Instead you can just drag them and the text will be longer. Delete this for now. All right, so the last thing that I did is I added a little shadow as you can see, it's very soft. It's the same shadow as I use for the logos, so it is just three, six, and then the opacity is 16. Remember that three, six and 16. We're going to go back to our file. Click on our item, click on Shadow three, six, and then 16. All right, does not, you remembered it. Adobe XD remembered the settings. Now what we can do is select all of the layers and now click on the Repeat Grid. Now we need the grid on the site to see how big the space will be between those two items. We need to align it with the side. I'm just drag it. I'm going to make sure that this line hits the blue line like this. Now desperate effect and I'll also extend it to the bottom. Just make sure you have four items for now. I'll also click inside of it and then drag this one, make it a lot bigger. For now I'm going to put it at 80 because I think that looks okay. I'm going to turn off the grid and I'm going to import some images. I'm going to go back to my Finder, select all of my Portfolio items, and now drag them in like this. Now you can see that we are almost done already with this page, that is super nice. Now the only thing we need, I think is a Footer. As I explained in one of the previous episodes, you can now just drag in the component from here, boom. Just place it like this, make sure there is a healthy margin beneath it. I'm going to pick 100 pixels, and I'll just come and click on the Background and then drag this one a little bit shorter and make sure it fits the bottom. Now as you can see within a few minutes, we have designed this page, looks really nice and this is also really easy to convert into a responsive page. In the next episode we will be building the about page, which is a little bit more complicated. I called it services, that's not good. This is the about page. But on the about page there are tabs, as you can see over here, there's an image gallery and there is this FAQ section. I'll see you in the next episode. 24. About page part 1: A Quick Start: Let's start building the About page, this looks pretty creative. As I just first start, we're going to try to do it as quick as possible and trying to move up to speed a little bit, because this is also a course to make your workflow a little bit nicer. The upper sections up here are pretty easy, this will be done pretty quick, and then we're going to move onto this section which is a little bit complicated. This one is easy and this one is also a little bit complicated, but it's not going to be that hard, let's see how fast we can build this page. What I'm going to do is I'm going to make a duplicate of the portfolio page, I'm going to click on the upward, I'm going to hold Alt and Shift and then make a duplicate like this, I'm going to delete all the content on the inside. First of all, I'm going to come and click and make it a lot longer for now, drag the footer to the bottom. Now the first thing that we need to do is create the three columns that we need for this our About, I want to show you a little trick on how you can do that. Let's just grab your rectangle for now, and I'm going to create a rectangle like this. Now I'm going to create another rectangle by holding Alt, this is perfect. It's already 50 pixels in difference, that was just luck for me. Now we also have 50 pixels in difference, you want to have a little bit of whitespace between those blocks, because we're going to use this whitespace on the whole page. Let's just see if we are in the grid, this is perfect, this was just luck, for now we're going to create a few helping lines or rulers, as it's called, if you move your mouse to the side of the upboard, you will get this hover effect, if you then click and drag, you can put up a line on your upboard that is not part of your design, but it will help you align certain things, I'm going to put a line over here. Now I can delete all of those blocks like this, and we will have a few lines that will help us align our elements. Let's go back to my final design, let's first see what we have over here. This is a 36 title, 16 and 822, what we're going to do is we're going to drag a few titles from here. This is 24, you see, I made a mistake over here, this should be 24. Also we're going to use this one, and we're going to use this one, we're also going to use the bold one and we're going to use to text, I'm going to copy all of that, go back to my file, and let's just put the text over here first, copy and just paste it, delete this one, now let's just first create the columns. Align every text to those columns, like you can see over here, let's look at the final design, I need a bold title over here and a 36 here for all of the titles. First, there's smaller version and then there's a bigger version, let's just grab the smaller version like this. This will just be one line of text, I'm going to make it a point texts, I'm going to make that purple. Now this will just be a big title like this, I'm also going to make that at point X because as you can see, there's just one line of text because I will make it easier to drag and align, I'm going to give that 10 pixels of whitespace between those two items. Now as you can see, the final design, we also have just one line of text over here, I'm going to convert this one also in a text, In a point's texts like this. Also give that 10 pixels of space between maybe a little bit more, maybe something like 15. What I'm going to do now I'm going to drag it up here, make sure it's aligned to the top and make a copy of this. Now we have the basics for this whole page and this will make it easy to build a page. What we're going to do now is we're going to look at our design. As you can see, this header is really big so what I want to do is first drag this one down. Maybe do something like this, let's drag this one down a little more, I will just first prepare the background, I'm going to unlock the background layer, and I'm also going to ungroup it because there's two layers inside of it, I press "Comment Alt G" or just right-click and ungroup. Now I'm going to go to my finder, insert the photo that we need like this and I'm going to make it a lot darker by decreasing the opacity, I'm going to put it at 20 percent, I'm going to press two or maybe even one so the text will be really visible. Now select both of the background layers, grouped them again, and then right-click and lock them, and this way we can move it. Also, I'm going to also do that for this one. Now let's see how fast we can do this. Grab all of your titles, click all and make a duplicate, now make this one, make them whites. In my final design, there's even an introductory text, as we can see right here, I'm sorry, these texts don't need to be white it needs to be purple like this because that looks really nice on this dark background, we have a little introductory text, as you can see right here. What I'm going to do is I'm going to drag this one a little bit down and then drag one of those, make a copy of it, make it smaller like this and I make it longer. Now we need more spacing, so I just put it like this, that looks all right, let's see what we have created so far, click in upboard and click on play and this looks absolutely beautiful. Let's just insert the image for now and then we're going to move on to the other sections, go back to your finder. The photo about is what we need to take it outside of your upboard to make sure and then drag it inside of your upboard and scale it, as you can see, I've not exported the images big enough, but they're still sharp enough. I think, well, it's not perfect, but you should always use sharp images, of course, not too sharp because otherwise your websites will be slow, but this image is overlapping as you can see right here. Let me see, there's also a very soft nice shadow, we're also going to create that. Click on the shadow, we're going to put this at the 30 and then on 60. Now we have this very soft and nice shadow, maybe decrease this one a little bit, and let's see what we have created so far, click in your upboard again and then press play. Absolutely beautiful, I like this result, let us now continue with this part in the next video. 25. About page part 2: Tabs + Gallery: Welcome back. In this video, we're going to create the DEP feature that you can see over here. This is one of the features that is often used in big websites, to for example to display a process where there are multiple steps and you don't want to make the page too long. You hide information between in those steps. It's really easy. It's just a bunch of texts and an outline. Let's just create as for now. I'm going to go back to my film. I'm going make sure that the color here are good. I'm going to put that on purple. What color did I use over here? I think I used this color. Yes. I don't use these blocks. We don't use a title over here. We only use a white text box like this. Align it to the top. Make sure it's aligned on the top of one line of texts. That looks good. Maybe put a little Enter to make it look a little bit nicer. Now just move this one up like this, and let's first create the outline. What I'm going do is I'm going to grab the Line tool as you can see over here. I'm just going to create a very rough outline. Now you really need to use the Shift. So if you hold Shift and you can see that another line will stay straight and that is what you want. Doesn't really matter if it's not perfect the first time. First release the mouse then release the Shift. Don't worry about the color here. Now don't start at this point because then you're going to drag the first line. Now we need to start at another point and move backwards like this. Don't worry about the lines for now. I just want to show you the basic shape. Create a line like this. I'll also create a line like this. Make sure you use the blue lines to help yourself like this. But I know I'm going to make it a little bit bigger for the text. I'm going to end it off like this. Now press V. Now we're going to align the whole box to make it fit our design. First of all, what I'm going to do is I'm going to drag everything, move it to the left and make it a little bit bigger. As we can see right now, it will mess up our design. But that's not a huge deal because we need to change the lines by hand. So make sure it's on this side. Make sure it's actually big enough. So I'm going to grab one of my text layers and move it on the inside and align this, maybe make this four lines like this and see if there is enough wide space on the left, and on the top and in the bottom. Maybe I want a little bit more space on the bottom. So I'm going to select everything, de-select the texts and I'll hold Shift and then click on the text. I'm going make it a little bit bigger to give it a little bit more wide space. Now the blue line is actually in our way, so I'm going to delete that for now. So just drag it and move it onto the side and then it's gone. I'm also going to turn off the grid, as you can see. So we can actually see what we're doing. Now click on your text and just align them. Don't forget to hold Shift so your lines will be straight. Just make sure all the lines are connected. Again, select all of it, hold Shift, de-select the text, and now make it purple or the actual color that you want. I think I've used purple. No, I used light purple over here, the normal purple, and dark purple. Make this one the light purple. We want to drag a title. Let's just drag this one. Make this step number one, for example, design. Now make a copy of this one. Change the text, make it a little bit darker. This is also one of the things that is really important in web design, is that you use your colors to make the experience better. In this case, if I would also make this one purple, the only indication that we're on this step would be this line and that is enough. But if you can add another layer of depth to that, now you can see that this one is highlighted. So even if somebody doesn't have a good screen and they don't have these lines, you can see that this one is highlighted because it's lighter. So that's what I just wanted to show you. I think this box is a little bit too small, so I'm going to adjust it and make it a little bit bigger. I'm going to make two other titles. Something like this. Let's delete these lines for now. As you can see right here, compared to my final result, it looks similar. You can change it up a little bit more of course to make it fit a little bit more. But I like this design, it's simple and it works. In this episode I also want to create this part. It's going to be really easy, but because these are just a few images and it's the same style that we've used before. Let's see. I'm going to grab this one. Make a duplicate of this. Now make sure that you have the same space from here to here, then from here to here. This is 100. Now you want to make sure that you have 100 pixels to the bottom of this line. As you can see, this line is not perfectly aligned, but 990.9 is good enough. Now go to your Finder, grab the software I use. Grab all of them and just place them inside of your app-board. I'm going to use two rows, three columns each. Align them to make it look good on the eye. Now just group them and place them inside of your app board. Now you can just change the spacing to make it look a little bit better. Let's just see what we've created so far. I'm going to click plus. This looks really nice and contrast looks good. We have to step feature over here and we have a small photo gallery of a few logos. That looks pretty nice. In the last episode for this page, we're going to create this section. It's not going to be very hard, but we're going to use the Shape tool for these rectangles. 26. About page part 3: FAQ section: Welcome back. In this video, we're going to create this FAQ section that looks like this part is actually opens by clicking direct angle. I'm sorry. The triangle over here. Let's just get started with this design. First of all, we're going to duplicate it the title, of course, and make sure it has the same spacing. Delete this line for now. What is this design, actually, is just a title, which is just a semi bolt 16 points. Then it's this little triangle and inline. We've already created this line, so we can just direct this line from here and just place it onto here. For the Text Layer, I want to grab a text box like this, make it just one line and then make it 16 in bolts. I use two colors for the active one. I've used the light purple and for the not active one, I've used the dark purple, which is the same style as we have used over here. Make sure that you have the same style on your website, on your different pages. Because then it just looks consistent, which is important in design. As you can see, I've even used a darker version over here. That's not perfectly consistent with this. Now, we're going to just stick to this color over here. Now, what you want to do is zoom in and create and click on the triangle tool and we're going to just create a tiny rectangle. Hold Shift to make a perfect triangle. Now, uncheck the border, make it dark. Now, if the question is not clicked, it needs to point to the right. Just press "V" and then go to the right until you see the rotation, hold Shift and then rotate it and align it. A little bit too big. Let's make it a little bit smaller, align it again and there we go. Let's grab all of this. Make a group as we can easily duplicate as hold Alt and Shift and make two duplicates of it like this. Give it a little bit of room because we also need a question that is open. Make another duplicate ungroup this one. Right click, ungroup, put this one to the bottom. We will have a little bit of space for our texts. I think we need more space. Let just increase this space over here. I'll just grab one of your text box like this. Hold Alt and make it fit the design. Now, if we make this a light one, you can see that the contrast, it's not really nice. I actually prefer the design that I've used over here. I'm just going to grab this, this, and this title. I'm holding Command and Shift and I'm going to make this the dark color. This one, yeah, it's this one, the 6A6680. I'm also going to do that for these titles because I think that looks a little bit better. Now, there's even a bigger difference between the active state and the non-active states. Yeah, this looks a little bit better. Now, we only need a short introductory text like this. I'm sure it's a line at the top of the smaller title. Now, grab all of this, group it, move it up and the only thing that we need to do is change the rectangle. Sorry, the triangle over here and rotate it so it looks like it's opens. Now, last thing that we need is the Footer. Grab your components, dragging your Footer. I've already had a Footer. Let's just now decrease our board and now, we are done. Let's look at our results. We are going to click on the our board, click on "Play", and I am really happy with the results. I hope your design also looks pretty nice. But this is a solid About page. Let's save our file for now. Then we're going to go to the next page, which is going to be a super easy page. We're going to build this in one episode. Is going to be the About page with our custom social media icons which are affected and super sharp. 27. Contact page with vector icons: Welcome back. In this video we're going to create the contact page. Now what are you going to do, if you have your design over here, are you going to make a duplicate of this page or this page? This is also what I think about before I start duplicating. You have to look at the page and does it look more similar to this page or does it look more similar to this page? In this case, it doesn't really matter because the upper section looks more similar to this page and the down section is more like this page. But I just wanted to give you that tip. Just do not duplicate your last page and then start adjusting it. Maybe there's another page that already looks like it, at least a little bit and then you don't have to change that much. For now I'm going to just grab this page like this, delete the inside of it. I'm also going to make a duplicate of this part, so copy it, click on the New Artboard and paste it. Then as you can see over here, we have this bottom part, which looks like this upper part, but then with different colors. So I'm going to grab this part by holding Shift, hold Commands, press Copy, go to our new Artboard and paste it, hold Shift and move it down, and then change the color over here like this. Now let's change up the image again. Unlock it, Ungroup it, and then go to your Finder, go to photos and drag in the new photo like this. I'm going to make this one a little bit more bigger to give it a little bit more variety. Now the one thing that we need for this design is a huge Google Map. For now I'm just going to use a screenshot. If you want the Google Map to implement in your design, I should go to Google Maps, and then I just make a screenshot of the actual place. But you don't want this to be part of your design. Let's say you're living over here. Just type in your location then click this away, and now you can make a big screenshot. If you want you can make a screenshot of the whole page. But for your design I think it looks a little bit cleaner if you do not include all those buttons, but you can of course, create a screenshot of this part and this part also. By the way, did I show you how to create a screenshot? This is different for Windows than it is on Mac. But on Mac, it's Command, Control, Shift, 4. It's not an easy shortcut, but it's super nice because then you can create a screenshot like this. Then if you hold space, you can even move this box like this. I use this all the time. It's so super nice. On Windows you can just use the Print Screen button, but I think on Windows 10, there's a new option for this where you can also just create a screenshot of a part of a page. Now I'm going to click, and now it's saved on my clipboard. Now I can go into Adobe XD and I can just click on a paste or command-v and then just decrease the map over here and make it fit your Artboard like this. I'm going to add a shadow again, you already know the numbers 30, 60 and maybe decrease the opacity a little bit. Now move this whole box up, also going to put that out at 100 pixels of whitespace. Now the last thing that we need to do is insert the text. As you can see over here, I have two colors inside of one text layer. How you can do that is pretty easy, if you just type the text for example something like this, then you can just select the text and then press a color. This is not possible in most tools, because in other tools you both select the whole text box but in XD, you can just do it like this. It's pretty easy. Now let's just insert our social media icons, which are vector by the way. Now we go to the folder, Social icons, SVG, you can pick a few Social icons from here. I am going to place YouTube, Instagram, and LinkedIn, for example. Just drag them outside of your Artboard like this. We've already played with the SVG icons in the homepage, of course, so you already know how this works. You're going to insert it, make it smaller by holding Shift and make them even smaller. Zoom out to see if it's not too big. I like to make the icons really small because I think that looks really nice. Now give them a little bit of spacing, select all of them, align them like this, and then give them a color, something like this that looks good. It's even too big for my taste. I'm going to make them even smaller. I think this looks pretty decent. Now we only have to drag this one up and close it off by decreasing the size of the Artboard. Let's just see what do we have created. I'm going to click on play. This looks pretty good. Maybe the title needs to be up a little bit. We have this big Google Map with super nice soft shadow, and we have our icons and our texts. It looks really good. I'm going to click this away. I'm going to click on save. Now you've seen that the first page took a lot of time, but the other pages were created pretty quick, so make sure that you put a lot of effort in your homepage because if your homepage is good and you've paid attention to your text and to your buttons, to your colors, the other pages will just be really easy to create. Now we're going to go into other advance things. For example, we have not used the background blur effect, as you can see right here in this design. This is also a popular effect to make some things pop out a little bit more. That's what I want to teach you in the next episode and also create a design like this, which has a cut out with a mask, a different kind of style of button and also here this background blur color. That's what I want to do in the next episodes. If you know these techniques, you are sure that you can create almost any design that you want inside of Adobe XD. I hope to see you in the next episode. 28. A travel website with background blur: Welcome back. In this video we're going to create this design that you can see over here. This is a little bit different than the project that we have been working on until now. But I want to show you a few effects that were not part of this design, but that you can use to make your design more interesting. For example, this background blur effect that you can see right here. This is a very modern effect, you can do a light one like this, or you can create a darker one as you can see over here. Or as you can see over here, this is what we will be making in the next video. This effect is really nice to make your items pop out a little bit more, because without this background, they will just fade into the image. This is a great way to separate the items from the background. Let's just get started. What I want you to do is go to your finder and make sure that you have the Abuget font installed. There are two folders over a here and now we're going to focus on the travel page. Let's just get started, we're going to go to our exercise file, and we're going to make a duplicate of our page. Let's delete these footers for now. We're going to make a duplicate and were going to delete everything that is on the page. Let's create a little distance here. Delete everything that's on the page, like this. We don't need the page to be that long. You know what? We're going to make it as high as the view port. We're going to copy this number and paste it here over the height. In this way, we have a smaller page. I'm not going to go into every little detail how to create this page because by now you already know how to create a menu like is, so I will skip certain things. The shadow for example, you could just copy this shadow from the bottom of our design over here, what we've already done, because we've already created that shadow. You also already know how to insert the icons like this, but there are some other icons that I've used in this design. If you want to recreate this design and maybe put this in your portfolio, that's possible, because I've included the travel icons that I've used. Here are the SVG files, here's the cocktail, the bed, and the snow. Let me create this page real quick. I'm almost done with the page design as you can see right here. It's getting there, I have just inserted the menu from my own website, it doesn't really matter. But there's one thing that I haven't shown you yet and that is how to create a hamburger icon like this. An icon like this is called the hamburger because it has three layers, and this menu is oftentimes used on mobile devices to open a menu and looks really clean. This website again, it's not really practical, but it's just to exercise our design skill. Let's just create this hamburger icon in our file real quick. What I'm going to do is zoom in, grab your rectangle, and create a tiny rectangle like this. Then round your corners, make sure it's not too big, or maybe this is a little bit too big. Make it a little bit smaller, just grab your repeat grid tool and make sure that you have three of those little burger things. There you have your hamburger icon. Maybe it's a little bit too fake, just play a little bit with it until you're satisfied. Now I've prepared all the elements and now we're going to create the background blur effect. It's actually not that hard, just grab your rectangle, create a big rectangle like this, and put it on the background, first let's make it another color like this so we can see what we're doing, press Command and left brackets to bring it to the background. As you can see, I maybe need a little bit more spacing between the columns. Let's give it a little bit of wide space like this, and let's make it black for now and turn off the border. What you can do right now is turn on the background blur. If you do this, it will create the default background blur, which is pretty heavy, if you can see. You can play around with this settings here. What I did in my design is I decrease the background blur. If you put it on zero, you can just look through and it's just a white layer with opacity, but if you increase your blur, you can still see the background a little bit. Then you can also play around with the lighting, and of course, with the transparency of the whole layer. This depends of course, on your design and it even depends on the actual background. For now I'm going to increase the blur a little bit with this few, a little bit down, give them a little bit more spacing and duplicate those blocks like this, and use another one for the last one. Again, this is not a perfect design and I haven't measured all of the elements here, but it's just to show you how the effect works. As you can see, my final design, it looks a little bit nicer. There are some rounded corners on the edges, I'll also show you how to do that. If you click on a rectangle like this, you have the rounded corners over here. We already talked about these in the button section, but you can also boot a corner on, for example, only the left up side. If I just press eight now, you're going to see that I only get a corner on this side and not on all the other sides. In this way you can create an very nice rectangle with rounded corners. You can also select both of them and then do it like this. There you go. This is the effect and now I also want to show you the dark version, I'm going to duplicate my design, and then click on the first one, hold Shift, hold Shift, and click on the other two. Now let's play with the lighting over here. As you can see, you can also decrease the lightness. Then at some point it becomes darker than the actual background. If you put it at a plus number, it will become lighter, and this is the effect that you can see in modern design these days. I don't see the darker version a lot of times, but this is also pretty nice. Of course, this depends on your background, you need to play with the settings to make it look nice, but this doesn't look that bad. Let's just test it with a few different backgrounds. I'm going to unlock my backgrounds and let's see how that works. Go back to your finder, and for example, grab another image and put it on the background like this. As you can see, on this background, the dark version looks very nice. This doesn't also look that bad, but I like the dark version a lot more here. Let's test with a more light background like this. As you can see right here, this is a little bit too light. On this background the dark version also works a little bit better. You can try around with the backgrounds that I've included in here, "Oh, I really like this one, this is the really clean." That was the background blur effect, I hope you liked this, this is a very modern effect. In the next episode we're going to create this design, which is a little bit more complicated, it has a mask and it has this slider, vertical slider effect, and a weird button. I hope to see you in the next video. 29. A book store website with masks: Welcome back. In this video, we're going to create this beautiful design. Our background blur is here again and we have a mask, we have a weird button, so let's just get started with this one. Again, I'm not going to show you how to insert a background and how to make a menu because you know that by now. Give me a minute to recreate this design. I'm almost done recreating this page. There are a few things different on this page than the Explore Indonesia. First of all, the background blur is a lot more intense and there's also a background blur in the corner which is just a small one with a search icon. How I did that is I just copied the rectangle with the blur on it, I deleted all of this, made it just a sharp rectangle. I put it in a corner over here and now this looks a lot darker than this rectangle and that is because of the background. But just for your design, then you can just increase the lightness to make it look like it matches the actual background. This is a nightmare for developers, but this is just to show you how to visually make it appealing maybe for your portfolio. But if you're working with developers, just don't put different values on all your elements. Otherwise, they're not going to be very happy. The lines over here are just created with the line tool. It's white and then put on 20 percent opacity so in this way, you get those nice lines that you can see over here. I'll also put one on the left and now let's create the mask effects. You can see a 02 over here that is cut off. What we're going to do is we're going to duplicate our big title, which is by the way, the Grendel Font, which you can also find in the downloads. I'm going to create a big 02, I'm going to make it a point text, make it bigger, and then I'm going to put it at the line. Let's just add another helpline over here. That looks good, and now I want to cut off the two somewhere around here. What I'm going to do is I'm going to grab a new rectangle and then I'm going to create one and overlap it on the two, delete the border and pick a very weird different color because we're not going to see that mask. Any mask works like this. You need one item to be on top and then if you select both of them with shift and then you press "Mask," I always use command "Shift M," but maybe you can also do it from here. I think you can do it from here, mask with shape. Here you use the shape to create a mask and that means that we will only see what's inside of this red shape. If I do this right now, you can see that we have this effect and now we can apply the opacity over here. If you want to change the text, you cannot do it by double-clicking. You need to click on the actual text layer. This is the mask, you can still click it and change it if you want, and this is the text layer. If I wanted text layer to be a different color, I need to do it right here. In my design, I put it at, I don't know, 40 percent opacity for example, and as you can see right now, we have created this nice mask. Delete this help ruler for now and this looks pretty neat. I think might do in my actual design is even bigger so I'm going to increase the size as you can see. Make sure it's inside of your mask and if it's not inside of your mask, you can change the mask like this. That looks pretty nice and now let's create the button that you can see over here with a little arrow and some diagonal corners. That's also not really hard to do. Let's just create a button real quick. Grab your rectangle tool, create a button, pick a color that match your design. This looks okay for now. Delete the border, put some text inside of your layer. I created a arrow by using the line tool like this, make a white line, and then grab the triangle tool and make a little triangle like this, uncheck the border and rotate it. Make sure it's not too big. That looks pretty cool. Now what you can do, if you double-click on the rectangle, you can change the anchor point. In the same way as we changed the wave effect in our website, you can grab this corner and this corner at the same time by holding "Shift" and then click, and now you can just change the position of those anchor points. In this way you can create a button that looks a little bit more creative. If you group those three items like this, you click on the text and you also click on the "Button", and you click on this one, now it's aligned in the middle. Again, it doesn't look exactly the same, but this is the technique that I used. I think on my design here there's also a lot of spacing between the letters as you can see. I'm also going to do that real quick for now. Increase the spacing insight of the font if you really want to match the design. I think my background is a little bit darker in my final design. Let's change the text for now, shop now. That looks pretty cool. The last thing that I wanna do for this page is create this effect that you can see right here. How you do that is by using the mask and using two layer on top of each other. Let's just create this real quick. What I'm going to do is I'm going to zoom in and grab the circle, make a little circle like this, duplicate it. Then for the upper one, move it a little bit more up and then make a copy of it by holding "Alt", make it bigger by holding "Alt" and "Shift," then put the border on and fill off. Now, put this on whites, make it a lot bigger, and now you can see that my dots are way too big. I need to select all of it, let's make everything a little bit smaller. As you can see right here, there's a white outline on top of it and then there's a darker version beneath it. What I did is I made a duplicate of this one so the white one needs to be on top. To make sure it's on top, just click on bring it to front. This will stay the white one. For this we want gray versions so I'm going to put that on 50 percent opacity. But now if I overlay this one, we're not going to see the background ring, so there's two ways we can do this. We can create a mask on this one that looks like this or we can create a mask on this one and overlap it so then it looks like that the white one is on top but in reality, this one is on top. That's what I'm going to do because that's a little bit easier. Grab your rectangle for now, create a rectangle and makes sure that it's in the right position, then click on both of them and click on "Object" and then "Mask." Now the gray one is on top, I'm going to move the white one beneath it, now press "Command" and left bracket to bring it to the back. Now it's beneath it but we cannot see this one because we have used the opacity, which is why. We cannot use opacity in this case. We need to increase the opacity and change the color to something that looks a little bit more like the background, make that a little bit lighter. You can actually see it, and now if you zoom out, you can see that this looks pretty cool. The only thing that's different here is that there's a lot more margin between all of the dots and the dots down here have an opacity, something like this. This is how you create that effect, looks really nice, this can be used for a slider which will replace the image in the background. This design works also pretty good with different backgrounds. For example, let's grab another background and put it in here. As you can see, it looks pretty good. Maybe this is a little bit too intense so decrease the opacity like this, put it on 50 or on 60 and now you have your design. The only thing that I forgot plus the search icon over here, which I've also included. Again, if you want to use this item in your portfolio, I don't care, that's okay. There is the search icon. That looks pretty good. I hope you also liked this episode. This was another nice technique, I hope to see you in the next episode because we're going to create some other cool effects. 30. Responsive mobile design - Part 1: Welcome back. In this episode we're going to do something really fun. We're going to create a responsive mobile design. This our board has been empty for quite a while now. I wanted to fill this design with the content on this page is going to be a really easy because we already prepared some styles for our titles. The web page is not that hard to make responsive because it doesn't have a lot of difficult columns. So this is just two columns. There are three columns over here, three, three, two, four, and just one big one. So if you want to make sure that your mobile design is going to be easy, then it's not going to be hard if you have a page that looks like this. What I want to do right now is I want to expand the mobile page because it's probably going to be longer than this one. Now we need to unlock a few things to copy it. First thing that I want to do is unlock the background for now, and I'm just going to copy it like this. Click on our mobile background and then paste it. Then just place it inside of the our board, maybe make it a little bit smaller like this. Now also for our menu, we want to use a hamburger icon like I've showed you in a previous episode. I'm only going to copy the logos. Double-click on your logo, go to mobile and then paste it, and make sure that you have your grids setup with 30 pixels from the sides. Sometimes I also use 20. But 30 pixels look a little bit nicer because the more white space you have, the nicer it looks, but it's not always practical. For my actual websites, when I built my website's inverters, I use 20 pixels on the sides. So let's just put it at 20 for now. What am I doing? I'm going to grab the hamburger icon that I have created in another episode which is really nice icon. I'm going to copy that, go to my mobile design and paste it over here. Boom, I have it over here. That looks pretty dope, and it's not perfectly aligned because I still have the repeat grids. I don't really need it here, so I'm going to ungroup the repeat grids. I could just make a group out of it and align to the grid. Let's now insert our titles. As we have prepared over here, the big title is going to be this one. I'm just going to copy all of it, and I'm going make a duplicate and paste it over here, put it like that. I'm just going to click on the title. We've prepared this already. Now we just go to the mobile title. I'll just make it white. Now it's 46 and this one was 54. Now the only thing you need to do is make sure that your text box do not extend the grid like this. Just make sure that there's enough room for your texts. This is maybe a little bit too much in my actual website. There's not a lot of texts in the big title. But you can see over here, I designed and build websites that's not a very long text. If you use a big font like this, make sure that your title is not too long. Now I'm also just going to use this one. As you can see, it's only three lines. That is good for a mobile view as well. Let's just copy this title and use a real text. That looks pretty nice. I'm going to log the background again, place this a little bit up. I'm also going to copy the wave which is locked. I'm going to unlock it again with comment L, and then click on my mobile, or board and paste it. Make sure that you can still see the wave, maybe make it a little bit more intense on mobile. So you can actually see a part of the wave. Don't make it too intense. Otherwise it's going to look cheap. So something like this that should be fine. Now the background, we also want to have the same fill background as we have on this one. For the fill, we're going to just pick the F5, F5, F7 background. Now that looks a lot better. Let's see how fast we can create this mobile design. For this box what I'm going to do, is I'm going grab the box like this, and make sure it's in the right our board. Make sure we can still see a little bit of the wave because that would be nice. I'm just going to grab my first two icons like this, copy it, go to my air board, and then paste it. I think that something like this that should be fine. Of course, on a mobile phone it's hard to have four columns. Sometimes you just have to break your design a little bit to make it fit the mobile phones, something like this that is good enough. Group it and now it's just one group. Now for this part, maybe I don't want to use four images here because that maybe will be a bit too much. What I'm going to do is I'm going to grab all of this first, I'm going to move that to my mobile design like this. The second title, we need the second mobile title like this. Make it a little bit smaller. Make sure it fits the grid. All of your text layers, and align them properly. Now four images, maybe we'll be a little bit too much. Of course you can do something like this. Group it, copy it, paste it over here, and just make one big image out of it if you like that. Actually, that looks a lot better. Because on my website, I've picked two images, and put them on top of each other, but I think this looks actually pretty good. But what I did on my website, I just picked two images. For example,these two. So I have comments clicked and I copy to these images and pasted them over here. You can see them in full size. I think I will align them in the middle, something like this. Again, you maybe don't want to show everything on a mobile design. Sometimes you just need to skip and delete a few parts. In real websites, that is often what happens because on a mobile phone otherwise it would become so huge. Do something like this or the other solution that I designed. For now I'm going to use that solution because I like it a lot. Now for this part, this is really nice about the repeat griddle because now you can see how nice repeat griddle is. First I'm going to copy my title. Make sure you copy your title, give it a little bit of spacing, and make sure it fits out, is a really long one. I don't know how much text is, maybe two lines, that should be good. Now if we copy the repeats griddle and go to our mobile our board and paste it, we can only put one box in here. First of all, we need to decrease the size of every rectangle. Let's do that first, decrease it, hold shift. Now it's going to be really nice. Because right now if we decrease the side of the repeat grid, it's going to remember all the images that are on the inside and it will show the same images. So you didn't have to rearrange the images like this. The only thing you need to rearrange is the margin between the actual rectangles. Because for your client section, I don't know if you already want to skip a few clients on mobile. So that's why I have designed it like this. All right, that part looks pretty nice. Make sure there's enough white space between your columns. Again for your title pick the mobile one. Again, now I'm doing it pretty quickly because I don't want to spend a lot of time measuring everything. But on a real project, I will really measure every spacing between all of the titles to make sure it's very consistent on the whole website because that is important. So let's just finish this mobile design in the next video. 31. Responsive mobile design - Part 2: Okay, welcome back. We're going to finish this page on a mobile design so make sure you copy your background layer like this. This part is going to be really quick lock it and lock it for web. Grip your title like this, make a copy. Make sure it's the right size like this. Make it wide. Align your texts, resize your text boxes, and now grab one of these, copy them like this. Click on the border and make sure you decrease the size of that actual inner column like this. Now if you want to make sure that you have the exact same measurements on this column, what you need to do is copy this one and then you need to change the text. Sometimes I do that because I want to make sure that the size of the boxes are the same. Now resize your background and now we're done for this part. For the testimonial section, I will show you how to do this part because you know the titles by now. If you grab one of those testimonials it's going to be too big so make sure the left part is aligned on your grid and then decrease the size of the background layer. Make sure you don't click on the whole thing, but you come and click on only the background layer, decrease this, and then also come and click on your text layer and also give it a little bit of wide space. In this way, it looks almost the same and now you can use your repeat griddle and have the other comments inside of here. Now for the last part how should you solve this part over here? On my website, I just skipped this whole part. My whole mobile website just looks without this because I really didn't know how to solve it. Of course, you can make a really small one or only show one of those images, but I will show you how it looks on my website. What I did is I grabbed the wave and I grabbed the background I copied it and I pasted it. I copied all of the text layers like this, pasted it, adjusted it to the mobile size, maybe I changed the wave up a little bit and this is actually all I did for the down section. You don't want to make it too hard for yourself sometimes. Now for the footer, because this is a component, we need to change the component for the footer. What I want you to do is make a copy of the components, right-click and then ungroup the components. This is still our main component that we can see over here. But now we need to make a component for our mobile footer. We're just going to change this footer, group it real quick. Go inside of your art board, ungroup it again, and then make sure it fits your mobile design. For footers what you always want to do is left align your elements, make sure they're all inside of your footer. It's not always left aligned, but for most footers it's left aligned because you have a lot of texts. This is a really simple footer. Maybe you can also do a center design for this footer. But on most footers you just want a left aligned footer. This looks good enough. This is how you want to do it for big websites. But for now, I'm just going to use the center design because that looks a little bit nicer for this website. Now grab all of it, go to components, press the plus, and then rename it to footer m because that's the footer for our mobile. Now we can just insert the footer components from mobile on all pages. Now the last thing that we need to do is decrease the size of the art board and click on our art board and click on play and let's see what we have created so far. The mobile menu looks a little bit too big for my taste but as you can see, this looks pretty nice. Everything looks mobile optimized. I need to work, I've got the title over here, I need to work on the margins but you can see how fast it is to create a mobile design if you have prepared everything for desktop. Let's say now you're done with your design and you want to show your design to other people. That's what I want to show in the upcoming videos because you need to know some things to share your design, to make a prototype and to send it to your client, or maybe even upload it on your own portfolio. I will see you in the next video. 32. Artboard and Element exporting: Hi and welcome back. In this episode, I'm going to show you how you can export your designs. So maybe you want to share your designs with your client or you want to upload it into another prototyping tool or you want to make an export to put these designs in your portfolio. The easiest way to do this is by just selecting your art boards and then exporting it. You can also use the mark for export feature. But I do not really use that, because a lot of times you are working on a page and you need to send that page to a client or you want to export three or four screens and even if you want to export 10 screens, it's not really hard to click them, so I don't really use the mark for export feature. I just click the elements that I want and I export them. That's what I want to show you and if you really want a video on mark for export, then tell me, but that is only the case if you're working in really big files. I think that most people that watch this course will not have huge projects yet. That it's just better to click the things that you want an export it, it's much easier. What you need to know if you want to export things is that the names of your art boards and the layers will be exported as well. This is pretty nice because sometimes you have a situation like this, where you want to export those four images separately. How you do that is by selecting all of them like this, so you comment click on the first one because this is inside of a group, you comment shifts click on the second one. Now, you have four items selected, including the shadow and to keep everything organized, you can go to your layers panel and here you can see the naming. This already has nice name, so if I'm going to export these into JPEG or PNG, you're going to see these names. Let's try this for now. I'm going to go to file and I click on export and then click on selected, because I have selected those four images. I'm going to make a new folder and call that exports for now, just as I tests. So here you have a few options to export your designs. Right now, I'm exporting images which have shadows and that means transparency. That's why we need PNG, because PNG is the only pixel format that can handle transparency with JPEG you will get a white background. If you use transparency or you're exploiting icon for example and you want to export them to pixels, you will need PNG, otherwise you will get a white background. Let's pick PNG for now and then you have a few options right here. Most of the time, I only use design, which is just 1x or Web and that is 1x and 2x and this means how big the image is going to be inside of your our board, this image may be is a 300 by 400 pixels wide and if you select this option then it will export an image that is 300 and 400 pixels wide, but also a version that is 600 by 800. This can be nice if you've imported real big images and you want to keep the resolution, or you just want to know how sharp your export is going to be. You just click this one and now it will create eight exports because we have selected four images. Let's click on export for now, as really quick, go to your finder, go to the exports and as you can see, it has the same layer names and a 2x versions have this @2x at the end. If you open this, you can see there's a lot of white space, but that is for the shadow and these images are not sharp at all because I've imported on sharp images and now we're exporting it again. This is not really sharp, but as you can see, the normal version is less sharp than the 2x version and this is a horrible quantity, but I just want to show you how this feature works. This is the normal version and this is the sharper version. Let's do that for art boards now too, so let's rename this art boards to Home final v1 and then Home final Mobile v1. So click on the first art board, the grid doesn't matter that it's still on and will not export the grid and also shift click on the art board of your desktop. Now go to file again, go to export select it and now we also want to test the 1x and 2x and now I'm going to pick JPEG because a benefit with JPEG is that you can apply a compression onto your images. For example, you can put it at 60 percent quality, it will still be super sharp. But if you're sharing items with your clients, you don't want to send JPEG that are like 10 megabytes. You want to add a little bit of compression to it. I'll show you if you put it as at 60 percent capacity, it will still be super sharp and we're going to see 1x and 2x thing. We're going to click on export and then we're going to go to the finder. As you can see now, the images have been exported. There is a home mobile version that is 260 kilobytes. The 2x version is almost 700. Let's just open the version one for now and I'm going to zoom in and see if it's still sharp enough. As you can see, this is still pretty sharp for a 60 percent compression at the 1x it's not super sharp. Let's just click on the 2x for now. I often sends the 2x version to my client. As you can see for a mobile phone, this is more than sharp enough to share with your clients or to even put in your portfolio. Let's also check the 2x version of the homepage. Let's zoom in a little bit and as you can see, this is pretty sharp for an image that is only 1.5 MB and almost 10,000 pixels in height. So decompression in Xd is pretty good. The last thing that I want to show you is how to export vector icon. For example, we have designed a button. For example, we have designed this button or this little arrow. If we want to export the arrow, we have a problem because this is a line and for some reason if you export it, it doesn't outline the lines. You need to use a rectangle if you want to create a vector icon. That is not really nice and maybe I'm doing it wrong, but this is how I do it. Those are two separate items, so to export them as one icon, you need to shift click them, select both of them, and then group them, and just call this arrow sharp long. For example, I've selected the group. This is important to select a group and now go to file and export. Because if you select both of the layers like this and you go to file exports selected, it will export the line separately and the triangle. That's why you need to click on the Group and then go to file, go to export, and then select it and now you need to use SVG. SVG is the format that is used on websites and you can also import that inside of Adobe XD, as you've seen before with our social icons. This is a really nice formats to export vector icons. Now, if you pick the SVG because this is a vector icon and you export it, now you have a vector file that you can use in any other Adobe XD file that you want. As you can see right here, if you scale it, it still looks pretty good and it's unlimited sharp. My advice would be if you design icons do with an Illustrator, because Adobe XD is not a perfect tool to design your icons. But sometimes you can design a little icon like this with a rectangle and a triangle and reuse that in other projects. That was all I wanted to show for the export feature. I'll see you in the next video. 33. The Sticky Menu on top: Welcome back. In this episode, we're going to create the sticky header effect. In all the designs that we have created in this course, we have used the transparent header effect. This looks very modern, but you need a nice background image. For a lot of projects, this is a look that is too modern and the clients are more looking for something like this, just a very clean, simple header on this website. It doesn't look that pretty because the background over here is not white. But in most websites, you're going to have a header that looks like this or a menu with a background. You have a black logo or a darker logo, and you have almost black menu items. This is how most of your menus are going to look on the website that you're going to design. What you can do with this is you can go into the prototyping tool because you will run into situations where you need to present your website to a client and how it will look when you scroll. Because on a website like this, if you click on an actual art board, you click play and you scroll, then the menu will just stay on top. With a lot of websites, the menu will stick to the top and that is what you can do. We're in the prototyping mode, but this is very hard to do with the transparent header because then it will be on top of the other items or beneath it, doesn't really work. What you need to do is create a menu that looks like this if you want to do these effects. Now, we're going to go into the prototyping mode. The prototyping mode is where you can create a fake prototype, and then you can get an experience for what the actual product, the final product when it's coded will look like. What you can do now, nothing changes, but you can link certain elements to each other. The only thing that I want to do in this episode is show you the fixed position when scrolling effect. This is not possible in the design feature. So do not look for this option when you're in the design mode. You need is to switch to prototyping mode and then click on this one, a fixed position when scrolling. Fixed means that it will stay in that position. Now, if we click on the art board name and we click on play, and we will start scrolling. You will start to see that our menu will stay in place, but now you can see that it is beneath most of the items, and that's not what we want, of course. So then we need to click on our background and bring it to the front, or just press shift command and right bracket. Now, if we click on play again, you can see that the menu will stay on top on the whole website. You can even add a shadow if you want. A little bit of shadow over here, because a lot of times you will have a white background over here, I'm going to show you. If your background of your website is white, like this. Let's say this is also white. You have a website that looks like this because most websites have a white background and you do the scrolling effect and you also have a white header. Doesn't look that perfect. So you can do two things. You can use a very small subtle lines, something like this. Just pick the line tool, create a line that fills the whole screen from left to right, and just place it at the bottom of your menu and make sure it's inside of the group. Now, command x to make sure you got it. Then go inside of the group, so you can double-click. You can see that now I'm inside of the group. The header is actually called group 305. Let's call it menu for now. So we see what we're doing. Go inside of the group, we're now inside of that folder and then press command v. Then place your line like this and then put that on a lower opacity, for example, something like this. Then if we click on play, you will see that there is a small difference between that section. But I think this is already too intense, so let's just put it at 15 percent for now. Click on play, and this already looks a little bit nicer. What you can also do is use a shadow. Let's say you don't like this line effects. What you could do is come and click on your background. So on the white background rectangle, then adds a very small shadow. Maybe this is already too intense. Let's test this for now. Yeah. Well, this is a little bit too intense, so then you know how it works. You can decrease the intensity of the shadow and then click play. That will also create a nice effects for your menu. Now, in the next episode, I want to show you how you can actually link these pages up. If you click on those items, you will go actually to those pages. Then it really starts to look as a real website. 34. Creating a prototype for web & mobile: Welcome back in this video we're going to link all the pages together. We are here in the design mode. I changed all the headers and I made sure that the underline is on the good page. This is the portfolio page, about page, and the contact page. What you want to do is go to your prototyping mode, click this away because we don't need that right now, zoom in and then start zooming in on your menu. You can do two things. You can double-click the actual item that you want to be linked and then just click and drag to the actual artboard that you want to link. Then you have some settings over here. You want to tap it because if you click it that means I tap, it's going to be a transition to another screen. You can even preserve scrolling position because sometimes you will go from a section over here to another page and you want to also stay on the same height. For example, if you create a button, and if you click that button then the color of the button change. Then you don't want to go to a whole other page, you want to stay in that position. You're actually switching screens, but you need to make it feel like you're not switching screens. That's why you would use this feature. We're going to go to that page. I haven't named my pages correctly. The dissolve effect means that it's going to fade in and your fade settings are over here, so ease out and it will take 0.3 seconds. Let's just test this for now. We're going to go to final, click on play. If we click on portfolio, we will see what happens, this was a fade we can't go back because we also need to link from the portfolio page to your homepage. There's also in transition on the tab dissolve. Let's see what we've created so far. Click play portfolio, home. That's nice. This works and they both scroll. You need to also connects those other pages. Sometimes it becomes a mess because you need to zoom out and connect all the pages and it's going to be really small, else I want to show you a trick. What I would do if you're going to link all the pages together, first name your items. For example, final v2-home. I have named all of my pages to final v2. If I for example go to the about page, and I click on this item, I can choose my artboards from here and then I can go to, this needs to be final V2 about, and then it will automatically create that link so you don't have to mess around with the dragging. But for now I don't want to dissolve effect because on a website pages do not dissolve they just click and it's just instant. If you just click on none, and we're also going to do that for these animations over here. Click on these two and put them on our homepage here. So go back to your portfolio page, also click on this one, put them on none. Let's see what we've created so far as I'm going to click on my homepage, click on play. This is how it should work without a fade animation because most websites don't fade. The about page, again it also works. All you need to do is just link all of these menu pages to each other. Click it, choose your artboard that you want, v2 and it will remember the same settings. Portfolio, click on it, click on portfolio, contact. This is a really easy way to link up your website like this. It looks pretty realistic. If you're presenting to a client, don't tell them that this is real because this is all fake. Of course, you cannot export this to HTML. Well, at least not yet. Maybe that will go in the future that you can export certain elements to real website elements but for now, this is just for your presentation. If you've linked up all your elements, you will have a lot of those linked up items like I'm creating already right now. I've finished all of the linked items. No matter where I am on the page, I can just click on all of these pages. This is pretty cool for your presentation. There's one more nice feature that I want to show you that you can use to present your work in the next video. 35. Making a video and shareable link: All right guys, we're almost done.Two things that I want to show you,to presentation of work, first is the mobile feature in Adobe XD. You can download the App Adobe XD on your smartphone. If you plug your USB cable to your phone, you can click on this icon over here, connect iOS or Android devices to XD via USB to preview your designs or prototype in real-time.This is really nice because sometimes when you're designing on a screen, things on the screen look good enough. But in reality, you've designed it too small or the button is just too small for your fingers or the distance is too big or too small, that's one tip that I want to give you, but you can download the Adobe XD from the app on the Play Store and connect your phone via USB. Just try it if you're designing and check if your design looks good on your own mobile phone. Maybe try a few different phones. That's just something that I also wanted to show you. The last feature that I want to show you to share your design is the Video Feature all my prototype right here. If I wants to show my client how Website works? How it looks when I scroll to the page? How it looks when I click on those pages? Then if you are inside of the play mode, which we have just prepared with all the linked items. You have this button over here, and I'm not going to click it now because I am already recording my screen and I think I'm going to crash my computer if I click that because I don't know if my computer can handle two recordings at one time, but that's because I'm recording this course. That's a feature you can record only this part of your screen. You can scroll to the website, click on different things that you have connected via the prototyping tool and then just send an MP4. I think it exports an MP4 to your client and it sends the video. We transfer or upload a video on YouTube. You can also share your client's design pretty easily. You can buy recording software that I am using to make this course. I use Screen flow to record this course. I can also record my audio with a microphone input because that's what I'm doing at the moment to record this course. For people who don't have a microphone or don't read them, want to talk inside of the microphone and the blade feature, then this button is perfect to share your designs and the actual interactions with your clients. There were two features that I also wanted to show you. 36. Congratulations + Do you want more?: All right guys, congratulations, you are done with the course. This is an amazing accomplishment because most people do not get to the end of the course. This really shows that you really want to learn and I really appreciate it. That's why I want to thank you in this video. Then what now? Maybe you want more. If you've seen anything online that you want me to explain and adds to this course, just please let me know. Send me a DM on Instagram. My name is Rinodeboer or just leave a comment down here below. I also want to know what I can improve on this course because I can just create new episodes and improve the core show. If you can leave a review for this course that will be really helpful and that will allow me to improve the course. You have access to this course right now. If I add new episodes and then you will see those new episodes if I upload them. Again, congratulations. What's also a possibility is that you want me to make another course, maybe about some deeper topics like design theory, that's a course that I want to create. Or maybe some other tools may be creating icons in Illustrator for example. Just please let me know and then I hope to see you around on the internet. Again you can follow me on Instagram at at rinodeboer, or you can follow the links of [inaudible] on YouTube or on Instagram. I will put those links down below. Then I want to thank you again for taking this course. All right guys, I'll hopefully see you somewhere around on the Internet. Thank you.