Responsive Website Design In Adobe Xd | Aleksandar Cucukovic | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (2h 55m) View My Notes
    • 1. Course Intro

      1:11
    • 2. What Is Responsive Design

      0:51
    • 3. Columns and Content

      7:33
    • 4. Mobile First Approach

      1:34
    • 5. Different Libraries

      4:21
    • 6. Device support and break points

      3:09
    • 7. Design For Phones

      0:59
    • 8. Time Management

      0:39
    • 9. Responsive Design Introduction

      10:13
    • 10. Page Anatomy

      11:49
    • 11. How Responsive Resize Works

      5:12
    • 12. Create Responsive design 1

      20:50
    • 13. Create Responsive design 2

      28:44
    • 14. Create Responsive Design 3

      22:49
    • 15. Create Responsive Design 4

      22:53
    • 16. Folder Structure

      4:29
    • 17. Exporting Assets

      17:37
    • 18. Sending The Files

      7:51
    • 19. Thank You

      1:08
    • 20. YouTube Channel For More Content

      0:49
    • 21. Join My Free Facebook Group

      2:16

About This Class

c91de0a2

Creating responsive design is an essential part to any designers skill set, especially in today's market where more and more traffic is coming from mobile devices and tablets.

.

Adobe Xd makes this process really easy because it has some great tools inside to help you speed up the responsive part of your design.

.

And it also has great exporting options which means it's going to make the developers happy because you are going to deliver files on time and in proper file formats.

.

Hey there my name is Alex and in this course you will learn:

- What is responsive design and why it matters
- How to design using columns and content
- How to work with different libraries
- What are break points and how to deal with them
- How to create a design in Adobe Xd
- Then make it responsive for different sizes
- And how to properly send those files to developers and clients

This course is for everybody interested in responsive design in Adobe Xd and you don't have to know how to use Adobe Xd, we are going to cover it all in this course.

.

So if you want to be more desirable as a designer and deliver files faster to clients and developers, then click enroll and i'll see you in the course.

.

Have a creative day! 

Aleksandar 

Transcripts

