Design Your First Website In Adobe Xd

1. Welcome to the Class: So tell me, would you like to learn how to design and prototype a website using Adobe XD? Well, if you are here, you clearly would. And I wanted to thank you for choosing this course. Hey, I'm David, and here you will learn how to design and prototype your first website using Adobe XD. And if you are completely new to the subject, let me just tell you that with XD, you can design an interactive website so that you can show your clients not only what the site would look like, but also how it would work. And the best part is that XD comes with a full flat free version we will be using in this course. So there really is no excuse not to at least try it out. So I've divided this course into two main parts. In the first one, you will learn all there is to know to get yourself started with the software. So you will learn things like how to use the interface, how to create files, how to use the tools, plugins, and assets. What are the differences between designing and prototyping and only real world aspects of web typography, best practices in web design. And in the second part, we will roll up our sleeves and get our hands dirty and design and prototype a website. And we will create a desktop and a mobile version of a web design freelancers website. And in the process, we will go deeper into adding and using elements that you are most likely to use in a real life web design projects. So things like mobile menus, sliders, testimonials, portfolios, and so much more. And when that's done, you will learn how to save and share your design either with a client or with other stakeholders. So the course will take you step-by-step from learning the basics of using XD through designing and prototyping a website, all the way to saving and sharing it. So if you want to become a web design freelancer, or you maybe want to land a job in a web design agency. Learning Adobe XD is really a must. So jump right in and I really hope to see you inside. 2. What You Will Find In This Class: Adobe XD is an extremely popular piece of software that will let you design professional interactive UI layouts. If you want to land a job as a web designer or a mobile app designer, or if you want to become a design freelancer, XD is definitely one of the programs you will need to get to know, you know, just have a look at job offers for designers or design projects available for freelancers. A lot of them expect the knowledge of Adobe XD. Of course there are alternatives. But if you are already using programs like Photoshop, Illustrator, InDesign, adding, exit your skills portfolio is kind of natural. So I want this course to help you start creating web layouts as quickly as possible. I want you to ultimately become an independent web designer and XD user. So that's why I've divided this into two main parts. So first you will learn the main concepts like what x is and how to download it. Also, you will get to know the program by exploring the home screen, the workspace, and understanding the difference between design and prototyping. You will also understand how to create new files, how to manage artboards and the tools. And you'll also get yourself familiar with plugins and acids. So once we know all this, we will move on to creating the design. And in this second part of the course, you will learn how to find color and design inspiration for your projects. How to design and then prototype a web layout, and how to save and share your final design. We will go step-by-step from learning how to install and use the basic functionalities of XD through designing and prototyping all the way to finalizing your project. And by the end of this guide, you should be able to independently design and prototype web layouts in Adobe XD. 3. What Is Adobe Xd: Adobe experienced design, or Adobe XD for short, lets you design and prototype interactive digital designs like websites and mobile apps. So we're back in the day in order to get the functionality that would allow your clients and developers to see the interactivity you came up with for the design, you'd have to use one app to design and another to prototype. For instance, like marvel App. With Adobe XD. You can do it all in one single app. But there's also one more thing that you can do here. After you've designed and prototyped your project, you can share it with clients and developers. And the sharing functionality InDesign is not limited to just the saving and then sending the file over. But it also comes with a powerful feature of generating code needed to recreate the functionality of your design. And this can greatly help that developers in making your design come alive on a web server. So in a nutshell, XD lets you design your projects like websites or mobile apps. Prototype your design, meaning you can add different effects and functionalities to your design elements. And you can also share your projects with automatically generated code used in web and app development. Since x D comes from Adobe, it cooperates well with other programs in the Creative Cloud Suite, especially Photoshop, illustrator, and After Effects. So if these design tools are not enough for you, you can use other pieces of software to design your assets and then print them over to XD. So usually you would design a logo or custom graphic elements like icons or illustrations. In Illustrator, you would edit the photos into Photoshop or maybe Lightroom, and then add them to your XD project to create a new prototype and share it with devs and clients. Of course, it doesn't mean that you can design your layout from start to finish using only XD. I'm sure you can. If, for instance, all the customer assets are already delivered to you, you can just jump right into XD and start designing the layout using the tools provided about, which by the way, we will talk more a bit later. And if you've been using other programs from the Creative Cloud Suite, especially Illustrator and Photoshop. Some aspects of using XD will be much easier for you to understand. For instance, the layout of the users interfaces similar. The concept of art boards, specific options dedicated to the tools, the tools themselves, etc. If however, this is your first encounter with Adobe software, don't worry, we will take it nice and slow. So you're going to get yourself familiar with XD and hopefully be able to start using the program independently. So it's definitely worth to try Adobe XD, especially since late 2021. In addition to just try in the program out, you can download and install the free and almost uncut starter version, which we'll talk about next. 4. The Starter Version: Since late 2021, Adobe XD comes with a free Starter plan. So let's have a quick look at what it's all about. The starter plan allows you to do all the things you can. In the premium version. It means that there are no limitations to the number of files you can create. The tools you can use inside the program, the plugins library and all other available extensions, the prototyping tools and options, and saving and exporting your projects as images. So it seems like you'd get all you would need, right? But there has to be a catch. And of course there is one or a few. Even in the startup plan, they're sharing functionalities are limited. It's not that you cannot share your projects or that the shared file is in some way impaired. But you can be sharing only one file at a time. Additionally, you can export your designs to PDF only up to two times. The document history is limited to only ten days, as opposed to three days in the paid plan. You get to the access to only basic Adobe fonts. And your cloud storage is limited to two gigabytes. So if you are working in a team of designers, developers, and project managers, most likely you are handling many different projects at the same time. This means that having only one file is shared within a team is a big limitation. However, if you are just starting out as a web designer or if you would like to find a job as one, you can learn XD simply using the standard plan. And that's great news, especially considering the fact that Adobe's products are an industry standard and that they are not cheap. So all in all, you can learn a piece of software that is in high demand in the job market and you can use it freely. So let's assume that you are one of those people you want to learn or just try Adobe XD. You are thinking of becoming a graphic designer, freelancer. Or you are thinking of finding a job as a graphic designer. And you want to just see if X d is something for you. For those purposes, the starter plan will be more than enough for you. And in this course, That's what we will be using. So let's now see how you can download and install it. 5. How To Download Adobe Xd: You know, I got to say that it's not that easy to get to the download page of x, the starter plan. Adobe's website really tries hard to get you either into getting the trial or the full version, but that's nothing we can't handle. So the best way to find the download page is simply by Googling Adobe XD Starter plan download. You can click the first link that pops up and you'll be directed to Adobe site. There you'll see a blue link button that says get XD, which when clicked, will try to open up a download link. If you already have the Creative Cloud Desktop installed, your system will try to open the file using that app. If not, you may be asked to download it, although I would advise to install it anyway. You can just like before, Google Creative Cloud Desktop App and just click the first search result on the page that will open up, just click the download Creative Cloud link button, and the download process will start. So once the app is installed, you will have to sign in or sign up if you don't have an Adobe account. And the next you can install XD through the Creative Cloud desktop, or just follow that direct download link, not whichever way you choose XD will be installed and ready to use. I think the easiest way about this whole thing would be by first installing their Creative Cloud Desktop App and then just installing XD. This way you will avoid all the hassle of searching for the direct link somewhere and Adobe's page and accidentally installing watch, you really didn't want. 6. The Home Screen: When you open up XD, first you will see the home screen, which is generally divided into two main spaces. So on the left, you will see some helpful links that will allow you to perform specific tasks. And depending on which link you click on the left, the space on the right will change and allow you to control your files. So let's just quickly take a look at those links. So first we got new file. This is this big blue button that Taylor, when you click it, you'll create a new file with a default art board. Then we got the open link, which will allow it to open a Photoshop like a PSD file, and Illustrator, which is an AI file, or a sketch file or an XD file. We also have the home link that will allow you to go back to the home screen. We also have the Learn link that will basically take you to Adobe's official get started with XD guide. Next in the Files tab, you'll find your files. And here you'll find all your previously created files. So if you just click on any of them, that phi will get opened. However, if you select the file using the little box in the top left corner, you'll be able to use one of the control options that will pop up in the top right. So here you can rename, delete, and move your selected files. And if no file is selected in the top right corner, you will see an option to create a new folder to which you can move your files. So one is clicked, you will see a Create new folder dialog box. So just name your folder and hit Save. Once the new folder is created, you can select the files you want to put in it and just hit move to link that you will see in the top right corner. This will open up a new window where you can just hit Move to move the files. Or you can quickly create a new folder using the link you will find in the bottom-left corner. So next we've got shared with you. So if someone shares a file with you, it will be shown here. We also have managed links. So when you click on this link, you'll be redirected to your Adobe account. More specifically to a section where the fonts you shared will be visible. And under that deleted tab, the files that you removed will be stored here. Just in case if you change your mind and you want to bring them back to life, to do that, just select the file and it will be given a choice to restore or deleted. Under the artboard presets, you can choose one of the predefined files with art board presets. If you click on any of them, you will get a file with the default art board. If however, you click on a little gray arrow on the right, you'll see a list of other available artboards. Alternatively, you can select the custom preset and just enter the width and height values below. And in the recent time, you'll see all the files you've been working on recently. Just click on one to open it. As you can see, these home screen has been greatly streamlined to let you work on your files and share them without thinking about it too much. If you just get into this kind of understanding that what you click on the left, effects, which you see on the right. Working with this screen will become very, very easy and intuitive. 7. The Workspace: Let's now take a look at XD is workspace. After all, this is the place where you will spend the most of your time with the program. So if you've been using like any other piece of design software before, especially latest Adobe's pieces of design software. Understanding x, this workspace might be a bit easier for you. It's a very logically divided into two main parts and greatly streamlined, Maybe sometimes a bit oversimplified to my taste. But it all makes the design process a server not as smooth as possible. So on top, you have the main menu. And here you'll find all the main commands that are separated in two tabs like file, added, object, plugins, view, window, and help. And of course their names correspond with what you might find once you click them. Of course, in the middle we got to the, you know, the main design workspace, that is the first workspace that you will see once you start a new file. And of course, all your design tools are here. But of course we also have the prototype workspace. And this workspace will allow you to add and control the interactive options you can assign to your design elements. And we also have the shared workspace. And here you'll find all the tools and options that are essential for sharing your project. We also hear, like in the top right corner, you can see this preview on a device option. And you can connect a mobile device to your computer. And then using this function, you can preview your design. Now we also have this preview in XD button that will allow you to preview your design with added interactivity. Your project will behave as if it was viewed live in a web browser. And on the right, you will see like contextual options and settings that are called Property Inspector. So this pain will change every time you select a different design element, tool or workspace. So it will only give you the options and settings that correspond with the element or the tool that you select. So of course, in the center you will have your artboard and everything that's on it will be rendered in the final file. Everything that falls outside will not be visible once you export your file and everything that's outside your artboard, you can see it as simply your doodles, something like that. The artboard basically lies on a pasteboard. It's basically a place where you would keep your design elements like your images, your, your, your icons or illustrations, maybe some pieces of text, things like that. Here at the very bottom left, you have your plugins manager. And this is where you can manage all your, all your plugins, which by the way, we will talk about later. Then going one level up, we have our layers. And of course, you will see here all your elements like artboards, groups, design elements, all those things. We also have right here that document assets. And here you can add and manage colors, character styles, components, and videos. And of course, we have our tools right here. But there are some tools that are not visible here, but that you can access using keyboard shortcuts. And again, we will talk about those later. So getting to know the workspace is essential for a quick and productive design process. I encourage you to spend at least a bit of time with it just to get yourself familiar with the most important aspects of x, this workspace. 8. Designing vs Prototyping in Xd: When working within a team of designers and developers, or when just not working solo with your clients, It's a very important thing to be able to present how you would want your design to interact with the users. And designing, applying those interactions is called prototyping. So in a nutshell, when you're adding visual elements of your project, you are designing and when you're adding interactions between those elements, or most importantly, between the user and the design elements. You are prototyping and Adobe XD gives you the ability to do both. Using the design workspace. You can add visual elements to your project. And using the prototype workspace, you can present how you envisioned the interactions between the user and your designer. And this can of course greatly help in passing your ideas to people who will develop your project or just to the client if you are going to be developing that project yourself. So prototyping is really important from a UX point of view. I mean, think about it. You, as a designer are not only responsible for what your project will look like, you are also responsible for how your project will work in real world. So that's why it's a good idea to think what will happen when someone clicks on a button, tabs on a link or scrolls the page down or up to X d is prototyping tools will help you in visualizing all those events, including hover states, transitions, clicks, and more. And that in turn, we'll let others give you feedback on how they want the projects to behave. And it can be a great time-saver. Now in XD, we've got the ability to design and prototype in one piece of software. So as we design our project, we will also, as we go and the interactivity features to it. Now, as a Wiseman said, a journey of a thousand miles begins with a single-step. And our design journey begins with creating a new file. So let's do that next. 9. Creating a New File: Everything we will be doing from now on will allow us to start designing our site. So let's take a look at how to create new files in XD. First. You can do it as we already know from the home screen. And you basically got three ways of doing that. So you could click the New File button and that will quickly create a default document with a default art board. You could use one of the predefined art boards to create a new file with that specific cardboard. Or you can simply enter custom values for width and height to create a document with a custom artboard. Now whichever option you choose, you will see a new file popping up on your screen. And just, let me give you one word of caution here. If you create just one file and for any reason you decide to close it, you will quit the program. You won't go back to the home screen. Instead, you'll have to restart XD. So if you are working on a file, you want to close, It's better to first click on the Home button in the top left corner. Then create a new file and only then close the previous file. This will let you keep the program running and cancel out of the file. You don't need anymore. The fastest way to save your file used to press a keyboard combination of control plus S. If it is the first time you're doing it, you will see a dialog box popping up asking you to name your file that will be stored in the Creative Cloud. You will see the same dialogue box when we trigger the Save As command by pressing control plus shift plus S keyboard combination, or by using the appropriate menu option, you can find under the File menu. And files saved like that will get stored in the Creative Cloud. You could however, save your files on your local hard drive. And to do that, you should choose the save as local document menu option. Or you could use the key combination of control plus shift plus Alt plus S. And you may see a message telling you that saving your file locally on, we'll let you use some of the options you would normally get. And that's okay, just hit continue and you'll be able to save your file or a file that you saved locally will not be visible in the your files tab in the home screen. It will be however, visible in the recent tab. By the way, you can also quickly save your file to Creative Cloud by clicking on your file's name in the top part of the document window. So there you go. This is how you can create and save files in XD. As you noticed, all of them come with art boards, which are really important in designing for specific screens. That's why it's essential to understand how to add and manage artboards, which by the way, we will take a look at next. 10. Managing Artboards: Now, understanding how to work with artboards is essential for fast and smooth design process. In XD, any document will have at least one art board. Although most often you will want to create more than just one. Your art board tool. We'll have a default name based on its size. You can, however, change it either by double-clicking on its name above and just typing in a new name, or by renaming it in the layers panel. So since we will be designing for web, our art board must be tall enough to accommodate modern, vertically long layouts. And by default that quote, unquote art board created in XD will be at 1920 pixels by 1080 pixels, which is not enough. We can of course make it a bit longer. So we can, in the Properties Inspector, simply enter a new size or just grab the artboard by its bottom handle and drag it down. What's a bit peculiar about managing art board size is that once you have some design elements added, you cannot access the artboards properties by activating the artboard tool. If you click with it anywhere in the document window, you will simply add a new art board. So to get to the artboards options, use the select tool and click the Artboard sname or simply no selected in the layers panel. Since we are on the subject of adding new art boards, here's how we can do it. We can duplicate an existing art board by pressing Control or Command if you're on a Mac plus d keyboard combination. And this will make the new artboard sit beside the previous one. With the Artboard tool selected. We can also click anywhere on the pasteboard to add a new artboard. And the size of this new art board will be based on what template you select from the properties pane. On the other end of creating art boards, allies, deleting them to put this somewhat poetically. And that's as easy as simply selecting an odd word and hidden either that delete or the backspace key on your keyboard. Alternatively, you can right-click on an art board sname in the layers panel. And from the context menu, simply choose Delete. As you can see, art boards are an essential part of the design process here in XD, each new document will come with one, but you can fully add, modify, and remove them at any point. 11. Layers: The concept of layers is so common in the design software world. That is really hard to imagine a program that wouldn't be implementing it, at least in some form. And of course it's the same story with XD. The layers panel should be on by default. But if you can see it in your workspace, you can activate it by clicking the little layers icon in the bottom left corner. You will also find a menu item called the layers in the View menu. There also comes with a handy little shortcut of Control or Command. Plus. If you take a look at the layers panel, you will notice that the top level of your assets organization is your artboards. So once you click on any of them, your objects will be revealed. And each object you create will get a generic name. Based on its nature. I'm in an object created with the rectangle tool will be called a rectangle. And object created with the ellipse tool will be called ellipse, etc. It's always a good idea. I mean, it's a great production practice to rename your objects so that you can add a later stage of the design process. Easily recognize specific elements within your project. Another good production practice is to group similar elements and then rename the group so that their names indicate what is being put inside. You can rename an object or a group by either double-clicking a certain element's name or by right-clicking and selecting Rename. And of course, you can easily delete a layer by pressing either one of the Delete or Backspace key on your keyboard, or by right-clicking and selecting the delete option. You could also duplicate an item either by choosing the duplicate option from the context menu. So by right-clicking on that item or by using the Control or Command plus d keyboard combination. In the layers panel, you can manage all of your art boards, groups, and elements. Handling them is a very important part of the design process. So it's a good idea to get yourself familiar with the panel. Especially that once we start designing our project, we will be referring to the panel very, very often. 12. Tools Overview: Let's now quickly look at the tools you have at your disposal in Adobe XD. Now we won't be going through them in detail just yet. We'll do it once we start the design process, but we will quickly discover what you can do with them. The tools panel sits on the very left-hand side of the workspace. As we already briefly mentioned, every tool is named in a way it makes easy to guess simply what it does. So first we got the Select tool. To move an object. First, you have to select it. And you can do it with the Select tool. But this still does much more than that. It is not the quickest way to resize and rotate your objects. So to do that, simply move the cursor close to the selected objects, anchor points, click and drag to begin that transformation. And with this tool, you can also change the roundness of the curves. Inside a selected object. You will see little round markers. So click on one of them and drag to round all corners at once. You can also click and press Alt or Option and drag to round only the selected corner. Additionally, the Select tool allows you to control and check the distances between objects. All you need to do is to select the objects in question and then press the Alt option key to see guides and measurements indicating that the distances between the selected objects and the art board. So next we got the Rectangle and the Ellipse tool. And I am talking about them together because they work basically in the same way. Of course, the rectangle tool allows you to create rectangles and the Ellipse Tool, ellipsis, about the way you can create those shapes is basically the same. If you're just press and hold on the Shift key, you will create an old perfect ellipsis, or basically squares. If you press and hold down the Alt key, you'll start that, well, the transformation on the creation from the center point. Next up we got the polygon tool. And you can use the same keyboard modifiers to create triangles, squares, pentagons, etc. The major difference is that you can press the up or down arrow keys to increase or decrease the number of sides. With the polygon tool, you can also create star shapes. So to turn a polygon shape into a store, you have to click and drag the star Rachel handled in the upper right corner of the shape. So drag it inwards and change the number of sides. So next we've got the line tool. So if you just click and drag, you will create a straight line. And if you hold down the Shift key, you will create a line in like 45 degree increments. If you hold down the Alt key, you will start the creation process again from the center point. Next up, we got the pen tool. And the Pen tool like the famous battle. It's one of those tools that you know, you really have to use it to understand its benefits. It's learning, it might be a bit difficult, but there are some things we can do or understand in order to make this whole learning process a bit easier. So here in XD, you can make it active either by clicking on its icon in the Tools Panel or simply by pressing the P key on your keyboard. So to make things easy for you, just remember that you can click to create connected straight lines. You can click and drag to create curves. You can click and then click and drag. To combine straight lines with curves. You can use the pen tool when you need custom shapes that lets you cannot create with any other of the available tools. Next up we've got the text tool. And of course, handling text is one of the key skills. You will need when working on your designs. And there are basically two ways in which this tool works. So first you can click to add a single line of text or a single word. And this way works best when you just want to add a logo text, a link or an like an artistic piece of text. You can also click and drag to create a text field. So if you need paragraphs of text, this way would be your best option. Now, unfortunately, in XD, we cannot create a text field and simply use an option that would allow us to populate the field with some dummy text, like some Lorem Ipsum text. Instead, we would have to use a plugin for that, but we will talk about that later. So once our artistic text is set, of course you can still adjust it. You can just double-click inside to enter a new text. Or you can also drag the bottom handle to quickly change the size of that text. If you drag the handles of the paragraph text, you will change the size of the text field, not the text itself. Now handling typing x D by using the text tool is just a tip of the iceberg. We will look at the subject much closer. Once we get to the design stage of this course, we also have the art board tool and as we already know, each new document you create will come with an artboard. Unfortunately, you cannot define how many artboards you want upon creating a new file, but you can add and of course remove them later using the Artboard tool. And you might be wondering why you would need more artboards in one document. Well, in XD, Artboards can simulate experiences and screens. So an experience would be your design put onto an art board, simulating a mobile phone or a tablet. And a screen would be an instance of your layout within the same design, such as a blog sub page, an about us page, et cetera. And you can assimilate all those with artboards. So the easiest way to add an art board is by clicking with the Artboard tool anywhere on your pasteboard. And if you click above the existing order board, the new one will be added there. If you click on the right, the new artboard will pop up on the right and so on. And then in the Properties Inspector, you will see all the available presets you can use to create your new artboard. So simply select one and then click anywhere within your document to create an art board based on that preset. As you already know, you can quickly see an access your art boards in the layers panel. And all of them will get generic names that can be changed there. Additionally, when you press a little art board like icon to the left of the art board sname. You'll be directed to it and you can start adding your design elements there. Next we got the zoom tool. And with that tool you can zoom in or zoom out on a specific area. So with that tool active, just click once to zoom in, alt, click once to zoom out, or click and drag to indicate an area you wish to zoom in on. Since we are talking about zooming, here are a few handy shortcuts you might want to use. So if you use the Control plus 0 keyboard combination, you will fit all your art boards on the screen. And if you press Control plus one, you will set the zoom level to 100. If you use Control plus two Keyboard Combination, you will set the zoom level to 200. And if you press Control plus three keyboard combination, you will not set the zoom level to 300, but it will zoom in and center on a selected object. And by the way, if you want to quickly but temporarily switch to the zoom tool, press and hold down the Control or Command if you're on a Mac plus spacebar. This will let you zoom in on a selected area. And if you add the Alt or Option key to it, you will be able to zoom out. Not all available tools are shown in the Tools Panel. For instance, the hand tool. If you press and hold down the Spacebar, you'll make it active. And then if you click and drag, you can move the workspace around. And there's also the eyedropper tool, which allows you to pick up a color value from anywhere within your workspace. And the one thing that you need to remember about it is that before you can activate it, you need to have some other objects selected. Because if you do not press in the IQ, won't initialize the eyedropper. Briefly speaking, the eyedropper tool lets you quickly add a custom color to the, to the selected object. However, this is not the only way you can use the eyedropper tool. Whenever you have an object selected in the Properties Inspector, you will see little eyedropper icon snacks to the fill and border options. And just click on the icon and you'll be able to sample any colors you like. The tools in Adobe XD are really simple to use. What you get is basically what is essential in a typical design scenario. And this simplification means that if you want to perform some more advanced operations like join paths or objects, you will have to use the properties inspector or the plugins, which we'll talk about next. 13. Adding and Managing Plugins: If you're not familiar with the concept of plugins, here's what you need to know. So plugins are basically small apps that expand the standard functionality of XD. You can install, disabled or uninstall them. Of course, they make your design life so much easier. So for instance, you can add free or paid stock images to your project. You can add UI elements like icons, buttons, sliders, pieces of texts, all those things. You can even add whole block templates. About Me page is homepages. And you can add custom assets like illustrations. You can find color inspiration, generate HTML and CSS code, and so much more to manage the plugins, XD uses the Creative Cloud desktop app. So once you select the plugins and then browse plugins or managed plugins if you prefer. You will see that app popping up. When you open this app, like this way, it will essentially turn into a plug-in browser. So note that by default you will see plugins for all programs. But you can check the XD mark on the left. So you're just going to see the plugins created just for this app. And on the right you'll see all the available plugins. So just click on it to quickly install that plug-in. And of course, if you're not sure what that specific plugin does, you can just click anywhere within the car to see more details about it. So once the plugin is installed, it will be visible both under the plugins menu and in the Plugins panel. So once you no longer need or simply, you don't like that specific plugin. You can either disabled or uninstall it. So to do that, head back to your plugins browser. Just to find the plugin you no longer need, and just click the little three dots icon at the bottom, and you will get the options to either disabled or delete that plugin. Plugins are a great way of expanding XD is designed capabilities. And with time you will definitely find the ones you will like the most and the ones you will need almost with every design project. 14. Plugins You Are Most Likely to Use in Your Designs: Well, I've already mentioned that plugins allow you to expand XD abilities in numerous ways. So let's now take a quick look at the ones I would recommend to at least get yourself familiar with. By the way, all the plugins that I'm going to mention. Now you can just freely download them. They are all free. You can install them from the x, this plugin, so Repository. So the first one is icon's for design. And this one allows you to add various icons to your layouts. And I got to say, I cannot imagine a web design project in which you would need to use icons, especially for social media links, things like that. So it's quite often a bit tedious to search for the right icons and then to add them to the layout. And this is where this plugin comes into play. Here to search for icons, just enter any keyword you want. And you will see a list of matching diagonals from various free icons, repositories. And once you've found what you were looking for, just click on it and you'll see that icon popping up onto your art board. And of course, all those icons are editable so you can change their color, size, rotation, etc. So the next one is called the quick mock-up. And it lets you quickly build layouts using a single design elements or even a whole templates. First, you need to just pick a theme for your mockup. Once you do that, you will see three separate libraries. So the first one is elements that holds like icons, buttons, labels and things like that. The next one is called assets with the illustrations, charts, and shapes. And the last one is called templates. And this one holds like hold designs for single pages like the homepage, the blog page, the about us page or the contact page. So what you just need to do here is just to click on any asset to put it onto your art board. This way you can easily build sections within your layout, but also hold pages and on just to quickly visualize what your design might look like. Well, this plugin is also a fantastic way to build your wireframes, which are not familiar with the concept of wireframes. They are just like very schematic representations of your layouts elements. And they just let you visualize the design and presented to the client in a very, very, very simplified way. Just to focus first on user flows rather than colors, fonts, images, etc. Now for wireframing purposes, I would suggest using templates from the minimal theme. They are stripped of colors. They look very streamlined. I need quite elegant. So your client can understand your vision like the whole UX. So it's more important to understand that rather than the artistic elements of your design. And adding like whole templates, doesn't of course mean that you cannot change them in any way you would like. You can still add different assets or remove the elements that you don't need. I just think that adding a whole templates will help you in understanding the whole concept of wireframing and make the process of building these schematically user flows just know much faster and easier. So the next plugin I really like is called UI Faces. Almost every business side has a section where they present some team members or some testimonials. Those sections usually come with cards containing a photo and a short description. And this plugin is absolutely great in generating and adding avatar photos in those situations. The way it works is extremely simple. So first, you have to have a shape, not a group created and select it. And this will be like a container for the image. Then just choose which your repository you would like to use and click Apply randomly if you're working only on a mock-up version of your design. This will pull an image from the repositories database and paste it right inside your layout. And you don't even need to re-size or adjust anything. The plugin will do all the heavy lifting for you. Of course, you are not limited to certain just some random photos. Sometimes when you want to add a photo of a woman, you will randomly at a photo of a man and vice versa. And that might be a problem. So that's why you can use the Select Photos option to choose an image you like from a new window that will pop up. In the new window, you will see lots of random portrait photos. Unfortunately, you cannot change the repository from which the images are being pulled. So if you don't like any of the ones you see, you would have to go back and select a different source of images. However, if you do like a specific photo and you want to add it, just selected and press Apply. And that photo will be added to the selected image container. The next one is called Lorem Ipsum, which is a very generic name for a very generic plugin. And I gotta say that adding dummy tax is something so common in a typical design scenario. I'm really quite surprised. It's really hard to believe that in XD, we don't have any native functionality for that. So that's why we have to use a plugin like, like Lorem Ipsum. It works in a similar way to UI Faces, as in. You have to first select a rectangle to be able to add some random text. And once you do that, you can choose to add a piece of Lorem ipsum, or you can open up a new window by selecting fill with placeholder text. And the edit texts will be completely customizable. You can change its size, color of font-family, line-height, etc. So the next one is called Pexels, and it allows you to search the Paxos.com repository of free stock images. And it's one of the most popular websites where you can find. Now we're really high-quality and free of charge photos on basically any subject. So once the plugin is installed, you can just enter your keyword, select a shape or you want to add an image, and then just click on that selected picture to add it. And as with the UI Faces, that shape that you selected will basically work as an image frame that will constrain that added picture. So the next one is called onDraw. And it's absolutely one of my favorite plug-ins because the Android itself, this repository, lets you search for custom, professionally looking illustrations. And in a lot of modern designs, you will notice custom illustrations in the hero sections about our sections and almost any other section. I think that those illustrations at a lot of personality to web layouts. And the illustrations will find here are free and even attribution free. And you can use them in your personal and commercial projects. So all you have to do here is to enter a keyword if you're looking for something specific, of course. And then just click one of the illustrations to download it to your clipboard. It's not going to be added directly to your art board once you click that illustration. But to once it is downloaded and it sits in your, in your clipboard, and then you can simply paste it anywhere you want on your art board. And additionally, you can select a primary color to match the illustration with the color scheme of your layout. These are the most common plugins you might want to use in X d. Surely there's plenty more to choose from, but that's up to you to explore and decide which ones you will need and which ones you will skip. The ones that I showed you here will definitely help you in adding custom assets like images, icons, and texts, which are essential in any layout design. 15. How to Use the Document Assets: We've already talked about using layers and plugins in XD and in the bottom left corner of the main window, you will also find libraries. Within those sit your document assets. And in here, you will find the taps for missing fonts. If there are some fonts, fonts mess in your document. You will see the names of your fonts that are not installed on your system, but they are being used in the document. Will also find the colors with color codes used in your document. Then you'll have character styles with font families in specific colors and sizes. You'll see components with the sections of your layout. And we'll also find videos that contain videos used in your document. So right-clicking on each of these assets will reveal a slightly different looking contextual menu that will allow you to perform different actions. So for instance, if you click on the missing fonts asset, you will find a replace font option that allows you to replace funds that are missing from your document. Of course, you can do it with a different font. And once you do that, they're missing fonts tab will disappear from the document assets. You will also see a highlight on Canvas, which will allow you to quickly find the specific assets within your document. You will also find a apply fill color or apply a border color. If you right-click on a, on a color added to your document assets. And that will simply allow you to add that color as a border or a fill to a selected item. And of course, on top of that, we can perform more standard options here like renaming, deleting, or simply grouping. So what you really need to know about Document assets at this point is that this panel is a great way of simply organizing your project and everything you have in it. Now sometimes, especially when you're creating a design that requires a lot of different pages, colors, fonts, components, working quickly and effectively might become a bit difficult. You know, it's gonna be difficult to control all the assets that you have within your document. And the document Assets panel will definitely help you in keeping your project as consistent as possible. 16. Quick Introduction to Design Systems in Xd: Design systems are a great way of making your design and consistent, not just throughout all of its parts, but they also help other team members in keeping the layouts logical. And they can be quite elaborate and come with an extensive documentation about each and every aspect of any design piece you might design also in the future. But for our purposes, let's just keep things simple. So to build your own design systems, you can use these tools and to store the design elements. You can use the Document assets. In a typical design system, you would have the primary and secondary colors. You would have the typography for headings and the body text. And you would also have various components like buttons, lists, icons, et cetera. So I've quickly assembled a simple, simple, very simple design system that contains those elements. Then of course, you could add as many elements as you would want. But the main purpose of this exercise is for you to understand what I design a system is and how to use the Document assets to manage it. What I did here is I first added some simple rectangles and I filled them with colors that I'm using in my project. Then I've added some typography elements like headings and body text. Of course, using the font that I would normally be using in my project. And lastly, with the help of the quick mock-up plug-in, I've added some components like labels and buttons. So once the design elements are ready, you can add them to your document assets, and the process is super simple. All you need to do is to select the elements you wish to add to the Document Assets. And then click the little plus symbol next to the tab name. For instance, colours, character styles, components, videos, et cetera. And the Document Assets panel will ultimately get populated with the, with the elements that you can reuse within your design. So when we move on to the design part of this course, we will create design elements for our layout. And as we go we'll add the colors, typography, and other elements that we will keep in the Document Assets panel. Design systems are a great end. Most times essential way of keeping your design consistent throughout all of its iterations and on all steps. They don't have to be like super elaborate, but they should contain at least the information about the colors and fonts you use in your project. It's simply going to help you save a lot of time when creating your layouts. 17. How to Choose the Right Colors For Your Designs: Choosing the right color scheme for your next web design is, I guess, along with the topography, the most important one to make. The colors that you choose will be the first thing that will catch the visitor's attention. And if chosen correctly. And they just won't make their eyes hurt. And they won't make their fingers rapidly look for that. Get me out of here. Vast button. There's a whole theory behind the meaning of colors, but I don t think that at this point it's something essential to discuss. In my opinion, the only rule of thumb you should follow his appropriately. All you really need to do is to think of the color you chose is appropriate for the type of service or business you're designing. And then think about it. Would David pinks or yellows look good on a site for lawyers are architects and dark greens are great shot the friendliness or energy of a kindergarten or amusement parks. So unless you're going for some clever and risky marketing strategy here, the answer is an obvious note. So appropriately is one thing. But what about finding a color scheme for your design? Now, that simply works. So luckily, in this day and age you could be totally colored, ignorant and still come up with gorgeous color palettes. Imagine a scenario in which you have a client who needs a website and he or she tells you that burnt orange is the color of their choice now, they just love it. It's an easy color to pair. But you could start with grabbing the color wheel and checking which are the contrast in colors of orange. And by contrast in, I mean, sitting on the opposite side of the color wheel. In this case, you can see that violets, blues, and greens, the darker greens, would be a nice base for your color palette. But it can be even easier than that. You can simply Google burnt orange color palette and just see the image results you get. And trust me, you will get a lot. Once you've found something that you like, you can just copy the image and bring it into XD. And now you can sample the colors and add them to the Document assets. So let's do that now. So once that color palette is paste it in, we can create a rectangle whose width is going to be more or less the same as one color, a color swatch. And now we could just copy and paste the rectangle a few times, just to make the number of shapes equal with the number of colors in the palette. But there's a better way about this. We could simply use the repeat grid for this. And this function allows you to create a grid of multiple instances of the selected object. So to create a grid, just select the rectangle and then hit the repeat grid option. Then let's just drag the right handle to create more anastomosis of the rectangle. If you then place your cursor anywhere between the rectangles, you'll be able to control the space between the objects. So once all is done, just press the ungroup grid button that you will see replacing the repeat grid one. And now we can grab each rectangle, press the I key on the keyboard to initialize the eyedropper tool and sample all the colors that you can add to the Document Assets. I think this is the easiest way to first find the right color palette for your project and then to turn it into your document acids. However, if you want to create more custom palettes, There's so many places and tools you can use and we will talk about them next. 18. 5 Tools to Find the Right Colors for Your Layouts: You know what the web is, swarm and with tools that aim and helping you find the right colors for your next design. And some of them are helpful. Some of them are more confusing than helpful. So here is the list of the tools that I think simply work. So the first one now on our list is coolers. So to me, cooler says decide to go whenever I need an interesting auto-generated color palette. And it's the first tool that you can choose under the Tools menu in the top right. So to generate a palette, simply press the Spacebar and each time you will get a completely different result. However, if you like a single color and you want to use it, you can copy the hex code. But if you want to generate a whole palette around it, just lock it by pressing a little padlock icon. You will see once you hover over a given color sample. Once it's locked, you can press the spacebar again to change only the unselected colors. And of course they will match the one that you chose, the one that you keep locked. If you like the color palette, you can export it by pressing the Export button on the top right. And this will open up a new dialogue box with a plethora of export formats. One of them is Adobe's own ASE, which stands for Adobe Swatch Exchange, which lets you import swatch pallets. And unfortunately, XD doesn't support this functionality. So I would just recommend exporting the palate as an image and create a swatch libraries inside XD. If you choose the image as your export method, you will see another window asking you to provide a name for your new palette. It will essentially become your images file name. Once you save it on your computer, you can later import the image with the color pallets into your XD projects. Course comes with some great color picking tools. Of them. I think I liked the explore pallets the most. So in here, you can find lots of ready-made color palettes to get inspired. You can also find a palette by searching a specific color name, hex code, or even a topic. Coolers that coal could really be the only place you would have to visit in order to get all that you would need. In terms of generating color palettes or single colors or swatches or gradients, etc. But of course, there are also other sources worth visiting. One of them is called the Color dot. And this one is really fun. You can quickly create a color scheme using your mouse or touchpad. So here just drag left or right to change the hue and drag up or down to change the lightness. And you can also scroll up or down to change the saturation. So if you're happy with the color, click to save it and repeat the process with another color. And the tool will only show you the colors that work well with the one you chose before. And of course, you can repeat the process as many times as you want. In terms of export in your colors, I guess it would be best to just save your screen and then copy it into your XD project because this tool doesn't come with the export in features like colors.com. The next one is called palatable. And here you can choose your own color or just click on the dislike button. So the program chooses that color for you. And if you like it, click the Like button and see if the next color Let's suppose to match the previous one matches your taste. Of course, you can also remove a particular color to shrink the whole palette. So the next one is not actually a like a web app, but it's an XD plugin and it's called colors in scope. It's really a fantastic little tool that help and information you can find here is basically invaluable. For instance, you can browse through the library of ready-made color palettes. You could also let the AI generate color palettes for you. You can check the accessibility of the color you select it. You can also generate gradients and gradient shades. You can also add color palettes used by some of the world's top brands. Basically, what you can do here is you can click a specific functionality and then just add colors. Or you can check some additional information provided. So for instance, if you want to add a color palette, click the color pallets option, and you'll see lots of predefined color palettes. So we can just copy a pallet or simply click a little plus icon in the top-right to add the palate to the art board. You could also just click on edit this palette to color acids button. And that palette is of course going to get added to your document assets. So colors in sport is a fantastic plugin. To add and create color palettes. In one little app, you get tons of options and helpers. So the last one on our list is Canada colors. And I think you've probably heard of Canva, but have you used their color tools? You can really create and view color palettes here. You can also discover the meaning of each chosen color. So now all these colored generating tools are just they relocate, humble representation of an era of color resources you can find online. Most of them will work pretty much in the same way. So if you just find your favorites, just stick with them. That's really all you're going to need. 19. How to Choose the Right Typeface for Your Websites: Now that you know how to choose the right colors for your designers, it's time to learn how to choose the best fonts for them. Before we start though, there's one important thing to know, the difference between a typeface and a font. So a lot of people use these terms interchangeably, which is, which is wrong. And the difference is actually very easy to understand. A typeface is a family of specific weights and styles. For instance, input surf. And they found is a particular instance of the typeface. For instance, input serve medium. Well, that's easy, isn't it? The whole thing gets a little bit more complicated when you try to classify the type faces. But luckily, there are just four major variants of typefaces. So the first one is serif, which are typefaces and including letters with those tiny little ornaments. Like Laura Libre, Baskerville, or just plain old Times New Roman. There's also san-serif typefaces, which includes letters without those ornaments, for instance, Open Sans, Roboto or Montserrat. We also have slab serif with serifs that are really bold and a thick, like slab or Roboto Slab. And there are also Script typefaces that simply no resemble handwriting like grad, Paris, yen, or America's see. So these are the major categories of typefaces. But there is also another one that in a way relates to all of them. And I'm talking about to display type faces. But one of the biggest mistakes designers make is that they use display typefaces for long passages of text. Whereas they are intended specifically for headings and maybe subheadings. For too many designers use these typefaces for the main body text, which essentially makes it legible. That's not what you should want for your designs. So now you're probably wondering, okay, but which fonts should I use? It all we could simply try to find the best traits of typefaces that should, that should help you in finding the right typeface for the job. The first one will be legibility. I mean, just choose the typeface that is simply legible. Your website must communicate very specific pieces of information. Of course, unless it's just an art project. So people must be able to read your message and you don't want to make it hard for them. The easiest test is just to make the font smaller to around ten points and check if you can instill distinct them, the single letters, for instance, lowercase e from a lowercase c. And also quite often the, the capital I might look like lowercase l. General, more open characters will be more visible in smaller sizes. And if so, they will of course, also be visible in bigger sizes. For instance, in headings. Now for the headings, you can use either the display typefaces or body text typefaces. Though both serifs and sans serifs and even scripts will work fine. It's more about your design choice here rather than finding a perfectly legible font. Now headings are usually quite big. So you shouldn't encounter problems with legibility. And again, please don't use display typefaces for body text. Longer passages of text needs a typeface that is first and foremost legible. And secondly, goes well with your headings and design goals. Some people tried to argue that for screen reading, san-serif typefaces are better and a serif fonts are better for off screen reading, like books or pamphlets. And I don't think it's that simple. I mean, if a typeface can be called legible, it means it's good for screens and pages. Serif or sans-serif. If it's easy to read, you can use it wherever you want and your choice will be truly based on the aesthetics you are going for. Having a saddle that are there any type faces that you can use and be absolutely sure that you made the right choice. Well, guess, but the method you're about to learn comes with a little bit effective trap. So say for your design, you want to use one of the Google Fonts. And once you decide whether you want serifs, sans serif, or scripts, you can refine your search by popularity, choosing most popular on the right. This will sort the typefaces by the number of downloads starting from the highest value. The most popular typefaces will be the first ones on the list. Also, some of them like latter, Open Sans or rebuttal, were commissioned by Google and created by experienced, like well established designers. So you can be sure that those type faces are simply good. So if those typefaces are the most popular, they should be the best, right? Well, they could be bad. They can also be heavily overused. Take Lobster and Lobster Two, for example, is a really cool typeface, but it has been used so many times that it's been called the New Comic Sans switch. At the same time is an indication of its success. And the reason for means, of course, you're not limited to Google fonts. You can also visit Adobe fonts where you will find typefaces from Adobe themselves, but also from many type designers and foundries. So you can click on the name of the typeface. You like to see all the variants available. So in order to add it to x dy, click on activate font in the top right corner. And ultimately you will see those fonts added to your fonts library inside XD. So these are the basics of good typography you can apply in your own designs. But what if you are a complete topography new and you don't know which font or typeface is. Go well together. There are two sources I tend to use the most often whenever I'm in doubt or I just need some inspiration. And the first one is called Font Pair.co. And here you'll find a font pairings, font inspiration, and lots of examples of different fonts users. The fonts you'll find here are directly downloadable. But you can also check out the typefaces creators sites to learn a bit more about them. The other source I use is called type woof.com. And this side has a lot of great resources and font classifications, like a top sans serif fonts, top serif fonts, top Adobe fonts to Google fonts, etc. So if you are ever in doubt, if the typeface you chose his good, You can just consult type of.com. So I think we've covered quite a lot in terms of finding the right typefaces for your projects. Now you know the distinction between san-serif serve as script and slab serif typefaces. You know the difference between displaying and body text fonts. You know where to find fonts for your projects, and you know where to go if you are ever in doubt about your font choice. So good typography is one of the key elements of a successful website layout. However, there are some other elements that can make or break a good design. So let's talk about them next. 20. Best Practices of Modern Web Design: With each new web layout you create, your skills are gonna get better. We will create faster. You will get into some healthful habits. But there are some things you could employ in your workflow right from the start. And I'm talking about the best practices of web design. So first of all, remember about streamlining the experience. Streamlining your design for the best user experience should be the rule of thumb of your project. Not just for web design projects for that matter. Now, this may sound harsh, but most people visiting a website you designed won't be coming to see all the beautiful colors and fonts you use. We'll visit because of a specific service the website provides. So if the user cannot get what they want quickly, they will go somewhere else. And really businesses nightmare in terms of their websites, is the high bounce rate, which means that users leave their oocytes very quickly and don't interact with it as expected. So that's why it's so important to present all the unnecessary elements and data in an easily understandable manner. So what does it all mean in practice? Well, it's a good idea to minimize text, for instance. So create short, like two or three sentence paragraphs that will be easy to read both on desktop and mobile devices. Also, try not to use more than three to five colors and maybe two additional for hover states. And definitely avoid clutter. So just remember to make each section about one idea and try to minimize the number of call to actions to one per section. So simplicity is the key to lower bounce rates. A simple design will be easier to develop and require less resources to load on the user's device. So next up we've got consistency. So once you've found your fonts and colors, just stick with them. There's nothing more unprofessional than buttons and pieces of texts that have different colors across different pages of your site. So therefore, it's a good idea to use the Document assets to keep your text styles, colors, components, and fonts in one place. We also have visual hierarchy, and this one is closely tied to the notion of usability. If we agree that the main goal of our design is to encourage the users to perform a certain action on the website. We have to make it easy for them. So we can do it for instance, by the right use of colors, positioning variable font weights, adding easily clickable buttons, etc. You should also remember about mobile friendliness. Most designers claim that when they create their layouts, they do it first with a desktop versions in mind. I do I do it like that myself. I guess it's just easier to work like that instead of first coming up with the mobile version of the UI. But that doesn't mean that you should neglect the responsive versions of your design. Now what most of the web traffic coming from mobile devices these days, it's an absolute master, keeping in mind what your design is going to look like on smartphones and tablets. And a human even concern taking the mobile first approach, meaning first designing the mobile version of the website and then building the desktop version on top of that. So what would make a design mobile friendly? So since the cost of mobile data is still an issue in many parts of the world. Try to make your design light on mobile. It means that maybe your site won't need that many images or videos. One is displayed on a smartphone. Maybe the slider won't be as cool and effective on a smaller device as it is on bigger screen. Also, you might need them more whitespace or bigger gaps between elements. So they are just easier to tap. And also the text might need some adjustments in terms of its size, positioning, and maybe line-height. So these are the things you need to consider when making your design mobile friendly. So we also have accessibility, which is closely tied to the whole experience. The users are getting it from your site. And if you are designing your web lead with accessibility in mind, you have to make it, I mean, the layout accessible to all users. If you want to get deeper into the subject, you should Google web content accessibility guidelines. However, you may use the following four general guidelines to help you understand this topic. So an accessible website would be first perceivable. So users must be able to perceive your content using one of their sentences. For instance, people with vision impairment might have problems with seen the required fields in your contact form if they are only marked with a red border. So something like an asterisk and a piece of texts like required should be added. Also, users must be able to operate the UI in some way. For instance, by clicking the buttons, stopping or pausing the video with some provided controls. Using at least two forms of navigation systems, like maybe top navs, photo links, or even breadcrumbs. Also, the content must be understandable to the users. So, for example, the menu style and positioning should be consistent between different pages or views of the page. Also, the site needs to be, needs to be robust, which simply means that the signs should be compatible with current browsers, but also its future versions. But that's more of a web development challenge. And there are certain conventions when using a website. I mean, these days, users are quite used to operate in websites in a specific way. For instance, they used to using the menu system. And that includes the hamburgers style mobile menu that can be found in the top or the left side of the page. They are used to seeing the logo in the top left or in the top center part of the page. And they are used to click in the logo. And of course that can be an image or an image plus I taxed and that well, that image, that logo, when it clicked, is going to take them to the homepage. They also understand that links have when you hover over them or click them, they are going to change their appearance. They also understand a sticky navigation, which basically appears when a user scores, scroll this down on the page. And they also understand something like a bag to top pattern that will show up when the user scrolls the page. And then that's when a click will, will take them to the top of the page. All of these rules may seem at first like a huge limitation to the creative process. But I think that there's plenty of room to design original layouts while making them easy to understand for the users. 21. Getting Ready to Start Designing: Since I assume you're an aspiring web designer, and of course the next D user. I thought that it would be a good idea to create a design that will simply showcase your skills. And you can use the layout to you will ultimately create here as a base for your own website. If you want to become a designer, freelancer, or portfolio elements. If you want to get a job as a web designer. That's why we will add the elements and sections that are most common in creative designs that are also a bit more business oriented. I just want to find the right balance between including the things you need to know about XD and things that are interesting enough for the people who would want to hire you. So we will design of the desktop version of the front page along with it. So mobile version, but also a single blog post page. And of course it's mobile version two. And by the way, it's a good practice to utilize something I call a design medley. So once the desktop version of a specific section is done, I think you should create its mobile version right after this, we'll let you control your design much better and simply keep it consistent. But of course, we will also prototype our design, which means that we will add interactivity to it. Just to mimic what it would look, look like and behave like if it was like a live website. So by the end of the design and prototype process, you should have your own project created. And not more importantly, you should understand how to build a complete XD web design project. And I do encourage you to experiment. I do encourage you to treat this design as like a pointer, like an example that you could use for your own design, your own variations of this design. 22. Let’s Create a New File First: So I'm here in XD on the home screen. So let's start with creating a new file. Of course, we could use just as like a default web 19201920 preset, but I'm gonna go with a custom size. I think that we can start with like 1920s in width and 4 thousand in height. And I'm just going to click on this guy. And of course, of course, as you already know, you can always just grab this bottom handled right here and change the the size of your document and notice how it affects the size of our layout here in them. In the Properties Inspector, of course, if we just grabbed this guy like this, it will also affect the width. And by the way, we are doing it with the select tool. So as you can see, this tool is quite powerful. You can transform objects with it, select the objects, of course, and also you can grab. But of course, provided if it's, if it's empty, you can grab an art board and you can just change its size like this. You can make it bigger, you can make it smaller. Then of course, I want to go back to my previous size so differently, I need to use the 1920s because it's like, you know, like a standard full HD. Well width. And I'm going to go back to 4 thousand like that. Another, I think really, really, really important thing to understand here before we start designing anything is that you can use the grid layout right here in the Properties Inspector, if we just know, trigger it, you can see that we have these all these. Let me just zoom back. We've got all these columns that will simply allow us to decide how ultimately wide our elements are going to be or our designer in total. And of course, it might help us in positioning the elements within our design. Now, this comes up list based on like a 12 column grid that you can, you can see like in Bootstrap for instance. And if you're not familiar with Bootstrap, is simply a like a development environment, is CSS and JavaScript environment that is very, very popular in the development world. And that, that system uses 1212 columns. And of course, you can change the color if you would like to do that. And you can change the number of columns to something else if you prefer. But I think that the way it looks, It's pretty standard and I wouldn't invite I wouldn't advise width like no messing around with the number of columns or with the gutter width. And by the way, the gutter width is like this margin between these two, these two columns right here. So once we start to create in our design elements, we can, for instance, like attached them to the left, like the most left column and the most right column. But honestly, I am not that if you take a look at the designs like contemporary designs, they are not strictly be an attached to all these internal columns. Like more and more designs like web design 3, you will see that a lot of elements like overlapping each other. They are not like, like glued to any structure, to any any kind of like a grid layout. But it's a, it's a good indicator of how, how wide your design should, should really be. And it might help you in position in your elements if you're having problems with their positioning them in relation to each other, unlike the other design elements. But this is optional. I am going to be coming back and coming back to this layout option. Now during the design process, I think it does help a bit. And if you want to follow along, you can, you can, you can always keep this layout like these columns and on, if you don't, you don't have to. But just so you know, I am going to be referring to these, to these columns like during the design process quite a lot. So of course it's a good thing to save our document. Maybe I'm going to save it locally because I want to share it with you like later, later on. So I'm going to save it as a local document. And I'm going to call it like a new design them for students, of course you should name it, give it a name that corresponds with your, with your, with your own design. So I'm just going to save this guy. And there we go. We can, I guess we can start with our header section. So we will start with adding something like logo and we will maybe add some kind of way navigation. And maybe, and maybe I'm going to add an image, but let's do that in the next video. 23. Finding the Right Colors for Our Design: So we've got our new file ready. So I guess we could now, for instance, start with adding a logo here in the top left corner and maybe adding their navigation here in the top right. But since I want to do like prototyping and designing at the same time, to prototype the our navigation, we would have to have some colors, right? I mean, I don't want it I don't want to like the hover state when I'm hovering over the navigation links. I don't want to just underline them on may or make them bolder. I want to change the color because it will also allow us to learn how to prototype a bit better and also to have those colors, we would have to find them. And if we don't, if we are designing it ourselves, and if we don't, if we don't have any clue from our client, then we just need to find those colors ourselves. Of course, if you had already some images or assets send out to you, we'll send into you from, from your client. You should use those as like a pointer in terms of searching for the colors. Or maybe your client would love for a specific color in who knows. But if you did not, I think that it would be a good idea to first maybe find like a hero image for our design and then base our color scheme on the colors that you can see in that, in that specific hero image. And what I want is I want to find like a, like a fake basically image of a portrait, photo of a designer or a freelancer that wouldn't have any background, but still would have some nice colors that we can simply use in our design. So for that, I'm going to use the site that's called raw pixel. And you just need to set up a free account right here. And then you can search for, well, if you want to search for premium photos, you can, but of course you would have to pay for them. But also we have like public domain and free photos right here. So what I'm going to, well, what you could do is to search for simply for something like portrait, I would add PNG. And this, this is going to know like try to find some portrait photos that have simply no background. Of course, the nicer ones are premium, premium section. So let's try portrait here, portrait P and G. And of course, these are going to be a bit nicer. But what I've found here is this kind of a, it's not like an image. It's, it looks like a, like a scat like an illustration made from an image, but I think it looks really nice. It's, this girl is like a hip, creative, something that there's quite a lot of colors right here that we can simply retrieve from this design that could be great base for our design. So I've just decided to download this image. And if we go to XD, and I'm just going to try to find that this image, as you can see, I experimented with another one. And I'm just going to simply printed over here. And I think I'm going to let me just select the art board and I'm going to simply turn off the layout. And of course we're going to have to make it, make it smaller like this. But this, this image or this illustration, I think, is going to be a great base for our design for finding the right, the right colors. But let's actually start doing that in the next video. 24. Let’s Add the Logo and the Navigation: So when it comes to adding on the logo to your discipline, to your designs, of course, you have different options. You could add like a graphical logo that maybe you've designed yourself. You could add a logo that your client gave to you because they already have a logo. Or we could use some very, very quick typographical logo luck, like we're going to do in this case. Because again, we're just designing a simple, like a simple logo for our, for our cells, basically because we are the freelancers who are like showcasing our work. So I'm just going to grab the text tool and let me just zoom in. For now, I'm just going to get rid of the grid. And I'm just going to click somewhere here. And let's say that our name, I don't want to type unlike Jane Doe. Let's do like Tiffany Jones. I hope it's hope it's generic enough. So I'm simply going to now grab the last name right here. I think I have a space here, so I'm just going to grab the lastName and let's just change the color to maybe this red color like this. Or maybe blue bloods leave the blue color like this. So now I can just simply brain our layout back. And now we can see that we need to just put this guy makes somewhere, somewhere here against our left, left column. Now of course, this logo doesn't have to be this big. So we can now simply preview our page using this desktop preview option. Now you can see that how like basically what this like, this logo is going to look like if you can check it to each lag the size or not. I think that it's a bit too big, so I'm just going to make it smaller. I'm going to drop it to something like 24 maybe. And now let's preview this guy. I think it looks much better like this. We got the logo. Maybe I'm going to get rid of the grid like that. So now it's a good idea to just add the navigation like on the, on the right, right here. So since I want to keep everything consistent, I'm just going to grab this guy. So the logo, I'm going to press and hold down the Shift and the Alt key is to just simply clone this guy to the side. I'm just going to get rid of this Tiffany Jones logo and I'm just going to write something like home. Now we have this logo and we got our first link. Maybe I'm going to drop it down to something like 18 points. And we can simply previewed this guy. Now you might be thinking that, that we could simply just grab this element and maybe just clone, clone this guy a few times to the right to simply build out our navigation and we could use the repeat grid for that if you wanted to. And it will be just much, much quicker. But as I said, we're not just going to be designing something here in XD, we're also going to be prototyping. And the thing about cloning things here inside the XD is that if you are doing it either by just grabbing and dragging something with the Alt key selected and well pressed. Or if you're using the repeat grid, you are also going to be like no cloning the prototype elements that are assigned to a specific element. Because we want to work not hard but smart, I think it would be good idea to first like the first prototype feature to our element and then clone it with that prototype feature added to that element. So it would simply mean that we would be working a bit faster and a bit smarter. So let's actually learn how to add the prototyping elements in the next video. 25. Let’s Prototype Our First Element: So let's start to add in our first prototype in feature. And we're gonna do it with simply changing the color of this home link when simply someone is hovering over it. And in order to add some prototyping features to an element. And here inside XD, we need to turn that element into a component first. And we can do it here in the Properties Inspector simply by clicking this plus symbol in this component tab. Or if you want, you can use the Control plus K shortcut. So I'm just going to click it. And as you can see, now we got our component and it also pops in right here in our components, in the document, in the document assets. So what's a component? Component basically is an element here in XD that allows you to add some interactivity to it. That interactivity can be like hovering stage or maybe like changing the appearance. I'm changing the position, all those things. And those can be done within 11 component or a series of components. Now, our first component is gonna be ultra, ultra simple. All we really need is to change the color of our link when we hover over it. And this is like the typical behavior of a link in a menu that you would see on a website. So in our default state, nothing changes. This is just a plane like a very, very dark gray. Basically text. I'm going to click on this plus symbol that says Add state. And in here I want to add the hover state. Then of course you can change its name if you want to. But I think that hover state is pretty self-explanatory and it just does the trick here. So in our hover state, as I mentioned before, all we need is to just change the color. And we could use the same blue color like we have in our logo. So this blue color. But we can also use another color just now, just to add some variety, just so you understand what is happening here a bit better. So in the hover state, I'm just going to make the text read like that. Default state. Let me just zoom in. So default state gray, hover state red. And we can check and understand this functionality a bit better once we hit that, once we hit the desktop preview. So now if I hover over this guy, you can see it turns into, it turns into red like this. Now, if you are using the desktop preview and if you want to check the hover state or any other states, just remember to first go back to the default state of a specific component. Because if you go back to the hover state and then if we click on the Preview, you're always going to see this hover state in OB and like triggered active. And we're not gonna be able to simply see the hovering effect. So just remember to go back to the default state when you want to preview something. So as I said, I guess now, now it's a good, it's a good moment to tutor to turn this component into a repeat grid. So I'm just going to click Repeat Grid. And when we do that, you can see that we get basically two options here that allow us to either repeat this guy vertically like that, which we don't want. I mean, we're not building a vertical menu or repeat this guy horizontally, like this, and we just have to decide how many links we want. Now, normally you would be, if you were not building this website for yourself, you would get some pointers from your client. But let's say that we want to have a Home Blog, Contact portfolio and about Us, something like that. So Home Blog portfolio about us and contact. So one more link like that. And there we go. This is our, this is our navigation. We need to change the length. But if we just previewed this guy, you can see that all that like prototype new functionality is cloned with the, with the design movies. So now, I guess it, I think we could simply just grab our repeat grid and we can ungroup it. And as you can see, we got all these components right here. So these are all the links that we have. So I'm just going to grab this first component and I'm going to call it home. The next one is going to be called a blog like that. This one is going to be called a portfolio. This one is gonna be like about us, About Us. And this one is going to be something like Kong tact. And of course, all these elements are still components, so they have the hover state and that default state. If we now just want to grab it, this like this blog link right here. And we just want to change this text from home to blog. Notice that if you go to the hover state, we still have that previous text. So not only in the hover state, the color gene, but also we've got a separate text for that hover state. So in here, we also have to just type in blog. So now if we go to the component and the default state only that the color changes. So this is, this is something that you have to know let Bear in mind. I remember that when I was learning this, the salesman, this feature, I was really so confused. Why, why isn't it's changing like the way I want it to change because now, why does it work like this? And then I just realized the hardware that you have to know, you'll have to change these elements on all the states because if you don't, you're gonna get some unpleasant surprises. So the About Us, I'm gonna go to hover state and I'm going to type in about us like that. The last one was supposed to be contact. So I'm gonna change this to contact like that. And of course the same is going to go for the hover state. So contact. There we go. And let's see, default, default state. The color changes, just the color changes and just the color changes. We only want to warn you want to change, change the color, not the text. The last thing to do here would be to just grab maybe our layout, like our, our columns. And I'm just going to attach this guy to the right side and maybe just move these guys a bit to the side. Maybe somewhere in here. And then I'm going to select all of these components. And I'm just going to use this element right here that says distribute horizontally. And if I do that, you can see that our, our navigation is simply nicely, well, nicely distributed. So now we can simply grab all of these elements and simply no see how this functionality is working. And we can see that we've got this nice, basically really nice hover effect, I guess. And what's more, more important, we will learn how to use that. Well, basically, how to add the first like prototyping features to our elements. So now I can, now I guess we can simply maybe like grab all of these elements. I'm going to group them. I'm going to press Control G on my keyboard. And I'm just going to call it navigation like that. And this Tiffany Jones. I'm just going to call it logo. There we go. There we go. We basically got our first, first header elements, complete. 26. Let’s Add the Active State and the First Hero Elements: Before we move on to adding like some Hero Elements, select the image, maybe some background and some like main, main heading, main call to action, all those things. I think it's important to understand one thing. And that thing is the active states. And I'm not really talking about the prototyping features here inside XD, but something that is important in lacked the web development and web design world as well. And that thing is important from a usability standpoint, a standard point or UX standpoint. So in your designs, you're going to have, you're going to have to indicate to the users which element is currently. Let's say like it's functioning like it's active at the moment. And in this case, in this specific case, when we are talking about our navigation, we want to indicate to them, well, we want to tell the users on which page they are currently on. So in this case they are currently on the homepage, right? So we would have to tell the users that this is the base that they are currently on. And usually it's gonna be indicated in the same way or using the same attributes as the links that are being hovered or something like that. So in my case, I'm just going to grab the home link. And I wanna, I wanna just denote, change the text color from this gray. Let me just go back to my assets, to this to this red color that you well, we used just a second ago to create the hover state. So if we now just go to our design, you can see that we have our home link being like nicely indicated by this red color. And then when we hover over these elements, you can see that they are nicely been, well, they changed the colors when they are hovered like that. You know what? When I'm looking at it, edit light right now, I think I'm going to just quickly change the color of this, of this text right here just to keep things consistent and maybe it's gonna be just a bit more eye-catching. Let me just see. Yeah, it's gonna be okay. I guess. I know it's, it's somewhat generic. But no, it's more about learning XD, learning how to design and prototype rather than how to make it the best design in the world. So okay, we got the logo, we got the navigation. Now let's add our image. And as you already know, this is this image right here. And I guess I should have saved that image before. So let me just quickly again grab the Rectangle. I'm just going to very, very quickly mask this image like that. I'm going to go to my layers. I'm going to grab this rectangle and the image, and I'm going to press Control Shift M on my keyboard to simply mask it out. So now I could just go into, maybe put it somewhere here. So now what I wanna do is I simply want to add, maybe I'm just going to make just a bit bigger. I'm simply going to add maybe like a, like a background right here. And for that, I'm just going to grab the pen tool. And I'm simply going to mark some points and I'm holding down the Shift key, I'm going to try to find these edges right here. Of course, we can always, always change it a bit later, maybe somewhere here. And then I'm just going to close the shape to make it look something like that. And I want to fill it with my skin tone color. And of course, this guy needs to go all the way to the back. So I'm going to grab it and press the Control shift plus left, Left Bracket. So keyboard, key on my keyboard. And there we go. Maybe, maybe this one is a bit too, too big. This image is of it too vague, something like this, and we're going to move it slightly to the side. Now let's preview our, our design. So it starts, starts to look quite alright. Now of course, you don't have to do like a background like this, but it's becoming a common design trends. You could simply add a simple like a rectangle. You don't have to do it too. No. I have to do it like I don't know. It's a trap as I have trapezoid or something like that. But now it's just a, I think it's just a nice design touch. And it also allows us to have some more room, like here on the left to add something like, Hi, I'm Tiffany, I'm a designer. Thanks for stopping by to get to know me those things. But before we actually add all those elements, we still have to do one thing. That is, we have to take care of the responsiveness of our designs so far. And the most important thing here is to take care of the responsiveness of our menu. And well-to-do that, we're going to have to add a different a separate, a separate art board. And of course, add well-built a completely new menu actually. But you know what? Let's start doing that in the next video. 27. Let’s Start the Mobile Version of the Design: So in order to add our mobile design, we need to have something to put it on, right? So we need a new artboard. So for that, I'm just going to grab the Artboard tool. And from the mobile presets, I think I'm gonna go with iPhone 13, Twelve Pro. And I don't want it to be cold like that. I'm going to go to my Layers panel and notice that we already have this, well, this name being presented right here. So we got our artboard Homepage, we got our iPhone 13, 12th Pro home well, artboard. So I'm just going to call it a home mobile like that. Before we of course add the navigation, I'm going to grab the logo. And I'm simply going to grab this artboard is home mobile artboard. And in here we can also use the grid layout. And if we now paste that guy and you can see where we have to attach it. So to mean to the left, left side. And I think it's a bit too big. Let's try something like 18. And now let's get rid of the overlay. And let's maybe even preview this guy. I think it should look okay. And also before we actually add that navigation here we have two. I think it would be a good idea to add our background, this background right here. Before I do that, before I just copy that, you can see that I don't think I clicked my properly right here. And we can easily fix that. So with this, what the select tool active, what we could do is we could simply double-click inside a shape and maybe nothing really happens. But you can see that these are like these bounding, this bounding box changes have it. You can see that we've got these lines right here indicating that we just selected the entire shape. But when we double-click inside, those are gone. And now we can simply grab the anchor points and simply move them around. So it's basically like the Select tool is turning into a like an anchor point tool, something, something like that. Let me just go, Oh man. It's a big one. So let's just go down here. And I'm just going to move it somewhere here. And then let's see, I guess these guys will be okay, but maybe we should move this, this element a bit to the top. And let's just see right here, this guy looks okay. Now we can maybe instead of just copying this guy over and then playing around with those anchor points, I can just grab the whole mobile catches, grab the rectangle tool. And let's simply create a rectangle that is gone and be spanning across our our entire dispersed first screen. Of course, I don't need the border. I just need to fill and what would the Eyedropper tool that I am initializing by pressing the I key, we can simply sample that that color. And again, I'm going to press the Control Shift left bracket to put it all the way to them, to the bottom of the stack, which basically would be like using the Object menu, arrange and then send to back. So now we have to add our menu icon here on the side. And I think that the easiest way to do that would be not by grabbing the pen tool and just draw in everything out ourselves, but we can use the icons for design plugin for that, the eigentlich, the plugin that we already know. And let's just try typing in something like menu. And as you can see, we've got all sorts of different, different menus right here. So maybe I'm just going to make sure that I'm in the right artboard. Let's try this menu. I remember not the background, but the menu. Let's try another one. This one is a bit smaller, Definitely. And this one I think I'm gonna go with this one and now it looks okay. So now we could also change the color of this menu to match it with our, with our logo. But if you think that it's as easy as just clicking the color, well, unfortunately it is not. I mean, you can see that the border is checked right here. So it should be logical that if we just click a color, that border color should change. It. As you can see, it does not work like that. I think what I would suggest is to simply grab the object menu, go to path, and simply choose Outline Stroke, which would make all these elements into like filled paths instead of just no borders. And as you can see now, in this, the Properties Inspector, you get the fill selected. And now we can actually change this color to something that would match our, our logo. We could we could choose the red color, could choose No, like this gray color. The point is here that sometimes if you don't know why something is working like in the case of these, these icons, maybe it's a good idea to simply exchange the strokes with the fills a Moreover, right now you can see that if I hold down the Shift key, we were not gonna have any problems with like changing the size of this icon. And we would have problems with if I can just show you what I mean. If I go to like again, I'm just going to add this menu. I'm going to move it. If I now just try to enlarge it or make it smaller, you can see that we are losing that. Well, we are actually now distorting the distances between them, between these elements of this hamburger menu. We get this menu right here. Let me just quickly check if everything is nicely aligned to the grid. As you can see it is not. So I'm going to move it to somewhere here. And again, I'm going to grab the logo and make sure that everything is nicely, is nicely aligned. So we got the logo, we got the menu, and we got the background. So now I guess it's high time to simply add our like a mobile, mobile menu that we would trigger once we click on this hamburger menu icon. 28. Let’s Add the Mobile Menu: So let's now build out our menu. So for that, I think I'm simply going to reuse what I already have. I mean, we need a separate art board for this effect to work properly. So I'm just going to grab this whole mobile artboard and I'm simply going to duplicate it. Now, I won't be needing this logo right here. Of course, I'm not going to be needing this menu icon either. So I'm simply going to go to my icons for design plugin. And in here, I'm going to just try to find something like a close button. I think this one should be okay, this one should be enough. And I'm simply going to move it somewhere here. So it just matches with this icon, like the main menu icon that of course I'm gonna get rid of. So this is my like a super, super simple, like a bare-bones structure of our mobile menu. And I'm gonna call like mobile menu triggered or maybe overlay like that. But of course, it doesn't have to look like our main background right here. In fact, I think I would want to make it not so much significant. Also just to now show you how, um, how these soon come in interactions, what they would look like. So I'm gonna go to my assets and I think I'm going to change the mound like the background color to this bluish color. And I'm also going to change the colors, the color of this, this close symbol. Maybe check what this guy is going to look like. I think it's going to look okay. Now let's quickly build out our links. So we got home blog portfolio about us and contact. So let me just quickly, quickly try to type that in. So home. And let's make me check this color. This loop should look OK. And let's maybe make it slightly bigger, something like 22. So it's going to be home blog. I know what, let's just quickly to Repeat Grid Home Blog. Then it's gonna be portfolio, Bowers and contact. So 12345 in total, we can simply no, just changed the links. So home. There was blog than it was I think it was portfolio than it was about us. And lastly, we got contact like that. And now I'm just going to ungroup all of these elements. And if you want, you can leave them like that, or you could simply just align them to the center. And maybe we can group them. So I'm pressing Control G on my keyboard because now if we just president align middle of vertically, it's this group is going to be aligned in relation to our underlying artboard. So we've got our mobile menu overlay, and we got our first logo and this menu icon. And we got our second art board with just the mobile menu overlay effect. But of course we still need to enter that affect knew Ted some kind of interaction between this icon and the mobile menu and the disclose icon and our primary, primary screen. So I'm gonna go to the prototype panel. And like in here, what I wanna do is I want to make this icon and when triggered, when, well, when tapped, I wanted to like open up this menu. First. I'm going to try to select it. I guess it's gonna be easier to select it here. And as you can see, we got this little, the little marker showing up. And we can simply grab it and bring it over to our mobile menu overlay. And as you can see, it already created a animation for us, so we got a trigger set to tap. We can change the type of this animation from transition to auto animate and or other. I usually use auto animate. It just looks the nicest, I guess. So this is one way of doing it, but you can also grab the icon, select this icon, disclose icon. And then we can just from this Properties Inspector, without even touching this blue white, white arrow against the blue background, we can choose the tab. But first we have to set the AD interaction, and then we've got the same elements. So we get, we can add the auto animate and then we can simply choose the art board, which in our case is the home mobile. If we now just start this preview functionality, let me just put it to the top. You can see that everything is now working properly. So when we click on this menu icon, you can see that this overlay element, overlay artboard actually is nicely popping up. So it's all good and fine. It's all working. But to my taste them, it's kinda boring. I mean, these days you can see so many different like overlay options like interactions between, like overlay menu and the icon that's triggering it. So let's, let's actually see how we could at least mimic those interactions though was more modern ways of showing a mobile menu overlay. 29. Let’s Learn a Better Way of Animating the Menu Icon: Okay, so we know how to create transitions between basically art boards. But as I mentioned before, I think that that's, well, that's snapped to modern. That was, that's a bit boring taste at least. So let's actually do something more fun. Let me just turn that off. And I'm going to be reusing some of these elements, but most of them, well, some of them I'm not going to be needing anymore, so I'm just going to grab this background and this like this menu. And I'm going to put it maybe somewhere here. For now. I'm not going to be using this well, this whole artboard actually, so I'm just going to remove it. I'm also gonna get rid of this icon. I want to just start from scratch. What I'm going to do is I'm going to create a menu, menu icon myself. So I'm going to create like, maybe something like this. So it's just a simple rectangle that I'm going to fill with appropriate color like that. And I want this guy to have like rounded corners. Let's, let's say something like 50. But maybe height six is a bit too much. Let's see, three. This should be alright. And then I'm just going to press and hold on the Alt key to just print this guy is somewhere here. Or we could also just use the Repeat Grid option to just create two more elements. And then we can just maybe like make it something like this. Let me see. It looks kinda alright, Although maybe it's just a bit too big so we can just ungroup these elements and simply make this guy just a bit smaller. This should be enough. You know, I just don't want to split hairs here, but I do want to turn on that layout and I just want to, let me just grab them and I'm going to put them somewhere here. This should be, this should be alright. So what I wanna do here, I do want to create a transition between like this, like this whole state that would be triggered by this icon and this state right here, which basically is our background and our, and our links. So in order to do that, first, I'm going to maybe group these elements and I'm going to call them like Main Menu icon. There we go. And I want it to be like on top right here. Next step would be to grab like this, this menu. Grab these elements. Maybe I will group them as well. So again, this menu and this, this guy right here, and I'm going to create a component out of these two elements. In the default state. This menu right here is gone. We cannot see it right? But we can also add a new state that I'm going to call like maybe, I don't know, tapped and in this state and this guy, let me just grab the whole group. This guy is gonna go all the way down here. So it's going to cover everything. But it needs to be like this, this icon. So again, default state like this, kept like this. But in the tapped state, I also want to change this icon right here. Let me just get rid of these elements. I just want to turn these 33 markers three, basically three lines. So these, let me just, let me just open this group. So these elements, I want to turn them into like an X symbol. And to do that, I'm going to grab this middle one and I'm going to drop its opacity all the way to 0, but I'm also going to change its fill color. Let me just go back, go to my assets. And then I'm going to grab this element. I'm going to go back to my layer. So this is, this, this line. Basically, what I wanna do is I want to turn and by rotated by 45 degrees, I believe. And I want to put it like bring it down a little bit. So I'm going to increase this y value. And then I'm going to grab this bottom element. And I'm also going to rotate, but I think I'm going to have to rotate it by minus 45. And this guy has to go a bit up. Let me just, let me just zoom in. Let's see to somewhere here. And of course they also need to have their colors changed. So I'm going to go to my my document assets. And again, this rectangle again Document Assets. And so we have something like this. So let me just go back to my components. So layers component N, default state like this, and then tapped state like this. And also the positioning of these elements is also, is also important because this, this overlay menu is coming from the top, in this case, right. But we can play with it in just a second. I'm going to grab this component, right? And I'm gonna go to maybe let's call it like menu f x, like that. And I'm going to go to prototype. And in my prototype workspace, I'm going to just try to find this main menu icon. And again, I'm just going to, what I want is I want to make sure that everything is nicely aligned. So I'm going to grab this main menu icon and I want to put it, I want to put it on top of my top of my stack right here. And I want it to be the same for default and for tapped. So let's see. Yeah, okay, So it's okay. So again, default prototype workspace. And in the default state, again, I'm just going to try to find my main menu icon. And I want to give it a trigger by well, which is gonna be a tap auto animate. But in here we can, as you can see, choose between an art board in a state for the state I want to choose tapped. And then I'm gonna go to my, We're gonna go back to the design workspace. And then I'm gonna go to my tapped stays state prototype. And in this state, I just want to find my main, main menu icon. I want to add a tap trigger, which is going to take me back to my default state. And again, I'm gonna go back to Design. There's a lot of clicking, but that's actually pretty important here. Then. Now, if we just preview our design, if we now tap on this guy, you can see that we have like this, like this nice animation. So we are basically making them like this middle, middle line, the middle menu line right here to just disappear. And we're making all those elements like those, those remaining markers to just turn into an x symbols or they are rotating and they're changing that color. And actually choosing the, let's go to back to prototype. Choosing the auto animate function right here is actually pretty important because it just, it just makes everything so much nicer. Of course you can play with the easing. Let's maybe I don't know if you want. You can choose like the bounds if you want. And then we can maybe check if it's going to change something. It does, but if it's better, I'm not sure. But you know, you can always, you'll always play with it. As I mentioned, the positioning of our elements is also important. So for instance, if you want to make it even more cool looking, we could let me just grab my component in the default state. We could grab like this all whole group and simply move it somewhere here like that. And now, if we just fire our animation, you can see that it's like coming in from top, top right, something like that. We could also, for instance, play around with the opacity of some states. So in this default state, my background is group background and know what, let me just call it background. This background. It's opacity is set to write down to 100 per cent, but we can take it all the way down to 0 per cent. But when we go back to our tapped state, these backgrounds, opacity needs to go back to 100 per cent. So if we now just go back to the default state and now trigger our menu, you can see that this opacity effect is also there. It's very, very subtle, but it is, it is there. Now. I think I liked it better when this man who was coming in from, like from the top. So for my default state, I just want to move it. Let me just go back to my background. I want to move it somewhere here, and I want to bring the opacity back to 100%. Now also, if you want to make things even more interesting, you could, for instance, play around the rotation. So if I just grab my background in the default state, we could, for instance, rotate this guy by. What Let's do 360. I know we're not going to see a change can be changed here because it's a full circle. But then let's just make sure that this is set to 0 when we go back to our tapped state. So BG set to 0. Let's go to, let's go back to the default state. And let's see if that actually makes any difference. As you can see, we've got dislike, funky little like rotation pen going on right here. Might be a bit too much. We could maybe like change it from from three-sixteenths to say like 118. And I think that it will work just fine. We will still have some like some funky things going on, but it's not, it's not, I think it's not too much. I hope it's not too much. But anyways, this is how also you can create a like this transition effect or clicking a fact here inside X, Z and a half to just move yourself between, between various, various different artboards. You can do everything within, within one component, not just by adding like those interactions between artboards right here within your prototype design, but simply by adding interactions between elements within a component. 30. Let’s Add More Hero Elements: Let's now add some more like Hero Elements. And I'm going to bring back this layout grid. What I wanna do is I simply want to know, do something like a short introduction. So I'm going to grab the text tool and I'm going to type in something like hello there. I'm I'm something like that. And then I'm just going to turn it like red. Maybe I'm going to make it just a bit smaller. So let's like 18. And I think I'm going to maybe increase the tracking right here. Let's do something like maybe two. It might be not enough, that's like 20 or maybe even like 60. Now let's leave it at 60. This should be alright. And then of course I need to write the name. So maybe let's just clone this guy right here. And I'm going to make it significantly bigger. And I'm gonna just change this color to the same. So I think it's going to be this color. I'm not sure. Let me just turn off this guy. Yeah. So we need to make it maybe like this or like this. There we go. And now let's do some something like a, like a subheadings, something like that. So I'm just going to borrow this guy. And I'm going to type something like freelance graphic designer like that. And I'm going to make it significantly smaller, something like 16 or 18 should be enough. I'm going to put it somewhere here. Maybe just a bit to the bottom. And now let's create something like a textbox here for our Lorem Ipsum texts. I'm just going to create a rectangle. It's going to be looking more or less like this. And from our Lorem Ipsum plugin, I'm just going to add some Lorem Ipsum. Now of course, we need to change this text to match our document basically. So let's just try to change it to our font. I'm not sure if this is well, um, I think it's a bit let's also maybe change this line height from 18 to something like maybe 26. This is going to look just a bit better like that. Lastly, let's maybe add a button down here. So to do that, I'm just going to grab the rectangle tool, creates something like a button with some maybe rounded corners too. Let's try like maybe 48. And I just want people to learn more. So I'm just going to borrow this guy. And I'm going to type in something. Or maybe I'm gonna borrow, well, let's see what it's gonna look like. I'm going to borrow this guy. And I'm going to type in like learn more. And we're going to put it somewhere in the middle. And let's maybe change the color of this guy to like this blue. This should be enough. This should be okay. And let's, let's maybe make this stacks like plain white. So let's just change the color to white and put it somewhere here. And let's maybe make sure that everything is nicely aligned to the center. I think it looks okay. I don't want to select split hairs here, but I also would like to add some interactivity to my, to my button. And I guess it would be our like our primary button here. So we'll just grab both of these elements and maybe I'm going to group them and I'm going to turn them into a component. Let me just check it out in my, in my layers panel. So it's gonna be like Learn More btn. And I just want to add a hover state. There we go. And in this hover state, my buttons simply is going to change. It's like this background color to maybe this red color. So whenever someone hovers over this button, so let's just preview that. It's just simply going to change the color. And maybe I'm just going to make it just a bit smaller. I'm going to make it look something like this. And now let's preview. It looks okay. I just, I just don't want to like split hairs here. This is not like the most important thing right here. I guess you already understand how to add this kind of interactivity. Now I guess the next thing to do here in order to finish at this, this part would be to add like social media icons, like maybe somewhere here at the bottom. But let's, let's do it in the next video. 31. Let's Add The Social Media Icons: So now let's add the social media icons. And I think that the easiest way about this would be to just grab the icons for design plugin and let's just maybe type in Facebook. I would suggest keeping, keeping your icons like social media icons, like within one set. So if you want to use Awesome Font Awesome, You can just use Font Awesome. If you want to use icons from ionic or any other, you know, I would advise you to just keep keep your, your icons consistent. So maybe let's go with the simple. I don't know why I like it. Maybe because it's simple. This Facebook icon. And I'm gonna, I'm gonna try to put it down here, maybe somewhere, somewhere down here. And I'm going to make it smaller. But first I'm going to make sure that this lock aspect ratio is checked. So we don't get any distortions when we are electrons forming our assets. So now let's add Instagram. This is this guy right here. Let me just try to grab it. And let's keep things consistent. Let's make it 24. Let's now add maybe Twitter. This is this guy right here. Again, height 24. Maybe let's add, let's add LinkedIn. Let's see if we have it here. We do. So 24, but let's lock the aspect ratio. So 24, I guess maybe we could add like Pinterest. Do we have it here? We do. So let's do again Aspect Ratio, lock aspect ratio and 24. Oh, we have to do now is to simply put them where they need to go. So I'm just going to try to grab them all and align them to the center. And maybe let's distribute them so they look more or less like this. I'm going to put them maybe down here. And I'm going to bring, this pattern may be somewhere here. This is going to know, we're just going to be using more space that we have available right here. And I think that all of these icons, let me just try to grab them all should have, should be consistent in their appearance like in their primary appearance. But let's make them light this light gray. This is going to look a bit better to my taste. But I think it would be a nice, like a nice design touch if we made These guys on hover change the colors to match, at least like vaguely match their brand colors. So in order to do that, we simply need to turn these guys into components. So I'm going to first make this guy component, let's call it. Although I guess, I guess it's pretty self-explanatory. So this guy's default state is as is, but it's hover state is going to be simply, let me just maybe grab this fill and try to make it like more like Facebook, blue. And this shoe. I think this should be okay. So let's do now Instagram. I think I'm just going to use something like very, very light purple color. Like just a crazy pink. This should be, this should be enough. Now for the Twitter again, Control K, create a component. And let's create a hover state. And in the hover state, Let's make this guy like light blue. I think this is hover. This is a, this is Twitter's color, something like this. Most of these are, most of these social media. Social media logos are pretty much like in the realm of something blue. Because now when we add the color for LinkedIn, I think it's also like this blue. And then let's do Pinterest. Let's add a hover state from Pinterest. And I think this guy is, logo is somewhat red. This should be, this should be enough. So go back to default state now, LinkedIn, Let's go back to default state, Pinterest as well, and Instagram default state. So now let's just preview these guys. As you can see when we hover over these elements, they simply change their colors to match more or less the brand colors. So, all right, now we have some like design elements. We got some like prototype affects added. And before we call it a day, at least with this hero section, I think it would be a good idea to just now finished the responsiveness. So we have two right now. Just grab this image and all these elements and transform them or transpose them to our, to our mobile, mobile artboard. But let's do that in the next video. 32. Let’s Make the Hero Section Responsive: So in order to make our section responsive, basically what we need to do is to just grab all these elements, these elements on the left and on the right, and simply stack them here on the right. So let's start with these pieces of texts. I'm just going to grab all of them. Like these guys right here, I'm just going to copy them. And on my whole mobile artboard, I'm going to turn the grid on. And I'm just going to paste all these elements. So we could simply just try to make these guys smaller like this. But I don't think it's going to work perfectly. If we add the Shift key to it, you can see that it starts to look just a bit better. It would also be a good idea to simply like no, align them to the center. So this guy, so the button now, this text, all these elements right here. I'm just going to align them to the center. It's going to look just a bit better. I think that also this piece of text needs to be centered like that. I'm going to grab the button, but it may be somewhere here. And let me just turn off the visibility of this layout. And as you can see, like these icons, like these guys right here, they are not like the best visible. So I think that we could simply no, just for the default state, maybe like just change their colors to something like very, very light gray. I usually go with a fate of 88. I disliked this color now. And then we'll just have to do it for all the others. So for the default state, fill, just copy and paste this F8 affect, affect value. Of course you can. You can use some other value if you want. If you think that some other color would simply look better. But I think that it looks, it looks decent. And now we can just grab our, this, our image, this image right here. And then I'm just going to paste it. And of course it needs to be significantly smaller. I'm holding down the Shift key and I'm simply going to put it somewhere here in the center. But I think that we can also use this viewport as lucky cropping mask. Clipping mask rather be cropping tool and maybe make it something like this just so it's more visible like that. And there we go. I think it looks kinda, kinda okay. So there you go. This is how you would simply know, do like responsive versions of your atleast, your home sections. Basically what we had to do is to create like a mobile menu for our, for our site. And then we just took all the elements from from our section menu, hero section, and then we added them. We stack them actually vertically, like like here, so they simply match our, our view port. So the next step here would be to simply start adding some like no main points of our design, like maybe some like some of our services or things like that. So we basically need to start another section, but let's do that in the next video. 33. Let's Start The Sevices Section: Right, So we got the main section created, we got the hero section created. So I guess we could now maybe start the next section. And this one will simply be showing what we can do for our clients. So we simply want to enumerate our services. And you know what, before I do that, before I just create like a nice background right here. And maybe before I just maybe like No move this side up so we can kind of follow this, like this design scheme right here. Maybe I would want to find a different color for this section. So it is like, like very visually distinctive from the previous section. Because in here we got quite a lot of going on. We've got all of our main, main colors. And actually if I look at them, I feel like there's maybe like something missing some, some accent in color, maybe something like more vivid, something brighter. And I'll just, I just want to try to find something interesting. So to do that, I'm just going to copy all these hex codes. Maybe not all of these, but like the most prominent ones, like the blue one, this like skin tone and maybe the red one. And then I'm just going to go to coolers.co, paste those in, those values in and just try to find something like more interesting. Okay, so as I said, I'm here at coolers.co. I started up the the power generator. I'm just going to start bringing in the colors. So first this blue one that I'm just going to paste that value, n like that. And then I just want to lock this color and then the next color, the skin tone. I'm just going to copy it. And I'm just going to paste it somewhere here. And again, lock this guy. And the third color, so this red one. I'm just going to again paste it in, log this guy. And now we can just press the bar to try, to, try to find something, something like interesting. I think that these greens, they, they might actually work nicely. And I'm not sure if I like this darker green better or this lighter green better. So I guess we can simply just copy them. So I'm just going to click Copy hacks. Then I'm gonna go back to XD. So here I'm just going to add that green colored to like this swell basic, this background. And I'm just going to add it right here. And I'm going to grab the second green. So this guy right here, we can just copy the code. And again, I'm going to just add it to this fill. I'm gonna I'm just gonna go back to my assets, hoops one more time and add those green. So now we got this, this, well, this new section with a new background. And we can be sure that both like this lighter green and this darker green, they both work with the colors that we extracted from, basically from our hero section. Before we decide on, actually we're going to go with, I'm just going to double-click inside here to just grab one of these anchor points. And I'm holding down the Shift key to make Bill, just like an old brain, this guy just a little bit up to maybe like somewhere here. And this should be alright, let me just see if I got everything correct. Maybe like somewhere here and let's just go down. I'm not sure if I I think it looks okay, So we can now basically just decide whether we want, we want this green or maybe this green. I think I'm gonna go with this one. It's just a bit more like livelihoods, its bit livelier. And because these colors are, or maybe like a bit dull. So I think that we can just know like liven things up with this green color right here. So now we can simply add like some like rho, see my services or how I can help you. Kind of a title and then we can add the cards. But let's start doing that in the next video. 34. Let’s Add the Services: So I'm going to start with adding the title. So I'm just going to grab the text tool. And I'm going to click somewhere here. And I'm just going to type something in like how I can help you. There we go. I usually like to do like no, these titles that are a bit more like No client's expectations oriented. So a sub semi bold, I guess it looks okay, but let me just see this one was medium, the medium here as well. So medium like that. And I'm going to grab the Rectangle Tool, and I'm just going to create a rectangle in which I'm just going to add some text. So I'm going to try to find my Lorem Ipsum Plugin and I'm just going to add some text like that. And from my assets I'm just going to choose this asap 16, but you know what, maybe we could maybe do it like 22. And let's increase the line height to something like 30. I usually like to do. For the line height, I usually do like the font size plus six or eight. Now from my practice, I've just realized that it's usually works, works best in terms of like readability. And also, let's just change the fill to just plain white. And let's make these guys centered. And maybe I just need like two lines of text. And I'm going to try to put them in the middle. So I'm just going to use this Align Center option. I'm going to do the same for this text. Let's me just put them somewhere here. So there we go. We got basically our title. Maybe we can make, make it a bit, move it to the top. We've got the title, we got the subtitle. So now we can simply add, like, like I mentioned before, some cards. And those cards will simply be like icons, titles, and some subtitles of the things that we can do for our clients, like web design, web development and Blake, SEO, logo design in black, social media marketing, all of those things. So again, I'm going to use one of my plugins to start at least this like adding services process. So I'm going to go to icons for design. And let's say that I want to do like web design first. So if you just type in a web design, I'm not sure if we're going to find anything. Well, we're not going to find anything. So let's do something like maybe laptop. Let's see, laptop. Let's do maybe like laptop, Mac. But I'm just going to click on this background to make sure that we're gonna be adding this icon somewhere close. So I'm just going to try to grab it. Let me just zoom in. And let's say that this icon is supposed to be a bit bigger. Let's do it like this, maybe like 36 in height. And I'm just going to try to move it to somewhere here to the side. And I think that if we just if we just turn it white, it would be it would be boring, I think. So. Instead of just making it white, I am going to make it white, but I'm at the background to it as well. So I'm just going to grab this rectangle tool and I'm just going to hold down the Shift key to create a perfect square that is going to look more or less like this. So I don't need the background. And for the fill, let me just grab my grabbed my assets and maybe let's start with this blue one. And let's increase the corner radius right here to something like maybe 12. Notice that right now we are adjusting the radius for all of these corners. So if you want to do that, you can have to check this same radius for all corners value and then you can enter that corner radius right here. But if you want to add like different radii for different quarters, you have to click this different radius for each corner first. And now you can do like different, different values for different corners. So if I'm not mistaken, the first one is going to be top-left, then we're going to have top-right, bottom-right, right here, and bottom left. So we'll just go in like clockwise with this rate, with these radiate. So I guess 12 points should be enough. Let's now turn this guy white like that. And let's see if this is going to work fine. So of course I need to move this guy one step below. So I'm just going to hold down the Control key or hold down command if you're on a Mac. And then the left bracket key to move this guy one step, one step down. So maybe let's increase the size of this guy to something like maybe 4040 should be enough. So now I'm just going to hold down the Shift key and click on this background to add that to the selection. So all we need to do now is to just grab the icon and then grab the underlying background by shift clicking on it. And I'm just going to make sure that everything is nicely aligned to the center. And once it is, I'm just going to press Control G to group. Both of these elements and we can just move it maybe like somewhere here. So now all we need is to just add the subtitle here or the title. And then like some, like some texts. So for that, I can simply, and I'm going to select the title and the subtitle. And now if I hold down the Shift and the Alt key, and I'm going to just run it down here. I'm going to simply Cloud both of these elements. Of course, if you're on a Mac, you can just use the option key for that. So let's just type in something like web design. There we go. And of course it needs to be significantly smaller solids do something like 28. And let's put it somewhere here. And let's make these guys smaller. Let's do maybe something like this and I'm going to put it somewhere here. And as you noticed, when we move these elements around, you can see that we get, we get these markers showing us these indicators showing us the distances between specific elements like in this region. So now we can be sure that these guys are not like between each other in equal, equal distances, right? So we got web design. So now we can just maybe grab all of these elements. Again. I'm going to hold down the Alt key and the Shift key to just cloned these guys to somewhere around here. And I'm going to start with changing the background and remember that it's a group. So we have to double-click to get to that rectangle. And from my colors, maybe let's go with, this, must go with the skin tone. And now we have to change the icon because this is gonna be, let's say that this is going to be a web developer. Meant web development. And let's try to find me something like the code or coding icon and code. Let's do maybe like this one. And it needs to go somewhere down here. And this guy needs to go inside this group. And I believe it was, yeah, it's this group 20. So I'm just going to grab this icon and I'm going to simply print it over here. And we don't need this icon anymore, so I'm just going to get rid of it and its height is 40. Okay? So I'm gonna go with this icon, change its color to white, and I'm going to change its size to 40. Analogist, grab the rectangle so the background and the icon. So I'm just simply going to Shift-click on this remaining element here in my layers. And I'm just going to make sure that everything is nicely aligned to the center. And then we can just simply, you know, like move this guy to somewhere here. And of course we can simply make sure that these are, these guys are nicely aligned as well. And I'm going to move them somewhere here. So I'm gonna do, I'm gonna repeat the process. And of course it till it totally depends on mu, how many services you want to, you want to share, you want to show you. It can be three, it can be four. That's totally, totally up to you. Okay. So I did some basic housekeeping. As you can see, I got a group like on the left that we can actually call a web design card. And it has our icon and has our background text and the title right here. And this top one is going to be web, the card. And it has the same elements. So now we can simply like grab, let's say this one. We could simply just clone it to the side and create another card. Or we could just right-click on this, well, this layers entry and simply choose duplicate. But as you can see, it will simply stack it onto the previous one. So I guess it would be a better way. Better production technique would be to simply just hold down the Alt key and, and move this guy to the side. So you can decide how many, how many elements you want here. It can be three, it can be for, you know, it's, it's totally, totally up to you. You can have like SEO, things, you can have like social media marketing, maybe like online course creation of y naught. That will be totally up to you. So I changed the color and I changed the title. Of course, we need to change the icon. So I'm going to go to my plugins and SEO. I don't think we're going to have like an icon for SEO, but we can do something like search. Let's see, Maybe I'm just gonna go with this like this magnifying glass icon. And again, this is my copied card. That of course I need to change its name. So it's gonna be like SEO card. And I'm going to grab this icon and I'm going to just put it inside this group. And I don't need this icon. Our icon Metro, is gonna have like 40 pixels in height. And it's going to have a different color. So white. And we simply need to try to put it inside. So let's see if I can just know. I think it looks. All right. Of course we're going to have to align these cards. As well. But for now, I'm just going to maybe copied this guy one more time. I just want to have like another wildcard here it goes. I just want to do something like maybe logo design, something, but it's more like what web design is also like graphic design in a way, but no logo design would be, I guess a bit more specific. And this guy, so this rectangle, I'm going to change its name to logo design. There we go. So this rectangle is gonna beam. Let's maybe check this color, maybe like black color. Let's go with this dark, a dark gray and logo design. What kind of a icon should we search for, like logo design. Let's try something like a pen tool. Maybe. Not sure if we're going to have some plants or less is like pen. They got lucky pencil, a pen hold. It looks kinda okay. I like it. And we don't need this icon. Let's do, let's just make sure that this icon is height is set to 40, like the others. And I'm just going to try to move it inside my background. There we go. Now, what I would do is I will just grab the art board and bring back the layout. And now we can see if we can actually maybe like make these, like these cards as big, for instance, as our columns. So if I now just grab these ones and I'm going to hold down the Shift key. We can maybe like make them this big and this guy as well. So I'm just going to be printed somewhere here. Maybe just a bit smaller, something like that. And then we're going to do the same with this one. Of course, it's not like mandatory. If you have if you have some kind of a set size, you can definitely use that because I just want to show you how you can use this column and column grid in order to now to define like how, how big the size should be. Maybe let's print this guy to somewhere here. I think this guy should be but bigger. Of course, we could simply just know, see our first groups size. So what this group size is, 398 by 353. So we can try to do the same here. So three, 98353. So let's do 353. This 1398 by three, I believe it was 3353353. And then this guy, so 398353. Let me just put it somewhere here. So now we can just grab all of these elements and simply like align them, will distribute them horizontally. Maybe align them to the top. And let me now just off click the layout editor. It's gonna look something, something like this. Now of course, we could maybe simply move some things around. Let's say that I think that this guy should be a bit, just this text should go somewhere here. And the rest I think looks okay. Now, if you want, you can grab just these pieces of text and maybe more than just a bit up. Like the summary here. This should be, this should be okay. And maybe let's make sure that they are nicely set to the top as well. And I think it looks okay. Again, you don't have to make these icons as big as the columns. So I just wanted to show you how you can use that grid to, for instance, place your like, your elements right here. So before we call it a day with this section, I think I'm just going to double-click inside and grab these two anchor points and just move them down. I just want to like, add like a button down here. Like a call to action is going to say something like view more or learn more. But let's, let's actually maybe do that in the next, in the next video. 35. Let’s Add the Call to Action Button: So our call to action button is going to be like very, very simple. We can just go grab this one. So let me just try to find the button inside this group is gonna be this one. I'm just going to copy it. And I'm going to try to paste it somewhere here. Let's go down here. And if we now just preview our, our design, we can just simply have everything consistent. And, you know, and basically add a button like this. But maybe I'm just going to move it just a bit up. And I think that it might be, it might make it a bit like a bit bigger. So instead of hide 72 layers, let can be like 96. And let's put it to the center. Let's see now what it's going to look like. Or I don't want to be splitting hairs here. But I think it looks okay. Maybe we could just add more breathing room down here. So I'm just going to grab first of course we need to double-click inside this element, the background. Shift, click on these bottom two anchor points, and I'm just going to ran them down. So now we can grab this button and move it maybe like down here to keep the spacing, the spacing consistent. So now if we just check what it looks like right now, yeah, I guess it looks quite alright. Maybe these elements, these hydrogens, are just a bit too big. So if you don't like these, you can always make them smaller, but at least they are prominent and so everything will, everyone will notice, will notice these. Let me just check the size of this text. So it's 18 and I believe this is 18 as well. So maybe since we made the button bigger, let's maybe increase the size of this font to something like 26. That's gonna be a bit too much. Maybe 22. And of course we need to make this guy go to the center. So let's see now, I guess it looks a bit, a bit better, I guess, than the last thing to do here in terms of creating this section would be to simply add it, like make it responsive. So we need to still add it to our home mobile artboard. Let's start doing that in the next video. 36. Let’s Make the Services Responsive: Opening to do right now is to grab the whole mobile art board. And let's actually make it significantly taller. Let's brilliant. All the way down here maybe. And I'm just going to start with grabbing, grabbing the background. So I'm just going to copy it. And I'm gonna go to my home mobile artboard. And I'm just going to paste it in and bring it up to maybe like, I just want to know, I just I don't want this girl to be like floating in the air like that and she looks like she's cut in half. So I'm just going to try to bring it maybe like somewhere here. Which should be okay. I don't even want to know, like bother with or maybe, you know, maybe I do want to I don't want to be bothered with like making this guy just a bit smaller. So let's bring it like somewhere here. And again, I'm just going to double-click inside to bring this guy down to maybe like somewhere here, this should be o k. And I think we're going to have to maybe like extended, even further to accommodate all, all the remaining elements. But for now, I'm just going to grab both of these elements and again, go to my home mobile. So these guys are copied into my clipboard Control V to paste them. So now I can simply grab dislike this group right here. And notice that we got this responsive size, like checked right here. It's active. So when we are making it smaller will make it responsive. We well, we can do lead to XD, do the heavy lifting for us and make it like a two to the size of our art board. Well, sometimes you can get like results that you didn't really want to get. I mean, if we now just try to make these guys like adapt books. So I'm just going to try to make these guys so that you can see that the size is getting like too small, like this. This is okay, like this text down here. But we definitely don't want to have like this text to be this small. And I guess the difference is, is because this is like the Artistic Text. And this is made from using, well, first creating them the frame with the rectangle tool, and then add in some text inside. And in here, we just added some text with the text tool. And no, it doesn't look all that great. So what I would do is I would just grab this guy right here. I mean, I would just know like enter, place my cursor right here and I would press Shift plus Enter. And now I can simply just grab like this guy from the bottom and just maybe make it somewhat bigger like this and print this guy over here. But let's see if we just now maybe like grab, like remove that one. Is it going to look, I'm going to remove that hard enter. Is it going to look good? Let's, let's bring back the layout grid. As you can see, it's a bit too big. So let's make it smaller to maybe something like this, like 35, maybe 34 and down. Let's just bring this guy up. And let's see if 34 is enough. I guess it would be enough. It's not bigger than this one and this one is 41. But if we do this 141 to keep things consistent, I think it's gonna be too big. It's definitely going to be too big. So in here, we could again do that hard, hard Enter and see what it's going to look like. I don't think it looks I don't think it looks great, but this is our heading to so it doesn't have to be that big as this one, which would be our heading one. So this one could stay like this, and this one was set to 22. Maybe let's try doing like 18. Maybe it's going to look a bit, a bit better. But if we do that, we need to increase or decrease the line-height from 30 to 18. Let's select plus six is going to be a 24. And let's see what it looks like. Know what Let's do. Maybe like 26, so 18 plus eight. I think it looks a bit better. So again, we can now just grab like this Web Design icon. And I think I'm going to bring back lay-out grid. And I'm going to try to just paste it in and put it somewhere here in the center. And let's now see if our responsive size or features are going to work correctly. So let's try to make this guy smaller to somewhere like here. Let's try to put it to the sun, to the center. I think it still needs to be just a bit smaller, something like that. And I think I'm going to maybe like dude, this guy. So we made this 1800s. This is 22. I think. You know what? Let's do this guy just like basic, basic 16. So I'm going to grab that character style from my. From my well, basically from my assets. But of course we need to change the color and let's see what it looks like. And I think I'm going to make it significantly smaller, something like that. And I guess it should look okay, I just want to keep something like a hierarchy here, so I want to make these guys bigger. And I don't want to make this subtitle as big as these guys right here. I think that if we keep these like that, it should be okay. So another thing that I think we could do is maybe we could make this like this. I can just a bit smaller to something maybe like this. This should be all right. And of course we should maybe like bring these guys just a bit up. Just so it looks like a bit cleaner, maybe like here in our, in our mobile version. So let's actually quickly see what it's gonna look like. Here. I think it looks all right, So basically what we need to do right now is we need to grab all of the remaining elements and simply stack them vertically right here. So as an example, I'm just going to grab the web development part right here and maybe be, before I do that, again, I'm going to double-click inside, grab these two anchor points and simply juice in our brain and dumb, pin them down, maybe like two somewhere here. Just to, just to be sure. And I'm gonna again, let me just turn that turn that off because now we can simply just paste that guy back. Maybe put it to like somewhere here. And if we now just grab this elements or this web design, a card, we can see that its size is set to 269 in height, 318 in width. So let's just know, Let's see if we can get away with just know like entering those values. So it was again 38269. So let's see 318 and let's do like 269. Let's see if it's going to work. I don't think it's gone away. So I guess it would be better to simply know, just do, not do those elements basically like before. So first of all, I'm going to grab this one. I'm just going to change the size to 16 and the line height to 22. And of course it needs to be significantly smaller to something like this. And I'm going to make it look more or less like this. Now, this one stays here, but this like this icon and the background needs to be smaller. If you noticed, these guys are not grouped, so we don't have like width and height values here. If we do group, that may be our first. I'm going to group these elements. So this icon and this rectangle, I'm going to group them. And now we can see these, these values right here. So if I now just grab this rectangle and this icon, I'm going to group them. And so let's do, I think it was a 114. So let's do 114. There we go. And again, I'm just going to make sure that these guys are nicely aligned to the center. There we go. Then we can just grab these two elements and simply put them the top. Again, let's go to our, now this one, let's just grab our home mobile design and let's see what it looks like. It looks kinda okay, So now really all we need to do is to just add the SEO and the logo design. So let me do just that real quick and I'll get back to you. Okay, so I've added all the cards and I've added the Learn More button. I've also changed that but the size of our background. So now we can simply just preview what it would look like on our mobile device. So we got the menu. And now if we just zoomed out and we'll scroll down, you can see that we got all our elements added. Now of course, if you want, you can change the size of this, maybe titles and maybe the icons. It will be totally, totally up to you. I think that it, it looks alright the way it looks right now, we can always tweak it, tweak it later. But the most important thing is for you to understand how to earn add all the cards like these and are how to add them later? Well, how to stack them in the responsive version of your design. 37. Let’s Start Adding the Portfolio Items: So we've got our services section and we also of course made it like mobile. As you can see, I've just no fixed some, some positioning. I just tweaked the sizing a little bit just to make it all look a bit, a bit nicer. And then now we can actually start adding the portfolio section. So what I'm gonna do is I'm just going to grab these two elements. I'm going to copy them. Go down here and I'm just going to paste them about, of course, what I would like to do is to change the colors. So from my from my assets, I'm just going to choose maybe like these colors, these darker colors. And in here I'm just going to, I'm just going to type something like check out my projects or something like that. This should be, this should be okay. So of course, the thing that we would like to do here is to add like portfolio items. And you can do it in numerous ways. Usually then the portfolios that you would see on the homepages would be presented in a form of a gallery. And that gallery can be stacked well, can be intern presented. I like a grid or maybe like a masonry layout, tiles layout, and things like that. But what we are going to be focusing on here is to add interactivity to your portfolio items so that someone hovering over their portfolio thumbnail is going to see some kind of some kind of an interaction. But before I do that, I'm going to bring back the layout like that. Because I just want to know, I just want to base my, my grid basically on my, on my 12th column system. So first, I'm just going to add maybe like a simple rectangle. And that is gonna be like they were first, first portfolio item, thumbnail, and then we're going to add interactivity to it. So I'm just going to grab the rectangle tool. And I'm going to create a rectangle that is gonna be spanning across these three columns. Let's make it a bit bigger, something like that. And I'm just going to fill it with a I don't think it needs a border. I'm just going to fill it with some of the color, but just so you can see it better right now, I'm just going to fit with this color. But ultimately I just want to fill it with some kind of a photo. So I'm using the Pexels plug-in here. I'm just going to type in design. The images here really are not that important. It's about, it's about the fact that we are going for, but maybe I'm just going to add like graphic design. And I'm just going to add this one. Why not? So I'm just going to click on it. And as you can see, we already have this image of popping up here and be in nicely constrained by our rectangle that is basically working like a mask. So I'm just going to burnout off click this layout so you can see everything a bit better. I'm going to move it a bit down. So what I wanna do here is whenever I hover over this image, I just wanted to see like a title of this project popping up. And we will ask some subtitle that would be more, maybe more like some categories or some additional information. With this rectangle selected, I'm just going to maybe add another rectangle that is going to be like, you know, as, as big. Maybe I'm just going to grab my rectangle tool and just create a rectangle that is going to be something like that. Again, without a border. Let me just check if the size is okay. So it's 5366285366 to eight. And I'm going to just cover it like that. And now I'm just going to grab them some darker color, maybe like this one. And what I'm doing now is, well, this is ultimately going to be our hover state. But for now, I just want you to understand what is happening here. So I got this slight key. Like a covered that is also gonna be a background. But well, it's covering the image beneath and it's going to be to be the background for the title and the subtitle. So I'm going to grab the text tool. And I'm just going to click somewhere here. And I'm going to type in something like portfolio item. And maybe that's a bit too big. Let's try something like 42. Maybe even something smaller, smaller like 36. And I'm going to put it somewhere here in the center. And I'm just going to clone and down some holding down the Shift and the Alt keys to clone. These, this guy and constraint, it's, its movement. And down here is gonna be like, you know, some tidal, some title here. And this guy is going to be smaller and maybe like lighter. Let's try like 22. I think it should look okay. And I'm going to try to put them somewhere in the center. This should be, this should be enough. This looks, this looks alright. So what you're seeing right now is the hover state of this soon to be component. I'm going to select everything and I'm going to press Control. Or if you're on a Mac, press Command K to create a component out of this guy. So we can even call it like portfolio item like that. So in the default state, idle want to see these elements. So this underlying rectangle. So this guy right here, this guy needs to be gone. So I'm going to bring this up, bring its opacity all the way to 0. And these guys, I want, I'm Paul, I want to bring their opacity to 0 as well, but I also want to move them. So I'm going to take this guy to the side, to the edge of this component. And we're going to print its opacity all the way down to 0. And with this guy, I'm going to bring it to the side, to the right side. And I'm going to print its opacity to 0 as well. So now this is our default state, but when we add the hover state to it, so in the hover state, I'm just going to go back to my, to my layers. So in here, I want to grab the, this is the underlying rectangle. So I want to bring this opacity all the way to 100%. And then the portfolio item, this guy needs to go to the center. So it should be like somewhere here. There we go. And of course it's opacity also has to go to 100 per cent. Of course, we can always just check, would dislike portfolio item. This guy, we can always just click on this Align Center, but I think we aligned it pretty nicely. And this guy needs to also have its opacity set to 100 per cent. And again, we can do the same thing. We can just align it to the center like that. So now in the default state, well, we see nothing but in the hover state. These guys are back, backward here, so I'm just going to quickly go to the preview mode. So I'm going to press Command or Control and Enter on my keyboard. If you're on a Mac, you to press Command Return. And this is going to look something like this, so we cannot see everything and anything right now. Hover over it. You can see these guys like popping in. So we got our like this underlying background, regaining its opacity. And these two elements. So like the portfolio item, name and some type, well, some subtitle should be here written actually. So these guys are like flying in from the sides and they are also regaining their opacity. So what we can do right now is we can simply clone this element to know, to create basically like a grid of basically portfolio item thumbnails. And we wouldn't have our, our portfolio section created. But let's actually start doing that in the next video. 38. Let’s Finish the Portfolio: So before we add more like portfolio elements, what we could do is we could simply add some like, like, like a filtering system just unknown just to indicate what we would like to achieve here. So whenever someone clicks on that filter, like category, that, well, he or she would see adjusted the corresponding elements. So I'm just going to quickly clone this guy right here. And I'm going to type in something like all first. And of course it needs to be way smaller. So it's gonna look something like this. And maybe let's make it like like 18. This should be okay. And then I'm just going to clone it to the side and type in something like called web design may be. And of course I'm going to make it a bit bigger. And again, Colonia to decide I'm going to type in something like maybe something like web development. When the allotment. And of course the last thing would be to add, let's add logo design. I think we had a logo design in our services. So logo design, and I'm just going to make them align nicely. But I think we need to maybe fix this texts, these texts frames. So these guys are indeed nicely aligned. This should be better like that. I'm going to put them somewhere here. And maybe we could also dislike, not indicate which like which category is active. So the category, while the active category would be like no more prominent. So we can just grab all of these elements. We can from our assets, we can maybe just like we can simply change the color to be less prominent. And maybe I'm just going to bring these guys. These guys have to closer together and put them to the center somewhere here. So I'm going to bring back my grid layout like that. Now what we can do is we can simply like cloned this guy to this side, some again holding both the Shift and the Alt keys. And I'm going to just maybe make it slightly bigger and maybe taller to something like this. So we're going to be creating like a masonry layout. So now let's just change this photo right here, but let's first make sure that we are on the right rectangle that it's actually selected. So this is this guy right here. And let's just choose something a bit more like something different. Or this one is funky. So let's choose this one. I don't know what kind of a web design or web development project it would be, but it looks okay. Now if we just preview our element, you can see that indeed we have like those the same elements happening here when we hover over this guy. But they are exactly the same, the same values that we added to this component. So we have to change those, like the hover state also here with this component. So to do that, Let's grab our component and let's go to the hover state. So the first thing that I will do is I will just grab my portfolio item or this item. I'm going to go to the default state and I just want to check its size. So it says 674997. I think I'm just going to copy the width and I'm going to try to remember the height, so 997. So now in the hover state, again, we have to grab this rectangle and we actually can grab this rectangle as well and just paste that in and type in 997 and in the hover state, also these guys need to go to the center. So I think they should go somewhere in here. And if I just go to my default state, then we can check if everything is working correctly. I think that we still need to work on like on the positioning of these elements in like in them. Although it kinda looks okay like that. But in order to now like to keep the same effect as here, we need to definitely work on the positional argument default positioning of these elements. So if we go to the hover state, I think it looks cool, like this, it looks okay. I think that's like the most error proof way about like fixing the positioning of these elements When we simply by copying the values and then paste them back in. So if you go to the hover state, we can just grab, let's grab this portfolio item. So this title right here, and really all we need is the y value, so the position, like the vertical position, so to speak. So I'm just going to copy that. I'm going to go back to the default state. I'm going to grab that portfolio item title, and I'm just going to paste that in. And then I'm gonna go back to the hover state, grab that subtitle, grab this y vertical position, go to the portfolio item default state. It's kinda like it's very labor some but I think that in order to keep things consistent, I think it's I think it's the best way. So we got those values, paste it in. And if we now just hover over this guy, you can see that these actually, these guys are actually in the right position. But of course I think I forgot to change this image. So let's go to that. Let's try to find that funky image was this guy. So again, if now I really didn't mess anything up, if we go back to the preview mode, you can see that everything is working as expected. All we really need right now is to just keep, keep on creating our, our layout so we can just know, clone this guy somewhere to decide. And then maybe like decrease the size to maybe like something like this. You can make it even smaller than we can clone and maybe down here and increase the size of this guide to something like that. Then we could maybe, maybe not, Let's maybe even make it a bit bigger. So now that we can, now we just bring this guy down. Let me just build it nicely. So it looks more or less like this. I think that this guy should be, should go a bit up. Let's put it somewhere up here. And I'm gonna just maybe make it a bit smaller, but increase its size, something like this. And lastly, this guy is gonna go down, down here and I'm just going to make it look something like this. Of course. Now, if I just click that, if we go to our preview. So we got this element, elements added. But as you can see, again, we need to just fix the positioning, fixed the images, and our portfolio should be, it should be complete. So let me just do that now real quick and I'll get back to you asap. So as you can see, it all takes quite a lot of time. You need to do quite a lot of tweaking and some adjustments. But once you are done, I think that the effect looks quite, quite interesting. When we are done, we can simply know maybe just some positioning. When we are done, we still need to use, you know, put our portfolio on our mobile artboard. And I think that it is going to be quite long. But let's actually start doing that in the next video. 39. Let’s Make the Portfolio Reponsive: So just like with all our previous sections, what we need to do now is to just put our, our portfolio section on them on the mobile artboard. So I'm just going to grab this first slide title and the subtitle. And again, let me just maybe bring in the layout grid. And in here, I'm just going to paste those guys in. And let's check if we can actually get away with Lucknow making these guys a bit smaller, maybe something like that. I don't think we can let, let's just maybe now see what we have here. So let's, let's check this one is 34 medium and this guy is 800s regular store. So 34 medium. Maybe. Let's just check. Do this hard. Heart enter right here. And this guy was supposed to be a team. And I guess it should look, all right, maybe I'm just going to make it a bit smaller. And this should be okay, Let's leave it like that. So next let's add those filters. Sound just copy, going to copy these elements or Control C or Command C if you're on a Mac and then simply paste them here. So let's now just simply not put these guys as a list that's going to be looking more or less like this. I want to keep like bigger gaps between these elements because it just would make, make tapping on them easier on a mobile, mobile device. But of course I need to put them to the center and the whole group as well. This should look okay, but of course we still need to grab all of these elements and distribute them properly. So it looks more or less like this. So now we can just grab that portfolio item copied and pasted here and put it somewhere here. And again, we're going to have to play around with the positioning like that. And don't forget that we're going to have to do it for all the world, like all the states. So I'm not going to be like retaining the variations in sizes just to make things a bit like cleaner and easier for us to do. So. I'm just going to quickly maybe add these elements. So copy and paste somewhere here. And I'm going to make it, make this guy smaller. So I'm just going to see how actually big this guy is. So it's 454, and of course we need to attach it with the columns. So for 54, like that, maybe I'm going to bring it up. Again. This guy copy pasted here, make it smaller. And again, was it four or 54? I believe it was. And then maybe let's do this guy. So copy pasted here. Again make it smaller. And four or 54. And we still have like these two guys left. So paste it here. Make it smaller for four or 54. And go up. And again, this guy paste it here, put it where it needs to go. Then four or 54, like that. But of course, we are not done because, you know, once once we hover over these guys, so if we just preview this guy, I'm going to go down here. You can see that when we hover over it, it's not going to look good. It's actually going to look pretty terrible. So we have to do again, do all these things for all the states. So at least you know the size. So make it like smaller. And for 54 like this, again with this guy, for the hover state. So smaller and four or 54. And I think it still needs to be smaller, this guy as well like that. And of course we will have to fix this. Well, the text. So this guy looks okay. Let's grab this guy. And let's see, like in the default state, Let's do something like 38. Twenty-five, that might be a bit too much. Let's u1. May 0 be a bit more. So I'm just gonna do one here and then I'm gonna, no, I'm not gonna be like boring you with no like checking the distances of all the other elements. I'm going to do it quickly like off-camera. But just to see what it's going to, how it needs to be done. So default state, Let's just do three. Maybe I copied that guy. There we go. So default state should look, should look. Okay, so let me now just do it quickly for all the remaining elements. Right? So when everything is done, when all the distances and sizes are basically tracked, and of course, I also like slightly change the size of these elements. You can see how it looks, looks a bit better right now. So far, so good, but we don't want just someone to hover over to see. I like these elements, like these interactive elements. We also want to indicate that when someone clicks on one of these elements, well, the user will actually be taken to a like a sub page for with them, with our light portfolio images or to a separate gallery that be in a way connected with one of these elements right here. So we can, of course, we can do that here inside, inside Adobe XD and we are actually going to do that. But in the next video. 40. Let’s Add an Image Carousel: So the effect that I want to achieve right here is not just someone hover, hover over any of these items. And he's going to see some title and a subtitle, that kind of an effect. But also when that person clicks on any of these thumbnails, he or she is going to be like not redirect it to him, to an image image carousel that is of course going to be interactive as well. So let's do that right now. So what I'm gonna do is somewhat just gone to create a new artboard. So I'm going to grab the Artboard tool. And I want this image carousel to cover the whole viewport. So I'm going to choose like web desktop 19, 1920s. I want to add a few elements here. First of all, I'm just going to create an impression that we are actually still on the same art board. So I'm going to just copy all of these elements and I'm going to paste them right here on this image carousel. Because whenever you like on a typical webpage, when you click something like a portfolio element, like the bed, the backdrop stays but it's like, like covered with that image carousel. So this is what I want to achieve here. So this guy stays. But I'm going to cover it with a like a simple rectangle that every border. But it's going to have a lucky black and then fill. And let's try something like 90% maybe of opacity. So it would basically look something like this. Maybe let's do Eighty-five, like that. So over this background, I want to add like basically like some image, image carousel. And I'm going to create something like very, very simple, just like a slider where the three images just so you understand how to create an image carousel or a slider like this here inside XD. The first image I'm going to be using is gonna be this image right here. Maybe let's actually try to copy it. So I'm going to just copy this guy and try to paste it in here. And of course, I would like to make it significantly bigger. So it looks more or less like this. Maybe a bit taller. Something like this. This should be enough. Now here at the bottom, I'm just going to type in something like project title. So project title, but I want it to be significantly smaller list of something like 26. And I'm going to change its color to just plain white. And I'm gonna try to put it somewhere in the center, somewhere here. In order to make it all work, we need to add more images and we need to mask them. So let me just grab this rectangle and I'm going to copy it to the side, maybe like somewhere here to the left. And maybe you know what, that's actually like, grab everything, all of these elements and I'm going to along with the art board and this guy. So first I'm going to just try to grab the artboard. I'm going to put it somewhere here. Just sono, the images are not covering these artboards right here. And let's see if what let's just copy it one more time to the side. And I'm just going to try to change this image. Let's do something like maybe, I don't know, Designer. And let's add an image. Remember, like maybe let's try to find some like web design. And let's actually maybe normal, like Let's add this image. Why not? And let's again copy this, go over to this side. Lads put it somewhere here, and let's maybe, let's add this one. Why not? So now we have to, as I mentioned before, we have to mask these guys out. So again, I'm going to grab the Rectangle Tool and I'm going to create a rectangle that is going to be covering this image. Doesn't need to have a border, but we have to add all of these elements. So these two images and also the, the underlying elements, or maybe it actually would be easier to just grab these two guys. I'm going to put them somewhere here to the top, just so you can see everything better. And this guy is going to go, maybe let's put it to the top as well, somewhere here. And this element is also going to go to the top to somewhere here. And I'm just going to make sure that all these guys are nicely aligned. Then of course, this sum, like this white rectangle needs to go to the top. This is gonna be our mask in element. So I'm going to grab all of these elements and we can go to the Object menu and choose Mask with Shape old simply or simply use the Shift plus Control plus M shortcut. So not this is, this is masked. So I'm going to bring it over here. So down here to somewhere, to somewhere around here, this should be, this should be bit better. So now we need some kind of a navigation here. So I'm just going to grab the pen tool. And I'm simply going to create, holding down the Shift key like a, like an arrow head that's gonna look like this. Let's make it white. And let's make it significantly thicker, but maybe smaller to something like this. And I'm going to put it somewhere here. Of course, we could also put it here to the side. But I just, I just, I just like it here. So next up, I'm just going to clone it to the side. So I'm holding down both the Shift and the Alt keys. And from the transform panel right here, I'm just going to choose flip horizontal. And when we select all of these elements right now, we can simply like distribute them horizontally. And maybe I'm going to group them for now because I just want to make sure that they are nicely in the center. And now we can ungroup them. There we go. What we need to do right now is we need to create a component out of our mask. And this little arrow and this little arrows on the left and the right arrows. So I'm just going to make it a component. And this indeed is our default state, but we need a couple more states actually. So I'm going to add a new state that's gonna be called slide one. And in this state, if we just try to get to our mask, we just need to grab this rectangle, this rectangle, and this rectangle. So all of these images and simply move them to the side to somewhere here. So next, I'm going to add a new state. And it's gonna be our slide through re not to because the default state is actually our slide, slide to like in this group. So our slide three is going to be, let me just grab again the mask, all of these guys and simply move them to the side to somewhere here. So default state, slide one, so the left one, left image, slide three, the right image. So now we can go to the prototype panel. And in here, all we have to do these. We have to like tell the arrows to point to a specific state. So in the default state, I want to grab this. Let's start with the left arrow. The left arrow when we are in this state, when clicked, needs to go to the slide, the first slide. So I'm going to add an interaction. There's gonna be tap, auto animate, and I'm going to choose Slide one. And this path, this arrow is going to have an interaction and auto animate, choose art board. And we're going to go with the slide three. So now when we click on the Left Arrow, we're gonna go to the slide one. And the right arrow, when clicked, is going to take us to this slide three. But we have to do it for all slides. So I'm gonna go to the design mode. And in the component, I'm going to choose slide one back to the prototype. And in here, when we click on this slide, this left arrow. So when clicked this guy is supposed to take us to our third slide because we are creating something like an infinite loop here. And this guy, so the right arrow, when clicked, is supposed to take us to the default style, which is our second slide. And the last guy is our slide three. So again prototype. And in here, when we click, well, okay, let's start with this one. So when we click the right arrow, it's supposed to take us to this slide, one. And when we click on that path five, so our left arrow, this guy is supposed to take us to our default state and i'm, I'm not playing around with these things. Now like the duration when it's set by default like that, I think it looks okay. So now we can actually, when I go back to the design, design and set it to the default state, we can simply check what it's gonna look like. So this is our default state. Let's click once. We're going to go back to regarding slide to the slide one, click again, slide three again, again. And as you can see, everything is nicely, nicely working. But there are still two things we need to do well, first of all, we need to be able to cancel out of this image carousel. So for that, I'm going to go to the prototype. And in here we could add like a, like an X symbol. But I want you to learn like another, a different technique. I'm selecting my whole art board and I'm going to add an interaction. But instead of the tap trigger, I'm going to set it to lose and gain Pad. And in here we can simply press a key to basically make it like a trigger for our interaction. So I want to just, I want the user to be able to simply press the Escape key on the keyboard to just cancel out of this, of this art board. So I'm going to just press Escape. And our destination is our homepage. And also when we go to our, I'm gonna go to the design and I'm going to grab this component, go to the hover state, so, and then back to the prototype. So when someone clicks on this component, I'm going to add an interaction. And that interaction is going to be tapped. I want I want him or her to be directed to our image carousel. So I'm gonna go back to the design. So now I just want you to understand that this whole interactivity pattern here. So I'm just going to scroll down to our portfolio. When I hover over it, you can see that this animation is happening. Click it. We're gonna go to our image carousel. And of course in here, we got our carousel working and press Escape to go back to our home page. 41. Let’s Start Adding the Blog Section: Alright, so we got our portfolio section created right here. And if you notice, I've already simply like elongated my, my art board. So I just grabbed the art board and I simply made it a bit longer. Because in here, right now I want to add another section. And that section is going to be our blob. But since we are starting to add quite a lot of things here, I think that it's a good idea to do some basic housekeeping at this stage of our design. So if we'd like and select all of these elements and go to our layers, you can see that we have, all of these elements are simply being put on our homepage, your art board. And I don't want it I don't want it to look like this. I want to just group them. So I'm just going to press Control G on my keyboard. And I'm going to call it like portfolio, section, like that. Then I'm going to try to grab all of these elements. So dislike services section. So these are all these elements. I'm going to group them again. And this guy is going to be like Sir, services section. And then I'm going to grab all of these elements. So these guys right here, I'm going to group them and I'm going to call them like nav plus hero section. And in this way, when you have this, well, when you'll be working with them with this specific file that I'm going to provide you with. This way, I am keeping things organized, but I'm also keeping it organized for you. So as you're gonna be working with this file, I think it's just gonna be easier for you to understand what it all is here. So now we can actually start creating our blog section. And I want it to be different from this from the previous portfolio section. So I'm just going to the Rectangle Tool, create a rectangle looking more or less like this. I don't want it to have any border, but I do want it to have a fill. I'm thinking it's gonna be a bit darker. So when we scroll down, you can see that it's simply looks so much more different than in the previous section right here. And of course, all we have to do right here is to add some kind of a title with the text tool. I'm just going to type in something like here's my blog. And I like the white color, but I want to make sure that the size is just like the previous section titles. So it's a sub four medium. And of course it sits right here in our, in our assets. But if we click on the assets, you can see that the color changes. I don't want that. I like I like this. Well, white lung will white-collar here, light color. And I want it to go to the center, maybe like a bit to the top. We could also just grab this, this guy right here. So the subtitle, and also maybe when I'm here, I'm just going to grab these elements as well. And I'm going to copy them and paste them down here and put them somewhere here. So of course, this guy's color needs to be white as well. And as far as these guys go, what I wanna do with these is I just simply want to turn them into like categories of my blog. I just want to show that, you know, that I have like posts in there like web designer category, web development, SEO, all those things. So I do want to have like this All button right here, but I'm going to change its color to maybe like this guy. And these guys. Let's see. I think that this is this gray color. Yeah, it is. I think it looks okay. You know what? I think it looks nice and it definitely is going to be consistent. But I'm just going to change the text to category, maybe like one. There we go. And of course it needs to be just a bit bigger. This guy. Maybe we can simply just copy this guy and paste the, paste this guy n. And it's going to be two. And this guy is going to be category three. There we go. And of course it needs to be a bit bigger like that. So all we need to do right now is to just select all of these elements. Maybe I'm just going to bring them up and select them and simply make sure that they are nicely distributed to the center. Okay, so we got our first steps in creating this blog section behind us. And I think that in the next video we can actually start adding the blog post excerpts. 42. Let’s Start Adding the Blog Posts Excerpts: So just like in the case of our portfolio, we can to add our blog post excerpts. First, turn on the layout grid like that. And now we can simply decide how many, how many blog post excerpts we want here. So let's quickly create them like a, like a mock-up of our blog post excerpts. I'm just going to grab the rectangle tool. And let's say that I'm going to create something like this, maybe just a bit smaller like that. And then I can just grab my rectangle and maybe imitate something like a title. And then I'm just going to grab it one more time and just make it like bigger, something like that. So this would be basically our like a null. This will be our image, this would be our title and this would be our, basically let some, something like an excerpt of our blog post. Maybe I'm going to bring it just a bit down here. But I also think that we could add something that we didn't like before. So I'm just going to copy this guy over to the top and I'm going to make it smaller, like significantly smaller. And this basically could imitate our a category name on the left and maybe like a date on the right. And maybe I'm just going to bring this guy's just a bit up here. And then what we could do is we could simply grab all those elements, Klong them to the side. And then one more time to see if we actually do want to one these guys to look something, something like this, anything that three will be enough. But I want to grab these elements. So we simply the text elements, so to speak. I'm going to bring them down somewhere here. And I'm gonna make this guy in just a bit longer. So maybe even a bit longer or something like that. Just so you know, just so it doesn't look like in a super, super even, even grid, maybe even a bit longer. So two, something like that. And I'm going to also grab these elements, pull them down to somewhere here, and print this guy over to somewhere here. So this basically would be our like a grid layout. But we could also grab all these elements except for the background. And I think that my background is not being put correctly like that. So let me now just make this background just a bit longer. So it looks more or less like this. Now we could simply maybe like play around with the positioning of our grid cell without the background. So I'm just going to clone these guys. I'm holding down the Alt key. I'm going to clone it to like to somewhere here. Then I'm going to grab these guys. So these elements except for the background, I guess we could maybe like lock the background. So this is our rectangle right here. This is our background. So I'm just going to lock it. And now we can just grab these guys and simply clone them somewhere to decide. This should be, this should be okay. Now let me just grab these elements and clone them to the wall, to the bottom somewhere here. So this basically would be something like a, like a grid for our, for our elements. And you can play around with, with grids like these so they know, so they look just the way you would like them to look. And basically what we need right here is to simply turn these like these top elements into featured images. And of course, I don't want this guy to have a border. I don't want this guy to have a border either. Maybe I'm just going to select all of them and just make sure that none of these have borders actually like that. So now I can just select maybe like this rectangle. Again, paxos. So let's, let's try don't like find something like a designer maybe this time. Let's do maybe like this guy. Let's now maybe do this girl right here. Then let's see, maybe let's do something. Maybe like this guy. Then let's do, let's load more. And let's add dislike fashion designer Angus. Y naught, of course is just the representation is just a mockup. Maybe let's do this guy. And lastly, this one right here. The next step here would be to just add text to our titles, like mock-up titles and mockup like accepts. So would the right plug-in. So Lorem Ipsum plugin, we can just fill it with placeholder text. And of course it needs to be bigger. So let's go to our assets. Let's try like this, a sub medium 36, and let's make it white like that. And I guess like at this point, maybe we could just turn on, turn off the layout grid like that so you can better see what is like what is going on right here. I guess it is. Okay, maybe we could even add it as a asset so. Let's do, instead of like SF-36, let's do blog post or like x, or maybe blog post title. Like that. We could do the same here. So plugins, last settings, this guy. Again, my blog post title. Maybe let's try to find something like a different text. But again, I'm gonna go to my plugins residue like Lorem Ipsum. And let's do our blog post title. Let's do the same here. So Lorem Ipsum, Alice, just add, added here and then here. And then we can simply shift click on these guys. Maybe that's gonna be a bit faster and just change the color. So it looks more or less like this. Now we can do the same with these guys. Let's actually see if I, if I select all these elements, all these rectangles, I'm going to go to the plugin. Let's see if it's smart enough to add text to all of these. So let's do a quick Lorem ipsum. The a was on how we can assume feel like maybe find a better font for this. So I'm just going to start with like maybe a sub 16. And I'm going to change the color to white. But I guess like this excerpt is maybe just like a bit too big. And maybe let's try something like 22. And let's do like 32k, maybe that will look a bit better. So 20 to 32, let's add it to our character styles, and let's do blog excerpt like that. So then we can just select these elements underlying while this, these fragments. And let's just do a blog post excerpt like that and it looks bad. Okay, maybe, maybe these extra result are a bit too long, but we can always just know like maybe transform of them, made them look a bit different, something like that. And maybe this guy as well to something like maybe like three lines or two lines. Same with these guys. Of course. Then we would have to just not like bring them just a bit up. Same for these guys and same for these guys. Of course, the last thing to do here would be to add like a date and silicic category name. These like metadata are usually like smaller. And they can also be written in a different font, but in a lipid, different font color. So I'm going to keep these elements, so these two rectangles. And I'm just going to add like a piece of text somewhere here in the center. And I'm going to type in like category name. There we go. I'm going to change its color to maybe, Let's see if this guy is going to work. Of course, we need to change the background color, but for now, I'm just going to put it somewhere here. And I'm going to make it significantly smaller, like something like 12 maybe, or maybe 14. This should be enough. And let's make these guys look something like this sentence. This guy is like really, really small. I'm just going to put it somewhere here. And I'm going to type in date. This should be okay. Maybe like could this category name. I'm just going to type in like a space. And then I think it's called like a pipe symbol and not something like that. And maybe now I'm just going to type in date. That would be maybe a bit easier for us. And let's see if it's going to be actually visible. It's somewhat visible, but maybe we can make it a bit more visible. So let's just make it a bit lighter to something like that. Then all we really would have to do is to maybe bring this guy. So, but up to somewhere here. And I think it looks quite alright. So actually, all we could do now is to just grab maybe even all of these elements and just copy them. And we can simply replace them with these guys right here. I know that we are taking maybe even like a bit too many steps here, but I just wanted to show you the process of conceptualizing things, things like these. Of course, with time, you are going to find like, you know, your own better ways of doing these things. So I'm just going to grab these guys and remove all of these elements like that. I'm just going to paste these guys in. But I just think that it's it's simply like a good, good exercise for us to just simply go through these steps that know like maybe with time, you're gonna, you're gonna think that they are like unnecessary, that they are excessive. But you know, this is, I think it's just a good way, a good way to learn how to, how to create grids, grids like these. So let me just make sure that I'm copying all that I need to copy. I'm going to base them somewhere here and they need to go here. So I'm just going to put it like that. This should be okay. I'm going to cut these guys, remove these elements and then paste it in. Sam's gonna go for these elements. So again, I'm going to just paste these guys here and bring them to the side. Should look okay, and again, cut them, remove these elements, paste them back in. And I'm just going to paste these guys, put them here, cut them, and replaced these L, remove those elements and replaced them with boat with our, with our grid elements. So the last step here will be to add like a button that would say no, like learn more or like read more, maybe that would be better. So I'm just going to borrow that from our from our services section. And let me just make sure that these guys are nicely set to the center. So instead of learn more lands type pain, Let's type and read more. This should be, this should be okay. And now let's just see what it looks like when we preview it on our main design. I think it looks, okay, of course. So what we need right now is to simply prototype some of these things. I mean, we want to, for instance, when we click on any of these elements, we want to go to our main blog, blog post. Or when we click on the Read More button. And as you can see, I need to change that guy for the hover state as well. So when we click on the Read More button, let me just copy this guy. We want to go to our, to our blog sub page. But that's something I think that we are going to do in the next video. 43. Let’s Set Up Blog Pages: Great, So we got our blog post excerpts here on our front page. And what now would be the right time to actually create a single blog post layout. And also like a sub page with our blog posts. So normally that's what we would do. But the thing is that doing that we wouldn't like, learn any new more things to create those kinds of pages. You could use all the techniques that we've already learned. But of course, it doesn't mean that we're not going to be looking at some blog post the pages and no, we're not going to be exploring them and explaining how to create them. So what I did was, is I've quickly created for you separate blocker pages. So let's just quickly go through, go through those designs. The first blog page that I've created, you can see right here. So of course, on the top we got our logo and has the same logo that we added to our front page. And same goes for the navigation. And we need that. We have a simply a photo. I'm with a opacity turned to something around 15 to 16 per cent. Of course, an over that we got like a page title and subtitle. So this would be like an example Hero, hero section for our blog sub page. Now below that, you can see that I've created all that have basically added the categories. So these are basically the same categories that we can see in the front page. And been below that, I've added simple like a mosaic of those blog post or excerpts. But down here, I've created something a bit different. So in some pages, in some designs, you can see something like a, like a Load More button. There are various ways of loading more blog posts. You can see something like a lazy loading technique going on. Which means that once you scroll down, you will see more and more blog posts being loaded. But you can also see something like a Load More button. And actually this is a component, as you can see right here. We could actually call it like Load More button. And this component has two states. So this is the default state and we have the load Morris state, which basically shows us some more posts. And that button changes from load more to know more posts showing us that now basically we've reached the end of the list. There are no more posts available. And if we just previewed this design, so we're gonna go down, by the way, as you can see, this guy, this navigation is working just like the previous ones. So when we go down, when we click on this Load More button, you can see that we've got more posts being presented right here. And of course, I've left some room down here for our basically our footer. We didn't create it yet. But once we do it, we're going to, we're going to add it to our blog post. Well, blog, blog sub page. And of course it needs to be the same in all the pages. So I just left some room down here from my blog page, alternative design. I basically added the same hero section. But when we go down, you can see that I've got something like a featured blog post here. On the left we get our hero image. Then we got this category name and date placeholder, we got the title, we got the sub subtitle. And on the right down here we have the continue reading a button that when it clicked. And while this link would take us to a single, a single blog post. So down here we got the categories. Maybe I'm just going to come somewhere here. And then we've got basically the same mosaic as before. However, down here you're going to see that we have, well, we don't have that Load More button anymore but we have a pagination. So when we preview this guy on you go down. You can see that when you hover over these elements, these guys are looking like this active element right here. So as I said, when we click on this continue reading button right here, we're going to be directed to a single, a single blog post page. And this is the design that I've came up with. Just an old spice things up, or at least make them a bit more different. Not that boring. This is not like dark anymore. It's like lighter just now, just so we have some variety here. But of course, this navigation and logos are the same. We've got the featured image here. And down here we got our category name and date placeholders. We got the title, we got the main text down here. And then we got some typical single blog post elements. We've got the number of likes. We got to the social media icons, then we got the comments box, we got the basically the comments. Then we have like a simple navigation. So for the related posts, we can, maybe if I just zoom in on these guys, you can see that we have like a previous post link with a mock-up title of the previous post. And we got the next post link also with a title. Here on the right. We got the sidebar. And here we got simply know our, let's say that this is, this is our this is our designer freelancer. I know this is a different photo then from before, but in our discipline is simply nice. We've got some about me, well, we got basically these titles and about me search latest posts, which are basically titles for these like subsections. And of course we've got the search bar, we've got the latest posts, we got the categories, got the join my newsletter, and we got follow me on social media and these links right here. And of course, these links, if we just click on here, these are, these are the same length as they are on our first page and same goes here. So we are basically, I'm trying to keep things consistent. Once we have all these elements are created. And as I said before, you know, I didn't do anything that we didn't use before. I didn't use any technique that would be like unknown you. So I just wanted to show you the variations that you can do. What you can, what you can change in your layouts and what your layouts should look like. And of course, you will have this blog posts layout file delivered to you so you can simply download it and see how it all was setup. But of course, we still need to prototype some things. So let's say that. Let's say that we want to use the blog page for our blog page. So I'm simply going to try to just select this whole art board and I'm going to copy it. And in here, I'm just going to try to paste it in. I guess it can sit somewhere here. Of course, we're going to also have to like ultimately make everything unresponsive. So this is our blog page, this guy right here. And I'm gonna do the same for the single blog post. So I'm going to grab this guy and pasted somewhere in here. So now we can actually start prototyping some things. So first I'm going to grab this. Well, my main page, I'm gonna go to prototype. And in here, I just want to try to grab my blog link. So this guy right here, I want to add an interaction to it and it's gonna be tap. And this guy, Let's do auto animate this guy supposed to take us to our blog page for our blog post excerpts. Let's just try to grab maybe like this one. As you can see, I did some organizing things. I will have organized my elements into groups. So let's say that this guide is blog excerpt one, is going to have an interaction that is going to be tab. And it's going to take us to a single blog post. So this is now, this is something that we could do for all of these guys, but I'm just showing, showing it to you as an example, like all of these guys want to click, they should take us to a single, single blog page. I also think that we should grab like this home link, this guy right here. And we should add like an interaction to it. And I'm tab, it should take us to our homepage. Homepage right here. Same for our single blog. So again, interaction not on hover, on tap. Take us to the homepage. And I think that we could also grab our logo and also add tap interaction to it. And it should take us to a homepage is like a standard functionality. You know, whenever, whenever someone is clicking on the logo, that person should be taken to the homepage. And I think that it would be better if we did it as a normal component for our main, main design right here. But since I forgot about it, well, there you go. This, well, this should work properly. Now. Let's now see what our interactions might look like. So let's go to my blog. So let's click on, let's say this one. As you can see, you are being transported through our main, main page. If we click on the Home link, we're going to go back to our page. If we click on the Blog, we're going to be our blog. And of course there's, this guy is working as well. And also if we click on the Logo, we're gonna go back to our home page. So I guess the next step would be to simply don't make everything responsive. But in our case, it would be just like grabbing this, Let's grab this guy, this art board, making it like so much longer. And then we would just have to grab these elements and simply no stack them horizontally. I guess we could start with maybe like making this background smaller. And then we could just bring these guys to the center. Let's see how big these guys were. So 34. So let's do 34. Let's make these guys smaller. Now basically, I'm not doing here anything that we didn't do before. And I think honestly that it would be like a great independent work for you. I mean, you could just simply do everything that's supposed to be done in terms of making them, these guys are responsive. And I think that it would be like a great assignment for you to do basically on your own. I'm just going to quickly move these guys to the center, put this, put these guys to the center as well, these categories. And now we can simply just grab all these elements and simply put them, make them responsive, make them smaller. It's just the sizes. And then we can simply move on to our next section. Of course, once this is done and once these guys are also responsive, and again, of course you're going to have this file for you so you can simply see what it all will look like. And then we can simply move to our section. Next section that I think is going to be something like a Nike symbol About Me. Section. 44. Let’s Learn Some Pagination Effects: What I've decided that maybe it would be a good idea to show you how to achieve those pagination effects. So, yeah, so let's start with the Load More button first. As you can see, I've simply copied all those elements from our main design here. Just, I just think that it might be a bit cleaner for us to work with. I've also just have like three blog post excerpts right here. So let's, let's make me just quickly start with adding a lot more buttons. I'm going to grab the text tool, click somewhere here, and I'm just going to type in load more like that. Of course I'm going to make it a bit more visible for you. So let's make it white. I'm not too worried about the font at this stage because, you know, it's not that important. Although I guess we could simply just print it to like asap. And maybe let's do medium. And let's do like something like 26. Let's maybe increase the track into something called U5, or maybe living at like 50. And I'm also just going to add a simple rectangle that's going to have like a white border. There we go. And let's make sure that they are nicely aligned to the center. So I'm going to group these guys. So what we wanna do here is we want to show more posts once we click on this Load More button, right? So I think that we should start with adding those more post. I'm going to bring down this guy right here because we want to create a component with two states, right? So I'm just going to hold down the Alt key with this guy selected and I'm going to bring it down here to somewhere here. This should be enough. This guy is going to go somewhere here. And this guy is gonna go somewhere here. This should be okay. What we could do is we could simply turn all these elements into this button and these three blog post excerpts into a component. So I'm going to just hold down the Shift key, click on all these guys. And I'm simply going to press Control K on my keyboard to create a component out of this guy. Let's call it like load more posts. There we go. So this guy needs to have like two states for our default state, we don't want to see like these elements, so we don't want to see this group. This, actually, we want to see this group because this is our button. But we don't want to see these, these three remaining groups. So these posts, right? So these guys right here, what I'm gonna do is I'm simply going to turn the opacity all the way down like that. And we could do like different things. So we could maybe, let's see, maybe let's grab this right guy. And I'm going to move it to the side somewhere here. And I'm going to grab the left guy and I'm going to move it to the side just so it sounds like out of bounds right here. And the Load More button has to go somewhere here. So this is our, this is our default state. But I want to add a new state. And I'm going to call it like maybe like loaded, back post loaded. Let's do it like posts, low debt. And in this state, let me just grab the button. The button needs to go to somewhere here and it needs to say like no more posts. And of course, this needs to be larger as well, like something like this. And of course they need to be put to the center. This element needs to have its opacity brought back to 100 per cent. Same for this guy. And of course it also needs to go to the center. Like to, it's like previous place, which would be like somewhere here. And this guy as well. So opacity to 100 per cent and its position to be placed, to be set to like somewhere, somewhere here. And this guy needs to go significantly down, maybe like somewhere here. So this is our loaded more states. So now we can actually prototype it. So I'm gonna go to the prototype workspace. And in here, what I wanna do is I want to set our trigger to our load more buttons. So let me just grab this button. And on tap, I want this guy to auto animate. And I want it to go to posts loaded, right? So now when we go to our preview mode, if future, if we just click on this Load More button, you can see that these boats are nicely been animated in. So this is our first way of adding up the well like pagination effect. Let's now add the second one. You can see I've got my standard pagination right here. And what's happening here is, well, first of all, we got our active page being indicated right here. And when we hover over any of these numbers like this, on underlying effect, like a background effect is happening. So let's see how we can achieve that. So I'm just going to grab the text tool and I'm simply going to recreate this pagination. Let's do like one and maybe let's repeat grid. So it's going to be 12345. This should be enough. I'm going to make it look something maybe like this. And I'm going to ungroup the grid because right now I'm just going to quickly add the proper numbers here. So 12345. So our current page needs to be like, well, it needs to have a proper background. And we can simply just grab an ellipse. We can create an ellipse. And I'm just going to quickly borrow that color. There we go. Don't need a border. And this guy needs to go all the way to there, well, at least behind our numbers. So this should be, this should be enough. I guess. This should look alright. So now I want to like whenever I hover over any of these numbers, I want to see like this circle appear beneath. And in fact, it can be a circle, although we could also like do, like a rounded rectangle being completely rounded Till forms a circle. Let's actually do that. So I'm going to grab a rectangle and I'm going to create one looking more or less like this. This should be okay. And of course I want this guy to have a proper Phil. And I want it to go again beneath my numbers. So let's move it somewhere here. And it will be good idea to make these guys centered and we should make it a component, right? So I'm going to grab both of these elements and I'm going to press Control K on my keyboard to turn it into a component. We're going to have a default state. We're going to have a hover state. So in the default state, our background. So this guy, this rectangle right here, is going to have its opacity turned simply to 0. But on the hover state, this rectangle is going to have its opacity turned all the way to 100 per cent. And it's like corner radius set to, let's like 100% or 100. Think this should be enough. So let's now make sure that this guy's state is set to default. And let's just preview this guy. I'm going to go down here. And as you can see, when we hover over it, This guy is turning into, well, we can see this circle right here. 45. Let’s Set up the Single Post Page and Finish the Section: When we click on this continue reading button, right here, we're going to be directed to a single, a single blog post page. And this is the design that F came up with. Just, you know, spice things up or at least make them a bit more different. Not that boring. This is not like dark anymore. It's like lighter just now, just so we have some variety here. But of course, this navigation and logos are the same. We got the featured image here. And down here we got our category name and date placeholders, and we got the title. We got the main text down here. And then we got some like, typical single blog post elements. So we've got the number of likes. We got to the social media icons, then we got the commons box, we got the basically the comments. And then we have like a simple navigation. So for the related posts, we can, maybe if I just zoom in on these guys, you can see that we have like a previous post link with a mock-up, a title of the previous post. And we got the next post link also with a title. Here on the right. We got the sidebar. And here we got simply know our, let's say that this is, this is our this is our designer freelancer. I know this is a different photo then from before, but in our discipline is simply nice. We've got some about me, well, we got basically these titles and about me search latest posts, which are basically titles for these like subsections. And of course we've got the search bar, we've got the latest posts, we got the categories, get the join my newsletter and we got follow me on social media and these links right here. And of course, these links, if we just click on here, these are, these are the same length as they are on our first page and same goes here. So we are basically, I'm trying to keep things consistent. Once we have all these elements are created. And as I said before, you know, I didn't do anything that we didn't use before. I didn't use any technique that would be like unknown you. So I just wanted to show you the variations that you can do. What you can, what you can change in your layouts and what your layouts should look like. And of course, you will have this blog posts layout file delivered to you so you can simply download it and see how it all was set up. But of course, we still need to prototype some things. So let's say that. Let's say we want to use the blog page for our blog page. So I'm simply going to try to just select this whole artboard and I'm going to copy it. And in here, I'm just going to try to paste it in. I guess it can sit somewhere here. Of course, we're going to also have to like ultimately make everything unresponsive. So this is our blog page, this guy right here. And I'm gonna do the same for the single blog post. So I'm going to grab this guy and pasted somewhere here. So now we can actually start prototyping some things. So first I'm going to grab this. Well, my main page, I'm gonna go to prototype. And in here, I just want to try to grab my blog link. So this guy right here, I want to add an interaction to it and it's gonna be tap. And this guy, Let's do auto animate. This guy is supposed to take us to our blog page for our blog post excerpts. Let's just try to grab maybe like this one. As you can see, I did some organizing things. I would have organized my elements into groups. So let's say that this guide is blog excerpt one, is going to have an interaction that is going to be tab. And it's going to take us to a single blog post. So this is an odd, this is something that we could do for all of these guys, but I'm just showing, showing it to you as an example. Like all of these guys, when I clicked, they should take us to a single, single blog page. I also think that we should grab like this home link, this guy right here. And we should add like an interaction to it. And I'm tab, it should take us to our homepage. So homepage right here, same for our single blog. So again, interaction not on hover, on tap. Take us to the homepage. And I think that we could also grab our logo and also add tap interaction to it, and it should take us to a homepage. This is like a standard functionality. You know, whenever, whenever someone is clicking on the logo, that person should be taken to the homepage. And I think that it would be better if we did it as a normal component for our main main design right here. But you know, since I forgot about it, well, there you go. This, well, this should work properly. Now. Let's now see what our interactions might look like. So let's go to my blog. So let's click on, let's say this one. As you can see, you are being transported through our main, main page. If we click on the Home link, we're going to go back to our page. If we click on the Blog, we're going to be our blog. And of course there's, this guy is working as well. And also if we click on the logo, we're going to go back to our home page. So I guess the next step would be to simply don't make everything unresponsive. But in our case, it would be just like grabbing this. Let's grab this guy. So this art board making it like so much longer. And then we would just have to know, grab these elements and simply no stack them horizontally. I guess we could start with maybe like making this background smaller. And then we could just bring these guys to the center. Let's see how big these guys were. So 34. So let's do 34. Let's make these guys smaller. Now basically, I'm not doing here anything that we didn't do before. And I think honestly that it would be like a great independent work for you. I mean, you could just simply do everything that's supposed to be done in terms of making them, these guys are responsive. And I think that it would be like a great assignment for you to do basically on your own. I'm just going to quickly move these guys to the center, put this, put these guys to the center as well, these categories. And now we can simply just grab all these elements and simply put them, make them responsive, make them smaller. It's just the sizes. And then we can simply move on to our next section. Of course, once this is done and once these guys are also responsive, and again, of course you're going to have this file for you so you can simply see what it all will look like. And then we can simply move to our section. Next section that I think is going to be something like a Nike symbol About Me. Section. 46. Let’s Add the About Me Section: Before we move on to add in our About Me section, let me just quickly show you what I did in terms of responsiveness with our blog designs. So on our main blog design. So this one main blog, what mobile design? I've simply no like set up everything vertically. So I just of course, adapted on the size of the fonts of the images. All those, all those things. And I've decided to simply no ad like this, Read More button in the same one that we have right here. As for our blog mobile page, as you can see, I've added the logo up here and I've added the mobile menu. And then I've just basically put it over the design ideas from the main page. So I've just added the same image in the background. I've added the same text and subtext or subtitle. And then I've just added the categories and of course, I've stack them vertically. And then we got the blog excerpts. And this time I've just added the Load More button so we know if someone just on a mobile device wants to see more pages, wants to load more posts. They can just click on the Load More button. And as far as them, a single block immobile. So let me just quickly go. Go here. There we go. So we got, of course, our logo, we get the menu, and then we've got the featured image. Below. I've just added the metadata, the title, and of course the text itself. And then we got our comments section with the names, so the ability to add a comment right here in this box. And then we got the sidebar elements that of course are now like not on the side but below these elements. So we got our About Me section, the search section, that blog post excerpts. Of course we get the categories that the search box and of course the social media icons. And I've just quickly left some room for the footer elements that eventually will come to our design. Once all that is done, we are now ready to just move over to add in our basically, you know, the about us section. So it's not gonna be like anything super, super funky. In here. I just want to add an image like maybe on the right, some texts on the left. And maybe I'm going to add some background to the image. So the first thing that I'm gonna do is I'm simply going to drag in an image, and this is an image that I've taken from raw pixel. So the same side that we use the before, maybe I'm just going to make it just a bit bigger. And I'm gonna put it like maybe somewhere here. I want to add a background to this image. And I don't want it to be a simple rectangle, know, nor an ellipse. I just want to, I want the shape to be a bit like irregular. So I'm going to grab the pen tool and I'm going to just start clicking like somewhere here maybe now I'm holding down the Shift key to somewhere here. And maybe let's just do something like this. And then like this, then we can always change it later. I don t think that we have like a like a fill color that would be like ideal for this, for this image. And let me just move this back one step to the, well, to the bottom. We got some like some colors that might work. But I'm not really sure if there are great for this kind of n, this kind of an image. So what we could do is we could maybe just grab this background. And I'm just going to press the I key on my keyboard to initialize the eyedropper tool. And let's just maybe search for something like this. This might look maybe a bit better. Or maybe let's just maybe trying to get something from the hair. Maybe something lighter, maybe something just a bit darker. Now we could be doing this. I'm just trying to find like color that would at the same time, like go nicely along with the color scheme that we have here in this image. But at the same time, kinda like really be like a background that would separate the image from the background. So we're going to stay with this guy. But I think that we could work a bit on this image well, on this background right here. So I'm just simply going to double-click inside, which will basically allow me to control the anchor points. We could maybe like maybe bring this guy somewhere up here. Maybe you could select this guy and I'm simply going to press Delete to just go and get rid of it. And I'm going to move this guy to the side even a bit more. Maybe this guy as well and talk to the bottom. We could maybe Brenda's guy just a bit up. And then maybe I'm going to grab the image and I'm going to make it significantly bigger. So it looks. More or less like this. Now I just want to have something like different. I just want to I don't want to have like only straight lines like snow, like dividing our sections besides, we already have some light section divided, divided right here. So I guess it might, it might work like this. Now of course, we could, we could know simply try to find the perfect balance between, between this being funky. And now unlike not overly eye-catching, I mean, it's, I don't want it to attract too much attention. This is now, this is just the background, but I don't want it too boring at the same time. So sometimes it's just a matter of finding the right balance. So I'm going to now grab the text tool and I'm going to click somewhere here and just type in something like about me. And let's make this just a bit bigger. Maybe I'm going to make it a bit bolder this time. I'm going to make it like 54. And let's make it like maybe read. Maybe let me just check with this guy. It was medium 54 solids, the medium. I think that the difference between medium and bold is not that huge. So I guess we can leave it like that. I'm going to put it somewhere here. And then maybe I'm just going to borrow some texts from these guys. So I'm just going to grab this roller and epsilon. I'm going to paste it in like somewhere here. Of course, this guy needs to be a bit more visible. So I'm gonna make it, let's make this guy like 22. I'm going to make it a bit like Boulder. And let's do lie come 30 in terms of its line-height. And may be I'm going to make it just a bit smaller and put it somewhere here. And then we could maybe like clone and down somewhere here and make it just a bit bigger. And then clone it one more time. But make this guy maybe like but smaller. So it looks more or less like this. So let's say we got enough text, Enough about mutex. And maybe I'm just going to grab the pen tool again. And maybe I'm just going to create something like a, like a straight line. I'm holding down the Shift key by the way. And that line is gonna look more or less like this. And maybe let's make the border. Let's give it a proper color. But as you can see, unfortunately, we cannot just change the border color like that. So I'm gonna just copy and paste that hex code in an ambulance to look something like something like 33 points for the size. This should be enough. I'm also maybe going to grab our icons, like this, social media icons, these guys right here, let me just try it. Grab them properly. Maybe it would be better if we just grab them from the layers panel. So I think it's gonna be this guy, so I'm just going to copy them. I'm going to go down somewhere here and paste them in. And move them down here to somewhere here. Now, if you want to maybe like make this guy Justin boulders. So maybe it's like something like a lead here, but I think it should be even bolder than this. I guess it would look okay. It would maybe like break the monotony of these, of these paragraphs. And I think that it looks, it looks all right, so next of course, all we need is to just grab these elements, maybe without the image for now. And we have to put them here on our mobile version. But before we do that, let's just grab all of these elements. So all these guys, I'm going to group them and I'm going to call them about me like that. And I'm also gonna grab maybe like only these, try to grab only these elements. So it's gonna be like icons and this Lorem Ipsum. I think these are these paragraphs. And the path without the image, I think it's gonna be okay, so not this path, but this path. And I'm going to group these guys. Let's call it like about me text. And I'm going to just copy this about me text. And I'm going to try to paste it somewhere here and let's move it down. Maybe we could bring back the, our layout grid. Let's go down here. And I'm simply going to grab this group and I'm going to try to make everything smaller so it looks more or less like this. I guess we should grab this like intertidal and it's 34 mediums. So let's make it 34 medium. And let's put it exactly in the center. So I'm going to try to put it in the center. Same for this guy. We could maybe also grab these paragraphs and put them to the center as well. I think that the icons are okay. So now we have to grab the image. So this guy right here and the background. So I'm just going to copy those and shatter like try to fit it in here so it just looks okay. So I'm going to try to make these guys smaller. Mix, something like that. And let's move it up here. Let's bring this guy just to breakdown. Can maybe without the, without the mobile layout grid, it will look just a bit better. You could maybe even try to make the image just a bit bigger. There we go. We got the About Us section created. And I know it's nothing too fancy, but at least we had an opportunity to learn how to modify anchor points within the custom shapes. 47. Let’s Add the Contact Me Section: Hey guys, We got the About Me section. I guess we can move on to adding the Contact Us section elements. So what I wanna do is on the left, I'm going to add like a simple something like get get in touch or contact me, texts than some lucky subtitle. And then of course maybe some like some contact information. And below that we could add a contact form. And on the right, I think I'm going to just simply add some kind of an image. So again, before I start, I'm just going to bring back my layout grid like that. I'm just going to borrow maybe this about me text this guy right here. And I'm simply going to copy it. And I'm going to paste it somewhere here and I'm going to move it somewhere here. And we could maybe bring it all the way to decide. I'm not sure if I want to move this section like this whole section also to the side, it's gonna give us a bit more room here. But, you know, if it's supposed to be like this Web 3 design, it doesn't have to be that, that aligned. So in here, I'm going to type in some, like get in touch and we go and maybe I'm going to change the color. Just go back to my colors and B to this gray color. And let's for now get rid of the layout grid. I just want to see what it's gonna look like. And then below, Let's add some text. Again. Let me just maybe borrow some texts from here, like this paragraph. I'm going to paste it in and poor it what it needs to go somewhere here. And I'm gonna make it significantly smaller. Now, we could simply like go to some like fake address generator's, fake phone number generators. But for that, I'm just going to use my like my standard, standard Lorem Ipsum thing. We need to cut these guys out so they are not in the same group. So this one and this one, I'm going to cut them out, paste them back in. So first I'm going to go to my icons plugin. So icons for design. And in here I'm just going to type in something like phone maybe. And maybe this time let's go with the feather icons. I'm just going to like paste this guy n will click on it. And as you can see, sometimes they'll get pasted like, no, not really what I want them to be pasted in. And I'm going to grab the same color, but it needs to be for the border. So I'm just going to copy that hex code, paste that in, and simply put it somewhere here. And as I said, I can simply just borrow the Lorem Ipsum. I am going to copy it, but just so I can simply no retain the same, the same color, the same font features. But I'm going to just type in like a fake fake telephone numbers 123, maybe something like four or 56789. This should be enough. And I'm just going to make this textbox smaller and I'm going to put it somewhere here. Then we go. And maybe I'm just going to print them somewhere. Let's maybe start with an address icon. So let's type in something like map. And let's see if we got something here with a feather icons. Let's see if I just click on this guy and then click on the icon. Yeah, it's going to come somewhere here. So again, I don't think I have my my colors in my clipboard anymore. I mean, I don't have that hex code, so I'm going to paste it in one more time and I'm going to put it, it's maybe somewhere here. And let's bring this guy down. And let's remove this text. It's going to look something like this. And lastly, let's do like a email address. So let's just take an email maybe for that, the feather will have only this. Let's try like an envelope. Usually there are a lot of envelope icons, not really in this case. Let's do something like mail. And again, I'm going to just mark this icon and I'm going to, Hey, is this guy n? And let's see if we can paste that color back in. And I'm going to try to grab this icon. And by the way, if it's too difficult for you to grab an element, because XD is acting out, you can always just press and hold down the Control or Command key. That's gonna be licensed like a direct selection of an object technique. And I'm going to just close this guy down. Of course I'm pressing and holding down the Alt and Shift keys together. And in here, Let's do something like undress or maybe not two capital letters. Or let's do something like info at my email.com, something like that. This should be enough. And let me just maybe now make sure that everything is nicely aligned. But I do want to make these text boxes as small as possible so our transformation is as accurate as possible while our alignment, maybe not the transformation. So let's do something like this. Then let's actually make sure that we have these guys nicely aligned to the center horizontally like that. And saying, same with these guys. Maybe I'm just going to make this box a bit smaller. So to the center, there we go. Now we can maybe just like group these elements. But before that, let me just maybe check if these guys are nicely aligned to the left as well. I think they are. And let's make sure that these guys are nicely aligned to the center like that. And now I'm going to actually group them. So group, group these guys as well. There we go. And now we can simply make sure that they are nicely distributed. And we can just put them somewhere here. Maybe just a bit up like that. So now that we have these elements, we could actually start creating our contact form. And it's gonna be super easy. All we really need is just a simple rectangle. First that's going to look more or less like this. And then inside, I'm going to type in something like a First let's do maybe like your name. So I'm gonna do your name. So this is gonna be our placeholder and usually placeholders are smaller. So I'm going to do something like 14 or maybe 16. And I'm gonna go to my colors and make it lighter, something like this. And I'm going to put it somewhere here and maybe this guy's gonna be smaller like that. And I'm going to make sure that they are nicely aligned to the central pipe. All these elements are nicely aligned to the center. So I'm thinking I'm going to get rid of the fill and I'm also going to increase the like the roundness, rounded corners value. Let's do something like 16 or maybe even a bit bigger like 26. Let's do 32. Okay, Let's leave it like that. It looks decent enough. So now I can just grab these elements and I'm going to just choose Repeat Grid. I'm going to go down mike One, two. I think this is going to be enough because what I want here is to just add like an email address and then the text area down here, we could go like one step down again to create like a button, but we already have a button, so I don't think we need this, so three should be enough. Now what's really cool about the repeat grid is that even though we have, we are manipulating just one element. You can still see that. Now that's, well, it's basically like a live effect until you ungroup the grid. So all the changes that will now make to our main element are gonna be reflected or added to all them repeated elements. So if we now want to just like change the roundness value of the corners, you can see that it's nicely changing so we can manipulate these as well. So I'm going to do in black 32, and then I'm just going to grab this element and I'm going to ungroup the grid like that. Now I'm just going to select the last guy and I'm going to make it significantly taller, something like this. And I believe we were going to have to change the roundness as well. Tim, to match it with the remaining elements. So instead of 32, let's maybe increase it slightly. The 64, like double the, double that size. I don't think it looks all that great. Let's do something maybe like, let's do like 16 with these guys. So these two elements, I'm selecting them by holding down the Control and Shift keys. Let's do like 24 with them or maybe 20. Oh, it looks, it looks decent enough. So now all we need is to just change this tax from your name to your email. And here it's gonna be something like your message. And of course this guy needs to go somewhere up like summary here. And now let's just go to our like our components. And I'm just going to try to find my button. So this is this guy right here. So I'm just going to put it somewhere in here and here. And instead of learn more, let's type in something like send message like that. And of course we're going to have to align these elements nicely. So let me just try to click on, on these elements and align them to the center. And don't forget, we have to do the same for the hover state. So let me just maybe copy this text. And then I'm gonna go again to my component. So on and hover state. Instead of learn more, let's type in send message. And again, we need to make sure that everything is nicely aligned to the center like that. So now when we preview our design, Let's go down here. You can see that when we hover over this guy, it changes its color and it looks, it looks all right. So now really all we need is to just add the like some image now just so it doesn't look like this, this boring. We could maybe like add a Google Map if you wanted to, just to show where your office is located, it's quite a common thing to do, but maybe I'm just going to add, instead of that. Instead of that, I'm just going to add something like a, like a simple, like a simple image that's going to show like sending, sending a message process. And I'm going to be start somewhere here. So I'm going to add a rectangle. Somewhere here. There we go. I don't need a border. I don't really feel either, but I do need an image. So I'm gonna go to Pexels again and I'm going to type in something like maybe contact. I'm not sure if I'm going to find anything interesting. Or maybe let's just add this image. It's really not that important to have the best image in the world. Right here. It's more for presentation purposes. So there we go. We've got our getting touched section created. I think that right now all you would need to do is to just add it to our main page, I mean, our main mobile design page. So I'm just going to quickly do that. So as you can see, I've quickly made these like get in touch section responsive. And there really is no like rocket science here. All we need to do is to simply adjust the positioning and the spacing to make it look good on mobile devices. 48. Let’s Add the Footer: So let's now add a footer. And for that, I'm just going to quickly grab a rectangle because I want to make my mind foot or a bit more prominent, a bit more visible. And I'm going to change its fill color to, let's say this red. And I'm going to make it smaller. So it fits our canvas. And I'm going to put it somewhere here. Now, the footers have grown in the last few years in the design world, web design world. But of course, if you don't have a lot to put inside your footer, you can always just leave it at like simply like really, really simple. You can add just like your name, like copyright information, and that's it. But let's actually do both. So let's do like a longer footer. And let's do likely simple, smaller, like basic, basic information for like at the very, very bottom. So I'm going to start with maybe like borrowing some pieces of texts. So I'm just going to grab these guys and I'm going to try to paste them in somewhere here. And of course they need to change their colors. So let's maybe do simple white. So this guy is going to be white. So is this guy. But maybe I'm just going to add a bit more text here. And I'm going to type in something like I'm close to something like thanks for visiting. Because, you know, I'm assuming that someone like no scroll down to this part of the page, so it's a nice gesture to thank them. So I'm going to leave it like this. And here at the bottom, let's maybe add our like our icons. But let me just first try to find them within my assets. So I'm going to maybe select this guy first. So let's just start adding some icons. So like this guy here. And let's make it white. There we go. And let's add the remaining ones. Now of course, we need to make sure that they are nicely aligned. And it will be great if I could select them properly. And I'm going to just distribute them. And maybe I'm going to group them. So maybe I'm just going to make this font smaller as well. So I'm going to something like 16. And I'm going to bring it back, bring down the line height to something like 24. And here on the right, I would like to create ultimately three lists containing some information like our projects, latest blog posts, and maybe our services. So I'm just going to borrow the texts from the left. And for this guy like this guy is going to be significantly smaller as little simpler like 26 maybe, or maybe 32. This should be enough. And let's say that this is gonna be like, let's collect latest projects. And now we're going to list of, well, do a list of, let's say like links of our latest projects. So basically what I'm gonna do is I'm simply going to grab like a piece of texts like this one. And we put them, maybe we could simply clone and down to somewhere here. And I'm just going to maybe try to grab some other like Lorem Ipsum fragment like that. Just so, just so we don't have the same exactly the same pieces of texts here. And I'm going to align these elements. And again, I'm just going to clone this guy down. I'm going to do the same thing. So let's say that I'm going to start with this sentence. And then we go, as you can see, our text frame is simply limiting that, that text. So we don't need to worry about like all these overflowing text. But this is just for presentation. But maybe I'm going to make them just a bit shorter, something like that. I think that this should be enough. So now I'm just going to select both, like all these elements, shift alt, press and hold on the Shift Alt. And this guy is gonna be like latest maybe posts. There we go. And I'm going to do the same thing here. So I'm just going to remove some of these elements. And same thing here. So let's maybe go to like somewhere here. And again, like that. Maybe I'm just going to make sure that this guy looks properly. And let's do, let's do something like this. And there we go. You would have like latest projects, latest posts. And maybe let's do like our services are my services actually. So like why services? And let's type in web design. And then let's do like web development, maybe web development if I can spell it correctly. So let's go down here. Let's do something like maybe logo design. And lastly, let's do something like maybe SEO. I'm going to clone this guy down. Because like at the very bottom, I just want to add something like a copyright information. Maybe like a link to our privacy policy or things like that. The copyright information starts with the copyright symbol, right? So if you're on a Windows, Here's a little trick you can do. You can simply press and hold down the Alt key and then just 0169. If you have a numeric keypad and this will add a copyright symbol on a Mac. It's, it's much more simple. All you have to do is to press and hold on the Option key, then just press the G key. And if you don't have a numeric keypad on your keyboard, you can simply just go to Google and just type in copyright symbol code. And simply select and copy the copyright symbol and then just paste it in inside XD. So here let's just type in something like 20192022. Of course, if you just created this website like today, this year, of course you would leave like this current date like that. And of course, because we added this copyright symbol here, it's, well, it's a font basically. So as you can see, the values are the same, but I'm going to think I'm going to change that maybe to regular. I'm going to type in something like what was our name? I don't remember. Actually. Tiffany Jones. Tiffany Jones. Okay. So the copyright belongs to Tiffany Jones. And I'm gonna make it smaller. And I think I'm going to like give it this nice, great gray color. And I'm going to clone him to decide. And I'm going to type in something like privacy policy. There we go. We could also have it was like a bigger, bigger side. You could have something like terms, terms of service. And of course both of these links need to go to the right side. I'm going to maybe put them somewhere here. So they're gonna go to the side. And of course lastly, what we should do is to make sure that this all these pieces of information are nicely aligned to our, to our grid. So maybe I'm just gonna make this smaller and put this guy somewhere to decide. Then I'm going to grab these elements and put them maybe somewhere here. And the same for these guys. Let's just make sure that they are nicely aligned to the grid. So I'm going to group all these elements right now. So these guys as well, these guys are grouped. So now I'm going to just select everything and simply distribute them like that. Same for these elements. I'm simply just going to grab those links and put them off to the right. And this guy is almost correct. So basically the last thing to use to just grab all of these elements. So the background and the links, and simply put them to the center like that. So of course, the last thing to do here would be to add our footer to the remaining parts of our site and of course, make them responsive. But let's actually do that in the next video. 49. Let’s Make the Footer Responsive: You know what, I've decided that maybe it's not the best idea to bore you with another, another video of just stacking elements vertically. So I just took the liberty of adding the footer elements to our responsive versions of the design. But there's just one thing that I would like to point out. I mean, for some of the some of the designs, I've also decided to add not just this footer elements, but also that the contact information elements. So when we go to, for instance, our mobile, mobile blog page, so this blog mode by one we go down. You can see that I've also added the getting touched section as well as the photo. And by the way, as you can see, it's all just no columns of stacked elements. So I've added the contact information, I've added them in the footer. But I didn't do it for our single blog post because I've just decided that maybe it would be just too much. I mean, we already have like these icons that are repeated down here, like the social media icons. I thought that we've already told our users enough, how can they contact us? So basically, as you can see, adding on the footers, it's just a matter of adding these elements like vertically, like with all the other elements. And also you can decide whether you want to add by the contact information or some other information that precede the food or for that matter, to your mobile. Mobile versions of the design. 50. The Finishing Touches: Okay, So we created our, our project and along the way we created our main hero section with the image. Of course, we added the logo, we added the navigation. And so information here on the left. Then we moved on to adding the services. So we added the icons, of course, a lot of text and a button. Then we added this portfolio section with animated portfolio thumbnails. Then we moved on to adding a blog. Then we added the, the, the About Me section, followed by the contact section and the footer. And of course along the way we made everything responsive. And remember that it's a good idea to when, once you create a like a desktop version of a section and then follow it with a mobile version of that section. And we also added that like a slider effect right here, this image carousel. We added a blog page. We added, of course, the mobile version of the blog page. And we added a single blog post. And of course he's single blog post mobile version. Of course we could go on and create like an About Us section, like a like a Contact Us section. But honestly, we would simply just repeat the elements that we already have here. So for the About Me section, we will just add basically the same elements plus the logo and the navigation. Of course, followed well with the footer. For the Contact Us section, we will basically just add their logo, the navigation, this part right here and the footer. So I think that it should be like a design challenge for you on top of adding or creating your variation, your version of a site like this. And of course, once everything is done, we should check if all the text, if the spacing, if the font sizes are okay, we could of course, grab like the homepage and see the interactivity. So let's say that we got our Learn More button. We got this button right here. We've got our portfolio elements like this. Read More button. These icons work the same as they do like the previous section. In the hero section, we got our contact section, getting touched section. And of course, we could check if, for instance, if our links work. So this blog link works properly. And if we click on the logo, It's going to take us back to our homepage. So all in all, I think we did quite a lot. We covered quite a lot. So as always, I encourage you to create your own variations of the design or maybe create something completely else. As long as you are utilizing all the techniques and the facts and tricks that you've learned throughout this design process. 51. Sharing by Exporting: The easiest and the most obvious way of sharing your project and single elements of it is simply by export in it. So let's see how we can do that in XD. So you may be wondering how exporting is different than saving. So let me just explain. You want to save your file when you are or some other user is gonna be working on that, on that same file, you want to export your project when either it's finished or you just want to share some elements of it, like some images or icons, Export IT. Assets can be closed, which means that they are no longer editable or they can remain editable. It all depends on the file format you choose upon exporting. So actually how to export your project. So under the File menu, you'll find that the export function that holds even more options. The batch option will allow you to export multiple assets in one go. You just need to mark them for export, either in the Property Inspector or by clicking on the little export icon next to the acid's name in the layers panel. If you choose, select it. You can export specific assets by just selecting them without having to mark them for export. And you can choose All Artboards if you want to export all our boards, even without selecting them first. If you're using After Effects, you can export your assets are to that application using the last After Effects option. So whichever method you choose, you will see an export assets dialogue box, which allows you to control the exporting process even further. Depending on the file format you choose, you will see a different set of available features. And by default, you can save your assets as P and G. And using this format will allow you to control the exports size. And you can choose from a predefined custom export size that ranges from 0.5 to four. Or you can choose an expert preset, such as web, Android, and iOS. The first tool is simply export your assets using predefined custom sizes. But the iOS preset will export the assets using predefined screen densities. The export to option will let you decide where you will save your exported assets. So click the Change button to select the right place on your hard drive. So the next file format is AVG. It's mainly used to store vector graphics, but you can use it to export images and texts as well. And when you select it, you will get many more options such as styling. And here you can use the presentation attributes option when you want to export your assets to be used in Android Studio. And you can also use the internal CSS option, which will result basically in a smaller file size. Under their Save Images option, you can use the embed to enclose the image within the file. Or you can use the link to add a reference to the image stored separately. Under file size, you can use the optimized, minified option to keep the file size smaller. Under path options, you can use Outline Stroke to convert strokes two paths in order to prevent them from looking distorted. The experts to, again lets you decide where you will save your export IT assets. So the next file format is PDF. And here you can mainly decide whether you want to export your assets as multiple PDF files or a single file. And r is that if you're using the starter version of the program, you can export only up to two PDF files. And the last two file format is JPEG. It's the only format that allows you to control the quality of the export its size. The lower-quality means higher compression. And that results in a smaller file size. And a higher-quality means that less compression is used and a bigger file size is produced. So usually a good balance between the file size and the quality is something around 75 per cent. Now I think that in most cases, you're gonna be using the PNG and JPEG export formats, especially for quick presentations. However, XD comes with a completely separate shared workspace that lets you share your projects for various scenarios. 52. The Share Workspace: So this workspace is particularly useful when you're working with a team of stakeholders, such as designers, developers, or simply reviewers. So here you can create links that can be used, edited, and reviewed to collaborate on your design. In the Property Inspector, you can choose one of the view settings dependent on with whom you want to share the design. Use of that design review to get feedback on your design from other designers within the team. So by default to commenting hotspot hence and navigation controls will be active and use their development present to share your design with the developers. By default, commenting hotspot, hence, navigation controls and design specs will be shared. The presentation preset will optimize your design to be best presented to the stakeholders. And by default, hotspot, hence, navigation controls and full screen option will be active. And the user testing preset will allow other users to test your design. And here by default, only the full screen option will be active. And of course, you can customize the experience of the design you are sharing and knowledge sharing and interaction options can be added or removed freely. So once you've set all your view settings options, you can set the link access permissions. So the options here are anyone with the link? Well, that basically means that anyone who has the link will be able to view the project. But you can also restrict the file to be viewed only by selected people. Of course, if you choose the only invited people option. And anyone with password, which means that anyone who knows the password that you've said can access the file. So when you're ready to share your file, just hit on the Create link button. And after some time, the link will be created, you will find that the link itself, along with some buttons that will let you copy the link of the project imbedded in an IFrame code or share it on Behance. You can click the generated link and you will be redirected to a page where you will see the design along with additional panels on the right. So again, if you're using the starter version of XD, you can only share one project at a time. And if you need to share more, you have to upgrade to a premium plan. However, you can always just delete the one you share and snow simply share another one. And to do that, we have to select the managed links option, which will open up the published files tab on your Adobe account. And here you can permanently delete the file. Of course, the original design will stay intact and you can simply, you know, share another one. There you go. This is how you can share your files within a team of stakeholders in XD. Now granted, if you're just starting out and you want to learn the program, may be working within a team won't be your daily routine. But I still think that this is an important functionality and it's simply a good idea to get yourself familiar with it. 53. Sharing With a Client: One question that I really do get a lot from my students is, in what file formats should I hand over my design to the client? And the answer is ultimately one of the most frustrating. And it's, um, it depends. I mean, first of all, if you agreed to handover to the client all the rights to the project, then you should deliver to in most format. And that includes the source file. So I typically export the project in JPEG, PNG. I add the source file, for instance, p XD, XD or AI. I also use PDF and if the project was not done using Photoshop, I export it to PSD because it's so ubiquitous. Every, everyone understands P as the n. When that's done, I zip all the files. If, however, you did not agree with the client to handover the copyrights to the project. You don't have to share the source file. Now, in that case, I would just stick to JPEG, PNG, and PDF. Also, if your project is using multiple art boards, I would save them as separate JPEG or PNG files and a single PDF file. This way, you will make it easier for your client to preview the project. So in a nutshell, if you are ever in doubt what file formats to use, simply use PNG, PDF, and optionally the source file. So as I mentioned, it's always a good idea to zip your files. And most modern operating systems will let you do that without any separate app. However, if you need a stand-alone program for archiving, you can use seven zip that is free, open source and can be installed on Windows, PC, macOS, and Linux. Sharing your files is always the last step in the design process. So once the project has been accepted and paid-for, you can call it a complete and total congratulate yourself on a job well done. 54. Summary: So I really hope you enjoyed learning XD and I hope you will use it to in your future web designers. It's a really important piece of software to have in your skills portfolio. So let's quickly sum up what we've learned here. So first we've covered the absolute basics like the home screen and getting around the workspace and understanding the difference between designing and prototyping. Then we created our first new document. We learned how to manage artwork, layers and tools. And in the next section we'll learn how to use plugins and assets. I also shared with you my favorite plug-ins are using XD. Then we learned a bit about web design theory, namely the colors, typography and the best practices of modern web design. After that, we moved on to the main design part and we created a personal website project for a design of freelancer. Lastly, we'll learn how do you share your project? So thank you for making it all the way to this part of the course. I hope that with some time and practice, you'll be able to create your own designs independently. And if this course helps you in embarking on a successful design of freelance career or lend a web designer job. It will mean that it was useful and that it served its purpose. And that would make me really happy.