1. Course Intro: Creating responsive design is an essential part of any designer skill set, especially in today's market, when more more traffic is coming from mobile devices and tablets. Adobe Extreme makes this process really easy because it has some great tools inside to help speed up the responsive part of your design. And it also has great exporting options, which means it's going to make the developers happy because you're going to deliver files on time and improper file formats. Cater. My name is Alex. In this course, you will learn what is a responsive design and why it matters. How to design using columns and content, how to work with different libraries, water break points and how to deal with them. How to create a designing Adobe X'd then make it responsive for different sizes and how to properly send those files to developers and clients. This course is for everybody interested in responsive design in Adobe X deep, and you don't have to know how to use it will be X'd. They're going to cover adults in this course, so you want to be more desirable as a designer, deliver files faster to clients and developers that click and roll, and I'll see you in the course 2. What Is Responsive Design: Responsive Web design is an approach to Web design that makes Web pages surrender well on a variety off devices and screen sizes. For a website toe work well on different devices. It needs to be prepared in advance. Sir, Job is a designer is to design all of your elements with this in mind to achieve consistency in design across multiple devices and screen sizes. Designers use grid systems to help them lay the elements in such a way that it will work consistency on different devices and keep the same Loken feel. As more and more website traffic is moving towards mobile devices. Responsive website design is essential for any designer because majority of websites you're going to design are going to be viewed on different screens from desktops, toe laptops, tablets, phones all the way down to smart watches. 3. Columns and Content: when you're designing Responsive Website all you have to think about our columns and content. You can have a number of columns depending off your layout or if you're using component library such as bootstrap. Those columns should be fluid, which means that when the device sizes getting smaller or bigger, those columns and the number of columns is adapting to the screen size that the website is loading on. You also have flooring content, and the basic example is text, which are responsive, is adapting to the number of columns that the device that is loading the website has. What's typical happens is content and columns are adapting together and for the elements which are not fluid. Some sliders, for example, beckoned is loading the smaller versions off those elements which the developer has prepared upfront, let me know, show you how that looks like on a live example. So here I am on my website Web donut, that net and I'm on the products page and this website is responsive, which means that all of these columns and content are going toe act responsibly when you resize the browser size. So let me show you what I mean you can clearly see that we have some columns right here because there's a scroll down. All of them are late down, one below each other, and all of them are, as you can see, exactly the same with. So all of these images are the same wit. Text is positioned to the left, as you can see as well as prices, and we have some categories right here at the top as well. Assume text and the navigation stays where it is at this screen size. So this is the desktop screen size for my browser. And when I click right here, toe Laurie down a little bit and when extended like so you can see that all of these columns are adapting and as a move from desktop and for with all the way down to, for example, tablet size somewhere around here, you can see that now hamburger menu is showing, and these columns are getting a lot smaller. And when I go all the way down to Mobile, for example, somewhere around here you can see that. Now we have two columns and on all the way down on smallest devices, which I cannot show you right here. You have to load this Web site on your mobile phone. All of these columns are going to stack one on top off each other because they are acting responsibly. So you can see right here. As I resize them up and down, you can see how they move and area just and reposition where they need to be. So, as I said, on smallest device, all of these columns are goingto be stacked on top off each other, and you can clearly see how they are reacting to different screen sizes. So how this is completed is this website is using bootstrap, and it has 12 column grids. So basically, you're going to see that in the design a bit later on when we get to the designing part in this course. But basically we have a 12 column play out, and all of these cards are taking four columns each. So this image has four columns. This has for as well. This is war as well. That's 12 in total, and this is the wit off those columns. As you can see, that's why the navigation and this image are lined up on the right and the logo and this image are lined up on the left. So basically, when you're getting smaller and smaller, these columns and the content inside of those columns is adjusting and adapting. So basically it knows that its loading a smaller screen size. So it tells it basically to the coat. Okay, Now load me this version, and when you go all the way down, is going to show you, OK, load me dispersion. And now when you click right here, navigation is going toe appear inside of this hamburger menu because it knows that it should display it like that. You can see that text is adapting right here, and it doesn't look pretty at the moment because sometimes we have just one line of text and then we have to, and that's why this looks like So So perhaps I can go on to some other page. Let's go toe, for example, subscription so that we can see how that looks like. And this is the perfect example because we have this large image at the top, and when I click right here and start lowering, you can clearly see that this image is extending and then lowering down in size so you can clearly read it on all screen sizes. And now menu is right here. As you can see, text is adapting, and that's the perfect example. As a set off, the fluid content text is one of them, because when you are extending, you can see that the text is getting smaller or increasing in wit. As you can see it right here. And when you getting all the way down to smallest possible size and start scrolling, you can see that these cards are adjusting as well. So, for example, we have this pricing right here so you can see it on Lee as one card on mobile screen sizes . But when I extend it, you can see that they are two cards. So when I go all the way to here, you can see that the fluid wit off those cards is changing, because when I get smaller and smaller, you can see that wit off. Each of these cards is getting smaller and smaller, like here, for example, you can see that the bottom is getting smaller as well. Text all of these different text sizes, for example. Everything is getting smaller and when you get to mobile device screen size, you can see that they are stacked on top off each other. So basically they're going from 12 columns in which all the way down to basically one or four different columns, maybe two, maybe three, depending off. Are you using bootstrap or something else? Or are you using custom called Richard Developer has told you to. When you're designing for Responsive, you have to know which screen sizes you are supporting so that you can know how many different variations you have to design. But you have to see that with your developers because each and every project is obviously different. So if the developers are using bootstrap, for example, you have to still ask them, Are you going to support the smaller screen size or just bigger ones? Are you going to support tablet sizes, mobile sizes and so one? So you have to know that in advance before I start designing for Responsive, just so you can know which screen sizes you are going to support with your design and one more thing, you have to design these different screen sizes in variations because developers just don't know what's going to happen at these different break points and we're going to explain different break points later on. We start designing, but basically on all of these different sizes. So basically, this is a breaking point. You can clearly see the navigation right here. But if I lower it down just a little bit too here, you can see that on the established size. All of this stop navigation goes into hamburger menu right here on the left. So developers have to know which screen sizes you're going to support with your design and you then have to design with responsive in mind. So you have to show them all of those different changes, different breaking points, so they know how the content is going to look like once they start coding and start actually creating the website Toby life. 4. Mobile First Approach: before mobile first websites, which supported mobile devices, were usually broken down into two websites, one for desktops and big screens and adapted version for mobile screens, which included touch controls. This was a bad approach because it meant that you have to approach ASIO differently. You had to use M sub domain when you were loading the smaller site, and because devices were a lot slower Baghdad compared to today, this meant that loading speeds were a lot slower and bounce rates were pretty high. When mobile devices started getting accessible a decade ago, methodology for website design called Mobile first appeared, suggesting that every time you designed a website you should start from smallest size. You're going to support and adapt your design from their for bigger devices because more and more traffic started coming from mobile devices. However, today in this day and age way, we have multiple different touch devices from phones, tablets and smart watches. In my opinion, this approach doesn't really matter anymore, because today, unlike a decade ago, majority off devices have touched support from Microsoft Surface Studio and devices like it touchscreen laptops, tablets, phones and smartwatches. You have to design with touch support in mind all over sizes. So when you're designing, you should always think ahead how your elements are going to look like or no screen sizes from widely outs, like smart TVs all the way down to smart watches. So you have to design either way you want, as long as you're planning ahead to keep the look and functionality off your elements consistent. 5. Different Libraries: Sometimes when you're designing, you have to use libraries either because your client wants it to or their developers have requested that you use libraries and different libraries bring with themselves different challenges and different functionalities. So in this video, I'm just going toe quickly run through three off basically the most popular ones. So these air bootstrap foundation and angular and all of these come with different challenges and different foundations that you as a designer have to know. So basically, you don't have to really know any off these. You can just design with responsive in mind, and you have toe Always plan ahead and think ahead and just speak with developers before you start designing, so you can know rich screen sizes you have to support. You have to know which screen sizes you have to design before you send them the finished design. But you have to know about these because these are basically pre prepared elements and pre prepared sizes, and you have everything inside from different bottoms, sliders, images, texts, pagination and all of those different elements prepared so they work in advanced on responsive design. So whatever you're working on a project simply ask your developers do work in some kind off library. So, for example, bootstrap or foundation. And then if they do, simply go to these websites and learn more about that particular component library up front . So you have to know when you're designing. For example, Bootstrap has a specific column with size, and they have a different columns pre prepared, so you have to know about it. If you don't know anything about it, simply look online. So basically, you can watch a YouTube video. You can go to these websites and go to the documentation. Or you can click on the examples teams and so on. And simply you can learn more about him because they like to use these component libraries because it makes their work a lot faster. So, for example, somebody already prepared all of that information and all of that code, so developers can simply use that cold when they start coding, and their work is going to be a lot faster. So, for in order for your work to get a lot faster, you have to get acquainted with all of these different component libraries that you're working on on that particular project, so that you can know in advance what you should use, what screen sizes You should design four, and you should always basically ask your developers are they're going to support smallest screen size, biggest screen size and so one so you can know what you should be designed, meaning for and which screen resolutions and sizes you should support. So don't be afraid when somebody ask you, Can you design a website using foundation? Because basically, all that means is you have to know different wits off those columns, how many columns they are inside and which elements are supported and which are not. And you can always find that out basically using the docks on their websites, and you can familiarize yourself in advance before I start designing so you don't run into any issues when you're designing. Later on, you can always ask your developers, and it's always a recommendation off mine toe. Ask developers anything that you don't understand, because when you start designing and you're already invested with your time, for example, week or month into a project, and then when you send those files developers, then you learn that you didn't dio anything, according toa plan, then it can be really hectic toe redesign everything you did because you already lost that time designing for something that shouldn't be designed in the first place. So to recap, simply look at the documentation and see if there is anything specific about each of these component libraries and if it is simply involved in your design and learn basically, how white are the columns, the number off columns and how they're acting on responsive design? 6. Device support and break points: when you're designing, you should always ask your developers about device, sport and breaking points. This means that you have tow. Ask them which devices they're going to support, so you can know how many different, responsive designs you're going to create so it can create to, for example, and call it a day if that's something that they want. So, for example, they want to support a large sizes. And maybe tablet size is indebted because that's where majority off their traffic is coming from. But usually you have to support more than two, and here we are in the documentation on the bootstraps websites, and you can clearly see that extra small devices portrait forms are less than 576 pixels white. And that means, basically, that when you're creating a layout, which is less than 576 pixels in wit, how the design is going to look like on those devices so you can really think about extra small mobile phones or smart watches, for example, which are smaller than 576 pixels in wit. So you can support that if the developers are requiring you to support it and then mourn from those 576 up front. So once again, I'm just talking about the bootstrap right here. In this particular example, you should always speak with your developers and learn more about which component library and they're going to use, if any, and you can then move on. For example, you can see that small devices landscape forms are 576 and up. Medium devices, which means tablets and up, are going from 768 and wit. And then we're moving to a large devices, so desktops and, for example, bigger laptops are nine to an Extra. Large devices are large desktops, which are going from 1200 pixels and up. So all of this means that you basically have to create five different sizes off your design in order to support all of these different requirements. If your client and your developers are requesting it toe so once again, if they just want to support, for example, three sizes so they want to support mobile tablet and large. So that's what you need to design for. And basically, as I said multiple times throughout this course, you have to design with responsive in mind, So every single component you're designing. You have to think about upfront how it's going to look like on these different device sizes . No matter if you're using bootstrap or foundation or anything at all, you have to design that all of your components are going toe fit and work beautifully across all of those different screen sizes. So that's why device support is really essential. And before you start designing, you should always ask your developers and clients which devices you're going to support so that you can know how many different our ports you're going to create inside of Adobe X'd to show these different designs and breaking points. 7. Design For Phones: Ah, lot of designers will design a widely out for desktops and then create different our boards in adobe X T. For I bet iPhone and Android adapt the layout to fit and call it a day. This approach is wrong because you're assuming that all users are going to access the website using just those three devices. That's when the website breaks, because when somebody visits from another device, website is not supported and it's not going toe work properly. Those are both sizes are specific for mobile APS because both IOS and Android are designed to work with specific components created from the start for those operating systems. So when you load your website in a size which is not supported by it, you will have usability issues, loading issues, elements that don't show properly and more that we should use our bore sizes for mobile APS , Onley and for responsive websites. You should use break points and device sizes, which you're going to support from the start 8. Time Management: before Adobe X'd until similar to it. You have to design every size separately and adapt the elements in a very time consuming way. But because Ecstasy is created with speed in mind, using its responsive resize feature, you can design for different sizes pretty quickly. The main thing you should focus on is to think before a design and to plan ahead how your elements are going to look like on different screen sizes. And in the next section of the course, we're going to move on to design. We're going to read the Zion brief, do some planning and start designing our website and then adapted to different sizes that the client is going to support, so I'll see you there. 9. Responsive Design Introduction: in this part of the course, we're going to deal with design. And I'm going to show you how I created this design studio template which you can download and use free of charge for both your personal and commercial projects. We're going to divide it. We're going to dive deep into how you can create it yourself if you want to. I'm going to give you all the resources are used to create it, and then we're going to create a responsive design using this exact template. So let's quickly run through what we have right here. We have this simple navigation at the top. Then we have a nice big hero image with two buttons. We have some sponsorships right there and agencies this agency has worked with in the past . Then we have about us section. Then we have one more section right here with the text. We have some futures. Then we have nice big pricing with three pricing tiers. Then below that, we have some nice testimonials below that, we have a call to action. We have the block section and finally we have the floater at the bottom. So what we're going to use is I'm going to give you this exact file. So you're going to receive all of these colors. You're going to receive all these character styles and we used open sense, which is free. Cool front. And I'm going to give you a link. In a pdf file, sir can easily download and use open sense in this and all the future projects if you want to, as well as Carla, which is once again free Google Front, which you can't once again, Donald and news in your projects. So what we have right here at the top are bootstrap, great sizes. So if I click on one of the airports, for example, this one and click on the Great, you can see that all of these templates have great included inside. And a great is a bit different, especially for this tree at the end. And we're going to get through to it in the future videos. But I'm going to quickly explain some of these are ports. So I'm going to choose to use bootstrap in this example. And as I said in previous videos in prayer section off the course, you can use some other responsive grades if you want to, or you can create your own. It's all up to you, your design and especially your developers, because it all depends if they're going to support it with their quote. So in this example, we're going to use bootstrap and we're going to use fell column grid. So, as I said, if I click right here and go to my layout, you can see that for extra large desktops, which are over 1200 pixels in which we have 12 columns, got Erwitt off 30 calling it off 65. And these are the margins which are linked for both left and right side, so you can see there 1 65 So in this case, columns are this light blue columns that you see right here, and you can click right here and you condemn a lower. Do you pay city here if you want to, so you can easily see the design behind all these columns. You can if you choose, change the color to whatever color you want, if that's something that you want, but I'm going to choose to use it 25% just so you can see it a bit better. Then we have next toe extra large that stops which are once again over 200 pixels, in which we have a large devices which are desktops up to 992 pixels, in which next we have medium tablets which are up to 7 68 pixels, in which we have small devices tablets which are up to 576 pixels in wit. And finally we have extra small devices which are formed below 576 pixels in wit. So if I click on this one, you can see that we have four columns because once again, this is a really small wit off your screen. So you're going to use the last columns because there is no reason for you to use 12 columns for this one as well. Next, we have eight columns for small device and tablets. We have 12 columns for medium and devices tablets, and then we have Telkom's for this one and for this one as well. Now, when you're designing these large websites, you can imagine that these margins left and right, are empty at the state. But what happens is just imagine that somebody is viewing your website on extra large screen. So, for example, you have all of these modern curved screens, and they have these big margins left and right. So what happens there? You're great stays exactly the same, and it stays exactly the same. Wit, and this container doesn't change, but these margins do change. So you have really two options. You can extend this image, for example, left and right so you can see this dark blue collar right here. You can extend it to however you want left and right. If that's something that you want. If it's an image, it can scale left and right toe. Feel that entire screen. Or you can see with your developer to create a nice boxed layout so you can just imagine that this if I click right there, you can see it's 1440 pixels white. Just imagine that this is your container, and everything outside off that 14 40 pixels is not going to be included in the box is going to be contained outside of box, so you can imagine you can put a background color, for example. You can put the background image which is going to scale on all of these extremely large screens. So you can imagine sometimes, especially inside of the companies. People are viewing these websites on large TVs. For example, there are micro surface devices which are extremely white. For example, 10,000 pixels in wit. And right here, if I remember correctly. Yeah, we have 1440 pixels in wit, so you can just imagine how small debt is going to look like on that screen. That's why boxed layouts are good, because Website is not going to lose. Quality is going to scale up to the point where developer decides that is going to stop scaling. And then, after that box layout is going toe, expand with the background and is going to contain everything which is inside off this container right here. And your design basically is going to stay the same. But the outside off that box is going to scale up nicely to feel that remaining screen. So I hope Desk that clears up some of the stuff with the responsive layout and bootstrap for our case, and let's now quickly run through our designs. So I'm going to click on any of the airports and click right here to hide the grades. For now, I'm going to also click right here to hide the assets panel hit control zero to snap into position, and I'm going toe zooming a little bit closer. So you saw extra large desktops before, at the beginning of this video, you can see how it looks like. And now if I all my space key and navigate right here, you can see how it looks like one next law garage devices. So this illustration is going to scale proportionately. And if you see or medium tablets and all the way down to small screens is going to look a bit different than it is right here now. That's because I wanted to feel this text up to here. As you can see, these sections with the previous clients and about us look exactly the same here, as well as on extra large right here. But they're starting to change for medium devices, tablets and small tablets, and especially for extra small there. I used illustration to come at the top and text to come at the bottom and basically, as you can see as we go down. These sections are going to change. So we have four in a row right here. There are a little bit closer right here, but they're responding to rece ice A bit better here because they're too in road just because off the space issue and on your mobile size, as you can see there, one on top off each other. Now, if we move back with the pricing, ST Ng goes for that So you can see on these desktops sizes there three in row. But right here on tablets on big tablets There two in a row with one below on small tablets in there are three enroll like this. As you can see, this container is scaling to fit the remaining space. And finally, for the extra small sizes and forms, you can see they stack on top off each other. Well, that's responsive for you in a nutshell, and we're going toe dig in a little bit on, and I'm not going toe recreate this design from scratch, but I'm going to go through each section in the next video, and I'm going to tell you how I created it. But let's quickly run through just so you can see some differences. As you can see right here for the testimonials. We have three right here. We have two here. We have one as well. As what? These two for the block we have in this same section. So 33 here. We have to block posts. Here we hear one. And here we have one as well. And you can see that image is scaling nicely comparing to these previous ones. Finally, the folder is exactly the same on all of them, except for the mobile size. Because we have to stack this text on top off each other and because they're scrolling down , it really doesn't matter if you put one on top of each other. But I chose to use to Rose because it's much simpler for the user to click on any of these menu items because they're stacked like this. So that's what we're going to tackle in the next video. And I'm going to show you how you can create this design as well. If you want to, I'm going to show you how you can use some of these assets. And then once we create this design wants to show you how you can create it. Then we're going to tackle some of these responsive three sizes. And I'm going to show you how you can scale down this website design toe. Look exactly like this. So I'll see you in the next video. 10. Page Anatomy: All right. So to get started, I'm going to simply click right here to create a 1920 with 10. 80 at starting screen. And what I'm going to do is simply jump inside my original file and I'm going to first copy the grid. I'm going to baste it right here. Then I'm going to simply do it this one because I mean it. We only used to create the original document. Then Bill Odette. I'm going to use my website design at the extra large size and I'm going to zoom in a little bit closer and positioning something like this. Then what I'm going to do is what it selected. I can simply click on my colors. As you can see, it shows all of these different colors, but I don't want it. We can go color by color, and I'm going to show how you can do that. Also, what you can do is use character styles. As you can see, we have all of these different characters styles right here. So you can do that if you want to, or you can keep these things simple. But I like to do this because it shows all of these different characters styles in different colors, so you can simply accessed him like that. It's not going toe. Order them by size, which is quite a bit annoying. So what you can do is simply every order, some of them. And I'm going to do that simple click and drag, and I'm going to pause the video until I did all of these. And now that I've done that, I want to select my colors so you can hit control or command. Click on any of these and you can click on your color. Then I can do the same for this bottom. Maybe a zoom in a little bit closer just so you can see what I'm doing. I can do the same for the button. I can do the same for this background. I can do the same for the dis text. Let's see. I can do the same for the text below it, and let's choose one under color. So it's Jews, something a bit lighter. So let's see which one off them is it? All of them are 70 70. Let's see, Maybe it's this one. No looking, really create a new shape like this. I'm going toe remove the border and for the color used something like eight F eight F eight f Let's a presenter or return and then I'm going to click right here to select that color. Now, because this is my main color, I'm going to simply click and drag it above and simply order them from the Dockers to delight us color. Now, we also have this accent color right here which didn't pick up for some reason. As you can see, that's our color right here in the illustration right here on the T shirts. So that's sort of this red color. So that color once again I'm going to click right here is F f 6584 and want to click right here and position it made alot these two. Now that we have our colors and our character styles, I'm going to simply hide this panel for now and I'm going to show you how I created this website design. So I'm going to click right here and click Insight. As you can see on the navigation we have logo, which is just two texts and basically made this up Now one quick known before I'm a one. If you want to learn how to create designs for websites from scratch, I have a dedicated course about it in which we run through about design. Brief about researching your competition about how you can be clever about positioning, how you can speak with your clients, how you can don't understand the design. Brief, how you can stick to the deadline and how you can go from the idea. Tow wire frames to fully fledged design, and then you can export that design for developers. But because this course is about responsive resize, that's why I'm doing it this way. And I'm not going to bore you too much about how you can create a website design from scratch once again. If you don't know how to do that, you can simply jump inside that course, and you can learn all about website design from scratch. As they said, this is just for responsive website design. All it's more, as I said, Here is the logo here are on the menu items so you can see I ordered them from left to right from top to bottom. Like so. Then we have demo button. As you can see, get a demo nbt and for the bottom. Now let's move Belong. We have here a text which is this text right here we have the H one as well as H two. We have Democrats and below we have learned more about next to that. Then we have hero illustration and shapes. Let me quickly cover Hill hero illustration. So to get this illustration, I simply went to plug ins. And if you don't have this blogging, you can simply click right here and find it any stall it, but it's called andro. And inside Andhra, you can simply click there and you have all of these amazing free illustrations which you can use on vote your personal as well as commercial projects and inside that you can simply type in whatever you want. So I think I used design and it's going to search all of these different design demonstrations. As you can see, it has these amazing illustrations which really you should check out and you can use them in your projects free of charge. Of course. Thanks, Toa. This person right here who has been amazing enough to share all of these illustrations. So basically, when you find your design, you condense. Simply choose it, for example that used this one. Click on it and you can simply get done and you can come somewhere outside hit Control V, and it's going to based in your design now one main drawbacks about in these illustrations . As you can see, they're coming as a group. But when you open that group, not a single layer is named. So that's really big drawback, because if you want to find something, you have to really click through it and see what it is. If you want to change something really fast, you cannot do that because you have to click multiple layers and then change their colors. So in our case, you can simply hold control command key, and you can click right here to jump inside this layer. But then you have to hold your shift key to jump inside here. Then here, then here, And if you want to change these, you can jump right here and then change them toe, which have a color you want. So that is a bit of a drawback, but once you get already, you can be appreciative off. It's just amazing illustrations and they're free. You can use them as they said in personal and commercial projects. So let's jump through our illustrations. All I had done right here, Yes, if I open it up, I divided the character as well as the main illustration point. So, as you can see, here is our illustration and here is our person. So that's all the things I did because I want toe resize them later for all of our other illustrations. And it's much for all over our sizes, and it's much easier to do this and this way when you have them separated in different folders now for the shapes in the background, all I did is basically created one shape, and if I jumped inside right here, I used really near ingredient, which is white on this side, empty on the site. So if I click on it, you can see that it's at zero or pay city. It goes from top to bottom, and I also reduced you pay city to 20% right here. That's all I did for all these shapes. And finally, for this big one, I just use a mosque toe cover the portion off this hero image, and that mosque is going to scale down as we move on with the rest off the sizes in the next videos. But you can see it's just the square with coordinated or 50. I used exactly the same feel for all of these shapes, or basically, for it is at 10%. Just so it's a lot easier to see Bill behind this text. So basically, that's all I did for that section. If we move below that, we have all of these different logos. I just use them for free from the Internet. But you're going to obviously include your clients, loggers right here or your own logo. If you're creating a design like this for your own agency below that, we have another illustration from the same source, so it's from andro. Once again, you can use it at you can see, I just use exactly the same administration Aziz they offering. But I just changed these background colors right here to match the colors off my buttons and a text right here below that, we just have some text and we have this divided right here and it's nicely dividing this age to with this paragraph text right here. Below that, we have these nice little icons and we have all of these features divided into sections Awaited divider Ike wants as well. Now this section is exactly the same as the hero section. All I did is I just included the pricing right here. And we have these large bottoms for a package purchasing and all. I did to differentiate it a little bit from the home page from the hero section right here . I just re ordered some of these elements around, and I did exactly the same for this call to action section built for the testimonials I used once again this free logos and I just used some random text and some random names, and I used these two arrows so that users can navigate through website left. And right below that I use this problem with the button exactly the same set up and finally for the block posts and footer, we'll block posters. You can see we have three block posts, and if I open it up, you can see post 123 and inside of each post we have image. Then we have the time stamp right here we have in the paragraph text. We have avatar off the person who is writing the text, and we have the person's name. Same for all three. We have button for see all and is going to take you to the block Beach. As you can see, it's linked right here and finally we have the further So once again it's logo. It's all of these different menu items. We have social media icons below, and finally this text at the bottom so you can see this design. It's really quite simple. It's really quite easy to create. And as I said, I'm not going to bore you and waste too much of your time for discourse with her. You can create this website design if you want to learn that once again, have a course on how you can create a website design from scratch, and in it you're going to explore in a lot more details how you can create websites like these and how you can sell them to reclines. Basically, when you're creating this pitch perfect design brief, which is really written in stone so that both you as a designer and your clients are going to follow it to the tea because you're going to agree everything up front and you're going to research Der website as well as their competitions website Really well, so they can really understand it and you can easily follow that design brief. So once again, if you're interested, you can check it out. But if not, we can then move on with this course. And in the next video, I'm going to show you how you can scale down this particular website and we're going to go with each video about how you can resize on this website so you can get a fully responsive design which you can share with your developers. 11. How Responsive Resize Works: responsive design is basically website is reacting to the device that the user is seeing it on. So if you're looking at the phone screen, Responsive is going toe. Adapt to that particular form screen to look just right to look easily accessible so you can easily browse all the information that that website has to offer on that mobile device screen. It goes without saying that it works on all off these other devices exactly the same. So if you're looking at a desktop, basically you're getting to the desktop version of it. If you're looking at at a mobile phone, you're getting a mobile phone version of it, and it works Exactly the same on all of these other devices is a showed you in the first video off the design part off this course because it's adapting responsibly to those devices that you're viewing your website on. So how this translates to the designing part? Well, it's quite simple in Adobe Exit because they have this nice, responsive resize option so you can turn on this responsively size option from here, and it's going toe resize this entire design responsively, as it thinks it should in my opinion, and in my experience, it never works as it should. So you always have to adapt this responsive resize. And in my opinion, you should always use it. But you should always use it part by part, off your design, not the entire design at once. So how it works. Basically, as you can see, you can just turn this struggle on and off, and you can click right here on the edge off your design, and you can simply adapt it. And you can see it tries to work out all of these different components and how it's going toe responsively. Look on all of these other sizes. So, as you can see, we are at 3 95 which is basically our mobile design at this point. But as you can see, none of these components looks as it should. So if you hit controls that to come back, you can always jump inside section by section. And when you do that, you can see all of these other settings. So we have padding right here. You can enable or disable padding for groups, and basically you can choose which patting you have between all of these different elements . So different batting for each edge or same batting for all edges. So you can see that we have a right edge padding at 1 65 which is this betting right here. 1 65 is here. We have top edge bedding in bottom edge betting and you can use all of these different measures to set them up as you want. And it's going toe when you set them up. Is going toe responsibly resize all of those components. But what it cannot do is cannot stack the components on top off each other. So if you remember from the example I showed you earlier, let me drag it right here. And if I enlarge it, you could see that I use responsive resize and responsive design in general to position, for example, dis tax on top off this illustration. It cannot do that in adobe eggs. You have to do those things manually. So basically, responsively size is there to help you along with your responsive design venture. But basically it cannot do anything and everything for you. You have to do some of those things yourself. Also, you can use responsive resize auto, so use automatic re size constraints or you can click menu and basically, how you're going to fix it and how it's going toe look like when you're using responsive so you can fix wit and fix height. But you can click right here, for example, and now it's goingto be fixed to the top and fix to the left. So if I and zoom a little bit click on our our port in click right here, you can see that it stays fixed to the left and fixed to the top. Now you can do that for the components, or you can do that for these various elements inside off your design. So if I use exactly the same settings here, and if I start re sizing it, you can see that it's keeping the constraints left, right top bottom as their fixed right there. And it's going toe be fixed to the top and fixed to the left. In this case is you can see it's responsive design works nicely up to a point where it starts breaking, and then you have to jump in at that height, sort of that wheat, which is 9 78 pixels at this point and you have to do something. So it's going toe be working properly at any moment. So basically, desk how responsive resize works and in the next video, we're going to start re sizing it. So we're going to create this great that you can see right here, and we're going to move from extra large desktops, too large devices. And I'm going to show you how you can adapt this design toe work on large devices that stop . 12. Create Responsive design 1: So let's now start with responsive design. As it said in the first video, Make sure you talk with your developer about how can you design if they're using bootstrap if they're using angular or something else if they're using custom grid system if they're using no grid system at all? If you have to create a great system yourself, then simply speak with your developer upfront before you even start with the design so you can know how it's going toe adapt once you have created your design, and now you have to adapt it manually, not one more side. Note. If you're starting with extra small. So you're starting with phone size, for example, and you want to adapt it toe extra large there stops or a time, then it works exactly the same. So you're going toe exactly the same. Adapt all of these components and different sizes to fit these different screens so lot. Now, let's start. I'm going to click right here, hit control de to duplicate this one. I'm going to position it right here, below a large devices desktop. I'm going to double click on the name he'd control, see double click right here hit control of the and now I'm going to do I'm going to simply click right here so that I can see all of these different sizes. So basically, it's 10. 24 at wit, So I'm going to do that. First you can off course into this manually by simply clicking right here and going to 10. 24. But as you can see, layout is breaking quite a lot. So I'm not going to do that. I'm going to simply click right here and use 10 24 like so. But I'm going to switch off responsibility size at this point because I want to make all of these components be exactly the same size. So it's going toe, keep exactly the same size for all of our character styles and are illustrations. So I'm just going to switch off responsive resize at this point. But I'm going to switch down for some of these additional components. So as we said 10 24% and now you can see some of them are outside, but we're going to deal with it in a 2nd 1st things first, we have to adapt these different parameters so As you can see, it's 30 50 47. So we're going to do the same for here. So 30 15 and finally 47 right here. And let's check one more time. So tall columns 30 50 47. Tell columns 30 50 and 47 should be right here. So, as you can see, we have exactly the same settings as we have right here at the top. This is a really stubborn till in adobe exist, so you have to adapt it from time to time. Now, let me quickly jumping and move this design over so I can see what I'm doing. Basically, and I can show you that in this original file. So let me jump in and I'm going toe. First things first adapt my navigation. So, as you can see, we fixed it to the left and to the top. So what we can do is we can simply click right here and adapt it like so. But I'm not going to do that because I don't like what it does with the logo and what it does with the bottom. I want to have exactly the same size right here. So what you can do is simply click right here, lay out and we can see that we have margins linked or 47 So we can click right here. And we can use batting for left and right edge off 47 like so and like so So what we can do at this point, it's simply use the navigation moving over like this, and I'm going to move this over as well. But as you can see, it keeps moving this so I'm not really liking what it does. So I'm going to do this manually and going to simply move the button over to here. I'm going to simply click on one of these. Hold shift and move them over to somewhere around here. Perhaps, and I'm going toe also reduce the size of the logo like cell. Position it in the center like so and there we have it. So now we have our navigation done, and I'm going to simply move the background to here and then to hear until it meets with the top edge off our hero and our navigation is complete so you can see it looks exactly the same as here, but we just use some trickery to position some of these elements a bit better, and now we're going to do the same for the hero. So as you can see, you can include patting. You can include responsive resize. But if you're just using responsive resize, you can see how that works, so you can click and move it and you can see it's really skewing all these different elements. So what I really like to do is simply jump inside and move the text over to here. Move these two buttons to here, and basically I'm going to now adapt them in size. So I'm going to click on one of these buttons and simply move it to here. But I can include responsive resize for it, so I could simply moved here. Use this button and move it here as well. But if you don't like how they look like and I really don't because we are still at desktop size, you can simply increase the size off this and button. And maybe we can include padding and what's increased the size. Let's use the same padding, but for some reason it doesn't work. So let's jump inside manual and now it's positioning to here. It won't budge because we have these padding links, so I'm going to position it right here. And then I'm going to use the text inside, position it in the middle off our button, and now I'm going to do the same for this. Learn more buttons. You can see it's really stubborn from time to time, so you really have to work with it. And in this case, as I said, I'm creating a button Toby three columns White because it can really nicely adept to the size. So I'm going to jump inside, click on the person, and I'm going to position its where around here. Let's say maybe even a bit below, because I want users to see this text. And then I'm going to click on my illustration, and I'm going to position it here until it meets with the right edge off our grid. Now I'm going to adapt all these different elements song going toe position this here, position this here and finally I'm going to jump inside our mask and click on the mask, and I'm going to simply bring it to here and hear o B G just simply bring it to here. And as you can see, we have now adapted the look and feel off on days websites, and I'm going to simply do one more thing. Select the text demo buttons and more buttons and simply hit control G to group them. Hold my control command key. Click on a hero BG, and there's simply click right here to make sure it's in the centre vertically. And it is in this case you can get a group and then simply we can want with some of these other elements. So for the logos, we can position them here and then simply responsibly resize them to hear. Then we can move this about us illustration and what I'm going to do for it. I'm going to use because we have 12 columns. I'm going to use six for illustration in six for the text. So there is some adapting that needs to be done. You can use responsibly size if you want. So two for six, it has toe end at this car, so you can simply do this. But if you don't like how it looks like in a really don't, you can turn off responsive resize holder shift key and in one of the corners simply resize it, even leak like this. Then I'm going to position the text and the button to here. So 246 columns and I'm going to extend the size off my bottom Toby three. Like so, and I'm going to simply click and position text in the center. And now what I need to do is simply very position some of these text so you can see responsibly size. It's turned on for the text, so you can even do this if you want to. But it's reducing its size, as you can see, and that's not something that we want. What we do want is we have to do this manually so you can double inside hit enter so you can place it on another line and simply create three instead of two lines. And then you can simply moved the divider down like this 20 pixels, and then we can do the same for this stacks. So we're going to position in 20 pixels, and then maybe we can use 40 pixels for this one like this, and then I'm simply going to adapt to text a bit more so that it fits our great. So it's going to simply show the responsive resize function off this design. And finally, what I'm going to do, they simply use in the text and demo button. I'm going to position it right here, and I'm going to choose illustration, position it in the middle off our text, somebody our own humility. And then I'm going to make sure that we have the same spacing between our hero, our logo solid use 18 this case. So shift 12345678 and weaken to the same for this section. So 80 as you can see. And now let me quickly move this to the center and use the same spacing. So 18 this case, like so and then you can do the same for this section like this. Simply make sure it's at 80 and now they have to do is simply adapt these sections to our great. So you can see that we have four different elements and we have 12 columns in our great, so each of them is going to take three columns, so you have to adapt them So I cook on fast delivery and going to position it here. Unlimited revision. I'm going to position it here and finally, custom solutions. I'm going to position it here because each of those is going to take three columns, as you can see, and it's going toe a tap responsibly self from manager. We have to adapt our text to be in doubt a little bit like so, and one more quick. They've never leave just one line of text below nearly just one word. Make sure they are at least two words on your line so that it looks nice and clean. So can see this is going to take us the most time. What used to dot at the end? Because this is the most boring part off this responsive design process is adapting this text now, as they said and showed you. You can do this with responsive resize, but what it's doing is it's reducing the size off your text, even though that's something that you don't want. For example, for that particular sighs off your design. So you are going to see smaller text from time to time, or you can have exactly the same Texas sizes for all your different website sizes. But you have to do need this way if that's something that you want so that you can responsibly resize them for all of those size. So you can see we have 80 everywhere, so everything looks nice and clean. So, for example, we can even place it at 100 because I think that was the idea here. So what I'm going to do is simply move everything down 20 pixels more. So let's go from clients all the way down. So 20 20. So, like this 20 20 more just so that we have a bit more reading space. The pricing. It's at 100 that's basically it. So for this one, but you're going to do is we're going to jump inside, Aziz said. Multiple times you can use responsive recites what? This one, but I'm not going to do it. It's much simple for me to simply reorder some of these different elements, so I'm going to jump inside, position this right here and for it. I am going to use responsive resize, so each of these is going to fit four columns so you can click right here. Position it's to here. Then go to pro, do it the same way. So 1234 as you can see and finally for the elite, we're going to use exactly the same end as you can see. It nicely works with responsive, precise, so as a send multiple times responsibly size really does work well with some of these elements. But for some of them and in many cases, majority of them you have to do everything yourself in order for everything. Toe, look properly in tow. Work properly later in quote. So for this one, you can reorder their some of these elements and you can show to the developers how you want him to look like one state. Develop this design that let's use them something like this. And let's move on to the next section, which is testimonials. So just make sure they are at 100. So 123456789 cents, a 100 pixels. And what we're going to do for this one is we're going toe. Remove testimonial number three. So I'm just going to hide it. I'm going to position number one and number two in the center like this and I'm going to move this left arrow two will be lined up like So I'm going to do the same for the right arrow because now they're going. They're going to fit inside off are great. So in majority of cases, you're going to see some of these bugs with adobe eggs D, But just ignore them and work around them. So in majority of cases, you will have to select some of these things your own instead of it helping you. But what can you do? You simply have to work your way around it. So let me position this right here and for the button. Let me move it separately, and I'm going to make it be three columns white, same like we did with all these other buttons at the top. Make sure it's in the center like this and what I'm going to do next to simply reorder some of these shapes. However I want. So maybe a position this here. Maybe I can even reduce it size American position. This to be here. I'm going to jump inside the mosque. I'm going to move it to here. I'm going to move it to here. And finally, I'm going to move this pricing Bijie Toby here once again, if you want to see this design, you can download it from project files and you can play around with it as long asi much as you want. And as I said, you can use it for both personal and commercial products. It's really up to you. But I do encourage you that once you get started with this that you create your own designs for this one, for example, I'm going to simply reduce the size of the image because everything is going to fit nicely here. So I'm going to use three of them, and when I'm going to do is simply adapted the text to this particular size so as you can see your offer, that's what I was saying. Two words at the bottom. And finally, I'm going to adapt the avatar and name. Make sure there are 20 pixels is you can see same sizing and like these other ones, and I can move it toe here. I can do the same self image. Make sure it's at four like so, and make sure that you adapt text where needed. And just so you know, this is going to happen Life in Cote once you are starting the responsive design. But this is just for your reference and the reference off the developer about how you're going to create this. So basically, we are nearly done with this size, and I'm going to simply double click inside position this inside and I'm going to play around with a text a little bit more. So as you can see now, we only have one text right here. But because I said it doesn't look all that pretty, I'm going to simply move to off them below. I'm going to adapt its our Darryl into position 20 pixels down and basically that's it for the block. Only thing left is this button is going to be 40 pixels down. So 1234 So now let's fix the button. I'm going to make it to be three columns, so basically the same as we did with all of these other ones. So I'm going to position text in the center like so. But you can do this. You can simply selected in position it like this. And finally I'm going to move it Toby in the center like so make sure it's 40 pieces like this. And finally what? I'm going to do it simply move the footer 100 pixels down. So it's basically the same distance as with all these other ones. So basically, shift. 123456789 cent. And basically it's 100 pixels down. What you can do for the footer is basically move it like so, and it's going to a responsibility size. But as you can see, text really doesn't work. In this case, we have to use those constraints. But to save a bit more time, what I'm actually going to do is used this manual approach. So basically going to do this, select everything and simply hold my shift key and move them in the center. Now I'm simply going to click on my are part right here, and I'm going to extend this bottom edge off my are part to around here and it basically it for this size off our design. So let's quickly run through one more time. As you can see, we have to adapt. This illustration a little bit, so it looks a bit different. And what you can do right here is reduced the size of these buttons. Toby at two columns White because they're too comes right here as well, or you can adapt him. Toby three comes white, so it's really up to you and how you are going to used this approach. But in this case, I used three comes because I think there are much more readable on the smaller screen. Then we adopted the text position, everything to be center. We adapted these columns who adapted pricing re adapted these pricing packages accordingly . For the testimonials we don't no longer had three. Now we have two testimonials, and for these background shapes we simply adapted them and positioned them on the page differently. For the blogger used exactly the same layout. And finally, for the footer, everything looks exactly the same. So that's it for this video. And in the next video, we're going to move on to medium devices tablets and we're going toe adapt this a little bit more, and now we're going to start making these different changes because in this one we're going to position illustrations above the text. So is going to look quite a bit different then in these two, which are for the desktop, so I'll see you there. 13. Create Responsive design 2: All right, let's no start with medium devices tablets and to get going first thing, we're going to do it. Simply duplicate. This are part. I'm going to jump here to the top hit control C Heat control. We right here at the bottom, then ST Ng a speeded with previous ones. So as you can see, we have 12 column layout. Same like we do right here. But it's 30 30 30 nights, so we have to do that as well. But before we do, it's 7 68 in wit, So let's first do that. So it's 7 68 Press enter, orator. So once again, 30 30 39. So turning already. And finally 30 night. And we need to know 30 here as well as you can see. It's really stubborn sometimes, but you have to persuaded 39 39 here as well. 30. It really bugs me that it does this, and I really don't know why it's doing it because, as you can see right here we have it. So 30 30 39. So if I change it, you can see it's 39 everywhere. Everything is fine. But if I switch right here. You can see it. It doesn't work that well. I really don't know why it keeps doing that. I don't know. That's maybe I can do on under Think so? Maybe I can change it to here, So let's start with 30. And now let's start with 39. 39 and then switch to 30. Right here. So there you go. 30 30 39. So, as you can see, it really is buggy this tool and it really has a mind off its own. Because once again, if I click right here, open up on the margins. You can see there Same right here and 30 everywhere. But if I switch it right here, you can see how much trouble do we have? Witness. But let's not bogged down with that. Let's quickly move on to the next one. So because this is the tablet, we're not going to see these menu items right here. We're going toe. Have a menu icon included instead. So let me jump inside. I'm going to move this never Bijie right here. I'm going to move this button right around here. Let's see and I'm going to hide for now. all of these menu items like so and right here I'm going to include Menu Icon and I'm going to include one, which I included in the example original example that I show you. So here it is. And let me quickly just reduce its size to attack. No, I'm going to jump inside my button and simply make sure it's three columns wide, like so Make sure this is in the center like that, and let's leave it for now. I'm going to move this menu icon right here, and what we have to deal with this is we have to make sure that we have created an expanded menu. So that's what we're going to create now. So let me duplicate this never BG so he'd control D. And I'm going to move it below. So I'm going to actually move this one like so until it meets with this one. So just make sure I'm going to switch off responsibly size for this one because I really don't need it, and I'm not sure why. It's s o much bigger. So 89 in height, like so maybe we couldn't even make it smaller. Let's say 60 and what we need is a line, and this line is going to go through here. So it's going to be nicely divided limits, which off my columns for now is going to nicely divide this never BG and this bottom beauty . So let's use this as a drop down BG, for example, and we're going to move all of our menu items below. So I'm going to select them like so I'm going home. A shift can simply move that below to be in the middle off our dropped um Bijie. And what I'm going to do is maybe I can duplicate my drop down BG reduced the height toe one and click right here and let me border is excluded. Let me use this color, for example. Yeah, as you can see now we have this nice dividing line. So if I jumped back what I can do right here, simply order them. So I'm going to jump inside, select all of them and simply aligned them to the right. Let's say and aligned them with our menu like want like so and we're going to go one by one . So services iss first features in contact US you can see we called your shift key or remove this for now because once again, box in a no b eggs, the are present. So as you can see, as soon as they hit, shift it, select everything. I really don't know why it's keep doing that. But even if I just use my arrow, you can see it doesn't move them even though the story is selected. So this box really bugs me no pun intended. But what can you do? It Simply have to move on with it so I can simply select these two and moved them down. I can simply hide this. Move this down and there's simply switch on all of these other ones. So what we have right here is 1234512345 and Block should go up front like so. Now let's simply make a selection, and I'm going to duplicate this line. So let's use this as a divider, like so, and I'm going to simply duplicate it and move it below. Then I'm going to use 20 pixels because that's what we used for everything. Basically, So shift 12 Then I'm going to use my divider line here, it iss I'm going to line it up with the bottom off my text like so. And then I'm going to hit shift one tooth to make sure it's 20 pixels down. I'm going to select all of these. Make sure they are 20 pieces down like so. I'm going to move them on down like this. I'm going toe extend my drop down BG down to here just so you can see what I'm doing. I'm going to hit control D one more time and simply moved up dividing line 20 pixels. Once again, use the pricing I could use and, uh, repeat great to do this function. But I find sometimes old fashioned methods really work well, So we're going toe, move on and simply select bloggers. You could see Adobe X'd does its thing now because it's showing me the 20 pixels distance between all of these different items, as you can see right here. And finally we have contact us and for it we're not going to use the divider, so shift want to down, and then I'm going to simply use drop down BG to move it close like so shift 12 And as you can see, we have our drop down menu ready to go if you think these dividers are too harsh on your eyes, so as you can see, you can clearly see them like So you can either reduce the opacity so you can select them all. I'm going to group them hit control G, for example, to a group like So I'm going to use the white there, aligns like so And you can lower your pay city off the entire folder. Safer hits 20 for example. You can see how that looks like for 40. I think that's good. And you can even select this color if that's what you want, and then you can call her them in that particular color. But let's use something like, I don't know, 80 maybe 60. Yeah, I think 60 is good for now. So what we're going to do is we're going to use all of these menu items, move them and down so like this and I'm going toe, use them divider lines and drop down BG Group them all and simply named this drop down because I can now hide it and I can keep Continue working on my design. So let's include back are really help. And as you can see, we have 12 column. Same like here, but the columns are a little bit narrow. So what we can do for that is I'm going to simply move my illustration down and move my text up. And I'm going to change this text to be in the center so you can double click inside and click right here to make sure it's in the center and without moving this spacing or anything, I can simply position it right here. Home a shift key. 1234 And then I'm going to adapt my buttons. So they're three columns white in this case. So I'm going to move them right here. As you can see there in our four columns White, I don't like that. So I'm going to make sure that they are three columns wide like so I'm going to move this in the center, and I'm going to use more button like that because you can leave them it for. But then you have to adapt him once again. So they have work on the mobile size for example. So let me move them 40 pixels. So 1234 I'm going to make sure that they are in a center like so. And finally, I'm going to move my illustration. 1234 and 1234 once again just to make sure that we have even spacing. And now I'm going to extend my hero BG up to this point like so and then move my illustration back. 1234 So to make sure that they are in the center, what I'm going to do is move the illustration to the right. Like so I can move my person up like and that if that's something that you want, let's leave it here, for example. And then I can move my illustration once against her shift. 1234 Now this is going to be our bottom. Align off our hero image. I'm going to move it back and finally move my illustration. 1234 So it's really playing around with all these different elements and adjusting them as you would. And then I'm going to quickly hide my great because I'm going to play around with these elements. So I'm going to jump inside shapes and our mosque, and I'm going to extend my mosque up to here, and then I'm going to bring it in a little bit closer. And then I'm going to simply remove these shapes around, same like I did previously. So if it is a bit hard to select them, then you can hold your old key and you can quickly jump inside and select directly. So let's say that this is the order I like, and I can simply leave it like so, and I can then move on with the next part of my design, which are logos and for the logos. If you remember, we do have responsive resize. But if I home a shift key, let me quickly turn on my great so I can see them snapping into position. So if I hold the shift key, they're going to scale down evenly like so. But you can even extend them like this when you get to a certain point. So with that being done, let me move them. So shift 12345678 Let's see, and then I can continue with our illustration. So with our illustration, I can move my illustration here, and I'm going to scale it up up to this point, for example, because I really wanted to be nice and large, and I wanted to position it in the center like so. Then I'm going to move text and demo bottom right here, and I'm going to hide all of these sections down because it's going to be a lot easier for me to work on this. Next. I'm going to call my shift key. 12342 With 40 pixels down, I'm going to align it, which are great. And finally, what I'm going to do because it's going to be a lot easier for me to use responsive resize is I'm going to convert this from the point text, which is this right here to area text. So when I click right there and I can then extend it, Toby, right here, I condemn play around with it. So, for example, I want to move this. As you can see, it adapts to my paragraph like so so I can leave it like that, or I can even jump inside and bring this a little bit closer. Like so Because we only have two lines of text now for the demo buttons. Same like we did with previous buttons. I'm going to reduce it, Toby. Three columns white to make sure that we have the same spacing, like so and for our title. You can even convert that the area text if you want, but I'm going to leave it like it is because it really doesn't have that much in it. So I'm going to position it like so. And then I'm going to select my divider, my paragraph, and make sure they're in 20 pieces like that. Make sure that the bottom is at 40 like so and make sure that this is aligned to to create It is so that's basically it for this section. And let's now, quickly move it down. Make sure we are at 80. As you can see, we are so basically you're keeping the same look as we have right here. But now illustration and the text are adapting to the wit that we now have one more thing about the text. You can convert this text from point X toe area text for all of them, but I really like to convert them a bit later, just so that I can see where it needs to be converted and if it needs to be converted at all. For example, for these sections, it's really important that we know covert but, for example, for dissection. Maybe it's not that crucial, but let's see once we start designing it. So let's now use this section, move it in the center like so, make sure that this is at 80 like that, and, as you can see in this title, fits in nicely. But this text doesn't so let's quickly jump in sight. I'm going to convert toe area text, and I'm going to simply extend this a bit down. I'm going to move this here to snap to grid and move this here to snap the greatest well. But as you can see it now, just has this client's words on that one line. So what? I'm going to do it. Simply move this up like that, and then it's completed. So as you can see, it's really easy. And now if I start moving them for some reason, it's going to adapt, and it's going toe push all of those words down. So that's basically how you work with area text. Next, let's move on to features, and I'm going to select these features and down position them to hear. Make sure there it's 80 like that and what I'm going to do is simply divide them six by six . So these two are going to take six columns each. The store went to do the same, so we're going to jump inside, and I'm going to move unlimited revisions. And I'm going to move custom solutions below like this until they snap and we're going to count six columns for this one. So 1234568 This one. Let me check once again. 123456 it is and use custom solutions so same right here and make sure they are at 40 apart . But before we do that, let's quickly adapt him so you can open all of them. And you can, for example, click on this one converted click on this one. Convert it, do the same for this one and finally do the same for this one. So now I can simply extend them to hear. I can do the same for this one. Make sure it's at six. Make sure this is six as well and a same for this one. So I'm going to start from the beginning from the 1st 1 I'm going to move it to here just so that I can see what fits and what doesn't like this like this. So it has to be three lines. So as we did with the previous ones, let's just move it up to here. This is completed, and let's do the same for this one. So it has to be a three alliance. If it can be a three lines like this one, for example, it really doesn't matter because you're going to push them 40 pixels down from the lowest point, which is this one. So it's good jump inside and unjust this so it doesn't mess with our alignment. So now we can move them into place like so shift 1234 And what I'm going to do is actually move this. Make sure it's aligned with Margaret like so all of these are aligned, except for this one, like so. So everything is good to go now. No, I have to adjust my tax just a little bit until it snaps to grit and do the same for this one. You're going to notice the's alignment issues from time to time, but you simply have to work with them because there is no other way around. Just remember, you are designing at this point you're not developing. So everything is testing basically. And this testing is really important because when you're doing this, you are basically doing the testing for developers. So you're making sure that things are working as they should before they go into development, because it's really a lot easier and cheaper for you to test all of these issues. Then for developers, because their time is more precious than yours. A bit later, once the project gets going and once everything is coded because then they have to fix bugs , then they have to make sure that everything works correctly as it should, especially because this is a website. It has to work on different browsers its own. So just make sure that when you are designing, make sure that you're checking for all those mistakes because it's going to be a lot easier for you and then literal for developer to check everything. So let's quickly move on to our pricing. I'm going to make sure that it's at 80 like it is right here and for its little quickly hide all of these elements below, like so for it. I'm going to select my text, make sure it's in the center. We don't have toe deal with it at all. And for it, what we're going to do is we're going toe, have two in a row, and then we're going to have this next one down below. So what? Specifically adapted? So because responsibly size is turned on, you can see that it keeps the distance between left and right margins, and it keeps everything as it should. So to for five, it should be at six, like so, and this should be at six as well, like, so just make sure to account. Yeah, they are, so they're good to go, and you can position this in the center, but before you do, make sure it's at six as well. Then position it in the center and then you can extend this. So let's quickly do that 12341234 months Again, I'm going to select my background and simply align it with the spot. Won't like. So then move it up. 1234 And I'm going to simply dead. Adjust my shape. So I'm going to use my mosque. Simply extended all the way down to here, and then I can use this shape. I can play around with it that can position it down. For example. I can use this one. Position it up, back in position to circle here. Maybe I can move this rectangle here. Let's say something like that. Maybe I could move this down a little bit and finally I can move pricing. BG inverts so it aligns and finally move my mosque so it aligns as well. So that's basically it, for that section is you can see some sections are really simple, and some sections can be a bit tricky to work with, so it's quickly hide pricing so I can move my testimonial down. I'm going to position it in the center alike, so make sure it's at 80 if it doesn't show like it doesn't at the moment. Shift 12345678 And for this one, because we are a tablet size that moment, I'm just going to have one testimonials and I'm going to have my arrows at the edge. So I'm going to hide my testimonial to I'm going to position this in the center like so, and I'm going to simply use my arrows as you can see. Shift Key again doesn't work in an obvious the I really don't know why it keeps showing these bugs, and I saw reports in the user voice on their website where you can leave your opinion on software and a lot of people have complained about this issue. But nothing has been done recently, so let's quickly move on 80 and what you can do is simply position this in the center. But because we haven't this mosque right here, I found it's a lot easier to do it one by one. And because we're running out of space, you can simply extend your our port all the way down, and what I'm going to do with this one is simply jump inside, move my text in the center like that and make sure that my bottle is three columns white like that. You can also speed this up if you want to. I didn't do this for for this project, but I usually do it. You can simply make these as a component, and you can include a component off a button so you can simply drag and drop a component from here so you can select a button. Just let me make sure it's selected. You can hit control and command. Kate is going to turn it into a component, and then you can simply select that component from here. Drag and drug drop it into place, and then you can see what position it from here. If that's something that you want, I don't want it for the moment because you can also hit on group component and call this more BTM. I didn't want to do it because we are still playing around with different sizes. So as you saw here, we have three components here here for components and there we have to comport two columns and someone, So that's why I didn't do it still, because we're playing around with different sizes. So it's a just this I'm going to move this circle to hear, for example, move this here. I'm going to select this shape with right here. I'm going to see where my mosque is going to move it inwards until it meets in the center. Maybe I can even position this to be around here, and it's really playing around with these different elements. See what works, what doesn't and basically working around it. No for the block. We're just going to help one, so it's quickly move its 18th. I went to jump inside and for the log you can't leave it to Let's see how to looks like. So its position it at 62456 So you can even extend it from here. But as you can see, it keeps moving this text, and I don't want to do that. So I really like to do everything myself. I'm going to jump inside and simply move it. One column to hear everything else stays the same and for the post to we're going to hide the post tree post two. We're going to do the same thing, so just jump inside extent, this image, that's basically it. You can play around with this text a little bit more, but as you can see, maybe this notice you will fit. But I'm just going toe. Believe it. As it is, all I'm going to do is simply move this see all to be three columns wide to match our other buttons like so and would simply just position to be in the center, which are text like this and button like that. That's basically it's an one final thing that's left for us to create is Footer. And as I said, you could see the position it like, So make sure it's at 80 like that and you condense simply adjust left and right and move this inward, and that's basically it. You are done with the fuller Onley thing that's left for us. To do right now is simply move this like, so I'm going to move it. Werth like that and our medium devices tablets is ready to go. So if I quickly run through, what we did is we adapted it and, as you can see, have to move this a little bit. And yeah, this button is three columns light. So what we did is we created this menu and a drop down menu. So if I quickly toggle it on or off, you can see that now we have in the drop down menu. You can move this if you want to, you can move it to the left. But I found and users found it that because your finger is right here, So when you tap it, it's going to be a lot easier to simply slide your finger down here, then to tap it here and then stretch your finger toe this area right here. So it's a lot easier. Not simple and a lot. It makes a lot more sense to have all of these menu items right here because, as I said, your thumb is right here. You tap this icon, opened this drop down menu and simply access all of these features below. What we did 10 is simply every order. Some off these elements so removed the illustration below. We moved the text up. We did the opposite thing right here. We reduced the size off these logos. Then we positioned these two look like so So instead of four in a row, Now we have two in a row and two rows, basically for the pricing there now a little bit wider to fit in these columns. And now we have two and one below, and for the testimonials, we only have two. Instead, we only want instead of two. And finally, for the block post, we have two instead of free. So that's basically it for this one. In the next video, we're going to design small devices tablets, so it's going to be basically the same. But it's going to be even smaller than this one, and I'll see you in that video. 14. Create Responsive Design 3: Let's now continue with small devices tablets and I'm going toe hit control de to duplicate this one, and I'm going to position it right here. I'm going to double click right here. Hit control, seem. Don't we cried here, Get control the and I'm going to check the size. It's 600. I'm going to make the same size here like so presenter, and let's check out the great here. So it's eight columns this time, so let's first change that. I think so And 30 37 47. So let's try to adapt that 30 37 finally 47 right here. So, as you can see, it keeps bringing us the same problem. But this time we managed to fix it easily. So 30 37 47 8 Columns 30 37 47. So that's basically fight. As you can see, sometimes you are going to have these issues, but sometimes it's going to work just fine. So let's go section by section, and I'm going to use this never BG. I'm going to move it right here. I'm going to select my demo button and menu icon. I'm going to position them right here and for this one. Let's no have it at three columns. So let me quickly adapted like so Because we wanted to fit our columns easily. Now, because we have a drop there, we have to adapt it as well. So all I want to do right here is moved to drop down right here. Make sure that all my items will line up with our grid so you can select all of your items . Move them like so And finally you can use divider lines and drop down BG and simply move it to here. Next up, we're going to move on Tohira section. But before I do, let me quickly hide their drop down. I'm going to move to my hero section. I'm going to use my hero BG and simply move it like so. Then I'm going to go into shapes, used my mask and simply move it in words like so and I'm going to now concentrate on the text as well as on the illustration. So for the text, we have to make some changes. So let's first convert this toe area text and you can court this to area text as well if you want to, but I'm not going to do that. I'm going to simply place this below. I'm going to move this up and finally move this down like so. So, as I said, never put one word so you can play around with order off your words so you can do something like this. So if you think that fits better than you can do that finally I'm going to simply adapt this text to my gripped like So I'm going toe, extend it their own. And I'm going to bring this back up one line, like so going to move from committing down from websites, abs to branding. And I'm going to put this to the last line like so because I just think it makes it look a lot more pleasing to the eye with the here. And finally, let's deal with our buttons. So I'm going to position them down to here. 1234 And once again we're going to make them be three columns light, so I'm going to select this one. Make sure it's three so, like this one to make sure it's at three as well positioned text in the center like so make sure that this is in the center. If you cannot find it, simply select both of them and click here, then here to make sure it's in the center. Like so. Position these two in the centre as well. And now let's deal with our illustration. So I'm going to position our illustration here, make sure that responsively size is off and simply make sure toe scale it down a little bit . So I'm going to have 40 pixels here, then shift 1234 And I'm going to simply select my beauty and move it until it lines up with our illustration. Next shift 12 As you can see, it really does not work sometimes. So you have to force it basically. But you can simply move it while holding shift and is going to select you 40 pixels from here. So basically all that is left is we have to move these shapes. As you can see, the really do look great. But as you can see, you have to adapt them all of the time because in order for everything toe work as it should, you have to make sure that they are different sizes that they are positioned correctly. You have to scale some of them down. You have to position them differently. But as you can see, it is fun to design this stuff. But when it comes to things sort of repositioning, you really have a lot of work to be done. So let's now move on to our logos, and I'm going to hold my shift key and reposition my logos a little bit better, like so, make sure they are at 80 for example. So let's position this tow line up properly like so, And I went to a home a shift key. 12345678 I'm going to do the same for my illustration. Make sure it's at 80. For some reason, it's a 78 so I'm going to simply move it to pixels down like so. So when you move it, it's going to show 80. So what I'm going to do now is simply use my illustration, position it toe here, make sure it lines up with our great simply call shift. Then I'm going to use my text and position it until it lines up and until it lines up with our great on the left as well as shift 1234 and I'm going toe. Simply position my button until I deal with this, so I have to move this text down a little bit. So in the industry, let's use it like so I'm going to use my divider and simply if it allows me, I'm going to hide. This text simply moved these two down I. So then I'm going to choose my divider and position 20 pixels and then do the same for the text. So from inception, we can perhaps move these books. Let's see how that looks like like so as you can see, Box adapts nicely to our great and one final thing that we need to do is simply position this shift. 1234 and I'm going to make sure it's three columns wide. I'm going to position my text in center on this mountain. As you can see, it keeps getting faster and faster. The more you do this, the more you go, the more sizes you create because you basically lay down this layout. 234568 and you content quickly adapt that layout to fit your needs, so let's no quickly move this and move in this as well. Then I'm going to extend it down, and I'm happy with the way this looks. So basically, only thing that's left here is to adapt this title. So let's move it down and let's see, where can we break it? Let's do it here, then simply move my divider to be 20. And this section is completed now for the futures. Let's quickly attacked him. So they line up with our grid and let's move them 80 like so Sometimes you're going to notice these lines without, for example, 80 and it's going to show us, Let's say 79.8, because off these icons, so you cannot deal with that, unfortunately, But you can simply move on, go to your nearest endpoint and simply stop it there. So because as I said, we have eight columns now, So 12345678 we're going to use four. And for so let's move this to four. Here it is. They are lined up as shoot. These are light up, so basically it lets now adjust him. All you have to do is simply move this text to four like so and let's see where it breaks right here. Do the same for this one. To simply move it to four, see what it breaks, and you have to adjust some of this. Let's adjust this and this is going to show at three. So let's deal with it now, and we can move on to these bottom ones, so make sure they are at 40. So as you can see, we're going to have some issues because of these icons. 1234 39.8. That's the closest that we can get it to. And you condense. Simply adjust this text to fit our books like so because of the text, we're going to leave it as it is because this sentence is going to go to the end. And we did it that way on all of the sizes, if you noticed. So let's try to put this up. It fits. So you're going to leave it there and finally adept this to here. Now that that is completed, all that is left is to move these 80 pickles down so shift 1234567 feet. Now because we're on the small size tablets, I want to make some changes. So let's first deal with the text. I'm going to position it in the center like So I'm going to break this into two lines like this. I'm going to use my divider and my text moved in 20 down. And because this text is not an area text, let's deal with it Now I'm going to position it to here. I'm going to position this to here. Then I'm going to extend it down and because I can't see it, I'm going to hide these pricing information, and I'm going to deal with it now. So this packages and to suit your needs is going to go to the bottle. Let's quickly make sure that it's at the end. It is. And now let's deal with our pricing. So as they said, because we're on a small tablet size, I'm going to extend them to fit eight columns in wit. So how can I do that? I can simply select all three. Move them down 40 pixels, so shift 1234 Make sure this is at the left. So once again 1234 and I'm going to move a pro and elite down, So positioned them here, make sure that they are in the center like so and then simply move them to here. And then I'm going to select all three and simply extend them to hear if it doesn't work, then you have to do it one by one. Layout broke here for some reason. So let me check what happened. I'll go back a few times. I'm not sure why, Because these two look as they should. Well, you see, we have this error here as well. But to fix it, simply jump inside and I'll select everything instead off our bottom. Make sure they are in the center and simply aligned them up with the center off our books and finally purchase package were going toe to be in the center. And because our buttons are different, let's use this bottom. So control. See, I'm going to jump right here. Delete hit Control V and I'm going to simply move it here in the center like so Not really sure why that happened, but as you can see from time to time you're going to notice some of these issues. Let's quickly check. As you can see here, it works fine. Here. It works fine. So let's no quickly jumping. Fix it here as well. So what I'm going to do is I'm going to select everything, make sure it's at the center like so make sure it's at the center like so. If you cannot force it to be in the center, you can select all of them all your control command. Click right here and then simply click here. Then there went toe align perfectly in the center. So for the buttons, let's quickly delete this one. I'm going to simply use this one, So control C Control V. I'm going to position it right here. Then I'm going to make sure it's in the center like so and then. Once you've done that, let's now adapt them to be responsive. So let's select this. Select this, make sure they're in Central, so position there, select all three and then let's extend them. As you can see, they're feeling in nicely readout, disrupting any off our buttons. Any off the layout, you can see everything fits as it should make sure they are 40. So 1234 and one final thing I want to check is thes. Buttons are going to be different anyway, so let's just leave them like so, because the tapping point is quite good anyway. So let's now just make sure that we have enough spacing between them. So 1234 and you're going to deal with elite now. Also shift 1234 ended Basically it. So now let's quickly extend this. I'm going to hide testimonials, promo block and footer so that we have some space toe work with some going toe position. This down to here, which like this shift 1234 I'm going to select this. Bring it back, move this to be 40 like so and then I'm going to simply adapt our background and adapt some of these elements. So let's go into shapes going to mosque and adopt the mosque to go all the way down to here like so and make sure it's in the center like this. Then you can move some of these elements. So what's used these? Let's leave them where they are I'm going to position this one here. I'm going to position this one a little bit down. So something like this, for example, maybe I can even increase the size of it. And that's basically it for that section. So let's now move on to testimonials, promo block and for her. And before we do, I'm going to double click on my our board and simply extended all the way down. Like so, for example, because we don't need to go debt down. So testimonials you can hold shift, select everything is simply move it up to here. Shift 1234 And now let's jump inside and we can adapt our testimonials. So I'm going toe position A rating from here to be in the center. Make sure that this arrow is here and simply make sure that I bring this arrow in two here . When you're done with that, you can simply jump into promo. Make sure it's at 80 so I have to move everything because I moved Testimonials. 40. So shift 1234 Then make sure that this is at 80 as well it is, and then what you have to do is simply adapted text inside, so let's quickly move it into center like so. Then simply adapt this text but the journey below. Select this. Make sure it's at 20 and simply adapt this text places one below. Let's deal with our button, so I'm going to position it to be here. Make sure it's three calls wide like so make sure it's in the center and for the pixels down. So shift 1234 And let's now position everything like so make sure everything is in the center like it is and just make sure it's everything. It's center like this salute horizontally and vertically. So let's move the pricing. BG. Let's move the shapes. So I'm going to reduce the size of my circle a little bit. I'm going to reduce the size off this rectangle. Finally, I'm going to move this in a little bit. I'm going toe, adjust my mosque. As you can see, everything moves quite quickly as soon as you start getting these elements. So as soon as you start moving left, right, so eight pixels good to align it like so. And finally, let's just everything inside. So I'm going to position my text here. I'm going to remove Block post, too. I'm going to extend my block post image to hear you can double click inside and you convey reposition this image to fit next. This is going to stay the same, but this is going to change quite a bit, because now we have a lot more space to work with. So let's keep it like so it can move avatar to hear some 20 pixels. And let's deal with our button. So, as we said, we need to make it three columns wide, so its position it here and here. I'm going to select the text, make sure it's in center. Make sure it's at 40. Like Self Man. Make sure it's in the center off our port like this. Finally, for the further weaken, do exactly saying things to simply move it in the center. Make sure it's at 80 like that and simply bring the our port up a little bit so that we can finish it off right around here. When it steps, you know it's in the center, so I'm going to bring in this a little bit closer, and that's basically it for the small tablet size. So let's quickly run through what we did. I'm going to quickly hide my grades. So we moved this text in and I don't see the spacing here as it should. So shoot 12 I'm going to have to basically move everything. So 1234 1234 and 1234 So I'm going to move the hero BJ here illustration and then not to do everything, not to work on everything. So it's quickly just move the mosque down a little bit like so I'm going to show you a little trick. So I went toe extent are our board a little bit all the way down? So because we have worked on the hero, let's quickly select everything except for hero. You can go up a little bit and then simply adjusted to be 80 dumb so like this and you can see on the left hand side right here. If I move, you can see how many pixels are there in between. And once you've done that, you simply double click right here and bring in your our port until it meets in the center like this. You can also mean a lot closer if you want to, all the way down to a pixel until it snaps and it's basically it for a small tablet size. So once again, let's quickly cover what we did. We adjusted our A logo. We adjusted the positions off everything. And it's good thing that I switched this on because this wasn't aligned as it should. So, as I said, we included everything inside, same like we did for medium devices tablets. We now have this text which wraps around a little bit lower. We have the illustration, which is once again a little bit smaller. Here we have smaller illustration, smaller logos. We have the text that wraps around a little bit differently. We have Destexhe here we have these two, but they now extend down a little bit. Here we have this different look than before, and I don't like how this looks. Maybe I can wit somewhere around here. It's a just so that they are not in the same space and for the pricing we now have in these boxes, which extend all the way to hear their feeling the entire space because there is a space that we filled once again. I don't like how this looks. Maybe you can bring it here. And that's the beauty of this process, because you can simply run through and see whatever you don't like. And adjusted testimonials basically didn't change that much. This didn't change that much as well. We just extended it to be a little bit taller inside text. But for the block, we now have only one block post, and you can do this the other way around. You can include heros, for example, liquidity testimonials. You can include pagination right here below. You can include one post on top off another if you want to. But for the sake of space, because Blawg is really not that essential to this particular website because it's selling design services. So belong is just one off the ways that they're making money, but not their main way. That's why we moved it down and were only included one block post. So if they want to see all blow posters that said, here is the block page, they can simply click, see all or hit right here to go to the block post page. Finally, for the footer nothing has really changed. It's just more narrow then before. So that's basically it for this size. And in the next and final video, we're going to discuss the phone size because it's going to change. Once again. We're going to go from four columns in layout toe four columns for the phone, and we're going toe adapted to fit there as well, so I'll see you there. 15. Create Responsive Design 4: Finally, let's start with extra small devices IE phones. But before we do, I decided that on some places I want to include three calls white buttons. So, for example, right here I'm not going to do that because it's going toe mess too much with the layout off our navigation. I'm not going to do that here either, because we have two buttons next to each other, but I'm going to do it here. So let me quickly adapt it, and you can use responsive resize toe include it like so. And now you can see it's quite large and quite easily readable because these ones are as well. Finally, I'm going to include one here as well, so I'm going to extend it to here. I'm going to make sure it's in the center, and finally, I'm going toe include here as well, just because we have enough space right here. Toe included to be three columns white. So now that we've done that, let's quickly move on to extra small devices. I'm going to select this one kid control deep, and for this one, we're going to make this artwork to be quite a long so I can might as well extend it right from the get go. So I'm going to extend it all the way down and I can jump in sight and move all of these down. But let me quickly show you these columns. So, for example, here we have four columns. So let's first change in debt. So four columns and in which I decided to be 375 because it's smaller than 576 Double clicking. Basting this right here. So I'm going to change its name. So let's change the wit to 375 alike. So and finally, for the columns, let's see what we have right here. So we have 30 61 20. So let's copy that. So we have 30 61 finally we have 20 right here at the bottom. So once again, we're going to have to adapt it. So 30 61 20. Let's check it out. 30 61 20. It does take a bit of time for eggs Matt to kick in, but once it does as you can see, everything works as it should. So let's now quickly adjust all of these different elements. So, basically, is going toe work exactly the same as for all off these. But for this one, I'm going toe make the logo a little bit smaller. So, for example, somewhere around here I'm going to move the button and menu icon to here, and I'm going to make the bottom a little bit smaller. So I'm going to, for example, make it be two column white like so and going to make sure that, for example, it's a 20 pixel, so not exactly in the center, because center will be right here. But I'm going to move it. 20 pixels, for example, to the left from our menu icon. So it's moved in R B G right here. Let's include our drop down. I'm going to move everything inside off or drop down to the right. So basically we are goingto do exactly the same thing as we did. So we're going to select all of the menu items, move them here, select the dividing lines and the background. I'm going to move them all inverts to here. Everything looks nicely. I'm going to hide it, and then let's deal with the elements below. So for this, I'm going to select the hero. BG. Move it in words like so and I'm going to choose my shape. So let's use the mosque. I'm going to bring the mosque in a little bit, and we're going to deal with them a little bit later. So for now, let's hide all of these shapes. So they're not distracting, and I'm going toe to deal with these elements or position them in the center like so. And then what? I'm going to do it. Simply move the demo button here and make sure it's two columns white because now we have four. Make sure this is two calls white as well. As you can see, everything fits really nicely, and what I'm going to do is simply select this. And finally, I'm going toe change its size because it's too big for now, and I'm going to change the size for this as well. So if we jump back to here, you can simply select it. And let's use something like open size 36 and we're going to select this. This is Carla, 80. Make sure it's white. It is, and went simply then attacked this text to fit toe here as you can see everything looks nicely, but I'm going to move this from websites abs to branding. We got you covered so everything is in four lines instead of five. That's why having assets and character styles, especially, is really helpful because it's going to keep things looking nice and smooth. Everything is going to look as it should. But when you are moving to mobile view, especially here, everything has to be a little bit smaller because the device is smaller overall. So you have to think about all of those things because when user looks at, for example, this text on this device, you can see how big this screen is compared to this. Everything is going to be covered. So basically all their went to see is the text without the buttons, without illustration. We don't want that. We want them to see everything as it is right here. That's why we are reducing the size off the text in this case. So let's not move on. I'm going to move this here, So shift 12 I'm going to move this here. So shift 1234 Make sure we have to reduce the size of this box toe here? Yeah, and I'm going toe. Use my buttons. Make sure they're 40 pixels down like this and make sure everything is 40 pieces down from the top. So right here. 1234 And now let's play around with our illustration and for the illustration. We're going to move everything in a little bit closer, and I'm going to, for example, reposition this part of illustration up a little bit like so. And then I'm going to reduce the size off the illustration like, So I'm going to make sure it's 40 like it is. So shift 1234 And then I'm going to bring in my hero BG like this. I'm going to move the illustration up once again until it's at 40 and that's basically it for this. Let's no deal with our shapes because we changed how everything looks basically so I'm going to move in my circle. I'm going to make it a little bit smaller. Maybe reposition it right here. I'm going to deal with this big square like so I'm going to deal with the square to let's quickly find it. It's down here. So now we have to adjust our mosque. Let's move it to here. And because we did that, let's quickly deal with this square because there is no need for it to be this large so you can hold your shift key. You can position it wherever you want. You can even rotate it. But I'm not going to do that. Looks simply position it here. Make things nice and simple. Position this here. Maybe I can bring this square a little bit outside and maybe I can move the circle in, like so. So if I hide my great, you can see how everything looks like everything is as it should. Everything is placed where it's supposed to go, but now it looks a lot more coherent on this small screen. Now for these logos, I'm not going to have them be four in a row. Rather, I'm just going to have them be two in a row. So I'm going to use the logo three logo for make sure they're in the center Local one logo to make sure they are in the centre as well, like so. And you can even play around with them and, for example, position this logo. So local one, you can make it be in the center off this one, and you can, for example, combined these two to be in the center. Then you can select everything and just make sure it's in the center like so now for the destination. From the hero down, you can use 1234 or maybe 80. Let's see what looks best. So she ate 12345678 I think it's way too much because this is just an empty space now, so maybe 40. That looks a lot better. So now let's deal with our illustration. You can align everything right here to the left, make sure it's 40 pixels right here. You can use illustration and simply scale it down until it fits inside off our grid. Like so, then we're going to make sure that everything is where it's supposed to be. So shift 1234 and we're not going to deal with the size of this tax because it's a 36. This text is that 18. So basically everything is as this text is, so we're not going to play around with it any more. But what we're going to do is simply deal with the border off these words. So basically like so we're going to keep the industry down because it said it looks a lot nicer when you have them be two lines of text instead of just one. Then let's quickly adapt this text. I'm going to extend it down. As you can see now works a lot better. Let's deal with our button and position at 40. Let's move it up into 34 and I won't simply reduced its size to be two columns white that's looking nice. Let's move down and on. Going toe reposition is to be in the center, make sure it's 40 So 1234 and we're going to deal with these two texts right now. So for this one, we're going to adjust it. So get your projects. I'm going to move this down on the way quickly. It goes outside. So like this, Well, we're going to have to be here. Take care off. The design is going to go down here. Finally, let's move the divider and a text down 20 pixels like so I'm going to move this text into here. Move it into here. That's why we created it as an area text because, as you can see on these smaller sizes, it's a lot easier to work with it this way. Then toe have it be point text. Now for these ones, they're going to be our major change because we're going to basically have them be one at a time. So shift 1234 And now I'm going to move all of these elements down because I don't want them to bother me like so. And let's now concentrate on these ones. So let's jump insider features and I'm going to select these three moved him here. Make sure they are left aligned like so, And I'm going to move custom solutions old way down because that's our last one. And let's know, simply work on our text. First, make sure that they are all aligned like this. Make sure that they align with the left edge off our grid, and then I'm going to jump inside and justice text like so So it's now at three lines of text instead off for, so it makes it a lot more compact for the users to read, so make sure you are at 40. So 1234 we're going to do the same for Dis text. It's now at two lines, so adjust it accordingly. Let's deal with this one. Let's see if it's going to snap into position. It is even whole control to click directly into your text. You choose went. We're going to stick it to be here as it is in all our other examples. Make sure it's at 40 if it doesn't want to be 1234 It went to see 39.8 once again. That's because off our icon and are alike. We went to place right here just to make sure that it's cuts off where it should right here . And then we're going to move on to pricing, so I'm going to move all of these elements back up. That's why it's nice to have these groups because they are really helpful. So shift 1234 Make sure it's at 40 and what you're going to do now is jump inside our text , position it like so and affordable pricing. Let's see, we're going to keep everything a zit is just make sure that this is in the center, like so it is. This box fits outside, but once it gets into code, there will be no box. So it's going to fit nicely inside, so don't worry about that too much. We're going to position this in, like, so extended Don't until it fits like so And then we're going to have these three move them to hear, make sure they're at 40. So 1234 and we're going to select all of them are responsive resize going to do its magic. As you can see, everything looks nice, clean and as it should, it didn't change any off the proportions. Only thing that's left for us to do is simply extend the pricing Bijie down. So 1234 and we're going to select the pricing beauty. Make sure it's aligned. Move this up until it snaps into 40 like this. And then let's deal with the pricing BG. So, as you can see throughout this project, this background with all of these shapes is taking us the most time so you can deal with its two way you can deal with it as we are right now. Or you can have it be image which you can create separately. Or you can include it, Toby. Very once it or you can create separate illustrations so you don't have to resize every time. It's really up to you and your workflow. However, you like toe work and wherever you think fits best with the project in hand. So there are many ways to deal with these issues and strategies. So however you think whatever you think, it fits for the project, that's what you're going to do. So we aren't done basically with our mosque. So now we can move on below, so once again, select everything and make sure they are at 40. So something like this right here, I'm going to jump into my testimonials. I'm going to make sure that my left arrow is aligned with my grades, my right arrow as well like this. And I'm going to use my testimonial, move it into center like so and because now removed this and it cannot contain this anymore . What I'm going to do actually is move these arrows down so I'm going to select them. Moved in 41 234 and I'm going to position them to be in the center and toe online with grit . So I'm going to select my left arrow. Position it here, move my right terror. Position it here. As you can see, there is still space between thes grid lines so inside of the gutter so users can use their thump and hitting point is going to be nice and easy toe access because they still have enough space on the left, right and in the centre between these two icons. If you are working with smaller devices, for example, a lot smaller forms than these newer phones, you can even spread them apart even more if that's something that you want. But you have to speak with the developers to see what they think on when you're testing on these devices. In ideal conditions, you will be able to use devices toe test straight away. But if you don't have that option in that luxury, then you can simply read around what he wants and what you need so that you can fit everything inside. Let's now move this testimonial down 40 and we can do the same for our arrow. So 1234 and we can select these arrows, select him like this. 1234 Because we don't have any background color. Let's just make sure that this is at 40. So once before and now I'm going to select these and them, though, make sure they're at 40 as well. And let's no deal with this, so I'm going to bring it in nicely. I'm going to use my demo button. Make sure it's two calls white like so responsibly size. Does it stink and make sure that these two are in the center like so? No, we have to adapt this. So let's jump inside. Creative journeys went to come down, and which of us is going to go below that? Let's use the divider. Let's make sure it's 20. Make sure Button is at 40 so I went to before. Position that in the center and, let's know, select everything and move it into center. As you can see, 64 63. So it has a lot off space between, so you don't have to extend this section if you don't want to. If you do one so you can extend it to gain even more space. But if it's not necessary that I would not advise so you can extend all the way down. Because even though this section is important because it contains call to action bottom, it's not that important if it blocks the view for the user, so the user has to scroll all the way down and lose much time. They have to be able to tell what it is straight away, so you can deal with it that way if you want to. So let's call this section done. I'm going to close in these folders like so, and it's now Quickly move on to Blawg going to position here, make sure it's at 40. So 1234 and finally, let's drop the text in the center like this. We're going to position our block below. We're going to move the post and the bottom below that. So 1234 I'm going to jump inside, adjust my image to fit right here. I'm going to click on this text and adjusted accordingly, like so. And finally, I'm going to move my avatar to unjust like so as you see, it's quite simple. Once you get going, I'm going to make sure that my button is toe comes white. Same like all the other buttons. Make sure it's at 40 like this. And finally, let's no deal with Footer. So once again, I'm going toe. Position it in the center, make sure it's a 40. So 1234 And when I'm going to do because, as you can see, we don't have any space left, I'm going to use these items. So Blawg and contact us. I'm going to move below maybe 20 pixels. Or let's use 40 because we used 40 everywhere. Now I'm going toe. Position that in the center and select pricing futures and services and move those in center like so, like it is right here. Or you can even group them and simply select footer BG. Make sure they are in the center. You can group. These two want to sell it for the BG. Make sure they are in the center, and that's the nice weight off doing that. You can select logo. Make sure this is in the centre and I'm going to drop this down online. Then you can select all of these. Make sure they are in the center. So once everything is nice and concise, you can then bring this in and extend this down because we want to have a lot more space here. So let's not do that because we have 1234 We have 40 pixels between this and logo. Let's do the same for all these other ones. We have 40 here as well, so I'm going to select these to move them down until they are at 40. As you can see, we have 40 everywhere. Move this down to be a 40 like so. Then I'm going to select everything. Make sure everything is it 40. So 1234 and finally moved these down forties. Well, so 1234 I'm going to bring this in until it meets with the bottom edge. Brand simply called my shift key until it lines. So now everything is aligned and looking properly. One violent thing to do is simply bring this up because we don't need it to call all the way down. But it's nice thing to do so you can extend your our port until it meets with your requirements, and then you can simply bring it back up. So that's basically it. We have created this page to be responsive. We started with large that stops than small that stops medium talent, small tellers and then finally, phones. If a jump right here, exclude my great so you can see everything. As you can see, layout adapts nicely to these different screen sizes. Everything works as it should. And now it's up to you to deliver these assets developers so they can develop this website , and they contest it to see if everything works correctly. That's what we're going to do in the next section off discourse. We're going to go size by size, and we're going to extract all of these assets. Then you're going to send all of these assets to developers and developers are going to test them and see if everything works correctly and as it should before it goes online to be live for people to see everywhere in the world. So I'll see you in the next section of the course 16. Folder Structure: now that you've finished designing and finished creative your responsive designs in X'd. Now it comes the time toe Export your assets for developers, and as a designer you have to export those assets in order for developers to understand where everything goes on different sizes and where everything is positioned so toe export your assets in X'd. It's extremely simple. But before we get to export in different assets for are different sizes, you have to create recognizable and logical folder structure. So let me quickly show you how to do that. Here I have a studio design agency, which is just an empty folder, and inside of this empty folder, we're going to create different folders for different sizes. So if a jump back into eggs D and zoom in a little bit, you can double click right here. Hit control C to copy the name off this our port, and you can jump into your folder right click and create Fuller and simply based the name off that folder inside. That's why developers will be able to quickly understand if they open this eggs defile, which are port. Are you tryingto export and for which our port these assets are assigned toe so you can move on and do this for all these other our ports so I can control, see, jump back. I'm going to create a new fuller, and it's going to be a lot easier for them to understand which ones there are because they have these multiple images multiple sizes to deal with. So it's a lot easier for them to understand if you're already prepared. Everything for them and exporting from X, De Aza said, is extremely simple and easy to do, and we're going to get to that in the next video. But for this video, I just want to show you how you can prepare your file structure. So here is our basic file structure, and inside of it, we're going to place all of these different assets, which are going to show you how you can export them easily in the next video. And we're going to talk about different file formats and in which file formats you're going to export. Which files because it's extremely important to understand those file formats, especially when you're exporting your assets for developers. So we're going to cover that in the next video, but the end, this video. I just want to tell you that outside off all of these folders you can save this main eggs defile. So if developer has multiple projects that they're working on at the same time, they can quickly jump into that fuller open up that X defile. They can see that. Okay, this is that project and they can simply then jump inside each of these different folders that you just created and then take the assets from those folders. But you can also do is create a read me pdf file or read me text file. It really doesn't matter where you can simply list where you got your phones, or you can send them phones directly, even better so that they can work with the same phones inside off the code. Also, if it took images from different sources online, for example, we used on Splash for this particular course. For example, these three images You can point them directly to the links for these three images, or you can simply send them a link to the on Splash website where they can get those images and download them in the highest possible resolution. So that's why the folder structure really does matter, especially if you have different icons that you were using. For example, you have different collections off icons, then you're going to place them all right here. If you have multiple resource is that you want to send on top off all these different folders, then I really recommend that you create a separate folder, for example, assets and then inside of that folder, place your images, place your icons, place different illustrations. Whatever your project consists off, then a really recommended that you create that folder and put all of those different assets inside of that folder, as they said, is going to be a lot easier for developers to understand where everything goes, where everything is located. And they're not going to bother you with multiple questions. After you finished the design for this project, where everything is located because you're going to prepare everything in advanced and send them all off those different files 17. Exporting Assets: I know that we created our folder structure. It comes the time to export our files, and if I zoom in a little bit closer, click on any of these are boards and hit control E or commanding on a Mac. You can see that this style of pops up now. Here you can select the format you can choose from PNG, SVG, PDF and J Pick, and they differ quite a lot. So PNG's basically an image without a background. So, for example, if you're cutting some images off people that say or off object and including them in your designs, that's where P and G is useful. Next up SPG is a vector file formats, and it's great because it contains cold inside. And it's also very useful for developers because they can take that code, they can include it into their own coat. They can adapt, for example, the sizes off some of the icons illustrations where this SVG file format is used the most, and they can easily don't integrated into quote. You can see for each of these there are different settings, and we're going to cover that in a second. Next up is a pdf, which is a basic PdF file. And it's great. For example, if you're exporting design briefs that you created inside, it'll be easy. Or if you have some other text documents with, for example, some images. Let's say more mood boards or something like that, and you can export that as a PdF. And finally we have the Jay Peak, which is basically just a regular image. Now let's quickly run through some of these options. So for P and G, you can choose design, and it's going toe export. As it is, you can click on the Web when you can see that it exports selected assets as one X and two x, which means in original size, which is one X and two X, which is doubled your original site. Except we have IOS. As you can see, it's exporting them in one x two x and three x, which is great if you're designing, for example, smaller phone and smaller iPhone size. Let's say iPhone eight and you want to export toe. I found 10 11 or Max or something like that. That's where these sizes come in handy, and finally we have Android, which is again different than all of these because it exports them in thes measures, which is M. D P I. And you can see at 75% 100% and goes all the way up to 400%. And it has all of these different abbreviations toe percentage that it's exported at and all of this basically means same like for Iris, but it exports at one x two x three x for Android. Because there are many other sizes off screens, you can see all of these different percentages so you can choose them and you can see it's designed, for example, at 100% this android app, and then you can export it in all of these other sizes. So basically, that's it for to file formats for the SPG. I recommend you don't change anything unless you see with your developers if they want something customized from these, but usually they're going to customize that inside off the court. So we're going to use SVG, and we're going to use PNG design because I'm not going to use web because this is if you don't have a responsive design like we do right here, this is basically going to export that in original size and double the original size. So I don't recommend it because we still have all of these different sizes that we designed originally. So why choose this? So let's just use design and for the folder, I'm going to click right here, and I'm going to go to Mr the Agency and start with the biggest size and click select folder and I'm going toe export it just for exit to remember where I exported it. And if I jump inside that folder, you could see that it exported to the entire design. I recommend that you do this because then developers can easily glance over this image and see whatever changes you made or some positions, for example, is something like that. Off course you're going to send them the original file, but this is just toe ate them in their development process. Next up, when it comes to exporting, you have to select all of these different options in all of these different layers. So I'm going to select my layers panel right here and inside of my nap. I just want to export my logo and my demo button, but instead off text. I'm going to hide it and I'm going to select folders So logo and demo between and I'm going toe hit control e juice bong hit exports in that followed that he just selected and I'm going toe Also select my logo he'd control, eat and exported is SVG because I want my developer toe have that option. If they want to include in cold later, they can do that as well. I'm going to quickly bring back the text to my demo button and one quick side note because I made a mistake. I named all of these buttons BT and you can name them like this, so simply double click right here. He'd control seed hit control V and this is going to be gold demo Bateer. And then you can simply select that layer. He'd control E and then export that layer as a button. But because, as I said, I made the mistake. I'm going to hide all of them from buttons and then bring them back to have them in the original design Next up with export. Ah, hero, I'm going to start with illustrations. I'm going to select both of them but separately is you can see it control e and export them as svg because once again, I want my developer toe Have that option toe export them like that. Next up we have all of these different shapes. I'm going to select them, Hit control, eat and I'm going to export them s PNG's because they are basically semi transparent shapes and developers will be able to include them like that. Next up we have hero BG soak it controlled he exported as being G because we don't need to export it as SPG because is just basically one colored background. If you have it as a radiant, you can speak with your developers If they prefer, you send them svg because then they can adapt the Grady and a little bit inside off CSS. But if they don't want to condone, simply send them to be in G file instead. Next up, we have buttons. So once again, I'm going to hide the text because of my earlier error. I'm going to select Dergarabedian and morbidity and hit control e export them s PNG's hit export. And as you can see, a demo bot n already exists. So because that's this button right here, I'm going to simply select more between heat control E and export. That s P and G. I'm going to hide all this. But before I do, I'm going to simply bring to text back like so. Simply click this eyeball I could It's going to come back and next we have all of these different icons now, because these are not my clients clients. I'm going to simply choose control e export them s PNG's. Just so the developer knows what are the sizes off logos that they're going to eventually include inside. When you're working on a design, make sure toe always ask your client if they have original clients off, there's so you can include them instead of these Normal I was. But if you don't like my client in this case, then I'm going to include these default locals. And then developers can later changed him because it's simply a PNG image. So basically an image of it, the transparent background. So they're going to include it like that. The administration once again hit control e. I'm going to export that as svg hit export and we have Demo VT in which we're not going to change and we're going to keep it as it is. But because if I don't like right here, bring in my layout, you can see that it's at three columns white, and these are at to Khan's wife, so you can export it with a different name. So Demo Bt in three, for example, for three call even better. Like so maybe I could include this like so that so that developers know it's three columns white. I'm going to hide the text hit control E export That s P and G. I so bring in this text back. And now we have basically all the buttons on this page except for this one on. I'm going to include it a bit later. No, let me quickly hide. Do great because we don't need it anymore. And now, because off all of these lines I'm going to select this text and choose this divider to be divider. Three call, for example. Like so his control e export that s p and G And for these other dividers, I'm just going to simply leave them as they are. So just small divider and you don't have to export all of them. You can simply export one heat control E, S, P and G. And now let's move on to icons. I'm going to hold my control or command key and simply select all of our icons. Heat Control E. Make sure you select SVG hit export because once again I consider really important. Toby exported in the highest possible quality because you can just imagine that on really small screens. These cycles really work well, because, as you can see at full zoom in, it doesnt lose quality at all because it's a factor based icon. Except let's move on to this. And because we have all of these elements inside off our hero section, I'm not going toe export them because sometimes developers want to use something like J Query to animate all of these background shapes, and it's really up to them and the client what they want to find a product to look like once it's called it and published. But in our case, I'm not going to export them because, as they said, they are exactly the same shapes as these ones. You have two options you can simply select thes two. You can group them hit control E and export this entire image as a PNG if you want to. And if you don't, you can simply tent export pricing. BG because off the constraints. So the developer knows how far this text is from the set, for example, how far these boxes from the surgeons on so they know all of those measures. But otherwise I'm not going toe export all of these different shapes once again. Because, as he said, we already have that in our folder so he'd control Ito export pricing PG exported. Asked Sorry, PNG. And I'm going to select one of these because all of them have exactly the same background, but even better because we included the names. So price three BG price to be G price one b j. You can simply select him. He'd controlling export them s PNG's. And then what I'm going to do is export one of these buttons. So purchase button, I'm going to hide my text because, as you can see, there is another here. I didn't rename each and every layer like a shoot so he could control exported s PNG and now, basically, developer has all off these different buttons. So it's more I'm going to do the same as it did with previous clients. Because, as you can see, I did name them like a should, so you can see local 567 I'm going to hit control E export that Miss Bong once again. Just so they know the position off these logos relative to this text. Let's see and finally export our arrows with control. E export them as SVG is because it's a vector based. I can't. I'm going to move on to promo. And for this one, I'm not going toe edit this, Martin. I'm not going to export it. I'm not going to export my shapes. All I want to do is simply export my problem. BG it control you Export. That s PNG hit export. And now let's move on to the block. I'm going to select my images and my avatars. That's why I named like so so you could see image one another one and so on. Hit control E export to miss being do and seal button. You can export them or you can't leave it empty because as you can see. Basically, you're exporting thes shapes. Usually you don't export buttons with text on him because if developers want to change anything down the line, they cannot change the text because it's baked inside. It's basically an image, so we're going to leave it as it is. Next up, we're moving toe foot or finally, and I'm not going to export logo because I already did that. I'm going toe export social media icons so selected, like so he control E. Make sure they are at SPG Export. And finally I'm going to choose my foot. RBG hit control and went to export that as being G. And that's basically it for this size. What you have to do now it's simply move on. We told these other sizes it took me something like 10 or 12 minutes for this one because I was speaking all the time. But if you don't and if you keep doing this multiple times, you can get really fast. And if you're doing everything correctly after certain time, you can get this done in like two or three minutes. So you're going to need something like 10 or 15 minutes for all of them. And if you're working on really huge projects. So for example, let's say you're doing a mobile APP design which has undergone, let's say, 200 screens. You must dedicate one day toe export all of these different files. And finally, one more thing I want to mention is you usually need a style guide, and I explained what a stark ideas in my Web design course. So if you're interested in tow, deep dive about the methods of design about mood boards, flow charts and so on, you can check that course out. But basically it's sort of a document right here or right here. Wherever you want to put it inside of it will be easy. We're going to select and move all of the buttons, all of the different text so you can basically jump right here and simply select all of these circuits colors if you use background shadows if you used illustrations. If use character styles, you're going to put everything inside. And finally, if you use components as you can see, I already I just created them button as my component just to show you how it works. But basically you're going to put everything inside and you're going to send this final file as a job. TXT file. You can export that s pdf file and basically give it to developers so they can know down the line what you used in this project. It's also useful for you later on when you say this project, if client comes back to you and want some additional changes, then you simply have that project and you can choose whatever assets you included inside off that style guide, you can simply copy and paste them into future work. So basically start guys are really powerful. A real recommend that you create them. But I didn't create one for this project because basically, we only have one page, and it's really not necessary when you're creating landing pages, for example, for your clients, which this basically is. But it's really necessary once you get creating a few different pages. So let's zoom in a little bit closer and you can see that we have five items right here, as well as get a demo. Maybe there is a contact us maybe Santa debt. So in those cases, I really do recommend that you include a style guide. Nice, Big one, and you can simply jump right here, and you can select, Let's say, 1920. Patane, 80 is went to position it right here. Simply rename its style guide, and you can then expand it toe however you want, and simply copy and paste your elements inside. You don't have to do this for each and every size off your design. You only have to do it for one size, and that really recommended you do it for decide, because it's visible in a better way than all these other ones because it's bigger in the first place, so that's basically it. You have to simply move on and export all of these different sizes for developers because once again they need to know some differences in your design. As you can see, right here, we have some space between our illustration and our text. We don't have that space here. If we move want. This is at the bottom, so they have to know all of these different margins and batting and so on. So you have tow export at all off those different sizes. You also have a share option, which is right here. So if you're sharing with them, simply make sure to share for the development. That way they're going to get that digital style guy that X T is going to generate. And they can simply expe expected like that and to Cassie, the different bad things and margins between all of these different elements. So that's a fantastic option. Tohave inside off. It'll be X'd in the next video. We're going to talk about sending the files to developers and customers, so I'll see there. 18. Sending The Files: Finally, this is the last stage off our project. We need to send these files to our developers and our clients. And to do that already showed you in previous videos. This is our file structure. So here we have our folders and all off our files are inside because I went ahead and exported everything. So I don't bother you with selecting every single layer from all of our our ports. So basically, what you have to do on, I already explained that in previous video you have to select all of them, export all of them into their dedicated folders so that developers can easily navigate it. Also, one final thing that you can develop deliver to your developers is style guides. And I didn't cover style guides in the scores because, as I said, I already have a Web design course where ago really in depth about all of those details about wire frame style guy, its flow charts and so on. So if you're interested, you can check that course out. But for discourse, I just don't want to create style guides because we only have one page at the moment. If we have multiple pages off course style guide is necessary to deliver to your clients and developers so they can quickly open that up. Inside. Off this eggs defile and simply copy and paste elements into their quote or use them and copy them wherever they want to. Also for the style guides, you have to go and create these separate components. So as you can see, we only have demo button right here as a component for the buttons. But for the Sal cuts, you have to create all of these different components for different Barton sizes so that they can use them later. Or if you agree with the client to create even more pages for this particular project, then you can simply use those components and simply copy and paste them into your work. So that's basically it for the designing part for the responsive part. And now this final part is to deliver everything to developers. So here is our original adobe eggs defile. So that's basically this file. You just simply save it to your computer so that you can see Cendant to your clients and developers. And finally we have. This file, which is called Project Resource, is was just a basic text file, and that's what I said. Always include these files so that you can minimize the amount of time you're going to spend talking with the developers and get your clients after the project has finished. So basically you're answering all the questions for them before they even ask them to you. So here we have simply links toe the Google fonts and simply explain that these air free phones and when the click on these links, they can access those funds which are free, and they can use them for both personal and commercial use if they want to use these phones that you used in your designs, because sometimes clients change their mind at very less second, and they want to use a different front. It That's fine, too, because then they can speak with developers and developers can change everything in cold really easily. They can adapt it inside of the CSS, and they can include a completely different fund, so it's going to change the off the website. Also, we have images and you can, as I said, send them separate images. But because we exported all of the images in all off these different file sizes so you can see these images for blocks, for example, and you can send them that. But if you want to, you can simply send them a link to the website. Very got images from. But in majority of cases, clients are going to use their own images anyway, so these are just placeholders images, but you still have to send them those images just in case they want to use a few of those images in their final product. So basically, that's why we're sending this link so they can access it easily. You can also copy and paste links to individual images if you want to, and the really recommend that you do that for smaller projects. But for larger projects, you can create collections, for example, on on splish directly, and you can simply copy and paste the link to that particular collection. And they have images from that entire collection at their disposal so they can use them in the maximum possible size wherever and however they want. Finally, we have icons, and in this particular project we use material icons which are once again Google's on icons , which are free to use in both personal and commercial projects. If you're using paid icons, it's really important that you highlight that to the client. If the client is want to pay for those icons, or if you're using premium funds of premium images, you have to state all of that in advanced. So that client can know if they want to pay for something like that, because sometimes their budget does not cover that. So once you deliver all of that and you don't have to deliver this like so you can converted to pdf. If that's something that you want, you can finally select all of them and on Windows. So just go right click and simply go to my WinZip and add to studio design agency Zip. And I want to create a zip file for this particular project because it's a lot easier to send ZIP files, especially via email. You can send them via slack were different chats. So it's really important that you can condense all of these files into the least possible size. So if I bring this window in because I have two monitors on my computer, you can see that it didn't say that much space because this project really does not take a lot, especially if you consider that all of these design changes that we did all of these different assets are only taking something like 2.5 megabytes, so you can see that everything is taking around four megabytes. And that's why I really adore Adobe X'd and all of these other Softwares like it. So, for example, fig, MMA and sketch, but sketch not so much, because it really does not compress all of that well, like figment and next D do. For example, because off these smaller file sizes so you can see the less than four megabytes in size, you can really easily send the entire project to our clients and to developers. They're going to easily download it and unpack it on their computers and use it as it is. So I really recommend that you pack all of your project files inside off a Zip folder because it's going to be a lot easier for you to share that with your developers and clients. And it's going to be a lot easier to store that file type for you because you might want to keep it on your computer for future references. Because, for example, let's say that this project has launched tomorrow and the client wants some new additional pages in six months from now. You just keep all of those original files. So let's say this studio design agency project on your computer so you can easily jump back to it and open up the original file and simply continue very left off the previous time. So it's really important that you save as much space as possible because of the sharing with the clients and developers, and especially if you want to keep these files on your computer long term. And I really do recommended because I still to this day have clients returning to me, but that I had them from, for example, five years ago or six years ago, wanting me to create some additional changes to the original design, or maybe a complete three design. So keeping the original files on your computer is really important, especially for these eggs. Defiles because, as you can see, they're really small and you can keep thousands and thousands of different projects and different files on your computer, and it's not going to really take too much space 19. Thank You: thank you for watching the course. I really hope you found value in it. Just remember, when you start designing for responsive, make sure toe. Always ask developers what they are using before you even start designing. So you can know in advance what techniques you're going to use once you get toe responsive part off your design. So once again, it really doesn't matter if you have to create your custom solutions or if they're creating the solutions for you or if you're using solutions such as bootstrap or angler that somebody else already created. Also, make sure when you're exporting your designs at the end of the project to export all sizes for developers to be able to access them at once, make sure to separate them into folders as a show you in the course and that you're going to eliminate that additional feedback from developers and from clients. You're going to finish the work faster. You're going to deliver the files as they should be delivered. And there is simply going to be no friction between you developers and clients. Thank you once again for watching the course. Now go ahead and create those awesome designs and make them responsive. Thank you 20. YouTube Channel For More Content: Hey, Designer Alex here. And I just wanted to say a quick thank you. Thank you for taking discourse, and I really hope that you got as much value as possible out of it if you want to check out more content. I recently launched my YouTube channel, where explored some topics that might interest designers from freelancers toe passive income techniques from Web design, APP design. You design UX design. So if you're interested in any of those topics, head on over to my YouTube channel, link it down in the pdf, and you can simply click there and it will take you to my YouTube channel. If you like that content, make sure to subscribe and make sure to follow, because I'm going to try to be really regular with that YouTube channel and upload as much content as possible. So thank you once again for taking my course, and I really hope to see you on my channel Digger 21. Join My Free Facebook Group: Hey, designer, I really hope you enjoyed the course, and it you got as much value as possible out of it. If you want to receive even more value from me and from the design community, I started a Facebook group. Where you can join is just a Facebook group for my students alone so you can join by clicking the link down below order. Nate off course is a Facebook account, and it's a free group to join. The group is formed in order to provide you additional feedback so you can attach your designs by following this course and using examples from this course or any other off my courses. Or if you have your own examples. Off design works from the past from the present. You can upload those works to Facebook Group and then received feedback either for me or from other design members. I also encourage you if you have a job positions available to share them in that group so everybody can benefit from that group. Once again, the group is free. It's easy to join. Simply click the link in the pdf, and I really expect to see as many of you as possible in that group just to share our experiences as designers, and I will try to post some additional video, some additional tips and techniques into that Facebook group. But for now, we're just getting started. We're just going to form its, and I really encourage you to join and to share your best work there. To inspire other designers or toe ask for additional feedback. Just make sure please, when you're asking for feedback, asked for specific things. Don't just ask. What do you think of this design? Because nobody is going to reply to that. Or if they do, they're on Lee thing. They're going to say to you Is it looks nice or it doesn't look nice. Make sure to ask for specific feedback on your designs. For example, do like this color combination. Do you think I should use a different front? Do you think that these images correspond well with the background color, for example, things like that, So make sure to ask for specific feedback when your designs, because it's going to be a lot easier for me and for other designers in that group to give you are specific feedback that you can improve a lot quicker, then by just asking what? Everything off this design. So thank you once again for taking my course, and I really hope to see you in sight off my Facebook group Digger.