Website Design From Scratch In Adobe Xd

1. Class Intro: When you design a website, it's more important than it converts then to have a trendy design because website is there to sell service or a product, so you have to design with that in mind. Knowing how to structure a page for high conversion is really important because it makes you more valuable to client and more desirable as a designer. Using Adobe X'd created gives you unlimited possibilities because it's free Cross platform factor based, and it has regular updates. Hi there. My name is Alex, and in this course you will learn secrets of the good design. Brief. What makes the Good Landing Page? How to create landing pages that convert how to apply those principles to plan, draw and create a wire frame. I had images, icons and shadows to create the design that ad movement and transitions to create prototypes. Share the work with your clients to get feedback and finally, how toe export your assets for developers. This course is aimed at people with little to no experience in ur ux design because in discourse you learn everything you need to know to become a UX designer. Ah, hope you're ready to learn Adobe X D and the amazing world of ur ux design and I'll see you in class 2. Class Overview: here there and welcome to the course. My name is Alex, and in this video, I want to quickly cover what we're going to cover in this course. So at the beginning of the course, we're going to receive the logo from our client and we're going toe, receive some basic information, and I'm going to ask them some crucial questions that are going to help us structure and create the best possible design for this particular project. So how we're going to do this, we're going to use the design brief, and you're going to get this empty design brief template, which you can use and filled with all your future projects. And we're going to ask the right question to our clients. And when we gather all of those information, then we're going toe, inspire ourselves and create some basic mood board with the relevant images with the relevant colors about this project. After we done that, we're going to move on tow wire framing section, and we're going toe, create some basic wire frames using simply pen and paper, and we're going to structure our wire frames using some landing page techniques that I explained in depth in discourse. So once we don't that we're going to move on and basically create what we draw here inside of Adobe X'd and we're going toe place these elements in various different places, using the logic behind the design brief and behind this project in particular. Then we're going to move on and at images at shadows at different icons and different things which are going to make this design pop, which are going to make this design attractive to the potential visitors and potential customers off this business. And when we finished with that, we're going to create a style guide, which is going to be useful for their developers because in it there will be able to see all the different colors. We used all the different funds, different icons, different buttons, shadows and so on, and that's going to be extremely useful for them later on, when they start developing and this website and make it life. And after all of those things were going to move on toe prototyping mode and we're going toe include some different animations and some different transitions. To really bring this design to life and to explain to the client how all of this is going to work, because when you send the static designed to the client, it's not necessary that they will understand your logic and the thinking behind that design . It's really a nice addition if you can create some kind of animation and if you can show it to them because that way they're going to be ableto understand your logic and everything involved inside of this project, and they will be able to then give you a proper feedback if they're happy with it or not, and then simply inside of Adobe X'd, you will be able to change all of that toe, update it and to send it back to the client for a revision. And they will be ableto give you comments on those revisions in basically real time. So look forward to seeing you in the course. I really hope you will get some value out of it, and I can't wait to share with you all of those information that I just spoke about. So I'll see you in the course 3. The Brief: in this video, I'm going to walk it through the design brief. I'm going to explain who the client is, What's they require from this project, as well as what we're going to search for when we start designing and start planning out. So without any further ado, let's get started. So on the left you will see design brief, which is filled design brief, which is I interviewed. Client. I ask all of the questions and created this design brief while on the right you have the empty template which you can use for all your future clients. So if I zoom in a little bit closer, you can see what this design brief consists off. So all of these elements, you can add it. You can double click on the text and you can add it Text. You can change the color off these icons. You can change the spacings if you want. You can delete entire portions off this design brief template and finally, right here at the bottom. You can see the timeline and you can delete it if you don't need it, but letting quickly jump in and show you our design brief. So it's Hedonists boutique hotel. So that is a small hotel in the island off Mykonos, which is in Greece. And the October 12 is the deadline for the project finish. And right here you can see the company profile. So they're a small company from Mykonos, Greece, and have a small boutique hotel on the island. They have six employees and looking to expand to tend at the big season. And they won't do that by employing four more people and going back to six when the season is over, which means at the peak season, there really is a lot off work to be done. That's why they need more people. And this is important just to understand how big of the company is so that you can keep that in your mind when you start designing. Their main potential is beautiful views and nice garden, which they have perfect for wedding and smaller parties, but also from smaller company blankets and meetings. They prepare their own food but outsource the cakes and alcohol to external partners, since they don't produce their wine, which is a thing in Greece and in meekness, many of the small boutique hotels put that as the U. S. B, which is their main selling point. So they want you to come there and experience their handmade wine. But this company doesn't have it and they don't produce their own wine, so they outsource it from external partners. They have a small parking lot, but when they do host bigger events, they rent the nearby yard from their next door neighbor, which is just basically a grass, and they park the vehicles there. They're looking at adding another floor in the next couple of years to expand their capacity. So they want to make the hotel bigger so that they can accommodate even more people and have even more rooms inside off the hotel project or you. So what do they need from us? As a designer, they need the website design, starting with the home page to attract more leads and drive them away from big booking Rex . Websites toe their own website to collect bigger payments and keep the customers long term because they're looking toe, attract repeating vacations every year and building the lawyer customer based. It will come back year after year because they don't have the budgets to do it the big marketing campaigns every year, but they would rather keep the existing wizards come back year after year. What all this means is they have booking agreements. Same, like any other hotel in the world does would be booking backs websites such as booking dot com, Expedia and the other players in the industry. But the trouble with those is they lined you up against your competition. So really, there are a lot more chances that you will miss some of those leads. They will go away to your competition if they have nicer images. If they have better offers. Some of these guys update offers on a daily basis. So if you're running a smaller boutique hotel like these guys do, chances are you don't have a lot of time to update your offers across all of these websites . Some websites do that automatically, but others don't. So you have to make sure that you have a dedicated person hired to do that on a daily basis and more websites you have your hotel offered on the more work there is for them, and you have to pay them on a monthly basis even off season, because you want to attract people booking for the next year and the next season, all season long and all year long, for that matter. So that's why they want to keep the customer base existing customers basically, and they want them to come back year after year so they don't have to spend big marketing budgets on promotions and on social media marketing and campaigns and videos and so forth because they already have existing lawyer customer base, which is prepared to come back year after year, toe their hotel and to stay there next up. We have goals and objectives. So what they want and what they need from this design. They want more conversion from their existing customers. They found that their bounce rate is too high because people don't scroll past the hero image and want him to go down and explore the page. More main objective is to create landing page that will keep the visitors engaged and make them scroll down to leave their email to explore a bit more what they have toe offer at this hotel so they can send them promotional material and avoid big booking websites so they can collect revenue again. We're trying to avoid big booking websites because they want to keep more revenue from theirselves and to avoid those affiliate affiliate commissions as well as competition from other hotels. Who is their target audience? So middle aged people looking for wedding venue, Smaller companies looking for a conference When you older people looking for a quiet hotel to spend their vacation in so you don't see younger people here, you don't see kids here. Off course, families are welcomed, but when they're bringing their own kids and not just sending the kids on their own, because these people want to keep the calm ambience of the hotel and they want existing customers to keep happy and to keep calm because it's really upto the customers to relax and not This is not some kind of party when you so they want to keep that wipe in. As you can see age. Where is from 35 to 65 gender, 40% male, 60% female. That's because if you're looking for wedding when you, there are larger chances that females are looking for those venues because usually females are the ones who are planning the wedding venues and wedding details. Smaller companies looking for conference when you again They have dedicated person looking for those types off when use, and they're usually female because females generally deal with those kinds off tasks better than male. All the people again females are there a bit more than males because females like to explore a bit more and see and plan in advance where they want to go with their husband and with their family country of residence. Because the hotel is quite pricey Western Europe and USA, because they want to target those audiences. English speaking countries are preferred by client, but if not anything will do Basically city off residents. These just main cities off the Western countries. So long the New York doubling all slow comes into play because they saw AH, large number off Northern Europeans coming into their hotel in years back and, of course, Paris workplace or company owners or higher seller job individuals. So 60 kids, 60 k per year and up media consumption habits, 60% instagram, 30% YouTube and 10% Facebook. So these people were spending most of their time on Instagram looking at YouTube videos, and they are less on Facebook than on these other social media networks. And finally we have daily habits. So these are busy. Individuals will help unveil being oriented lifestyle. So once again they don't want toe go there toe party. They don't want to go there to get drunk or to take drugs or something like that. They want to go there to relax and toe. Forget about their jobs. Forget about their life, for the duration off their vacation. Next up, we have designed requirement, so they need ah website design Withdrawal column. Great system. That's what they're developer required from US asset dimensions and resolutions. For the start, we need 1920 pixels, white and responsive. Toby designed later, if agreed, because we still haven't agreed with the client about the responsive. They want to see it. They want to see how it looks like because majority off these people are coming from the mobile devices. So they have that in mind. But they want to see the design, how it looks like first on the website and on the desktop computer and after it. If they like it, they want to. They want us to design a responsive for mobile later file formats. We have Adobe X'd as a project file, and assets are to be exported in SPG as well. A speeding G for images require color palette. They want us to create color palette, which is going to be really neutral and really see and hotel oriented so really minimal. Really nice and clean image assets, Toby included. We're going to use free images until their photographer finishes retouching and provides us with their final images. And finally, we have associated copy documents, so they will delivered a final copy. But placeholders are to be included instead. So instead off big paragraphs, which are custom meat, we're going to include some warm ipsum text instead, until they delivered the final copy. Tow us. And finally we have budget and schedule. So budget is broken into three parts, same as the project itself. So 2400 for the exploration, planning, landing page design and preparation. That's the first part off this project. 3600 for the full website design and creating the responsive 50% up front 50% after asset delivery. So you might be thinking where where is the third part? Well, the third part is going to be the design or for the social media pages, the design for the mobile devices, if possible, and if necessary. And you're going to provide some videos later on because we're going to do some basic video editing for them. And, of course, that is not included inside of this course. But I want to mention it anyways, because that's the part of this project after all. So here we have it broken down. So for the first part of the project, so explosion, planning, landing page design and preparation preparation off course includes preparation for other pages. Because we're going to create a style guide, we're going to create a colors. We're going to create some funds and some fund combinations sizes. So one so that what preparation is preparation for other pages that are going to be designed in a second stage off this project. So planning is five days. Very searches three days. Audience research is three days design, four days presentation, two days revisions, five days and delivery. So total length off this project for the first part is 22 days. So what I mean by this is planning So we're going to do some basic planning. So we're going to introduce ourselves to the hotel market. We're going to introduce ourselves to the location. So where is meekness? What is it famous for? We want to know about the local culture. We want to know about the owners themselves, about the company. So that's our planning research. So we're going to do basically research about the competition. We want to know who they are. We want to know what they are using their unique selling propositions. So us peace. We want to know about their location. So we want to know the location for the entire island, what people can do there. And we want to know the location off the competitors as well, because we want to see how far they are from our hotel and our client, and we want to see what they are offering. So maybe we can suggest something to the client so they can include that in their offer as well. Next up, we have audience research, and you can do this in various different ways. For example, you can contact different smaller companies and just ask them if you would like to come here. If you'd like to come here, what would you like to see? What would you like to do? What kindof offer would you have so that we can? No, what these people want from the offer. What these people want from the hotel itself. What kind off meals do they have? So do they have So, for example, smaller meals. Do they have bigger meals? Do they eat all together? Do they like buffet style? Or do they like to see a waiter? It be there all of the time. So those kinds of things. If you know somebody who is getting married, you can ask them because that is the target audience for this hotel is well and you can ask them. What would you like from this location? What would you like for your wedding and do the audience research in what we specified right here. So if you can find any of these people and contact them, then you can do your audience research properly. And you can also know which kind off colors do these people like Which kind off design styles Can you incorporate so on? Because it's all well and good if you are. If your last project, for example, included some Grady INTs and some nice illustrations and some modern textures and something like that, that's all. We're really nice. But perhaps these people are not interested in that kind of style and that kind of design. So you have to keep that into consideration, and you have to design for this particular audience. So they feel at home and they have the smaller bombs rate than the previous people who visited this website, because that is our main objective. Next up, we have design, so we're going to design all of this in four days. So basically, we're going to draw it on paper. We're going to create wire frames and contact the client, asked them a few more questions in the way and then finally create a design which you're going to send to the client using our presentation. So we're going to present them and spent two days on presentation revisions. They're going to take approximately five days. Sometimes this can be one day, so basically just one religion or no religion at all, and sometimes it can be longer, so keep that into consideration. If you have a tight deadline for your project. And finally we have the delivery. So basically takes 1 to 2 days if the project is bigger. But because this one is smaller, it can only take like, 30 minutes or one hour to export everything and toe back and prepare and sent to your clients and to their developers. So basically, that's our design brief. This video ran a bit longer, but I want to share with you everything that we talked about with the client. So you can know which questions to ask your clients so that you can better understand what they need, what they want, what they didn't know they need or want. And you can suggest all that to them. And your goal for this is toe deliver the highest possible quality off the design toe, make your customer happy and to make them come back. So, for example, in our case, if they want to create a mobile app or they want to create some posters or whichever one it is, you can keep the happy, and you can have the returning client coming back to you for the next project they might have and you can also learn and understand their target audience and what you can do to bring them the most value and to keep them on this page for the longest time in the next few videos were going toe do combat their analysis and basically see what the competitors off this hotel have toe offer on their websites so that we can better understand. So, for example, color palettes, they're using images there using headlines. They're using bottom collars, placements and so on so that we can familiars ourselves because before we go into the design process for this particular project, so I'll see you there. 4. Competitor Analisys 1: in these videos. We want to talk about the competition for our hotel. So 1st 1 is carbon AKI Hotel in Afghanistan. Aziz, you can see this stop bar for the navigation right here. In my opinion, it should have more space. It should have more clarity because on this dark blue image, for example, you can see they have book now. Button. It's blue over blue, and it's not easily irritable. Also right here, the texts on Lee says in the heart off making this town. But what what is in the heart of meekness down? What can we do at this hotel? So all of that information should be displayed right here at the top, because if you don't like any off this information, you're just going to bounce and leave this website and increase the bounce rate. And that's what we want to eliminate for our website. Also, they just have to images and these arrows are kind with kind of weirdly shaped, and you wouldn't know if there are arrows if you didn't click on them. Also, white on white doesn't work that well, so all those things have to be considered. Also, they have a drop down right here on accommodation. And as you can see on hover, it changes color to blue. So once again, we have blue on blue. It's not breeze easily readable. They have this language menu right here. But they just have English in Greece. We might want toe position that a bit better in art design. So moving on, they have online booking right here, which is nice, but in my opinion, it should can combine a bit more information right here. So you have just rooms and it also rooms. Okay. I want one room. But which one? You don't have any of that information. If it's cold up, you can see all of these different rooms. But which room? A. My booking. Right here. So I, in my opinion, they should put this right here. Also adults. 1234 But what if I want to bring my Children cannot bring my Children to this hotel. And also, this book now is not really looking the same as this book now as well as this book now. So you might want to consider hierarchy and using same buttons in some places and different buttons in other places. So moving on down we have about us, which is without any image and why choose us? So I would put these into their different separated sections because it really is all bunched up. If I scroll just a bit down in this area, you have quite a lot off text. Also, this text is way smaller than this text. The spacings are a bit off so you can see this basing right here. This right here and these are a bit different. So really, we should change everything we see right here for our website and make the spacing and use of white space a bit better so that potential visitors and customers can read and scan through a bit better than it is right here. As for the organization off the landing pages for the elements of the landing page, we're going to talk about that in the next section called Landing Page Another me, where we're going to go into deep detail about what you need to include inside off your landing pages, no matter which nish your in. But in this section and in this next few videos, we just want to talk about the main competitors for our hotel. What they are doing and what mistakes should we avoid when we start designing our website. So moving on a bit down, you can see a rooms right here. But once again, we want to know more information about these rooms and we don't have images off rooms. So, for example, you have flowers right here. But why? Why can you just show me how the room looks like right here? Also, we have economy room. What is an economy room? Maybe on hover instead of this image. Zoom way. We can have a bit more information about the room itself so that we can know what is the economy room, because you might know what it is. But I, as a visitor, certainly don't. And I don't want to lose my time simply going clicking inside all of these rooms. We should have some basic information for each of these rooms right here on the home page so we can know if we want that room or not. So, as you can see, they have seven different rooms right here. So if you want to invest your time to learn more about each of these rooms, you have to go to seven different pages instead off learning just majority of the information right here from the homepage. So maybe instead, off this nice image zoom effect. Maybe if you have some texts right here, below and for example, price ranges. So this room goes from this price to this price, it can accommodate this many people. It has this many beds, doesn't have a bathroom, does share a bathroom with another room. Is it easily accessible? Toe wheelchair, for example. Doesn't have some kids a play area or something like that. So all of those information, in my opinion, should be right here on the homepage before you can click and then go and explore because I don't have that much time. And as you can see, there is quite a lot off competition on offer. So if I don't like what I see once again, I'm going to leave and increased the bounce rate which we want toe a lower for our customer . Now you can see right here they have live Ah, home away from home experience, which is great. But what does it have to do with all of these images? it doesn't tell any stories that we need to know. It doesn't give us any more details about this hotel and these rooms. So why just why did you put this here? It doesn't serve any purpose apart from maybe some inspiration. But if you choose to put it for inspiration, why don't put the image of your hotel behind it so that we can inspire ourselves with your hotel? Because we're here to book your hotel. If I want to read some quotes, I will go to Instagram or Pinterest and look for inspiration. Quotes there. I'm here to book a hotel, so just give me the hotel images. Next up, we have some reviews and reviews are nice things to have. But perhaps you can include some images right here to once again incorporate us into your hotel so that we can see higher hotel. Looks like not just put some random words and you can see some Trip Advisor logo right here . But if you don't know about Trip Advisor, you will be asking yourself what this is. So perhaps put some image right here in the background, or put image on one side and then a review on other side so that we can know that this is for your hotel. So next up we have a map and which is good. But once again, it doesn't have any contact form. It just has contact details and location. And if I click on location, it will show me location right here. But why? Once again, why? Why did you put it there? So next up, we have subscribe and which is good, but it's not really prominent. And you might want to include ah, bottom right here to incentivize people to subscribe to your newsletter. And finally we have a photo right here, which is just a basic footer with no further information. So, for example, if I want to contact you if I miss this, so but what is this? Right here? All you have is some coordinates and map coordinates. And if you don't know what they are, what they're for, you might just skip this part altogether. Now this is you can see ho designed it, and it's really nice that they promoted themselves. But it doesn't bring any good to this hotel. Finally, we have fall us right here at the bottom which is also nice toe have, but not in this fashion. And you might want to think about removing some information from Heather and putting it in the photo, especially information which are not really important for the Header Toby inside of the navigation. So that's it for the first hotel. In the next video, we're going toe, analyze second hotel. Then we want to turn. And when we done it, we're going to move on to landing page anatomy section of the course. And I'm going to explain which elements should you include inside off your landing pages. How should you structure your copy and so one? So I'll see you in the next video. 5. Competitor Analisys 2: next up, we have a hotel, Nicholas, which is basically they're using. The similar layout is the previous website, but they don't have any text right here at all. So if you land for the first time on this website, you might want to You might be asking yourself what this is. So this is their third slide where they write Ah hotel followed the sun in meekness so great. But we landed on this slide, which is completely empty and we don't know what it is. So if we don't slight, we just don't know what we're looking for. Also, they have hidden this navigation right here inside of December menu. And this yellow color really stands out as a really strong and attacks your senses basically. So I don't really like it. They should use something a bit darker. Maybe put some overlay over the image so that you don't go blind every time you visit the email. Sorry, the menu. I'm going to close it. And as you can see, they use that that color throughout their website. This information right here is good because they put it right here at the top. But I think they should organize it a bit different and a bit better and not have all this empty space and use just for the book. Now button next up, We're moving down and you can see they have beautiful taking design hotel in Meekness island, Greece, which is great. But organization off these sections is not really all that well. So once again, what you are offering to me as a visitor, do you offer me some exclusive rooms? Do offer me wine and dine experience to offer me just a room? Or do you have your own restaurant? Is this a cafe that I can see right here? Or is it a dedicated restaurant for the hotel visitors? Is this the inside or the outside pool? What can you explain to me at a glance so that I can make my decision, foster, and make my decision better for myself? Also, these read more buttons are just not that readable. And you can see this text is really quite small and not that readable. There is no headlines, so I don't know what I'm breathing And if it just scroll down, all you can see are these images and you might skip this important messaging that they might have for you to read. So you don't know? Is this the main room? Is this the second room? Okay, you have accommodation and sweets. But if I change it right here, you have rooms and sweets. OK, but these images look really similar. Perhaps maybe you should dedicate the entire section off your landing page. Two rooms and two suites and toe. Explain their differences to me. Maybe to put some prices so that I can know. What's the difference between rooms and suites? Can I bring my Children there? Is there wheelchair accessible entrance or not? Do I received my own parking? None of these information are there. And all of those information are really important when you're making your decision because you're going to spend your vacation in that room. So 10 14 days, seven days doesn't matter. Even if it just one day you're going to spend your money and your time living in that space basically and you don't know what it is you have tow you also. It's then go into every single room page and explore it a bit further there. So it's just a waste of time. I want to know everything I can everything I need on this first page. So on this landing page, before I dedicate my time and later on my money toe this hotel. Next up, if you scroll down, we have a guest book. And once again, I really annoyed by this yellow color and you can see all of this slides the same. So this image slides same as this. Testimonials right here. So it can be really annoying toe. Understand which one is which this moves. This moves. So you just cannot dedicate your attention toe one particular section off this landing page at a time because you might want to read this, but this keeps moving. So your eyesight is moving from here to here, then from here to here. And you cannot really focus on any particular section off this site. And everything just keeps moving. And you cannot read it properly because I'm on my computer. If I put my mouse here, this should stop moving. But as you can see, here is my mouse cursor and it just keeps on moving keeps on moving, and I just cannot read everything I might want to read this. It's a bit longer, but it run away from me and I didn't manage to read it. So I am now one bit annoying. I'm going to scroll down and you can see in this section they have facilities and taste off Mediterranean. So which is nice, but facilities for what? So is this a restaurant? Okay, is it says breakfast by the pool swimming pool. So should you not just right restaurant right here instead of facilities. And maybe you can put some dishes right here, your local cuisine inside. Next up you have swimming pool. But what kind of swimming pool? We just see one guy right here enjoying? But I don't see any swimming pool right here. Maybe I want to see some more images at a glance right here. I don't want to go to dedicated pay just to see how the simple looks like. I want to see it here on the home page before I make my decision. So this read more? It's really redundant, in my opinion. So right here It says shiny cocktails. But why? I can have cocktails at the restaurant, right? Why do you have a dedicated slight for it. It really doesn't make any sense to me. And next up we have taste tastes of the Mediterranean. So you have three slides for the food and drink, and one slide is for the pool. Why can you separate that into two sections? So, for example, we have a restaurant and then you can explain these three things inside off there and then have dedicated section for the pool. If that is your main selling point off this hotel so really doesn't make any sense to me. But that's what we are going toe exploring these videos. That's what we're trying to achieve is to understand how the competitors are making their websites, in our opinion, what they're doing wrong and what we can try to improve in our website for our hotel and to increase conversions and to reduce the bounce rate because we avoided those mistakes. So we want to guide our visitors through the whole experience through the entire landing page until they reach their decision before they go away from our landing page. Next up, we have news, so we have some news right here. In my opinion, this section doesn't really have any place on the hotel landing page. But really, it's up to them activities. Why is the activities all the way down here? If I'm coming to Mykonos, I want to know what I can do on meekness. I don't want to scroll all the way down on this page just to see what I can do there. It's really all nice and well to show me your restaurant in your poll. But if I come there, what can I do? They're Why are activities all the way down here? Why they're not at the top. It's really beyond me and also activities A. So you can see this section has this paragraph, which is not really easily readable, and the text is way too small. It's white over white over some kind of cream background. It's really doesn't doesn't read really well. These images don't explain that much. In my opinion, this should be a bit more life into them. But it's all up to the photographer who took them and up to these people who did horn the hotel read. More buttons are not really easily readable through the entire landing page and a vote to it. A bit differently. Sign up for newsletter. As you can see, it's really weird. Text is way on the left. This box is right here in middle. And these social media icons are right here. Why they're there. We just need sign up for newsletter. It should be clean, simple to grab the attention. Why are social media icons right here? They should not be there because we have them here. And because this is a scrolling navigation. If I scroll right here, you can see we have them here and here. So why? Why waste that space when you can you use that space. Ah, lot better to include the information which really matters to this website. Next up, we have some nice images right here. But once again they don't tell us any story. We can see some guy right here by the pool and these people laying down on the sun. But where are these? Is this inside of the hotel? Is it outside of the hotel premises? Where is this? Is it by the pool? Because it doesn't look like it. Is this the beach? So give us some context. Explain to us because we're here for the first time. We don't know your hotel. We don't know if we want to stay in your hotel for our vacation. So just try to persuade us more with more information, which is relevant. Tow us. And finally, we have a footer, which is better footer than on this first example that I showed you. But still not that great, because they're missing some main information right here. So, for example, I might want to quickly send you an email. How can I do that? Is there are email that I can click? Yeah, it is right here. But if I don't have my clients set up which majority of people don't, they don't know how to set up. You cannot send these people on email. Maybe you want toe. Send them a question about Okay. I like this room, for example, And like these activities, so you might want to ask them. How much is a horseback riding in Mykonos? If I stay in your room for 10 days, how can you do that? You have to call them by phone and you have tow email them right here. But you have to select this email. Copy it is, you can see it's elects the entire thing. It's really not that useful to your potential visitors. So you have to have your landing page structured better so that they can have the information that they need the most at the glance without leaving your landing page without going through multiple pages just so they they can get that important information that they need. So that's it. For this second example, in the next and final video, I'm going to show you the turtle example, which is a lot better than these two but still lacks a lot off information, which, in my opinion, should be included in the first place, so I'll see you there. 6. Competitor Analisys 3: in disturbed and final video. We're going toe Analyze Porto Mykonos Hotel and you can see that they did they done a bit differently and a bit better than these other hotel websites that I showed you. But still there are a lot of things wrong with this website in my opinion and some things which we are going to avoid when we start designing and planning our website. So right here at the top, inside of the navigation. As you can see, it's all quite a bit bunched up. I like how they do this because whatever image they include right here this navigation is going toe work. But still it has a lot in for a lot of information which are not necessary in my opinion. So you have gallery right here. Why restaurant and bar? Why facilities Okay? But why? Like this book online button is not really prominent in stands right here. Also, why you have your logo like here? Because it just eats this much information from the rest off the website. Why don't just you put it inside off the navigation so that you can free up that space. They have some text, right? here in the hero image. But as you can see, it's really not easily readable. And it also doesn't tell us much. So maybe we want to know information about Can I bring my Children there? Do you have a parking? What is what kind of hotel is this? So, for example, if I go there with my family, will I just be mingling with some business people or some other families, or will be there along with my family? So just bring me any information which I might need right here on the home page and inside of the hero image. And inside of this first slide, if you have a slider or maybe include a video right here showing your hotel showing me who is staying there and all of those information. As you can see, none of these three websites is doing that. They don't have any videos right here at the top. They just have these static images. We just don't tell any story and doesn't give us any important detail which we might need. So as you can see, it just writes poor to me. Close the ideal. My Mick. Honest town hotel. Great. But What about these two? I just found three off this ideal me Coniston Hotel. Why is your yours better than these two? Just give me some information. Show me. Persuade me to book online right here on your website. If you scroll down, I like this because they just give user some more information. But it's really say scroll down right here instead of just putting the icon. I like the icon better because it's cleaner. But a research has shown that when you put scroll down, people actually know what they need to do. If you're a designer, you'll know instantly what you need to do. But majority of people don't. Perhaps some will click this arrow right here. And if you don't have link included inside like they do, people click right here and then leave because they don't know what to do. But luckily they included. So if I click on the cyberlink right here, it will take me to the next screen. As you can see right here, they have a bit off an introduction for themselves. But why put this small image when you have this nice large images right here? Why put it here? Why didn't you include video? Just pay somebody to create a nice looking video. Put it here. Make a nice, big, bold letters and nice, big bold heading explaining to me what you are, who you are. Are you for me or not? And maybe includes some different call to action and not this one. Because, as you can see, this tax doesn't read all that well against this color, maybe you should consider including this color maybe some darker shades off this color for the text, maybe even some darker texts off. For example, this color just so that your button constrained out a bit nicer or so this book online white on the steel color doesn't stand all that well. But once again, I will put a different section right here explaining a bit better who we are, what we do and what kind of value can we bring to you as a visitor? Next up, they have future accommodation. So, as you can see once again, they don't give us any information about the rooms. You have to click on the image you have to go inside off the page toe, learn more about each rooms. But they don't give you any information right here on the home page about the rooms that they have on offer, which I really think is a lost opportunity for all of these websites. And we're going to change that when we started designing our website later on. And as you can see, they only have these two rooms. So they have this arrow right here which doesn't do anything is you can see I'm clicking on it doesn't do anything. Perhaps we can click on this, but it takes us up on the top. It creates frustration. As you can see, it does have another rooms. But if I didn't see this arrow as you can see a click on it. But nothing happens. So why is it there? Why? Why don't just create. If you have four rooms, why don't you do like this first site? But a bit differently, of course, and create for a different images. Why are you using this layout without the saroso? If somebody's looking at this from the from their mobile device, they might not be able to read this and to see this. And they might be thinking you only have two rooms inside of your hotel so moving on hotel highlights. Why is this right here? Why isn't it right here at the top? Why? I had to scroll down just to see these highlights also, What is this? Ciara? What is this? Learn more about what? Magnificent views Great accessible to disabled guests. Why isn't this all at the top? Family friendly? No barking friendly know why? Why don't you have this incredibly important information right here? What if I arrived by bus and I go to the town centre? How can I get to your hotel? What if I get there by a car? Can I leave my car anywhere? Do I have to pay for external parking? Do you have your own parking? So all of those information should be included on the home page so people can know instantly. Ok, this is for me or this is not for me. I'm going to leave without wasting my time on this website. But as you can see, none of those informations are in any of these websites. And finally, if I scroll all the way down, you can see Jews for two gallery, so I can I cannot review them from here. I have to go inside of the dedicated pages for these galleries. So once can't missed opportunity. And this arrow right here, what it does if I click on it, it brings me to the top. Great. But if I click on this arrow, it brings me to the top. So it does the same thing. Why is this arrow here? So, for example, just imagine somebody wants to click right here. But by accident they click on this area right here, so just creates frustration. Why is it there? Why include all of those unimportant elements inside of your page? And that's what we're going to analyze and talk about in the next section of the course. Quote landing page, not tell me where I'm going. Toe walking through the entire landing page process about which are the important elements which elements to avoid which elements to include what is the perfect landing page structure and so on. But to finish off this video, as you can see right here before they have subscribe. But once again, really a small box. So why should you put this small box right here without any button visit? our sister hotel. Great. But why is this so prominent? Right here? They want to leave. They want me to leave this website and to go to this website. Do not want me to book on this website. But on this website, so just creates confusion. Why is it there doesn't need to be there. You can see right here They have contact information, telephone and email, which is a bit nicer than these other websites. But why don't just include the nice, simple big contact form with a map next to it So that I can know how can I contact you? Maybe I want to ask you about room about the price. So once again, if you don't have email client connected to your browser, you have to select all of this hit copy, then go to your email client and then write your email there. It's really not that simple to do. And it really takes a lot of time for these potential visitors to do. Finally, we have right here at the footer all of this information once again, who designed the website Nice that they have their But why? And finally all of this right here for the social media pages and sharing and someone, but in my opinion, really isn't designed all that well and should be laid out a bit nicer and a bit better in a bit more logical way to clean up all of this navigation and to put some other elements inside off the footer right here. So that's it for the competitors analysis section in the next section of the course, A ZAY said, We're going to start with landing Beijing, not to me. And we're going to talk about what is a landing page, why conversion matters function over beauty landing page structure, what to consider to remove and so so I'll see you there. 7. What Is A Landing Page: landing page is usually the first page of the home page off your website, and it's the first page your visitors land on, so you can imagine if they search for you on Google and click on delinking to search the home page. Or the landing page is the first page off the website that they will visit and the purpose of the landing pages to explain in the shortest possible time what your website is about, what you're offering and who will benefit from your offer because you can imagine that majority of people who are coming to our website don't know what it is about. Don't know what you're offering. Don't know what your product or service is, so you have to explain them on the landing page in the shortest possible way and in the most concise and clear possible way what you're offering, how they will benefit from your service or your product, because if they don't get it, they will leave. The whole point of the website is to sell what you're offering so either a product or a service and the landing page is your salesman, so you can imagine a salesman going out there and sell either the product or the service that is your landing page usually have 3 to 5 seconds when people land on your page before they leave. So have to persuade them to stay and to scroll down. Because you can cram so much information in your header area and above the fold because majority off your information will be down. The information you put up there at the top will be at the highest possible quality and the highest possible conversion in terms off, explaining to your potential prospects what you're about and what you're offering them their tips and techniques developed by big agencies that can help you achieve that by structuring your landing page in the right way, using the right elements, which means you will hook your potential, uh, leads, and customers at the hero area. Once they're hooked, they will start scrolling down, and when the scroll down, you have to structure that information in such a way that they will understand at a glance what you're offering, because let's face it number is reading the information you're providing. They're just scanning the website for the information that they need. So you have to structure that information in such a way that when they scroll down and the scan your website, they immediately understand what it is about, what you're offering to them and how they will benefit from whatever you are offering to them. We're going to discuss all of these points in this section off the course. And in the next video, I'm going to show you what is a conversion and why it matters for your clients, so I'll see you there. 8. Why Conversion Matters: why conversion matters conversion on the website is simply turning the offering toe money where it's a service or a product. So, for example, if you're selling shoes, conversion is with when somebody pays you money for those shoes through your website, what is a good conversion depends off your product or service, how expensive it is, how valuable it is and if it's shown to the right customer. So, for example, if you're selling something which is in a really small niche, you can. You cannot expect your conversion Toby High, because there simply isn't enough people in that niche to sell a large enough quantity. So either off your product or service to satisfy that conversion rate that you had in mind . So just keep that in mind about when you're starting out something. So when you start working on a website for recline, for example, you have to understand how big off the niche it is in which clients tries to sell their service or they're parked. So therefore, you can know how big of the conversion rate you can achieve with your landing page, because there is no point off testing endlessly. If the niche is simply just too small. Good conversion rate really depends off your industry niche, but you want not just a cell but be profitable and have money to spare down the line. So that's why I say you have tow. Explore that niche, see how big it is and see hum how much possibility you have off selling inside of that niche. And just make sure that your search Google for good conversions in your industry. If your clients doesn't know them and try to hit those goals by testing your landing page, because in majority of cases clients just focus on the product, they don't focus too much on the research, believe it or not. So when you start selling through the website, they will be expecting some magic things from you. But if you don't do your research, when you don't show to them the potential off that niche that they're in if they didn't research the niche there in properly, then you will spend your time pointlessly testing and iterating your landing page, but achieving nothing because there is simply not enough people out there to buy. Also, you have to research that niche so that you can know how to target and how to structure the information on your landing page. And that's what we're going to talk about next. Function over beauty because there is simply not enough room for, for example, Grady INTs or nice looking images in all niches on the world. There is simply space for those things in some niches and not enough space for others, and we're going to talk about that in the next video. 9. Function Over Beauty: in this video, we're going to talk about function over beauty and why it's important to focus on the function off the landing page rather than how beautiful it looks. It's of course, important to focus on the design and to make it pleasing to the eye for the visitors, but it much more important to focus on the functionality off the page. So I'm going to show you some really well known examples in the online world. And I'm going toe walk it through some of them just to show you what a good landing page is in a good landing page structure. So here we are, in the first example to Shopify spades, and you can see immediately what it does sell online with Shopify. So you know that in the 1st 2nd you land on this website what it can offer you, you can see the logo right here. You can see what it is you can see. It's trusted by over 100,000 businesses worldwide, so you can know this business is well known. If you just heard of it for the first time and right away, you can see you can enter your email address. Start the free trial and you can see right here with no great cry required for it in their tree free trial. So they are already showing you their most important assets off their business. So you can start for free. You can start right now. 800,000 people are already doing business with us. You can sell online with Shopify everything in the first few seconds off your landing on this page. Then you can see the image right here. So you know. OK, so this is for websites as well as for mobile devices. Okay, Cool. I can see some products right here so that I can know immediately what I can sell with Shopify just as an example. And right here you can see some most important features they're offering in their website. You can see right here people already using their servicer can see who is using them and right here, customer testimonials and once again, call to Action button. We'd start free trial so you can see there are no Grady INTs there no wild backgrounds. There are no flashy images there. No background radio is just playing. Slowing your upside down. Everything is extremely simple. Everything is extremely straightforward. This is done through many months off testing and integrations and customer surveys and so on. But as you can see, this website is not particularly beautiful, but it's functional and thence. The main point off the landing page is to make it functional toe. Make it work for your business, not just for your business, but for your customers as well, because when they land right here, they have to know instantly. What sited about what can they do on your website and how it can help them? Because that's the most important thing above all, is how it can help me as a visitor by visiting your website. So that's the main point off the landing page. Next up we have Airbnb and you can see it's quite a bit different than Shopify. But you can see right here the main point off the website earn money as an Airbnb host. So you know. OK, so I got a home. I can rent it out and make some money, and right here instantly, you have a question and you have an answer and you have two big red call to action buttons with some prices to entice you to start. And basically everything you see right here. You have already been hooked as a visitor to visit this website and to start using their services because that's the most important thing. As I explain it. As I said, to catch the potential visitors attention and to bring them down to read more you don't have to read more. Everything is right here. But if you want to see more, you are already interested. And you see the image right here telling the story. So everything is where it needs to be. So if you scroll down, you can see a bit more information. So now they're explaining what their services are. You have the testimonial right here. You can see we got you covered. So they're persuading you by saying we got your back. We're going to help you every step of the way so you can see right here how payments are made. Simple. How can they pay you so we have one more testimonial right here. So right here They have some data. So how many hosts? There are average stays and so on about Airbnb. So about them Who are they? Your questions answered. So once again they're answering your questions all on this page, and you can find out more right here, and you have once again get started button right here. So everything is really simple. Once again, there are no crazy elements on this page. There are no transitions. They're not even single slider. As you can see, all of those images are fixed. As you can see, there is not a single video. There is nothing on this page, but it's really hi converting page, and it's working wonders for their business. So that's why they're using it, because it's effective and I cannot trust this enough. It's most important thing in website design is for website to be effective so it converts better for your customers, so it brings them more leads and more customers for their business. Next up, we have this year, so we steer is basically ah, software and a tool for video based businesses. So you can imagine YouTube but for businesses, and you can see right here what they're doing. So we have this woman with the camera so we can know straight away. Okay, It's about video you can see word video right here. Get started. Logging, Watch videos. So all of these Coulter actions are right here really simple and easy to navigate the menu right here at the top. And right here you can see what they can do for you so they can host your videos. They can. You can create new videos fast and growing over their skills. So they have in depth guides from making marketing right here. You can see some customers right here. So who were they? Their customers in the past. And you can see right here some more videos about how can you get started and that's it. It's really simple. It's really quite almost basic in a way. But everything you need to get started is right here. Everything is really simple. You can easily navigate through everything so you can see all the information you need right here on the home page without the need to going toe Any external pages at the moment . Just so you are able to learn a bit more about this business. Next up, we have wept flow and you can see what they're doing right here. Break the cold barrier build better business websites faster without coding, and you can get started right away. You can see their customers right here. You can see how some of their websites and some of the elements look like and right here they're explaining what you can do in some nice animations. So this is the kind of break away from the rule and this really looks nice And there, including some videos right here. But once again, you cannot see any crazy ingredients, Any background video slowing your website down any aggressive transitions and aggressive animation. Everything is so simple. Everything is so clear you can easily read this text against these backgrounds. You can see these images right here. So in each section, everything is well explained to concede inside of the real section for a designer for seem s and e commerce for the interaction. You can see this guy from Sunday's what he is experiencing using the weapon and how he is satisfied with it. You can see right here the launch. So how can you launch this website and once again from famous company? This eventbrite is really a big company, and this guy is explaining how he's happy with it. So once again we have what? Why? And the potential benefits for you as a new user Off this service. Next up, we have grow. So once again, the same thing right here. You can see how it looks like what it is, what it can do for you and how you can benefit from it all in one simple section, right? Nice and big on the white background. So you can easily see it easily. Scan it. And right here they have the resource is and what they can do for you. And once again, you have the previous customers right here as well as nice. Big get started bottom. So once again you have it here and you have it here so you can see there is no extra informations. For example, how can I compile my cold? How can I export my images? How can I do this? How can and do that? Everything is inside off the website. But the most important information is right here on the home page so you can get started and learn more later on when you need to learn more information. And finally we have user testing so you can have great customer experiences and they start with human inside. So this tool is for user testing, and you can see they're using some really fresh, clean, modern looking elements right here in the background. You can see some Coulter actions right here. Any for hit right here to hide it. You can see the navigation is really nice and clear. You can see these drop downs. How nice Early. They are laid out. You can see some call to actions. Right here. Everything is explained right here. So what? We do a little bit more about what we do, and you can try us out. And we have three called direction buttons. Right here. You can see the demo and you can watch the video off the service. You can see previous customers how it works. Here is the problem you, as a visitor, might be having. And here is the solution for your problem. And right here they have all of their benefits. So if you want a solution for your problem, here are the benefits which will help you solve your problem and grow your business even more. Who are the partners of these business here. We have some nice big testimonials for this business. You can learn more and have more. Resource is and you can see this bottom is following us as we're scrolling down. And once again you have request trial right here. And you can see this photo has all a relevant information which is not included. Insight off this landing pages or scroll down. But if you want to learn more about any of those details, you can find it here in the father because that's what Fuller is all about. So I hope you enjoy these examples and I hope you got what I was trying to tell you. Design is really important and we as designers, are trying to push our ideas forward to clients. But you have to understand it when it comes to a website, especially landing pages. Conversion is what matters and explaining the information you have to explain in the shortest possible way, while still keeping it really simple and easy for your users to navigate and to understand what you are trying to convey to them and what you're trying to explain to them. So in the next video, I'm going to talk about some landing page structure elements how you should structure your landing pages And what are the best elements to use when structuring your landing pages sauce you there. 10. Landing Page Structure: in this video, we're going to talk about landing page structure and which off the elements should you use when you're structuring your landing page. So first things first, you can start with the headline and headline is their toe. Explain your service or your offering. And the tagline is there to further explain what you cannot put inside off the headline. So this is to grab their attention. This is to further explain attention behind your product or service and call to action. Is there to close the deal? So, as you saw in the previous video in the examples I showed you, people are putting the call to action right here in the navigation area. But you can put it right here, for example. You can put it right here in the middle. It's really up to you and the layout off your page. Usually there is an image accompanied with the headline and the tagline. If you remember from the Airbnb example I showed you, they're using the same image toe a company, what they're saying right here in the headline and the tagline. More and more people are preferring to put a video right here, so either on a site or below or behind. But the video is there because it can explain information that you have to explain a lot better and then simply an image So the video can be off a product or a service or people explaining the product or service order customer explaining that to their potential customers. And that's why video is lot more effective, because people are watching more videos than simply looking at images below that. Our main benefits for you, for you as a visitor for the first time visitor off this website. So which benefits can we offer you as a visitor that can further enhance your life, your business or whatever you're offering to serve them? Next up? We have social proof, which is there to prove what you're saying in the sections above. So you have to prove that in the form off video testimonial video basically off your previous customers saying how you good your product or service is, or a quote from your previous customer, and this is here just to enforce the intention behind attracting the potential client or customer to your product or a service. Next up, you have to explain the problem they might be having and the solution you are offering and the problem, For example, in our case and in the case off our client, he's finding where you're going to stay in meekness, so that is the problem. And the solution we are offering is our boutique hotel, because so and so and it's going to help solve your problem next up. It's good if you have one more social proof just in there. But if you have just one right here, it's good because it's really up to you. Your Nietzsche layout and the industry or client is in how many social proofs you're going to include, because sometimes too many social proofs don't convert that well, so you have to include at least one. But if you can, it's good if you can include many more, because it can really help convert their potential prospect in tow. Customer Next up. When you have explained their problem, explain your solution. Prove that you can solve that problem they might be having. It's important that you show your features, so which features you are offering that consult their problem and be the solution for their problem next up, we have closing argument. So with this closing argument, it can be a statement. It can be another proof. So, for example, in our case, it can be a good view at the beaches and nice prices whining, dine, experience something like that just to close that sale and to close that argument so they pick you at the end of the day. Next up, we have a form which is either an order form or a contact form so people can easily contact you. For example, in our case, we want them to book through our landing page. So we have a nice, simple, easy to follow, easy to use form. They can fill and contact us so that they can book their stay in our hotel. And finally we have called to action, which can either be inside of this form or on the side. Same like it is right here. And the call to action is to finally convert them from ah potential prospect in tow. A client, when finally is explained in the previous videos in the already you off the most amazing landing pages out there is the folder and the folder is really important because all the information you don't need to be right here on the landing page will go inside off the father right here below. And if they need some information that they cannot find right here, they can find it right here. So you can imagine, maybe they want to learn more about. Do you have a safe in the room? So maybe they have some valuables, like gold or money or laptop or something like that, and they want to leave it inside the safe. You will not put that information right here because it's not too relevant, But you can put it inside of the foot where you can create, for example, F A Q section where you have all the most important questions they might be hearing answered for them so they can click right there and then learn more about those information at that specific F A Q page. Not on this landing page, because once again landing pages there to sell the service or a product you're offering and answered most important questions. And for all the other questions they might be having F a Q section is their contact form. Is there may be live chat is their social media pages. Are there so many other ways they can contact you and learn more about before they become your client or your customer? In the next video, I'm going to show you what you can consider when designing landing pages for your clients, for better optimization and better conversion, so I'll see you there. 11. What To Consider: here just a few things that you should consider when creating a landing page. So users structured for humans because humans are the ones who are looking and reading through your landing page. So don't just throw away some elements to the page to make it look nice. Make it structured. So So when people are reading through your landing page so they understand what you're offering, what you're trying to tell them what you're trying to show them so they enjoy looking at your landing page. So it's not just about nice looking. Design is more about the structure, so lead them through the entire process, the entire thinking behind the landing page so they understand. And what's most important off all is to convert better when there is a good structure there . So wherever you have the text, make it nice, readable, make it clean against the backgrounds. Whatever you have images make them be images. You're trying to tell a story with not just some random images like a showed you at the beginning off this course, so make the images stand out. If you have a video, make sure it tells the story off the section off the landing page that they're visiting at the moment, not just some random video. So, for example, if you're talking about benefits, make sure if you have a video that the video is about the benefits, not about the company, not about the product and so on. It's over, but specifically for the benefits you're trying to tell them. So walk them through the entire structure and make it so for humans, not just throw some elements A randomly on the page. I think you need to consider is loading speed because Web browsers, especially Google, and being love loading speed. So the most unnecessary elements that you can get rid off get rid off because that will improve holding speeds. Also use Web phones because weapons are optimized for Web use images, which are optimized. And that's the next point I'm trying to tell you is image optimization. If you don't need to use huge images, don't use them even if you are using in, just make sure you optimize them up front before you throw them into the design, and then later or send them to the developers because if the images are optimized, it will load the site faster, and Google and other search engines will love you for it because people with slower Internet connections are going to load the site much faster, get to the information they need much faster than if the images are not optimized and they simply are waiting for them to load forever. And they're going to leave your website eventually. Next up, we have called to action buttons. So as we explain in this and in the previous section, call to action, buttons are really important. So make sure to place them in the right places. And I'm going to show you that when we started designing our website and you can go back and see the good examples I showed you earlier so you can see they don't have like 20 different cold Russian batons. They have two or three, but position them industry strategic places. So then, when people are visiting the website, they know what to do and they know when and where to take action and finally check out the provided resource is so at the end. Off the course, you can see the video about links and resource is in this course and in it. I'm going to show you some further readings about landing pages. About some good resource is when you can learn even more if you want about conversion, about different elements that you can put on landing pages about good examples and so on so far. And you can also download that in the project files and in the fast for discourse, so that you can explore it further if you want to. In the next section off the course, we're going to start with the design process. We're going to do some planning, inspiration, mood boards, sketching and so on. So we're going to finally start designing our website and I'll see there. 12. Planning: Now let's talk about the planning off our project. We're going to start with navigation, then move onto hero section. And as I explained in the previous videos in the previous section of this course, you're going to structure our call to action buttons accordingly. So perhaps we'll put one in the navigation one in hero section just so that we can spark action right away. Next up, down the page, we're going to move on to the main features, and you're going to explain how our hotel is better than the rest of the hotels in the area . What we can offer to them next up. We're going to move on with testimonial and explain from a customer's point of view what they experienced and hard. They liked staying at our hotel, and after that goes the main offer. So you're trying to persuade them after the testimonial, to move onto main offer. Next up, we have supporting golfers which are there just to support our main offer, and I'm going to explain that once we start designing and once we start wire framing next up we have activities which are there just to support main and supporting offer so main offer is there to attract them. Supporting offers are there to persuade them, and if supporting offers fail, activities are there. So the more fun activities are regarding to our visitors, the more chance there are for them to be converted and to come and stay at our hotel. And after that we have booking form Richards there obviously to make them book, stay in our hotel. And finally we have newsletter form, which is there if they are interested. But then they're not going to book right now to catch their email address so we can start sending them promotional emails and attract them to book a Stay with us like that because maybe somebody is visiting our hotel page outside of season. Maybe they want to come and stay in 6 to 9 months or something like that. So newsletter form is there just to keep them interested, keep them hot and fresh for our hotel, and keep reminding them about booking and about certain discounts, for example, and stuff like that. Finally, at the bottom, we have a footer which, as explained previously, is going to contain all the necessary information, which are not included on the landing page itself so that they can click on the links in the footer and access those information there in the next video. We're going to move on to inspiration, and I'm going to show you how you can inspire yourself using different examples from the Internet we're going to Is it be cans and maybe dribble and perhaps look at some images just so that we can get the idea off? How are Page can look like, so I'll see you there. 13. Inspiration: in this video. I want to show you some inspiration pages that I found both on beacons dribble as well as some images which will help serve the purpose off, inspiring ourselves for the colors and for the imagery. Because we're going to use free images for this project. And later on, when the photographer is ready with their images, they're going to send it to us. And we're going to include that in the final delivery file when we actually send these files to the customer. But now let's start and just found these random templates and I want to show you this one is called Tripping to and Travel Agency Template. But I want to show you these cards are really like how they are laid out there really simple. They're really easy to scan, really easy to understand. You can right here at them to your favorites if you want to, but I really like how these reviews are shown, how they're really clean home, many tours, for example, there in Australia right here. I really like these once, so they're really clean, simple, easy to understand. Easy to read. You can really see right here basically They just added the flags and it really pops on the page right here. You can see how they are structured, so it's really easy to understand. It's really easy to scan, and they go really nicely with these background shadows on white background, and I think it will. It will really look good in our design. Next up, I'm going to move on to this arrow airline flight booking you are you x template and I'm going to move on down just a bit and you can see right here. I really like how these big text goes against the images. Perhaps, maybe put some nice, subtle color overlay right here and with some icons. It really goes well with this. Look, if I scroll all the way down, you can see how it looks like. So we have some really nice, subtle animations, and as you can see, it's really clean. Simple. They're using some neutral colors, and text is really nicely readable, nicely spaced out evenly placed on the page. I really like how that looks like. And as you can see from these animation templates, it's really easy to navigate. It's really easy to click through And, as you can see, white space is there in, ah, large. Next up we have this booking com, a redesign concept, and for this one, I really like this page. So, for example, when you want to book, you can see how it looks like. And it's really easy and simple, and I really like these cards right here, and we can perhaps use similar sort of design for our supporting offers. So, for example, what they can do in Mykonos once they stay in our hotel, I really like how they look like, and we can really show them and, for example, at location so they can click whether they are searching on the desktop computer or using their mobile devices. So mobile phone or tablet, they can then click this location and see where the location is adjacent to the hotel so they can really understand how far it is and how expensive or cheap it is. And you can see disorder, for example. I really like how it looks like it's really evenly spaced out, has all the important information there, and you can see it scales well on the mobile phone as well. And finally we have dribble. So if I click on this one, for example, I really like this frosted last look really like how everything is clean, easily spaced out. I like this background shadow on these buttons that it'll look nice and clean and they really stand out on the page. If I scroll just a bit down, for example, on this one, this is one we just looked at, and you can see the animation right here. How it looks like, so it's really clean toe. Find your locations, and once you do, you can see it's really easily readable. It's really easy for the viewer to find the information they need, and they can click to whatever they need on the page. And if I click on this one, for example, you can see exactly the same thing. It's really easily readable on the page. As you can see, you can really easily skin what everything is, and it really looks nice and clean. And finally, I want to show you some images from an splash because the hotel is by the sea and you can find some inspiration for the colors, for example, in these images, so you can clearly see a lot of steel. Ah, lot off blew a lot of green in the trees. Maybe put some light grace for the concrete, for example. And you can really see ex especially here, because this is in Greece, you can see these blue colors and this white colors, for example, of this green. It goes really nicely with our projects. So these images are just there for our inspiration. We're going to use them in our project, and I'm going toe, give you all the images so that you can use them when you start designing for yourself in the practice files. And I'm going to show you the practice file structure when we get to design part off this course. So that's basically it for the inspiration. Part is, you can see we're not going to use specifically any element that you saw in this examples. I just wanted to show you how when you space out these elements against the white background, it's really easily readable, and you can easily navigate between the sections and you can clearly find what you're looking for when just include a little bit more information in, rather than just one single image with text on it, as I showed you in the competition. Example. Videos In the next video, we're going to jump in and start designing our mood boards, and we're going to inspire ourselves for the potential colors, potential topography. And I'm going to show you how their logo looks like for now because they say they're going to change it in the future. But for now, we have to deal with it, and I'm going to show you how all of those elements go when you create mood board, so I'll see you there. 14. Mood Board: Let's start designing our mood board any for jumping to the resource is holder. This is what we have for now, but it will be a lot more resources by the end off the scores. So I'll simply jumping and open up this logo file. Just open it up in adobe Eggs D And once it's open, I can enlarge it like so And I can quickly jumping right here to the art world tool and perhaps create this 1920 by 10 80. Don't quite hear typing mood board because we want to quickly create a mood board. I can use the rectangle tool and draw two rectangles. So perhaps something like this may be yeah, and then used the repeat great future. Simply draw to mourn down like so and two more than like so maybe I can increase in the space between them perhaps still something like this, Or maybe even draw them a bit more closer, then hit on group great and then enlarge all of them. So, for example, like so maybe reduce them but turn off responsive resize so that they can scale like so control g to group them like this, line them up and then simply right click and on group. Or you can shift control G or shift commander if you're on a Mac and these will be our images, and I'm simply going to include some images now, you can do this with the repeat. Great function on, and it's easier that way. But I really it really doesn't matter for me, because sometimes I like to do things this way or that way, so you can include a lot all of these images at once. Once you created repeat grid, simply draw in. Place those images inside of raping great, and it will populate. But sometimes you want to do it like this because if you draw just one image and you want to see how it looks like in one of these boxes, it's repopulate. Entire. Repeat, great. And then you have to go a 2nd 13141 So one So it really it's really up to you how you want toe create your images, but it's really no big deal. However you can create them. And if you think some of them are not positioned correctly, for example, this one you can always double click and you can scale it up, for example, if you want, so you can reposition it like So let's say now, let's create our colors. So I'm going to do the same thing. It repeat great. Maybe create six like this. Then I can increase the spacing to somewhere around here, maybe on group grid. So that's basically it for our colors. And maybe we can start from the dark wrist. I like to do that. So perhaps this is our darker sculler. Maybe it can be for our call to action buttons. Perhaps we can select, then a little bit a lighter color. Or maybe we can even choose this one. I like how it looks like with first. Let's let's remove borders from all of them because I find them annoying. Maybe we can select this blue color, for example. Looks good. Then maybe we can select this concrete color like it. Maybe we can use this one. And finally, for this one, let's choose this. Maybe we can switch them so this can be this and this could be our concrete color. So perhaps like, No, this is too dark. Maybe somewhere around here. Yeah, I like how that looks like. So basically, that's how you approach your colors. These are once again simply to inspire yourself and see with what kind of colors you're working with is you can see we have this cream color right here in this star power. This white is not completely white, but it's also kind of cream. You have all these brown textures. As you can see, rocks are not all white, and the sky is nicely in nice and blue right here. So you can really play around with these colors and explore as much as you want. So let's go ahead and control. See with this logo control. We right here for some reason, it didn't taste and entire logo, so let's selected control. G control C control. Be right here. So I group them with control G and now basted it with control. We, as you can see, this is their logo. It's nothing special, and they said they're going toe. Redesign it once we create our website. And now finally, let's include some text. So I compressed e click Somewhere around here, perhaps we can use this is into headline Let's seem control a Maybe I can increase it to, for example, 48. So it's really nice and large. Perhaps we can use open sense. It's easily readable. Perhaps we can use extra bolt. No, it's too dark. May be bold. Yeah, like that looks like. And maybe we can position, like, so control de so that you can make a copy place. It's perhaps something like here. Maybe you can use 18 or maybe even 20. Okay, let's use a regular, and you can click right here to convert it from point X toe area text, and then you can drag our area you want to include So, for example, somewhere around here is good, and then with it selected, you can come to the plug in spinal, and you can use a lot of gifts and blogging. If you didn't install it, you can simply click right here and search right here for the long term ipsum. When you find it, you can simply hit this installed button and it will install, and once you do, you can then click on it. Click feel the placeholder text chills, which are on you want click insert text and it will insert that placeholder text in the area that you selected. If you think this is too large, you condemn experiment with it and see how different sizes work for in this paragraph text . But I think it looks nice, and perhaps we can select this color for the headlines. It's too dark, but we can play around with it later on once we start exploring our colors and start designing our website. But that's basically it. You can include some other stuff right here. So, for example, pictures from the hotel, actual pictures from the hotel, you can place them there. You can put images of the activities and so on a software. But this is just for us so that we can get a glimpse or how everything will work on the page. Perhaps we can create a button solids do that will quickly to the rectangle tool line up like this. So maybe we can use I don't know, 25 with 60 anything that looks good and because we can type in five or no, let's use five here. Let's remove the border. Let's use this feel color, for example. Maybe we can use eight just to get a bit more around the buttons control D on this paragraph, turning toe point text and then simply move it down. I'm going to write in, for example, read more. Put it in the middle. Like so, position it inside off our button, like so select. The story can hit these two to make it be perfectly in center. See what it is right here. And for the read more text, we can convert it white, so simply click right here. And if you zoom, you can clearly see that that is the button. Any presuming a lot closer. You can clearly read it, so this color already works quite nicely. Maybe we can even choose this one. See how that works. But I like this one a bit better, so that's basically it for this move or process. As I said, you can go in depth with it. You can include as many elements as you want. You can include a few elements as you want, because this is basically just for your personal exploration, so that you can see which elements work well in the page. Which doesn't which colors go well with other colors, for example, you can explore different typefaces and find out which text works well. But because this is a free font we were using. So it's open sense, and you can find it on Google phones as well as adobe fonts and our link them so that you can download them in a really pdf file. In the resource is video at the end of the scores, so that you can learn more about those you can download as many phones is. You want an Explorer, of course, and you can follow these images if you want an Explorer with different shades, different positions of these images. So, for example, you can flip some of them and so on and so forth. But this move or processes just for you so that you can get better. Glimpse off how your project is going to look like once you actually start designing it. And this will actually cut your work shirt. Because when you finish this small board and you can simply click right here, hit control E. And with export us its balance elected, you can select right here. Eight a. PNG pdf for Jay Peak and you can export it toe, which are location you want and then actually send it to reply int so that they can go over it and see. Okay, I like this color. I don't like this color. This is working. This is not working. Let's change. Day slits include that. And just in this mood boarding process, you can cut your work short later on when it comes the time for revisions. Because you get the colors right for the first time. And then you can really increase the speed by which you are working on this project later on, when it comes to time for revisions. So that's it for this video. In the next video, we're going to start with sketching, and I'm going to show you how you can sketch some ideas that you have right on the paper before you actually start working on the wire frames. So I'll see you there 15. Sketching: in this video. I want to talk about sketching because catching is important in the design process because it gives you that freedom that you can use when you start sketching on paper because you can easily scrap the paper, throw it away, start again, include some different elements. Try some ideas out. See what works, what doesn't with your layout. And then you can try those ideas you have on the paper inside off the b x D. So right here I simply draw from elements onto the page, and I'm going to show you what I came up with. So let me zoom in a bit closer. You can see right here at the top. We have just basic and simple, easy to use navigation, and we're going to use the drop down menu right here, for example, for the offers or for the room so they can easily navigate from here. We're going to see once we start wire framing. Next up, we have call to action bottom, which was really clear, nice and big so they can book their state from right here. Below that, we have the hero image and hero area. We have a nice big title subtitle call to Action Button and Hero Image and we're going to see how this hero image is going to look like and how we're going to incorporate it into our design once we start designing. But it's really important to explain everything right here. So they don't have to look for any other information when they land on ah homepage because everything is explained right here. Below that, we have main hotel features. So maybe we're going to explain the location where everything years and I'm going to talk with the client toe, pick up some main features that we're going to put right here. So this is just hooked them to scroll down and to learn more about our hotel below that we're going to have testimonial from the previous client who is going toe. Tell everybody how delighted they were with stay at this place and we're going to put book now, call to Action Button right here so they can book right here. Below that, we have made offer, which are the rooms, basically. So we're going to put the rooms and put some basic information right here, and we're going to have learned more so they can learn more about a particular type of rooms when they click right there, and it will take them to the room page later. But this is just to show them which rooms they are, so they can pick which are room they want and learn more about it right directly at the home page. Below that, we're going to have some more features from the hotel. So we're going to explain, for example, in their yard we're going to explain the terrorists is they have. We're going to explain the restaurant and someone, but these are supporting features to the main feature and main offer, which are the rooms, because when they picked the rooms, that is what they're going to get, depending off which room they get. Obviously below that, we have nearby activities. So as you can see, I didn't draw that because I ran out of space. But that's something I had in mind when I was designing this drawing when I was drawing on The paper is I'm going to include main offers as well a supporting offers. So if they're not joined by the rooms, they can see right here what they're getting with each of the room, for example. And that could influenced their opinion off staying at this hotel below that we have nearby activities. So if they're not persuaded by the rooms supporting offers, they have nearby activities, so they can learn more about those activities. And I'm going to include some elements in the design, as I showed you on the beacons examples, for example. So we're going to see how far it is from the hotel. They're going to be able to navigate their straight from their computer just to see how far it is and the price range for that particular offer, for example. And we're going to have this as a slider and there went to be able to use that and just see activity name some basic text, maybe what they can do and right here, nice big image, which is going to be a slider basically so they can slide left and right and see different activities below that. We're going to have the booking form which will going to write, for example, save up to 40% when you book with us. Next up, we have supporting text and call to Action Button, and this contact booking form is going to contain all the relevant information that they're going to enter if they want to book their stay with this hotel. And finally we're going to have the newsletter sign up. So, as explained in the previous videos, if they don't want to book right now, So for example, it's the end of the season. They just landed on this website in December. They want to go to their vacation in June, for example, so it's really way too far for them to book. They're simply going to leave their email address right here in the sign up for newsletter , and we're going to send them. Promotional emails were going to send them stories, for example, just to keep them interested. I keep them hooked for this hotel so that they can book when they need to book and finally at the very bottom we're going to include a photo and folder is going to include all the relevant information which are not included in the landing page itself. So when they want to learn more about each of these components they want, they can go down to for and find all of those information there. Finally, we're going to include social media icons. For example, we're going to include a phone number, email address, the taking contact if they didn't use the book with us for and all off the other relevant links, So that's basically it. For the drawing part, you can be a specific as you want or as rough as you want. With this part, you usually don't share this with your client. This is basically just for yourself so that you could have some basic structure that you can then import and start working on inside off Adobe X'd. So it's really an important process, an important step in the design process, because you can really explore different ideas and put different things in the paper and just really work to see what works, what doesn't and then include all of that inside off your wire framing process. In the next part of the course, we're going to start with wire framing, and we're going to turn these sketches in tow really high fidelity wire frames and later on in tow designs, which we're going to share with our client. So I'll see you there 16. File Preparation: in this part of the course, we're going to start designing our wire frames, but before we do, we need to organize our project file a bit. So I'm going to include all the different files that I already showed you and the future ones which we're going to create during the scores so that all of them are located in one single file so that if at any point you need to copy something, you need to look something back for reference. You need to create something new and compare it to something you created before you can do everything inside one file because Adobe X'd is amazing when it comes the time toe creating large files and sending them to clients because they really did their magic with optimization. And you can really send some large, large files with small file size to your clients. So without any further ado, you'll remember this mood board that I created in the previous part off the course, and we have the logo that the client sent us. I'm going to minimize this and jump into our resource is Father, which, of course, you're going to get so right here. We have a project, which is this file that I already showed you. I simply went ahead right here. Savers and saved my computer named it Project, and you're going to receive that project file at the end of the course when you download the files. But it's going to contain everything we create during this course. So I'm going toe include design brief inside. So I'm going to double click on the design brief file. It's going to load, and I'm simply going to copy this one, which is the field design brief? Because if you remember from the design brief video, you have the empty template, which you can use for your projects. And we have this filled out template which we're going to use for this project. So control. See, when you simply select this art birth, I'm going to jump in right here. Zoom out a little bit, hit control V, and it's going toe paste it right here. Next up, I'm going to do the same thing, but with wire frame. So let me quickly pull this out, toe my other screen, jump into this file, and I'm simply going toe drag and drop it right here onto the page so that we can reference this wire friend that we created during the creation part off discourse. Next up, we're going to create in our ports, so I'm going to click right here. It says are poor Larry King hit a on your keyboard and I'm simply going to scroll down toe Web and click on 1920 and it's going toe include everything inside. So simply going toe separate them because it sees this as on our port. When it's not, it's just a simple image. So I'm going to position right here, and I'm going to move this right here. I'm going to double click right here. And I've been wire frame because this is going to be our wire frame and we're going toe design it from the ground up. And when we finished with the wire frame, we're going to use those elements inside our design. But I'm going to show you that when we get to it later on, are simply going toe click on it and extend it down and you're going to see this dotted line. And this started line is basically the fold, so everything right here will be above the fold. Everything right here will be below default. And of course, you can set this up or down however you want. If you think that the fold is going to be up or down, if you're creating for multiple devices and so on in the next video, we're going to start designing our wire frames and I'll see you there. 17. Creating Wireframe 1: right. So let's start with creating our wire frame and first thing that we're going to do when resume right here. You can select the our part by simply clicking on its name. Click right here. It says Layout. On the columns, you're going to have 12 columns, but on the gutter, wit were going toe. Enter 40. Press enter and you can see it automatically adjusts all of these other valleys, which is fine. So we're just simply going to zoom in a little bit closer. And in a lot of cases, when you start designing, you cannot see the elements because off the script, so simply click right here where it says layout, great column color, click on it and simply lower the opacity off these lines to somewhere around here so you can still see them. But you can see what you're designing right here at the top so you can click on your our port and you can click right here in the rectangle because we're going to create navigation . So what we're going to do is call this never biggie like so because I always like toe name my layers because it's ah easier for developers later, and it's easier for me if I need to find something a bit later and I need to change it. So we're going to give it a height off 1 50 and position it toe the top like so we're going to remove the border a bit later. But let's keep it for now so that we can design what we need to design inside off this now . So it's jumping right here and select out a logo, so click on it to control sea jump right here inside off the never BG control we and make sure it's in the folder as it is. Make sure you click right here to disable constraints for responsive resize, because if you leave them on, it will give you some weird as you can see right here. So just turn it off if you want to scale it down evenly. So clicking one of the corners hold shift to reduce its size to somewhere around here. Make sure you snap it to the grid that we just created, and you can select both of these by holding control and simply move them in the middle like so and it'll snap in the middle off this navigation background, as you can see right here. So that's our local dealt wit. Now let's create some text, and we need to start with a room so you can simply click right here typing groom's and I'm going to choose some color something like this. Maybe just some basic great really doesn't matter. But let's use something like 707070 Just nice. Basic gray, simple, clean changes to 24. Make sure it's on regular as it is, and you can do the same. Supposition it like so select both of them. Hit right here in the middle and now, because I want this room toe pop down so it will have a drop down. But let's create it a bit later. Let's first create these other items in our navigation so it can hit control. De to duplicate issue could move the long and typing reservation because we want people to be able to reserve their room from here. Select both of them, make sure they are left a line, so when you type, they will go from left to right. Select this one control de duplicated on this one type being about us and once again control D. And for this one, we're going to type in contact because we want to make sure that people can contact us and that they are able to contact us right directly from here. If they have any questions for us. Next up, I'm going to create ah, flag placeholder because we're going to place a flag right here so that people can choose languages if they so wish because this is in Greece. Maybe they want to create a Greek language website as well as English, maybe a French or maybe German, depending off where their customers are coming from and the resisters. So I'm going to give it 40 wits 30 like so make sure you name it flank and make sure you center it like all off the other one's. Make sure the position it right here below and duplicate the contact. Let's quickly order some of these, so rooms should be just right off the logo. So just below it in the layers panel right here reservation should come next about us should come next. Contact is here. Flag is here, so let's duplicate contact to move it all the way to here because this is going to be our button text, because we're going to place a button right here, so simply double click on its toe. A change it type in book now like so, and make sure this goes in their center, so it's center aligned. Next up, let's create a button, and for it, let's choose a rectangle tool typing to 91 which 75 and right here type in 10 because we want to create around corners, make sure you move it down. DoubleClick, BT and BG short for bottom background and let's move it. So a line to the great right here and select both of them. Make sure they're center aligned like so dentures. Book now text button BG and position it like so because it will place this text in the middle. Now what we can do is give it some color if you want to, so select it and we can go right here and maybe choose this color so you can click on it like so I like how that looks like, and you can remove the border, click on the text, give it white color like so and now what you can do is jump back to our assets panel. But it says colors click right here. It will give you a white color click on the text. It will give you that color click on this text and it will give you color off the text that we used for this text right here. So that later on, when you want to change the colors globally, So just imagine we're going to create really long landing page. If you want to change globally the color off this text, you can do it by simply changing the color right here instead of going one by one and then changing all of them separately. So now that we can do I want to add a down arrow so that people can click on it and it will give them different options. So I have created a down arrow already to save some time, and you're going to receive it a bit later. So what you conduce you is simply position it in the center, jump back to the layers panel, position it all the way down to flag, and we can go ahead and group this book Now Button So control G to group it's and call it a book No Bt and, for example, and you can name your layers differently. I like to do it this way because majority of developers are creating thesis bottom lines anyways, so I think it's easier for them. When I do that, make sure it's in the center it is. Then make sure you select it, and what we want is to position it. For example, 70 pixels to the left. From this buttons hold shift and left arrow. Want to selected 1234567 like so then you can select this flag placeholder position 20 pixels like so then choose this contact and align it perfectly with this flight, like so 1234567 and do the same for the rest of them, so you can select all of them and you can see where it's 71 one pixel to the right. You can hold, shift and select or remove some of them so you can see we have two of them right here. I can click shift click on the reservation, and it will de select it So what we need for the rooms is we're going to use this same arrow, so control de to duplicate it. And you can hold shift and left arrow and move it all the way to here. Zoom in a bit closer and you can position it right here until it snaps as you saw with text . So 1234567 And we're going to place rooms. 20 pixels toe the left from it. So 12 And there you go. You have created your navigation. So now what I'm going to do is select all of these layers, ordered them up a bit better. Something I didn't do. Everything is there. So one final thing is to remove the border from the navigation. So let's select all the kids control G. Don't click right here in the folder typing never center. And there you go. You have created your navigation. So in the next video, I'm going toe, show you how you can create a hero image and we're going to move on down from there 18. Creating Wireframe 2: So let's now start and creator hero image. So once again, select a rectangle, drag it to here and let's give it. Remove the border and let's give it some color so you can use, for example, E c E C E C presenter, and we're going to use this color for all our images so you can remove the grit and see how that looks like on the page. And you can bring the great back when you want to start designing. Let's give it some height off 900% and the wit is 1920 0 sorry, I did it for the entire art board. So just select this rectangle and give it 900 for the height. As you can see right here whole shift and move it until it meets, which the never like it right here. Position it a bit back and we're going to give it a name off hero BG. And it's it's important to name your layers not just for developers but for yourself as well, because later on, when we get toe animating in this prototype for the client, we need toe have the same layer names for the auto animated feature toe work correctly. So that's why it's really important to cut your work short. And as soon as you design something, start layering it. Start naming it so that it's easier for you later on, when it comes the time for animating so that you can do it easily when you have layer names from the start, then going back to it and just imagine you have, for example, 200 our ports, and you need to rename all of the layers inside of those 200 our ports. So it's really time consuming, and it's really important that you named Louis your layers as you go along. I know a lot of designers don't like to do that, and they skip that part. But inside of adobe eggs, especially when you want to animate some of it using auto animate feature, it's really important to do that because otherwise it just won't work. So let's jump back, and also I created this icon for the plate in button control, see, because this is going to be our hero background video. So, for example, it will start playing automatically or people can click right here, and it will jump into full screen mode and start playing the video for in this hotel Sonesta. Let's create some text and I can jump right here to the never click right here. Control. See so I can hit right here. Control. We duplicate this layer. Move it down like so, and you can jump into her assets panel and click character styles because debts are first character style and you can also jump into book. Now hit right here. Create this second character style because we're going to use some different character styles throughout this design. So it's really important that you have them saved as assets because it's really easy, then to jump back, make some changes, and it will create some changes globally. So, for example, if you want to give it a bigger size, it will do that. Or if you want to change the colors, it will do that easily, So click on it. Make sure it's in the centre. Double click right here, typing welcome to, and he tried here to position it in the center position in summer and here Control D. We're going to type in London East Boutique Hotel because that's the name off our hotel control de duplicate this down and type rains. For example, Your home away from home, Some two lying death for this one. We're going to change it and we're going to simply change it here to play fair display. Click right here. You're going to give it size off 70 and we're going to change it to bold italic just to give some interest to hear, because I already spoke with the client and they like the idea of having different phones for the titles as we're us for the text. So that's what we are going to do right now, and let's also give it a different color. So for it, we're going to use 55555% and if I click right here toe, remove the great, you can see how that looks like, so it stands from the page just a bit better than it did before. So let's good clean bring back toe layout or I can leave it like so because everything is basically in the center for this part. So let's leave it as it is, So let's just space out all of this text a bit better. So if I zoom in a bit closer, hold my shift key until it snaps right here. I'm going to hold my shift key once again. Our para 1234 make it 40 pixels to the top. Do the same for this one like so then shift. 1234 As you can see, it's exactly the same. But for this one, let's keep it at 80. So let's give it double. Select all of them. But first, let's order them. So welcome to will be at the top Herren's boutique hotel. This text is at the bottom whole shift, so I talked. All of them control G Select Hero BG by using control key and simply positioned them like so and that will snap them into place in the middle for this hero image on group all of them. And it's simply group all of them back together. Control G L Click right here. Call it hero like so, and that's it for our hero image. So I'll see you in the next video when we're going to start designing about the section which will go right here below our hero image, and it will basically explain a little bit more about our hotel. So when they land, they have this simple, nice navigation. They have this nice, simple Heather with the video that they can play. But below that, they have more about our hotel and about us information. Basically, just a glance so they can get the North a bit better about the things that were not in this short video, So I'll see you there. 19. Creating Wireframe 3: So what we're going to do now is select this and I'm going to use this text as well as decks text control de to duplicate it and simply click and drag it outside off this folder . Remove it down, hold shift and down, arrow. Or you can simply hide this and move it like so. And what we want is to line it up right here. Hold shift and move it down. 100 pixels. Soap. 123456789 10. And as you can see, it moved 10 100 pixels down because we want to give it some white space right here. And as you can see, you can even increase the hero size right here to the fold. But the fold is irrelevant, basically because people are viewing this website on different devices. So just take the iPad, for example, I bet has a lot of different variations. Same as the iPhone and not to mention our android phones. Not to mention some different laptops. So if you're watching, if you're viewing this website at laptop, which has a 13 inch screen, it will look a bit different than if you look at it at a 15 inch screen, 17 inch screen and so on. So far so this fold really adapts to different screen sizes, so just keep that in mind. So when you give it some nice white space right here, it will easily adapt to different screen sizes. So let's move on, and I'm going to start with creating a circle. So I'm going to create a circle right here. Just call it Circle One, for example, and give it 1 50 with 1 50 and I'm going to bring my great back Sadullah click right here, typing click on the layout and what I want is to move it, maybe 80. So 12345678 from the bottom line off this text or maybe even 100. So let's give it 100 to have the same distance from here to here, as well as from here to here. So this is our circle one Control D. We're going to create a circle, too. Simply click right here, and it will place it in the middle control D and create circle number three and hold shift and position it to here so What we want is to position it because we have 12 columns in our grid. We want each circle Toby in the center off these four. So this first circle is going to be in the center of these four. Second one off these four and 3rd 1 off this for so far. To do that, simply select a rectangle draw to the fourth. You can zoom in a bit closer and you can see it goes from this one. So 1234 ends up on this one and you can simply select rectangle circle one click right here , and it will place the circle in the middle like so, because you can do that with guides. But I found this a lot easier because, as you can see, it's really simple. Select slicker. Three places right here. Click right here, Lil eat. And that that you have finished. So I found it a lot more simpler to doing things this way, Then to simply go ahead and create something different guides for this process. Because a zay said I found this to be a lot easier than that. So now what we can do is click right here Control deal. Duplicate this on positions like so 12 maybe even four to give it some nice batting control de positions like so controlled the like. So on this 1st 1 let's call it King size Bed like so, and what we can do is position it in the middle like this and make sure it's bolt and make sure it's this darker color. So we didn't set it like right here so you can select it. Click right here and it's this dark color. Click on it, and it will apply these darker color, and you can do the same for these ones. So hit right here and make sure it's bolt and finally click on it and create a new character style because we didn't have this character style before. Double click right here. Type in food included, like so make sure it's in the center and a quick right here and typing beach access because they're going to have direct beach access from this hotel. So, as I said, these are just some of our main futures, and May Fincher's off our hotel, so basically, when they land, they can watch the video and learn more about how the hotel looks, how the staff looks, Where is it located? Just some of the main features and that are going to sell in this hotel ending in simply click book. Now, if they're happy with it, or if not, as majority of people will not be, they'll simply scroll down and learn more about our hotel. So what we can do next is click right here, jump back to the layers panel so we can see where we are controlled deep, and we're going to move it right here and into the same. So 1234 making 40. And what I want to do now is click the area text and it will create the area text from this text, and what I want is you can simply move it like so and make sure it's the wit off these three columns, and you can move it to the center, same as we did with this text. Make sure it's somewhere around here and you can jump to plug ins. Click on the Lord of Some filled with placeholder text, click insert text, and once again, if you don't have this plug in, you can click right here in the plus click right here, type in London ipsum, and it will show you that Blufgan simply click install and you can do the same. What I just did, let's give it. I think something like this works well. So as I said, it's in the middle. Control Andi to duplicate it, and you can click right here to position it in the middle, controlled the once again and make sure it's in the center with these ones. And finally, let's jump back into our layers panel. So let's order some of these up. So first we have circle want just below, uh, your home away from home so it will go right here. Now, As I said, this is the boring bit, but it's really important bit toe Order these layers, so we have food. Included is the 2nd 1 like this and have circle beach access and dis text right here. And finally you can group them separately, but I just going to group them like this, so control g to group them typing about us because this is going to be about us section and later on we start designing and we're going to include some different icons right here in these circles. But as you can see for now, we have things moving along quite nicely. As you can see, we have this nice, clean, consistent layout for now. And later on in the next video, we're going to include some testimonial, and I'm going to place it right here below, so I'll see you there. 20. Creating Wireframe 4: Well, it's now jumping and create that testimonial. So I'm going to click right here. And what we need is this text. So I'm going to open this hedonist and select this other text as well Control de to duplicate them. Move it right here. Then move it just below here and you can hold shift or simply hide this and move it down into position to somewhere around here. And what we want is position it somewhere around here. Now, next, I want Teoh choose this image. So control d move it like so And then simply position it down like this. And then you can move it like this because I want to create a background color later on. We start designing because I want. This system only took Pop because I want to keep their attention. I want them to keep reading this because maybe they will get bored when they get to this section. But when they get to this section because it has that splash of color, it will keep their interest and it will keep them reading. And we're going to have the image right here off the person who said that testimonial so Let's start designing that. So 100 as you can see, it gives us this same spacing as it is from here. So let's juice this and position it. Maybe 12345678 Or simply give it 100. So let's keep all of it consistent. Choose this. Make it from the left. So this is going to write, for example, Jenny from London, like so And what we want is to create a call to action button right here as well, because maybe they want to book from here. So we're going to move this call to action button throughout this design. So simply selected control D and you can with, like, this called shift to It's somewhere around here. And when you see it, you can select it from here and simply draw it right here just above zero BG so that you can actually see it. And what we also want is to create a quote so controlled the position this like so and for this one, we want to keep it italic. And we want to create 36 for example, and jumping right away created character styles from it and I'm simply going toe. Choose this quote from the example I already had created. So as you can see, it's simply a nice quote from this person saying how wonderful it was staying at this place . So let's give it some spacing. 1234 Same thing like with it for the rest of our design. 1234 And move always like so And finally, let's create our image. So we're going to choose our image to go from left to right. I removed the border. What we want for the dimensions are 800 weight 500 and you can click right here. We're going to give them so corner radius of 10 and off 10 because this is a top, right? This is a top bottom, right? And as you can see, if resuming a bit closer, these edges are straight and these ones are around it because we want to keep them straight because they are lined with this left edge off our image. So what we want right now is to organize this a bit better so we can group all this control G. And we can use this as a testimonial. Beachy like this and this is going to be our testimonial image. So, like this and this is going to be our text. So what I want to do is position them in the center from here. So what we can do is create another rectangle until it lines up with this. With this, the bottom edge as well. And what I want is to position my image, so select both of them. Click right here. It will place the image in the center off this rectangle and do the same for the text and the bottom like this. Then remove the rectangle and there you go. Now what I want is to align them a bit better. So double click on your art port and click right here on the layout grid. So what I want is to position all of them to the left edge off six. So once again, we have 12 and this is going to be to the left edge of six. So first column, 2nd 3rd 4th 5th and then six. So this one, basically, until they snap on the left edge of it, we will have one in the center which will be empty and then this image is going to fill out the rest off the space. So it's going toe look nice, simple, clean, inconsistent with the rest off our design. And I really think it looks clean and easy to read. So I'm going toe unde group this and I'm going to select all of them. It's first. Let's see if we order everything correctly. We have select all of them control G and called this testimonial like so So now that we have created that what we can do is move toe the rooms section because that is the most important section and that section is going toe basically sell this website to eat the visitors. So in the next video, we're going to jump in and create a rooms section right here where we're going to explore different rooms and what they have toe offer. When people actually get to that section when they scroll down. So I'll see you there 21. Creating Wireframe 5: that's no jump in and create rooms offer. So click right here and I'm going to choose these two patrol D to duplicate them, move them around and simply hold shift and positioned them back. But select both of them like so and make sure they are 100 same like all the other ones. And right here, we're going to writing explores our rooms because death is going to be our main offer. Dull click right here. Comfy rooms for Alexe test application because, as they said, copy is really important and this is going to explain a bit further because they already know they want to come toe vacation to this place. But if you write in a lot more and explain a lot more if it will sort of engraved in that brain a little bit more when you tell them what they really want from this place. So right now we're going to start creating our images, so use a rectangle. But before we do, don't pick right here. Click on. Great! Because we are going to need are great and we're going to simply draw a rectangle toe feel four off these and we're going toe, Move it right here and call it a room one because that's going to be a room One image and 5 24 with is fine and 302 Let's use that for the height. Now, what we're going to use right here is 10 on 10 percenter because we're going to have top left and top right corner radius Toby around it, and we don't want to use border. But we want to use color so it's used this color and because we didn't created it, let's select that like so and simply click right here. Toe. Select that color, which is the color for our images. And if I click right here is you can see easy, you see so it selected properly. It's closed that because we don't need it anymore. Click right here. And as I said, simply click on the color, and it will bring the splash of color toe, which are object you want. So if I hide layout, you can see it selected it properly, so once again include the layout, because we're going to need it and move this Toby 100. And if you cannot see the so shift bottom arrow. 123456789 10. So, once again, we have the same distance from here to here. Same as in all off these other examples. So let's hit control d Call this room, too, and position it in the middle like so control. De called this room three Hold shift and right arrow and you can snap it into place like this. And as you can see, it gives us exactly the same distance of 40 pixels in between these images. So if I don't like right here, hide our layout, you can see that we have nice spacing between each image so people cannot click accidentally on one or on the other. So what we want now is to create some text so controlled D on this one position just below room number one like, so make sure it goes from left to right. Position it like so and make sure it's first things first. Used this off $36 a week and call this classic room. But make sure it's a regular and then simply create another character styles to here. So this one is italic, and this one is regular. So jump back right here and make sure it's 40 pixels from here. 1234 Control de replicated once again, and you can use this one to be 24 but regular. So this one and we're going toe writing, starting from $24 per night. So this room is going to cost this much per night. So, as explain in the examples off the competition analysis, it's really important that you create value and that you create interest in your design. So when people explore this rooms, they can know instantly if they can afford it or not. So they can know that from here because when they see this price, if it's out off their budget, they will simply leave this website and not spend any more time. They will not be angered by it because they know that they cannot afford it and then simply move on. But if they can afford it, then they will continue to read down. And all of these elements up top serve that we persuade them. So even if they don't have the budget, they are still interested with all of these elements and all of the information that they already so. So maybe that will borrow the money. Maybe they will, I don't know, joined forces, and maybe two or three off them will go in the same room and simply share the costs off that room. So let's move a bit for the down. So what we want is to create some features right here so that each room will have different features based on the budget and based on which room you have selected. So simply controlled. Indeed, and I'm going to move this down 40 pixels once again. So this is going to be 20 because it's close. 1234 This is going to be 40. So let's call this beds like this Control de. We're going to duplicate it, simply move it once or maybe even twice, and gives a nice space and typing one. So we're going to give this one a different color. So let's go from something like C five c five c five percenter. Nice. Great. If adult click right here in height, the columns you can see. It's nice, a simple gray color like so. So if a jumping knot click right here toe, bring my layout back. What I want to do is duplicate these ones, so control the or you can simply hold, hold and duplicate them like that. Hold shift onto, like so maybe 20 pixels. I think it's good. So let's use that shortcut once again like this. Then, like this, like this and what we want is to have six different features. So let's create one more. So if they want to learn more about this room, they can simply click right here and go to learn more. So let's create that as well. So let's give this 40 l click right here. They can't learn more control. A. To select the text and simply click right here toe. Underline it because that is going to be our link. And let's change the color off that link to discolor so they they can know. If they want to learn more. They can simply click right there, and it will take them to the dedicated page for this classic room. So that's why I keep saying that it's really important to create interest and to be honest so you don't waste people's time so they can know at a glance. If they can afford it, what each room has, and if they really want to learn more, they can click on the button toe, go and learn more and then book the room on that particular page, which will be a dedicated page for that particular room. But if they like it, and if they like what they see right here, they can click book. Now they can go right here. Click Book Now, and there will be a few more off these call to action buttons down below when we designed them. So let's select these and let's change some of this information. So this is going to be beach view and is going to be right? None. So let's hide it. Choose move this one. So no, and as we did, we're going toe right in like this, so make sure it's lined like soap onto this is going to be said Terrace and once again do the same thing. 12 and it's going to take. You know, this is going to be WiFi and this quaint Very yes, like this. This is going to be air conditioned like this. Hide it more This Yes, like this. So As I said, these are just main features. And if they want more features, they're going to go inside the particular page and then inform themselves and see more images for that particular room and what it has to offer. And this is going toe writing. Yes. So now we have to group them. So locate the beds, locate one, and you can move them, like so to the tops of just below starting price. Like this beach view. And no move them like this terrace and no certain just below between you and no Y five. Yes, it will go below terrace. So right here, air condition is going to go below WiFi and yes and parking And yes, are going to be right here. And finally, we need this. Learn more. So move it all the way down and you can simply hold, shift, click right here and select. Learn more as well. Control G to group them. And maybe we can call these features like so. And now what we can do is select all of this control De and we can hold our shift key to move them, to hear position and like so and move all of them. So everything that selected just below room to because a room to will have these features do the same. So control the move. All it below room three, Hold shift like so, as you can see, it snaps into position and this is going to be family room. So select this bean family room starting from, and it will be a bit more expensive and it will be $36 per night and this is going to be most expensive room. So Grand Lux Room and it will start from $48 per night like this. And, of course, with features saying, like with any other things in life, basically, you have a terrace is going to be yes for this example in this room, all of this is going to write it. Yes. And for this final one, we have a beach view. So as you can see Ah, this one doesn't have that many features. This one has more, and this one has the most. So basically, as the price moves up, futures move up as well. So what we need to enter finally right here is to because this is going to have two beds and this is going to have four beds because it's the largest, like so and finally, let's create a nice, simple background. So let's use rectangle draw a rectangle like so and what we want is to give dimensions off 20. That's fine. And 6 21 Let's go with that. And what we want is to give it some around it address. So right here is going to be tent right here. 10. So bottom address are going to be around it. And for these images, top edges are going to be grounded. So what we can call this is a room one BG so more with just below a room one features and just about room two like this. So room one, BG and we can position it toe the top like so, and we can select all of this text and more, which maybe 20 pixels to the left. Much first select older, so like this, and it keeps opening this for no apparent reason. But you can move it like this and just make sure you are 20 pixels from this left edge. So 12 with your shift selected, and that's basically it because when people select in this room is will give them a nice and drop shadow background. So I can duplicate that BG Control on D called a room to B. J. Let's do it with this one center position it just below room two features and everything like this. Then select all of these features off this text, hold shift, and then you can position it, uh, Toby the same as this one. So shift 12 to move 20 pixels from here. Or you can you can go 40 if you want. And let's select all of them and give them 40 as well and do the same for this one. So 1234 And finally select this room to be G controlled. Deep quote from three B, Jim like so, position it all the way and down just below these futures and position it until it meets right here. So I meet a slight mistake, but let's simply switch them So this is going to be room to this is going to be a room three. Like so and now Finally, let's group all of them. So control G. Call this room three called this room, too, and finally called this room one because it's going to be a lot simpler later on when we start any meeting all of these. So if I don't like right here, hide our grid, you can see how that looks like. So everything is nice and clean. I don't really like how this looks like right here because it showed the border right here at the top. I don't worry about it, because when you include the image, you can put the drop shadow just below the image. And you can basically know this and hide it basically so it won't show up and you can even hide it and then just show it on click. So let's do that for now. So room BG select all of them. So this one called control all of them and simplified the border. And we're going to include the border later on, when we start designing and one final thing glitz group, all of them control G and typing rooms like so and that's it for the rooms. So in the next section, we're going to jump in. And if I goto my wire frame, you can see we just created these rooms, and that's our main offer, and we have nearby activities. But between those, we're going to include some secondary offers and secondary features where we're going to explore and explain to the viewer why the hotel is great, why they should choose it and some additional features. It has, like the pool garden and the parking, so I'll see you in the next video. 22. Creating Wireframe 6: let's not start and designed these additional features. But before we do hit control command s to say our project. And as you can see, we don't have any more space right here at the bottom. So simple. Click on your our port and you can extend this as much as you want so you can have that additional space for design. So what we want toe include now are some additional features. So by additional features, as you can see, this is our main offer. So rooms and they can explore these rooms. And below that we want to persuade them a bit more and to show them how great our hotel is and to include some additional features of it inside. So let's start with the image, and it's going to have exactly the same dimensions and this image so you can control De moved it out, and then simply position it right here into space. Jump into arrests, panel click right here because that's the color for our image. And then what we can do is go to here, then hold shift and move it. 100 pixels down. So same liquid it it all off. These other ones. So what we want next is to move it down. And this is going to be our pool image because that's going to be our first feature. Jump into the rooms, control de, duplicate this text and drag it above, and then simply move it down to here. Position into here as well. I don't like to include the great layout position both of them make them left a line. And this is going toe right in private pool because some people really want toe bait in a pool which is included in the hotel. A swell by, apart from the beach. So position it toe here. And if you remember, we gave it exactly the same settings right here. So the text is going toe contain six columns, one will be empty and then rest will be filled by image. So if you can see right here, we're doing exactly the same thing, basically. So I would zoom in a bit closer. Position is a bit better, and I'm simply going toe double click on my other files and copied text I already created for it. As you can see right here. So what you want finally is to group these two so control G type in text like so select the image and click right here to position it in the middle. Now, with those who selected hit control G publicly cried here and typing pool because that is going to be a one off our features control the to duplicate the entire folder. Whole shift, move it down And until you have 100 as you can see right here, so 100 is selected. Now what you want is to rotate these two. So this is going to be garden like so and what we want is to move the text at the top, move the image at the bottom and what we want is to move the image toe decision and to flip it like this and to move the text to this edge and toe. Make it a line with this column right here on the left. So, as you can see, it will go from left to right and then finally to left in our third section. So for this one, what we want is to called beautiful garden, as you can see and same like I did with the previous example, I'm going to copy and paste the text already created and with the garden finished Control D , and then you can simply move it down. Or it's even faster to do it this way. So simply duplicate this 1st 1 Make sure its 100 make sure it's all the way down and call this one private parking because it's really important to some people that they have private parking. So instead of the private pool called this private parking and same like a did with these two, I'm going to simply based text already created for it. And now, as you can see, we have these three really nice sections. If adult, we can hide the great layout. As you can see when they go down, they can really explore. So starting from the top, they have this really nice simple navigation. They can move on to the hero image, whether they can learn more about hotel. Then they move down a little bit, and they explore a bit more additional features off this hotel. They read a nice big testimonial with the person saying how happy they are with the hotel. We can see the different rooms they have toe offer. So starting from the cheapest right here, all the way to the most expensive right here. If you're not persuaded, let's move on a bit down so that you can explore a bit more features that this hotel has to offer. And then finally, below this, we're going to create additional section which is going toe right in what to do when in Nicholas. So maybe it's important toe, of course, Persuade them toe purchase a room and to stay in this hotel. But what they can actually do in Mykonos so you can help them achieve and that decision by simply showing them different activities that they can do once in meekness. So we're going to design that in the next video. 23. Creating Wireframe 7: So let's not designed. The next section of the truth is going to be named by activities. And if we zoom in a little bit closer right here, you can see the just below rooms and secondary offers that we just created. In previous video, you can see nearby activities, which is going to help further persuade them to book the rooms in this hotel. So how we can do that is simply select this text controlled deep. So basically, as you can see, I'm doing exactly same thing with every one of these sections because it contains exactly the same elements as all the other ones. So it's more with down a bit to somewhere around here until it meets, and you can even hold shift and move it down until it's at 100. So ST like all the other ones. So this is going to write in what's to do in meekness. And let's simply quote, beaten this one and based it back toe here and this Texas going toe right basically here, just a few off nearby activities that you can help you enjoy meekness more and let's move this down to here and what we want is to create an image which will go down here. So stop quick, include our great back. And we're going to create a rectangle from here to here. We're going to remove the border, give it a color for the image. So saying like we did it all the rest off are examples. Move it 100 like so and it's going to be 600 in height like this. So now move it right here. It's going to be image for now. And let's duplicate this text and Mulet and down. For some reason, it keeps selecting the layers. I don't want it toe select, but these are just some of the box off. It'll be X'd, but you learn toe work with them as you move along. So for this one, I'm going to create a dis text. I'm going toe, make it left line like so. And the first attraction is going to be Dallas, which is this awesome ancient city located near Nicholas. So 1234 make it 40 control de and moved this bottom one down below like this. So I just switched them around. 1234 and we're going toe Make this 1 24 like this. So just make sure it's at 40 as it is right now. And once again, I'm simply going to copy and paste the text already created for it. As you can see right here. So what we need now? Because this is going to be a slider. We're going to need to create two different arrow so left and right arrow so people can scroll down and see between these attractions what they like the most, and maybe be persuaded a bit more about staying at this location. So let's start by creating a circle and zoom in a bit closer something like this, and maybe give it 92 weeks. 92. Press, enter jumping, give it the same color. Or maybe we can give it this color. It really doesn't matter. Remove the border and make sure it's somewhere around here. And let's give this one the let's position right here for now. Jump in sight and call this one circle like this, and now we're going to need to narrow icon. It's already created one for my example. I'm going toe based it right here, so I'm going toe click and paste it and let's position it in the center. So select both of them. Hit here, hit here and I'm going to make it white. So come right here, make it white And this is going to be our left arrow. So control g to group them and simply call it left Arrow like this. Control lead obligated more this one to the right, like so. And it's going to be a writer of and open it up and called this one right like so And then simply flip it like this. I'm going to position it toe here, man. Move this one that's seen me before, or maybe even 80 like this. I think that looks good, but maybe we can smack it into position so that we have. I just discovered space in between sofa, double quick and hide this. You can see how that looks like, but I don't think it's really a nice idea to have them be this bolt. So let's simply use the same color as we did for our images. So this color Yeah, And for the arrows. Yeah, let's keep them like this for now. We're going to change overall cars and styles. When we start designing, select the text control G and then simply with that group selected. Select these arrows and click right here because that is going to make sure that everything is in the center on group this and simply select everything. Control G. And we're going to call it what to do in meekness or you can call it activities or whatever you want. Let's do that because it's going to be nice and simple with short names, same like with all off our other elements. So as you can see, we created that and now we're occurring to the most important part, which is our booking form, and that's what we're going to design in the next video, so I'll see you there. 24. Creating Wireframe 8: Now it's time to design our booking form. And if we zoom in a bit closer, toe our wire frame, you can see that book book. Your stay with us is right here at the top. We have some text on the left with a call to action button. But we're going to actually move that call to Action button right here to the right, because it just makes more sense for it to be below form. And this is going to be our booking form. So let's design it. I'm going toe select this background and toe. Enter different specific players. You can hold control and click, and it will click directly toe that link rather than dull quick toe, open up the folder and then double quick to select that different layer. So I'm going to move it all the way down like this, are going to select it, hold shift to move it, and then simply select it from here and move it 100. So, as you can see, we have exactly the same spacing for all of them. Now what we want to do is no quick right here, and we want to call it simply booking Bijie like this because we want to know for different backgrounds what they are are on the page. So open up the activities, select these to control deep, move them about and then simply positioned them down. So select these two and position them down like so moved in below the Catholic toe. Include the great back, because we're going to need it for now. Left line. This left line this because Texas is going to be on the left. And let's position all of them to hear this one as well, when to move this down a bit and here is going to write a book your state with us. And when it's a state, I'm going to move it down a bit because we want to keep that exactly the same layout as we did in all of them. So 51 empty and then 6 40 form and not to lose any more time simply going to copy the text already created. And as you can see, it's promotional, so it's telling them exactly what the client wanted. So fill up the form to book your stay with us, and you can save up to 30% off the price. If you book directly through our website rather than online booking services, because that's the main point, that's what they wanted for us to create is for them tow, avoid booking services and book directly through this website. So let's position it 40. So, like so until they meet till here. 1234 down. And we also want to create two more copies. So select this one holds shift and then simply move it down and right here, going to typing Call us and we're going toe based in the number and just second so more with 20. If you remember, we did exactly the same thing with the previous example. So we're going to simply based on the telephone number right here is going to be blue because it's going to be clickable. If they want to call directly from here, or if they are using their mobile phone dinging. Simply click right here to directly cause. So we're going to duplicate keys to move them down 40 as well, like so this is going to be emails like so, and let's position this toe right. So until they meet 12 and I'm going toe jump ahead and copy and paste their email address. This is not directly their email. They're going to change it when they create this website and make make it go life so that they can create a dedicated email for this website. So let's quickly order this text like So this is going to be here. This here and you can group all of it and hit control G and call it text like so. And what we want to do now is position it in the middle like this, and now we want to create a booking form which will go right here to the right. So for the booking form, let's quickly use this text control D because we're going to need it in a few places and simply with you here. First things first. Let's create the room type because that's the first thing that we need to create. Make sure it's at six. So 123456 So make sure it snaps toe this left edge off this column. Position it right around here, control de, make a duplicate of it, and then simply move it down. And what we want to write in his classical, and what we also need is a field where this text is actually going to go. So let's will create a rectangle or you can use this button. Let's jump inside and find it. Here it is. So book now button. You can copy it from this testimony also control to duplicate it and then simply move it all the way down to here because it's going to be, ah, lot easier to do it that way. So simply position it into place from here. So 1234 then we actually don't need this classic room text, and this is going to be our room type or simply call it a room and in sight. We're going to change this color to this color, so it's basically the same color off this text. Make sure it's left the line. Position it toe left edge 1234 and make sure it has the border. And for the field color, we're going to use white, but not for the text, but rather for the beachy so white like so, and what we also want is to rename it input press, enter because that's going to be our input and this we're not going to use this. So I don't know why it's elected and this. So let's quickly change it to this. So it has exactly the same style as we want. So 1234 and we want to create a border for this input. And one final thing extent this to in this edge all the way to here until it meets. Because we want to keep it be six for this large one, and we're going to create two more below that and one big below debt. So big one is going to be six smaller ones are going to be three. And finally, Big one is going to be six as well. So right here we are going to need an arrow because that's the arrow that they're going to use to point and down and toe open and explore different options. So once again, I'm going to use on the arrow I already created. Position it to here like so 1234 And if you want to know how to create a narrow, I'm going to show you that as well. I went to go right to here, for example. You can use the mental and you can click hold shift, make sure it's at 45 degrees and whole shift once again, like so hit escape. And for the border, you can increase the size 25 for example. You can click right here, and you can rotate the entire shape so you can select it to somewhere around here like so. And you can simply whole shift and rotated. And there you go. That's your arrow. Or if you don't want it to be that, why'd you can simply click right here and lower it to here? Maybe you can reduce the size, too here, and you can also play around with these values right here. So that's how you can create a narrow. But I wanted to speed the process up a little bit and to include the ones already created. So let's located. It's right here, and room type went toe. Drop it inside like so, and just make sure it's at 41. So, as you can see, it's not so. 1234 Now it's at 40. So bring it back Control D and we're going toe. Move this one down. So 1234 more with just below this is going to be checking like so. And I'm going to double click right here. Type in, check in like this and we don't need down arrow. We went to delete it and input is going to be down to three. So like this. So, as I said, this is going to be six columns wide. This is going to be three columns wide and finally right here where it says book. Now we're going to sigh pain months, date and finally year like this and what we need is a check out as well. So control D and you can move it like this until it meets with the end of our columns. Like so, position down and you can type in. Check out right here and you can change the name of the folder to check out as well. Like so And finally, this information is going to be exactly the same. And for this last one, control the and you can move it same like with all these other ones. Position this down and this is going to be guests and change this to two guests and change this to writing guests like so because we need them to choose how many guests they want with them. So, for example, somebody is coming alone. Somebody's coming to five people. Somebody's coming with just her partner, people having kids and so on and so forth. So it's really important for them to select that, because some room types cannot accommodate that many people and some rooms can. So, for example, in that way, people working at this hotel can get in touch with you with the information you are going to give them when your book. So when you quikbook now and it's going to take you to the specific page where you're going to pay where you're going to enter your personal information. But this is just for them to know how many people are coming with you, so they need no how many beds you might need, how many bathrooms and so on so forth, and especially if you're coming with more cars so they can know how many parking spots they can leave you for you and your visitors. So one violent thing we need is a button right here So once again, we're going to do the same thing. Jump into the testimonial, choose the bottom, controlled the movement just outside folder like so and finally just moved this button all the way down toe here and position it just a little guests. And what we want is to give it 40 as well, so saying, like for all the other ones. But move it to here And what I want to do now is group all of them so controlled G called this one form like so and select booking BG with that hit in the middle so you can position it in the middle like so and finally group off them together and call this one booking form . Press, enter or return. And that's it. If I remove our columns, you can see how that looks like. So it's really easy, really simple. This says what it supposed to says, and they can simply call the hotel. They can email the hotel if they have questions at this point, they can simply entered their basic information hit book now, and it will take them to the booking page, which will then enter. Take them personal information, credit card information and solo. So that's the next part when this page is done toe complete with the clients. But we're designing this page on Lee because that's the most important page for them because later on down the line, when we designed other pages, there are going toe basically have exactly the same style, many off the same elements because we're going toe, create a design system that they're going to use later on when they start designing other pages. And we're going to keep in touch with the developer later on. So if they need some changes, we can easily jump back into our eggs the project and make those changes and send him to them easily. When violating is hit control s. And in the next video, we're going to finish up on the wire framing process. We're going to create subscribe newsletter form and a foot right here below. So I'll see you there 25. Creating Wireframe 9: No. Let's finish up our by framing process and include a newsletter Sign up form as well as the footer. Sorry for jumping right here. Zooming a little bit closer. You can see that we, uh, draw in. Sign up for our newsletter Where the form and footer Just below, man. As they said multiple times throughout this course, all the relevant information which are not crucial, should go in the for. So double click on your art board extended all the way down. So what we want to include is a newsletter. Sign up right here so I can select these months. So selected control deep. So basically the same thing as we did for the rest off discourse. Simply called shift. Move it to here and then position it 100 same like with all the other ones. If it doesn't click 123456789 10 to make them 100 movies all the way down. And what we want this to write ISS sign up for newsletter and below debt quickly. Copy whatever it wrote like so. So to hear so sign up and receive news and updates about our discounts and offers. And what we want is to select these two so you can jump inside, hit the form, and you're going to position to form right here. Because the text is on, the life form is on the right, and I'm going to simply select, for example, guests and look, now button controlled D I'm going to move them to hear close all of this. And let's simply move this stoop down. And if it won't show up, simply hide this one and moved him like so. And let's quickly change this. So this is going to write in email. You can hide this guests and you can delete the arrow. L click right here. It I've bean email like so, Or you can type in your email even better. Like this Close. This one book now should go in exactly the same location. So what you can do right here is the click on the art boards showing your layout. You can position the button right here, and you can maybe move it like so So you can have these two and book. Now we're going toe change to subscribe like so. And the text off course is going to write in subscribe like this, and one final thing I want to change is the color off this button. So if I jump into these colors, perhaps we can choose this one and added straight away toe our assets and maybe moving down to here. So let's jump in tow our design and order days. One's a bit better so you can grope them and simply click right here to position them in the center on, group them and simply move them toe here until you can see for pixels. So exactly the same as thes spacing so you can hold shift, select everything control G, lovely criteria, type in, subscribe like so. And finally, let's start creating our footer just below this. So for the photo, let's create a background, and we're going to create a new rectangle extended all the way to the edges until it meets left and right. And for the height, lights used 6 80 and for the color, let's use this color same liquid it with the rest off our design and don't worry about it. We're going to change it later on in the design stage, and because we know that This is our cut off edge, so there is no more content below it. You conduct like on your our board, you can move it up and you could zoom all the way up close located dot Here it is and simply move it until it meets with the bottom edge off our foot or color like so. And we're going to call this footer Bijie because that's what it's going to be. And first thing that we need is a logo. You can copy it. So control. See, Zoom in all the way to hear control. We and you can position it to be right here. Position the logo just about the footer BG. And now we're going to enter some information. So we're going to have three columns off text because, as you can see, we have 12 different columns. So because we're going to have this left column with some social media icons as well as the phone right here, we're going to have second color with rooms starting one with facilities and finally 4th 1 wit about and some basic about functions and finally below that, we're going to have email address as well. So let's first copy the phone and email address. So control, See jumping and be closer control. We position it to here, move it all the way down just a little longer and you're going toe. Simply select email us texts of control. See when we're going to position it just to hear control. We So 1234 and we're going toe right in right here. If you have any questions, you can email us that and then they're going to separate them. So I want to move in this one to hear maybe 20 pixels like this more. This 12 here. Just check. If you spell check something, everything's fine. 1234 So far it picks us control G to group them, position them in the middle, position them all the way down, right click on group. And that's basically the bottom text for our website. Now I have created some social media icons. I'm going toe simply based them right here, and we're going toe play around with the positions a bit later. But now, first, let's create these different text columns. So it's first copy districts control de and position it right here went to jump into Mass. It's bound. Click right here because this is going to write their rooms like so. And as I said, because now we're going tohave three columns of text and this left column right here. So each off them will be taking the space of three. So 123 for all the left information 123 for the rooms. Control on D so onto three. And this next one is going to write in facilities. And finally, this last one is going to write it about. And 123 is goingto be located toe here and now you can move all of them until they meet with the top edge off the logo. My so and finally, what we can do is select this one controlled deep position in the place right here, and we're going to make sure it's left line. It is. Position it till here, and we're going to have different options toe here. So go. 1234 Control D. Make sure it's saying control D. It's the same. And we're going to have four options toe here like so So this is going to be beds, so they can inform themselves about the beds, but top because it's known. Sometimes water is not that good in Greece Mini bar because maybe they want to know what's inside minibar. And what are the prices and disabled access for the people who are disabled like so? And then what we can do is order this text a bit better. So I'm going to simply position this here. Then I'm going to write in beds just below debt bath top, just below beds, minibar just below bathtub and finally disabled access just below many more. And I'm going to simply group all of them so control G. And we can maybe changed this and simply and delete these two. Call this rooms control de and then move this right to here control de and move this right toe here and then positioned these a bit better. So this worse. One is rooms. This is facilities, and this last one is about So let's change all of this so facilities and you can play around. You can, of course, do however you want. But I found this to be easier because it keeps the same spacing. We don't have to duplicate all of them once again. So simply copy based it works well. So for this one, we're going to write in restaurants like so below that we're going to write in swimming pool, like so just below death fitness room, because maybe they want to go to the gym and finally parking where they can get to know the parking a bit better. So if it is secured, if it is closed parking, open parking and things like that. Finally, we want to writing about us, so maybe they want to know about this hotel, the history and so on refund policy, because it's really an important part so people can know if they can get a refund or not death policy because you have a safe in your room. But what happens if they steal something from the safe and so on so they can inspire themselves and learn more about that there? And finally, terms and conditions, because it's really important and also a mandatory by law toe include terms and conditions right here as the bottom. Now, finally, let's position these ones, so this is going to line up toe the bottom here, So perhaps remove these icons to here. Make sure this is positioned to here numbering back the icons and make sure they're in the center. So, as you can see on the left here you can see the distance between the bottom and the top edge, and you can increase or decrease that space however you want. But I'm just going to simply leave it to somewhere around here, as you can see it. 97 from top. And the bottom Valentin I want to do is to center them so you can select everything except for this text that the bottoms hit control G create another Iraq tingle from here to the text here, select. And both of them hit right here. And you can simply delete this rectangle on group everything you grow before and then simply group everything back and call it for her like so. And there you go. We have created our footer and if I double click right here and removed the grid so you cannot see it anymore, you can see how that looks like. And if I jumped back into a quick criteria, we created everything, Toby. Coherent. Everything has exactly the same spacings between everything because We designed everything on a grid. Everything has evenly spaced out. So all the elements have evenly spaces between each other. And as you can see right here, we're using exactly the same text styles throughout this entire design. Everything you sort of coherent flows together. And, most important, the most important thing of all. He's before world in the design process and the creation process closely following the brief off what the client wants us to create. And there you go. That's your wife framing done control as to save this project. And in the next part of the course, we're going to jump into designing. We're going to start including some images change. Different colors were going toe includes some different icons, and you learned to play around with some background shadows, so I'll see you there. 26. Image Structure: in this part of the course, we're going to start designing our wire frame, so we're going to include different images, different icons, different shades and drop shadows. But before we do all of that, I just want to quickly run through different images, which are included. So you're going to receive these images folder and you can open it up and inside. You can see these different images which were going toe include all of them are named correctly, so you can know where each image goes. And as we move along the course, I'm going to include all of them in different places so you can practice using these images . All of these images are from unspool, Esh and picks of A. So that means that they are free to use both personally and commercially. And I'm going toe also include those links in the region, a pdf file at the end of this course, so you can be ableto access them my simple click, and you can download and use all of them in your project. So in the next video, we're going to start designing and including these images, so I'll see you there 27. Creating Design 1: Now let's start with the design. And if I zoom in a little bit closer, I'm going to click right here on the airport. Name hit control de to duplicate the entire our port. And this one was wire frame. And this one is going to be designed, right center. And the first thing that we're going to do is change the name off this background for the logo. So I'm going to jump in right here and click right here so that it stands out on the page a bit better. It corresponds a bit better with our buttons. And now we're going to include the flag right here. So I'm going to jump in tow the layer, spend all closed the local folder, locate the flag. Here it is, Control V, and I'm going to pace the flag. I already found I'm going to drop it all the way down just before the button right here. Delete the flag placeholder, and I'm going to show you how I found it. So you can click on your plugging spinal and you will need to install this plug in called you. I logo. So once again, you can click right here typing you white logos test to be to get her So just one word and you can click Install. And what this can do is you can click on it and you can generate country flags. So what you can do is create different rectangles like this. For example, you can hit repeat grid and you have to create 194. So, for example, you can create I don't know, 10 like this. 246 8 10 like so And you can create 20 down. So 2345 6789 10 And let's see if that's it. So 10 like this. 123456789 10 11 12 13 14 15 16 17 18 1920. And you can zoom in a little bit closer to close itself like so. And what you can do is jump back to the layer, spend all hit on group Great, and what you need to do is delete 6246 like so. So you're left with 194. You can select all of them, removed the border and why 194 it's beyond me, but that's what they want you to do So Jump actor plug in Spinal Hit The why logos hit country flags and what's going to do is it's going to generate all of these different country flags, and what's good about them is, as you can see, they're pretty high qualities and not really anything major. But for what we need to do is you can see just simple, nice little flag. You can generate different flags from here, so let me quickly delete it. So that's how I found it. Once again, you I logos found it in your plug in special, and you can have the same result. But you can, of course, download this file and use it as I showed you right here. So everything will be as you saw it. So now let's include our image. So I'm going to jump in tow the images folder. So select hero BG right here, because that's where we're going to place it Locator hero image. Here it is, and when simply drag and drop it inside, I'm going to hit the click and increase the size a little bit and maybe position it somewhere around here, but I want display button Toby right here. So what I can do is move this down just a bit. So move a little bit more like so. And what I want to do now is make this white so I can click right here and make it white. And I want to do the same for this play button. So, like this. And that's our hero image finished. So as you can see, it looks clean. It looks nice. It shows the hotel. It shows the person enjoying the hotel and everything it has to offer. So basically, that's about it for this section. In the next video, we're going to move on and design some of these other sections, so I'll see there. 28. Creating Design 2: now is jumping and at it some of these other sections. So let's movinto about us. I'm going to select these circles, and I already have one color, which I selected. I'm going to pop it right here and remove the border from all of these circles and finally click right here to include it in our caller searches right here so that we can change it with one click later on if we want to. So for his 1st 1 I want to include an icon, So I'm going to copy and paste it toe here. I'm going to position it in the middle off this circle like this, and I'm going toe. Make sure that it's aligned with the bottom edge off this circle, so it kind of looks like a son, and it just kept brings some more interest than just using some regular icons that you found on the Internet and just basting them in the empty space. So we're going to do the same with this one. So this is for the food. Place it like, so make sure it's in the middle, and as you can see, it already brings a lot more attention to this circle so people won't skip it that easily. And finally, let's include this 3rd 1 So it's going to be for the beach. So once again, make sure it's here and in the middle, and this section is basically or and as you can see, it brings a lot more visual interest than it would otherwise. So that's how you can easily bring attention to some of these other, uh, layers off yours. Next up. We're going to change the color off this testimonial background, so I already have the color selected. I'm going to place it. And as you can see, it's night sort of greenish color. It really works well. We're going toe. Add it right here. So it's d three e one e. One if you're curious. But once again, you can download and use this file. Same like I'm using it right here. So we're going to include testimonial image inside, so drag and drop it inside here double quick, and you're going to hold shift and position this image a little bit higher. Like so. So this is the person who said this quote, and as you can see it's really attractive, is really eye catching, and it really stands out on the page. So that's why we are using it in this example. So in the next video, we're going to jump into the room section and we're going to make quite a few changes to deuce rooms. And we're going toe include some different colors right here, So I'll see you there. 29. Creating Design 3: now it's include images for our room. So jump into the rooms section, open up these folders. It's easier that way. Locate the classic room so it's this one. Simply drag and position it toe place. Look at the room number two, which is the family room located here and drag and drop it into place. And one more thing, of course. You conduct like an increase the size of these images if you want to. So maybe position it like this, and maybe we can do the same for this 1st 1 So once again, you can hit control and jump straight inside your selection so you don't have to open up the folder and then do the same for the few times like this, so you can increase the size of it, maybe prop the beds more in a center like this. I think that looks good, but perhaps maybe we can even position them like this so that we can see the entire bed. And finally, you can close days ones and all. Kitaro number three. Just this one. Locate the image in the folders of Grant Deluxe Room Dragon dropping inside. As you can see, it's really zoomed out quite a bit and you can hold a shift old and left click toe. Increase it evenly in all directions. And I don't like this light. So maybe we can move with just a bit more to the top, like so. And I like how that looks like. So now what we can do is change some of these other colors. So let's choose dis text and selected the darkest color because we wanted to stand out just a bit like so. And now what we need to do is create some interest right here. So we're going to create green color as well as red colors. A green color is going to be the color for the ones which they can choose, and the red color is going to be for the one which are not included in the offer for the room. So let's start with a layer spendable and we're going to jump into the futures, open them up, and for this number one, I can simply choose a color. So six b be four for one is going to be our green color. I'm going to simply add it here and for this beach view where it says no. We can add a red color, which is going to be e 13333 like so And we're going toe. Add it to here like this. And now what we can do is simply go ahead and select all of them. So no click right here and then Yes, yes and yes, click right here, jump inside close days folders and do the same for the other two. So what we have here is beds. We have to, but we can leave it like so if you want to. So instead of this green color, we can leave it as it was like this. And then all of these other features To be green and red is just makes a bit more sense that way. So be true. You know it's going to be read and for the terraces, WiFi and all these other things is going to be green. And finally, all of these are going to be included like this. Like so And terrorists off course. Yes, because it's the most expensive room, like so I'm going to jump in and close all of these other folders, so they don't look messy like this, and the rooms are basically completed. And later on, when you get to protecting we're going toe include some background shadows right here. But now I just want to quickly fix this so terrorists should be yes, seem like we just saw in the design example, and that's basically it for the rooms. So let's jump inside and include on different images right here. So for the private pool, you can locate it right here. So it's this one private pool, and you can, of course, adult click and zooming a lot closer if you want on this image. So perhaps something like this just to create a bit more visual interest than otherwise, locate the garden image in our folder. Here it is drag and drop it inside. Once again, you can double click and zooming a lot closer so people can locate it a bit bigger. And finally what We have sprouted parking and this should say private marking image, and you can select the entire think and jump inside right here the quick on this name and you can rename it to make it look consistent between them. So this should be garden image like So in selecting tar name, you can locate the garden right here so quick and changed its name. So when you see those mistakes, you can easily fix them. Simply copy and paste your elements around on your names. And finally, what we have right here is the parking. So once again, dull click to enlarge this image to create a bit more visual interest. Something like this looks nice. So maybe later on we can add some background shadows toe this image, but I really don't. I think that is going to be a good idea. Background shadows for these ones. Yes, but for these ones No, really. Like how it looks nice and clean on the page right here in the next video, we're going to jump in and design the rest off our design, so I'll see there 30. Creating Design 4: Let's no change background colors off these arrows. So I'm simply going to choose in this color, choose discolor and then jump inside my layers panel, select both arrows and changed this color to this, for example. And if you think it's too dark, maybe you can play around or create a new color. But I think it works well with our design. And we're going to need toe include an image right here. Conduct click right here to change its name. So it's going to be in Dallas. I m g select everything. Jump back to here, Dallas. I'm G So you have your layer names consistent Jump inside the layers. Started the images folder drag and drop it inside Like how it looks because it creates a visual interest right here. Just to let you know that this is the old place and it has a big history. And maybe later on the next videos, we can include a background shadow on this one as well. Finally, I want to just changed this color to dark color just to make it stand out a little bit. Finally, what we need right here is to change the color so we're going to have exactly the same color as this one. So if you jump inside, you can see it's the three e one e one and we have it here because we already saved it. So selected. Click right here. And as you can see, it's going toe. Make this form pop up and stand out just a little bit more. We're going to close those folders down, and finally, we need to change a few things around inside off our footer. So what we want is to create a darker background color for our footer. So what we can do is perhaps use in this color. So it's six b 6764 and it's really dark, as you can see, but it will make our items pop a lot nicer. We're going to save it to here and drag it all the way down and what we want first things first is select this one. Make it white because we want it to stand out, and what we also want is choose these icons and perhaps use this color, choose the number and perhaps used discolor, choose the email and use the same color. So if I jump here, Indices de three. So it's this one right here. We're going to use this color. So for these ones, we can maybe use white for the names like this and for everything else, we can use other colors, but to make things faster, you can select everything. Then choose this color and then simply choose these names at the top and change them toe white. You can, of course, use any of these colors to create different color combinations if you want to. But I really like how it looks like so you can select the entire folder once again, select this one and perhaps experiment, and you can see how it looks like with this color. And perhaps it looks good, but I really would like for them to stand out on the page are just a little bit more so. Perhaps we can create White. See how that looks like. Yeah, I think that looks nice. And just for the names, maybe we can use this color, Just separate them a little bit. And finally, for this last one, we can use white as well. And there you go. We have finished our design. We have finished making some major changes. So it we have finished, including our images, and in the next video, we're going to do some other things. So I'm going to show you how you can include different background shadows in some places, and we can maybe play around with some placements, and we're going to see what we missed during this design process so that we can finish that up, so we'll see you there. 31. Creating Design 5: Let's no jump inside and finish up our design. So I'm going to zoom in a little bit closer to here, where testimonial I'm going toe double click on the button or you can locate it in side, and I'm going to click on the shadow right here. I'm going to type in 10 10 and 20 Press Centre, and I'm going to make sure it's on 50% like so. So it's nice and big, or maybe even let's go with 30%. I think that looks a lot better just so that we can make this button stand out just a bit more. And if you think it's too big, you can off course ago right here and take 20% and over. Do you pay City off that shadow and stop? Let's just introduce a bit more visual interest, and I went ahead and created this quote in photo shop because phones work a little bit differently right here in Adobe Xdd. Then they do in photo shop. So even though we're using Playfair display front right here, it shows this quote, for example, just a little bit differently right here inside eggs identities in four shop So I went ahead, created it and then simply exported as being G and dragged and dropped it right here inside Adobe X'd. So maybe we can use a pasty 20% and just move it all the way back. Or maybe, I don't know. Maybe we can use it at 40% just so that we can include a little bit more visual interests, like so make sure that the bottom goes like this. So it goes over the quote in the background, and I think that looks good. So next up, let's move along and change how these rooms look like. So we're going to include some background shadows inside here and on these backgrounds. So we're going toe, make sure that they stand out once the person hovers over them. So let's locate the rooms, locate and open up all of these folders. So room one BG and what we can do right here is go to the shadow and type in 55 and maybe 20. Like so. And as you can see, it does create quite a nice looking shadow, and it makes just make sure that stands out on the page a bit nicer you can click on it once again jumping to here. Make sure it's at 16% and what we can do now is right. Click on the layer. You can do it here, or you can do it here, right Click copy and then select these other two and simply right click and based appearance, and it will based exactly the same appearance on all of them. So let's no hide them because we don't need them at the moment. And we're going to simply show them once on hover. So it means just include this one. And as you can see, when person hovers, it will show this background shadow, and these two will stay without it. And when they cover over this one, this one is going to be switched off and so on and so forth. So just so it creates a little bit more off visual interest. So let's move down, and we're going to make some changes toe this image off location. So what we can do now is include in this shadow. So 10 and 20 like so, and it's going to create a nice background shadow here. You can play around with these arrows and include background shadows for them as well, if you want to. But I think they look nice like this. Now its added this button, and I'm going to jump into this button located here, right click copy. Close all of these folders up, located back inside here, right click and based appearance. So, as you can see, it's 10 10 20 you're going to do the same for this bottom. But we're not going toe base the appearance, because this button is a different color, so it will create a different sort off a layout. And then we want. So as you can see, we created that. And now we can close this and finally, I want to jump into here and create just one off these examples. So you can imagine that when somebody clicks right here, it will make a selection, and it will stand out a bit more against all these other ones. So let's quickly create the shadow. So let's use 10 san and 20 same like we did for all of these other ones, so you can imagine when somebody clicks on this one and opens up on the drop down menu it will place a shadow over it. But for now, let's simply remove that from it. So click right here, and when you want to include back, simply click right here. And then later on, we're going to copy descent based it to all of these other ones. But maybe we can do that right now. So open up all of these other inputs and simply right click paste appearance and then just go through all of them and switch it off from here because we don't need it at the moment, and we're going to use it when we get to prototyping stage off. Our projects are finally switch it out for this one, and that's going to be it for this booking form. You can even make sure to include a lighter car color, for example, if you want to draw even more attention to this field. But I think it looks nice. And now let's move. Want to this final section? I'm going to change this shape color back to Blue Song, going to select this and make sure it's there. It looks nice, OK, and finally selected the photo BG Control D to make a duplicate it and just called this one footer image, and I included one more image right here inside off our Images folder. It's called Footer Image, and it's these famous windmills from Nicholas Conduct. We condemn position them like so, and what I want to do now is simply lower your pacenti of it. So I'm going to lower it down to maybe 15%. And as you can see, it creates a nice visual interest in the background. So sort off, iconic landmark off meekness, and it just creates a bit more interest to the background than just a regular color. So they're ago. We have finished our design. We went through all of the stages. Let's go right here and maybe we can switch off the shadow or simply hide it like we did with the rest of them. And you can play around with it and include perhaps some background textures right here if you want to, maybe add a nice old textures to these fields. So this testimonial field, as well as this booking form field right here if you want to. But I think it works nice with this Orel design. It's really clean, simple, easy to use easy to navigate. And one final thing that borders me is the color off this text. I think it looks just tow plane with, ah, this color as well as this one because it's the same. We just created this to be bold in this to be regular, So let's go ahead and change that. So we're going to jump inside toe here and locate the color off our text. So it's this one, but we're not going to change it everywhere, just going to change it in some selected places and leave the color as it was on some other places. So for here, let's simply included. So it's this color 90 90 90 like so. And I'm going to make a new color swatch right here in the assets panel, and I'm going to jump inside and simply select these to jump back here and click here, and I'm going to change this one as well. To this as you can see, it now stands out a lot better because it's not the same color. It looks just a bit different, and maybe we can do it the same for this one. So just that we can differentiate it a bit more and we're going to leave this as it is because it needs to stand out from the page like so. So we can move on and click on this one, for example, and created like that. We can leave this one as it is. So, like, this text this one as well, this one as well We can select this text and as you can see when I change it here, you can clearly see the difference between these two. Maybe we can even go ahead and make this one bold like so just so that we can create a bit more visual interest like that. Finally, let's do the same to here. So leave it as it is like so. And maybe we can leave these ones as they are, because we need to make them stand out just a bit more so that people are going to click actually on this form and finally change this one to this new car. So there you go. We have finished our design. Now what's left for us to do is plan out and think through for our prototypes. Because in the next section off the course. We're going to start designing prototypes because we're going toe share this design with the client and lets them know what we have done so far. And, um, give them the chance to provide us with the first feedback so that we can know what we done well and what they want us to change so that we can make those changes before we go any further with this project. So that's going to be basically our first revision for this project. So I'm going to show you in the next section of the course, how you can start creating your prototypes, how I can bring some more life to your design and how you can present it to your clients and the developers so they can maybe better understand how you got to some of these ideas. And what is your thinking and logic behind them? 32. Working With Components: in this video. I want to talk about components because we didn't include them in the design process, and there's a reason for it. I wanted to show you a work around without any components included for the buttons, for example, and these forms. And if I click right here on my ass, it's panel. You can see that we don't have any components, but I'm going to change that now because you already saw the entire design process without any components, so you can choose if you would wish to create your designs without components or with them . Personally, I like to create components, and I found them to be easier way to design anything in Adobe X'd. But I just wanted, as I said, toe show you the way without any components because this is the landing page and we are not going to have a large number of components anyway. But I want to show you in this video. Higher can quickly create components and how you can use them throughout your design because later on when you designed under pages, it's really important that you do have components, so let's zoom in a little bit closer on our designs, so I'm going to show you how you can create them. So click on your Are Barkley quite here to include cred and first things first. If I zoom in a little bit closer, you can see that our button is taking more than two columns so we can change that. We can create a button. It takes up two columns or three columns, so let's zoom in a little bit closer. And if I click on it, I can jump right here. Meaty NBG and I can move this to fit two columns. As you can see, you can select the text and center it and book Now beauty in and we're going to change the name to Neff like so and I could hit control Command K. And as you can see, it shows this green diamond, which means that this is the component and furthermore, this is the master component from which you can take child components, which means that whatever you change on the master components, it will update on the child components as well. And if I jump right here to mass its belt, you can see that now we have book now be tiene naff so that we can know that. Okay, this is a bottom which is book now, but it's located inside off the never because it's going to contain this two column wit. So now let's quickly make the change toe our menu. So if you remember, reposition its 70 pixels from this. So let's do that one more time like so 1234567 so that we can have even spacing throughout our design so you can see this is the smaller bottom. Let's go ahead and create a bigger one. So if I zoom in a little bit closer here, you can see that we have that same button we used to have up there. But now it's 2.5 columns, basically, so let's extend that to around here, and we're going to position the text same like we did before, so in the middle. And I'm going to change the name to book now Bt in. But let's call it big because it's bigger and it's ah, wit is three columns now, So once again, Controller Command K and if I jump into my ass is bound. You can see that it is now created. So we have two sizes off the same bottom. And this button contains this drop shadow if you remember from previous videos and this one doesn't. So that's the differentiating factor once again. So now if I want to duplicate this button or to place it down because if I scroll down and you will see that we have it here so you can do one of two things you can jump inside here , which is the booking form. Locate the bottom which is inside the form. Here it is at the bottom. So what you can do right here is make a copy off this bottom and that will be your child copy. So you can simply click when it hold all to drag down below, or you can simply click right here to delete this button. You can jump back to assets panel and you can drag and drop a new button right here. What that will do is it will create an instance from this button. So whatever you change for example, colors or text or something like that, it will update in real time and show you update here as well, so let's move it. 40 pixels. Same like we did with all the rest of them. So you can hold shift until it shows you the distance here. So that's basically it for the buttons. And we hear one more button, which is inside off our subscribe form, but because it's a little bit different, so the color is different, the size is different, so let's play around with it, first of all, so what we can do is learn how big was the distance between this button and this email input? So if I click on the button, hold shift and move it, you can see that we have, for example, 130 so I can move it right here. You can click inside and you can make it. For example, three columns with like so you can position it that way. And maybe we can create one column spacing so you can click on the email form and you can drag it toe here so you can see we have one gutter spacing, basically not the column. You can group them and, for example, select sign up for newsletter and simply click right here and it will place them in the middle. But it didn't work because this is wider than this. So, with outside off your folder, click right here, drag it back into her folder, right click on group, and here you go. Know what you can do is you can create these fields if you want as a separate components. But what I actually want to do is group them like so so control G and name it, for example, email form or subscribe for him even better, like so and hit control or command K, because it will create a component based off these two elements. So basically, you can, as you saw with this button, you can simply drag and drop it on the page whatever you want, because on majority of the pages, this subscribe form will appear anyways, So it's a good way toe create a component, which is those two elements basically combined into one element. So it's up to you if you want to work with components or not. I like to work with components, especially if I have various different screens. Basically, if you're working with just one screen, just one page, so in our case landing page. You don't need any components. But if later on client wants to expand that and wants to include all of these other pages, like in our case, they will. So, for example, just imagine, we'll have three different room pages reservation page about us contact. Maybe they're going to include to some different pages. So they're separate page for the booking form and so on. It's offered. So just imagine a number of different pages will be included inside, so components are really helpful. Way to keep the consistency between your designs. In the next video we're going toe, add some finishing touches to our project. We're going to design drop down menus, and we're going to design how this form will actually look like when they click on it. So we're going to include some options for this and this filled as well as the calendar for these two fields. So RC, there 33. Creating Dropdowns: let's now add finishing touches toe our design. So what we're going to do is we're going to add drop down menus for rooms right here as well as for flags right here. Then we're going to jump in all the way down, and we're going to add different drop down selections to this form. So we're going to include different room types, calendars right here and finally guests right here at the bottom. And we're going to finish up our design. So let's get started. And I'm going to scroll all the way down to the top click on the designer port and hide the grid because we don't want it to distract us. At the moment. I'm going to open up the knave. I'm going to locate the rooms. So here they are, right here, and I'm going to basically duplicated three times. So controlled the 123 and move those three all the way down. So hold shift, select and moved them down to ride around here. So when they meet with the bottom edge off R nev BG so basically this white part and then hold my shift key and move it down for the pixel. So 1234 do the same for these two. So locate the bottom edge right here. 1234 And finally do the same with the 3rd 1 So move it down. 1234 And these three are going to be our rooms basically. So if we're jumping a little bit down, you can see we have classic family in grand deluxe room, so that's what we're going to type in. So maybe we can leave room for all three end typing Classic. Make sure it's from the left. So left the line like it is This one is going to be family like so And finally, we're going to have glad grand deluxe room like so. And what we need right now is we need a navigation background. So we're going to create one using our never BG so you can control the unit and you can move it up. So just so you can see what you're doing, you can then move it down until it meets with your never BG like So So as soon as you see this blue line, that means that they are perfectly aligned. Move it down until it meets with our text. Like so that whole shift 1234 Because we want to have the same spacing down as we did with our text. And what we want for this left edge is to align with the text on the left and then hold shift. 1234 to the left. And for this right edge, let's align it with reservation, for example, so you can move it like so. And finally, what we want is to round up our corners so you can click right here. We want around bottom, left and bottom right corner so you can locate them right here. Type in 10 and 10 press enter or return same liquid it with all the rest of them. And here we go. We have created our drop down. So now what you want is to rein in this so it will be our room rooms and dropped down b gene and we're going to group all of them control G and call this room's drop down like so and we're going to move it Just below are never BG because we wanted to appear below it, and what we want to do is tow. Add some drop shadow, too, are never so. Click on it, Click Shadow and it will add just a slight drop. Shadow to it and you can see it 03 and six. So that's it by default. And I think it looks good because it will add just a little bit off visual interest because this is going to go down below. Once we click the rooms, this arrow is going to go up, and we're going to create the same for the flags right now. Now for the Flex. As explained in previous videos, I used this plug in called you I logos so you can click on it and then simply generate country flags. You have to have 194 shapes for its toe work because it recognizes 194 countries. So that's how it works, basically, and to say sometimes, and I'm not going to create it, I'm just going to simply copy the two flags that I'm going to need from another file, and I'm going to jump in right here and face them inside. So somewhere around here, so we have Greek flag and we have a French flag, so we're going to position them below UK flag so that we're able to center them like so, holding our shift key, of course, position and old way right here. So 1234 down. And this French flag. If I click on it right here and move it, you can see it's 40 pixels down as well. So what we need is we're going to create a background for it. Same like we did with our rooms. So you can either copy this background from rooms or create another one, and I'm simply going to copy it. So control D dragged outside off this group Locator flags here air, and I'm simply going to hold shift position. It's somewhere around here. I'm going to place it until it meets with the French flag at the bottom shift. Wanted 34 but with its selected So 1234 like so I'm going to move it until it meets at the top and reduce the wit to, for example, let's say 100. See how that looks like. Yeah, that looks good. Position it in the center and I'm going toe remain this flags or languages. Drop down BG Group. These two languages, like so and had to drop down at the end like that. Also moving below never be Jean because it's going toe basically have the same effect as we want to. And that's basically it for this drop down. So basically, when people click on rooms, it will become blue. Same like the bottom color. It will show this drop down menu, and people can click on any of these choices. Same thing for the flags. So if they want to change the language of the website, they can click right here and then select their language. So we're going to use this and created for this form right here at the bottom. And to save some more time, we can simply copy this room's drop down. So control D. I'm going to move it outside off this folder and then simply move it all the way down until it it's located near our booking form. Then I'm going to move it inside and what we want right here. As you can see, we have basically borders for all of them, but we want toe remove borders from all of them. So this is how it's going to look like like me quickly high this. So if I open up our form and open up the guests, check in, check out and room. We have input. And for all of them, we have the border. So we're going to remove the border from all of them. So you can either click one by one or you can select multiple choices and then simply remove the border like so. So when the guests first arrived on the page, it will look something like this. So when they click on the book now and they have the room type on, the input border will show up like so, and these ones will have no border still. But then, when they click on the calendar, for example, right here on the chicken, it will show them border. Now this should show room type soul. It's a classic room control, see, So as you can see, sometimes you can spot these arrows later on in the process. So like this, and now we fixed it. So let's get back to our drop downs, and I'm going to show you how you can create them So first things first, let's create a rooms drop down. So here it is. I'm going to position it inside off this room's folder, or you can position it below however you want. Let's let's do that anyway. So its position it below and, as you can see it now sticks because because it doesn't have rounded corners, but rather it has straight corners. So what you can do is move it up. So just hold shift until it meets with this one like this, and I think it looks good and you can position this doubt if you want to, But I'm not going toe. I'm just going to, simply extent, this back road all the way to here. So until it meets with this edge, basically, and you can click inside and see how why your input is so it's 800. I'm going to make it the same here. So 800 as you can see, it extended all the way to the edge. So now we have our drop down for our rooms. Basically, it looks the same as the one above, so let's hide it. But before that, I'm going to copy it so control the and I'm going to move this one down. Like so until it meets as we did with the one before like this. And we're going to hide it so that we can see what's located here and it's guest. So let's hide this one as well. And this is going to be guests drop down like this, and in it were going toe. Basically remove some of these items so that we can see what we're doing. We're going toe right in a few things that are going to determine which guests are coming to this room. So first things first, we're going to have adults like this, and we're going to have Children below like this because we want people to have selection if they're adding, if they're bringing Children with them or no, because then the employees in this hotel will be able to tell Okay, you might need this room type. You might need these accessories in your room. You might need this many beds, this many sheets and so on so everybody knows what they have to do. So we're going to click on the rooms background, and we're going to rename it to guests drop down BG. And once again, all of this is important when you start prototyping later on toe have your layer and named correctly so that also animate features and the other features for that matter inside of the eggs d work correctly. And I'm going to explain that in more detail when we get to the prototyping parts off discourse. So for now, let's reduce the size off this guest drop down BG. So just hold this and move it up to here because if you remember, this was 40 pixels down. So like this until they meet with the text and you can remove this text because we don't need it anymore, what we're going to create right here. So when people select guests, you can see how that looks like, and this should go below guests like this. So once again, when people select guests, it will show their that dropped out, and they have to be able to choose how many adults or how many Children are coming with them. So let's give them those options. So what we're going to do is hit control de on these two. Find this and on this 1st 1 for us. Let's make them center on this first formless type in two. And on this 2nd 1 list, type in zero, and we can position them like this just below. You can leave them like this. It really doesn't matter, and it's up to you. Center them like this, and we can maybe positioned them somewhere around here. Now what we need. These we have to create a plus sign so that they can add how many more adults or how many more Children are coming with them. So let's create that an easy way to do that. It's simply to use a rectangle tool. So, like this, you can fill it in with this color. Like so, remove the border control de and you can rotate this section like this. So you basically have these two rectangles and you can click right here so that you can add them as one unit. But before we do that, we need a minus. So let's heat control D ruin to move it right here, and we're going to select these two like this and simply hit right here what it says, add because that will add them as a separate shape so we can maybe type in ads or remove something like that and you can position them to be in the center off your text. So, like this, and then you can maybe make a spacing. So, crews, and move it. Maybe 40 like this 40 with this one as well like this. And you can move all of them, including the zero. Tow this edge and then hold shift more than 40 pixels, toe the left and then simply duplicate these ones so controlled deep and move them below until they are in the center off your zero. And you can then organize your layers a little bit better. So, like this. And there you go. You have created your drop, their menu. But this needs to be here, and you can close it down, click a wait and see how that looks like. Now, if you think this spacing is a bit off, you can change that if you want to. So what you can do is simply locate where they are. So guests drop down and you can select all of them position until they are aligned with this edge like this. Like so whole shift. 1234 Then again, 1234 And then simply move this until it meets with bottom edge like this. And then move all of them back 40 pixels. So 1234 And now you have a much nicer spacing between all of them. And now we're goingto go ahead and jumping and do the same for this Stop one. So it's going to be easier, because we only have text layers. Basically. So move them up until they meet with this sport to match, like so. 12341234 Once again and move this background to here. Then bring the back. 1234 like so and now they're in the middle. So let's hide it. I'm going to click on this input, Remove the border. I'm going to click on this. Input removed the border for now. I'm going to hide all of them. And now we're going to focus on the checking and check out calendars 34. Creating Calendars: And now finally, let's go ahead and create our calendar. So if I zoom in a little bit closer to here and I'm cooking right here on the booking form , open up the form, located the chicken, and what you can do right here is basically copy and paste the background for any of these other ones that you created so control D. And you can drag it outside of the full early name of checking and beachy like so, and you can move it down until it meets with this one. And if you find any of these other ones distracting, you can simply hide them. So move this one down and I'm going to leave it like this for now. So what you're going to do is move it up a little bit like this and then move it down just below so that we can have enough space for our calendar. And if you think that it's going to extend all the way to here, you can do that as well. So, for example, you can have the wit be toe here, but it's going to clash with this check out. So let's leave it like this for now. So jumping inside of the check in and you can maybe duplicate these tools, control d, dragged him outside and then simply place them below to hear, or you can simply click on them and then move them below. Sometimes you can find these bugs, so as you can see it, no does work. Let's move this one just a bit down so that we can see where the edge is. So something like this and I'm going toe typing right here. September off 2000 and 19 for example. And I can position it in the middle like so, Or you can quickly select these two position in the middle, and now you can position it as it was before. So, somewhere around here, and then you can click on 2 September and until it lines up with the spot, Magister shift 1234 if you want to, or you can have it, too. It's really up to you, or you can have it to to for these other ones. So not. Let's create a days so Sunday. Or you can simply have s like this and you can hit Repeat Great. So we need seven like so, and what you can do is position it to here. So 12 maybe, And then simply increase in the spacing to here, for example, and now you can type in Monday on this one. Or you can even better on group this repeat grid. Click right here and now you can hit control G to group them back like right here, position it in the middle like so and now what we can do is type in days presenter and maybe position. It's 20 down like this, and maybe we can even change the colors. So let's use this color, maybe, or something a bit darker. Maybe we can even use blue, so it's really up to you. But let's use this one, for example, just for now, and you can jump inside and start typing. So this one is Tuesday, this one's Wednesday. This one is Thursday. Friday. It's going to stay Sunday and Saturday. Eight. Like this. So when the days are done, you can hit control D and move a bit down. So what's click on this one and position it down 20 like this and we want five down so you can either use Repeat. Great for it as well. 2345 Like so And we're going to basically extend these BG all the way down to somewhere on here and then hit 1234 using your shift key so that we can have even spacing for all of them. Like so. And as you can see, it goes all the way down. Basically, toe are bottom inch. So what we can do. So these are our days so we can hit right here and you can hit on group great like this, and then you can even on group all of them, like so if you want to, but I'm going to leave them as they are, or even better. Let's do this so hit on group on all of them, and then we're going to group them by column, so it's going to be easier for us to line them up with these Stop wants. So let's do that. So I'm going to click summer art sides, and I'm going to click on the first hole shift and then simply click on down Control G. And maybe I can call them number one or Row one for example. Yeah, let's news debts and then do the same for all of these other ones. So, control, G, I'm going to name this one little too, and do the same for all of these other ones. Let me quickly pause the video here so that you don't get bored with me selecting all of them. So when all of them are selected, you can go ahead and add your dates. So, for example, maybe you can see something like days. So perhaps this is going to be 29. This is going to be 30. It this is going to be first second, then it and you can off course, hold control and click directly inside. It's going to be fifth. This is going to be sixth seventh, and let me oppose the video here so I can feel the rest of them and then come back to you. So now that we filled all of them, we can select a number two from here and give it some color off lower visibility. So we can do with this one. For example. No, the same for this Number one and the same for 29 30 because these ones are from the previous month, and basically we can give it October, Let's say, because it does have 31 days and simply position it in the middle like so, and what we're going to do is now line all of them up a bit better. So let's use but only one and select all of them. Positioning like this closed the folder I wrote to like, So throw three like this pro floor, like so then five. This is really tedious, but you have to do it basically. So sometimes you found these tasks has really tedious. But at the end of the day, you as a designer really have to do that. So one final thing that you can do is simply on group the days. Then position this to be in the center off your day. So simply hold shift and move it along until it's in the middle off your day, basically so like this until it meets in the middle like so and then when you finish that you condone, simply call these ones days. So this one is Sunday like this. This one is Monday, Tuesday, Wednesday, and let me quickly pause the video here again. And then when you finish that, you can simply drag all of these ones into their dedicated folders. This one is Saturday. This one is Friday Thursday so basically dropped them in. So this one is Wednesday. So Tuesday, Monday, and finally Sunday, like so and during your counter is finished. So now if I select all of them and see where they are right here, so I can group all of them like so control G. And what we need is an arrow. So let's simply use this one, for example. So control Andi to duplicate it. I'm going to move it outside to hear and I'm going toe position it right around here. Then I'm going toe included in sight off our folder and this is going to be our right arrow like this, and I'm going to rotate it and hold my shift key. Position it in the middle like so make it be 40 from the right, like this. Control d This going to be a left arrow like that? And you can simply flip it horizontally and position it to be 40 pixels from this left edge . So she 81234 like that, and October is going to be in the center and this is our calendar, like so And once again, if they select the check in, click on the input, include the border. So this is how that's going to look like. So basically this calendar is going to drop down and they will be able to select any date that they might want. And when they are done with that, it's going toe update right here is going to close, and then they will click on the check out, and they will have to do basically the same thing. So for it, let's use calendar so economically control. See, double click right here. Control v Amero like this, control de once again and this is going to be our check out calendar. My this hit enter and you can move the entire thing until it lines up with our check out like this, moving below the check out, hide it, and I'm going to hide the check in counter as well. Click right here, remove the border because we're needed at the moment and it's our form basically completed . So in the next section off the course we're going toe. Start with our prototyping. I'm going to show you how you can create some basic interactions that can really pop your design and make your client understand your thought process and your logic behind this design. As you can see, we sometimes have some tedious tasks that we have to finish and that we have to complete number the way you can create this calendar, using a plug in so you can click on the plug ins it called It's called Calendar and you can search for it right here, some calendar. And if I click show more it's from Palo be a genie. But in my opinion, it really is not all that well because But I just showed you you have to create basically yourselves because it doesn't update the phones to the sizes that you wanted to. You cannot choose the size of the phone. So if I click right here to show you you can choose a language you can just sell size. So basically how big the calendar is, which you think it's good, but it doesn't show you all of these dates and all these details you can check the month you want. But as you can see, it's really not all off that sophisticated. You can choose on which the week starts and how the format is going to look and simply click make under. But as I said, you can play around with it if you want to. It's free, of course, but they said it's really not all that good and you have to make all of those important changes yourselves. So basically, that's it for the design parts. And in the next part of the course we're going to jump into the prototyping section, and I'm going to tell you a little bit more about how you can really make this design come to life with some basic interactions and animations, so I'll see you there. 35. Organization: in this section of the course, you're going to start with the prototyping. And if you're never done poor lapping before, especially in Adobe X'd. Basically, what you have to create is a state one and then state to. So if you remember what we did before in a previous part, we created, for example, this room's drop down as well as these flags dropped down. So basically, we have before and after state same liquid it here. So this is the before state for the room section, for example, and when you click on this arrow, it will open up the after state, and after it's opened up, you can then choose what you want to do with it. So, for example, you can choose different selections, and we have plastic rooms and let me quickly check what we have. Yet we have a classic room, family room and grand deluxe room, same like we did for If you remember, we have the background drop shadow right here so people can choose it and then select it from there and then move on. If they want a lot more simply, click on this text right here below. So that's basically it about pro stepping. You have to create different states. So then, Adobe X deacon, know what you want to show to your viewers? So, do you want to show them this, which is basically unclipped section, or do you want to show them the section which have been clicked and which have been opened down below? So that's what we're going to do in this part of the course. And to get started, we have to organize our files a little bit. So if you remember each and every one of these are boards has a name right here at the top . So if you go from left to right, we have logo. Then we have mood board design brief. We have our wire frame drawings right here. Then we have the wire frame and finally we have the design. So what we need for the prototyping is we need to create different copies off this design with different states inside. So that's how we're going to do this. We're going to click on this. Our board control deep, and maybe we can call this one prototype one or just one or curry once. So it's called it protect one, and then you have to basically count How many off these examples do you want to show? So let's first show. For example, rooms drop down, so it's going to be this one, then in the second state, or we want to show the flag drop down so he'd control the one more time. And we're going to call this one Protect, too, like this. And if you, for example, want to show when people click on one of these, you have to create three different states. But let's not populate this design too much, and I'm going to show you how you can then do it for these ones down there because the majority of faction actually happens down there. So I just noticed that the bottom is not showing right here. So let's quickly fix that. We have the form click on the button right here, and we're going to do the same for these two because I forgot to include it when we were designing these form elements like so and so. What you want is we have this state, which is basically the North State, and it's not opened so we can connect it with this 1st 1 And for each of these we have to create additional screen. So we have to create 123 additional screens. So let's do that. And we can maybe called these ones. Yeah, let's just go with the numbers. Prototype three. Just make things easy and nicely readable. So prototype for and finally prototype Fife. And if you missed something, don't worry about it. You can always come back and make some more duplicates and then jumped back and make those changes. So what I want to do is select all of them except for our original design, and just move them a touch to the right so that we can separate them a little bit better from our design and all of these other elements. And in the next video, we're going to start with our prototyping, and I'm going to show you how you can connect some of these elements and then create applicable prototype, which you can then share with your clients and they they can share with that developers so that they can see the basic transitions and they can see what we were thinking and design process behind it. So I'll see you there 36. Prototyping 1: Now you can imagine that if you have, for example, 20 different pages, the prototyping section might get too crowded. So it's always a good idea to separate it from your original design, because that way it's going to look a lot cleaner than just bunching all of them together like this. So what I'm actually going to do if I zoom out all the way out, you can see that I reached the end off Adobe X'd canvas. So I'm going to select everything, and this paper is not going to move. But we're going to deal with it a little bit later, and I'm going to position them all the way up here at the top. So that way, for example, when later on we design additional pages, we can then simply select all of these prototypes and then simply moved them down. And all the interactions that we designed our going toe be inside. So whatever. Remove them on the canvas and they're still going to kept be kept inside. So let me quickly move this paper right here, so it's inside off its original location like this and make sure it's 70. It is so that's basically it and one thing I forgot. And that's what I say. That in previous video that you can make is many copies as you want is I want to make this small animation, so I want to. When did click on these arrows? I want them to be able to change from one image to another and from one attraction basically to another. So let's create one more. So I'm going to simply click on this one Control D and renamed this prototype six. So, basically, as we go along, we're going to start and we're going to create in these additional animations. So let's start from the top first things first. We want to create a rooms, and we want to expand them down. So I'm going to click on the rooms. I'm going to click on the down arrow, and I'm going to flip it vertically like so, and I want to call it Let's keep it down, Arrow like this. And then we're going to create additional Element which were going toe include in our style guide in the next section of the course, as well as right here in the components. So let's jump right here. So down Arrow, it's up, And what I want to do is I want to click on this room steaks, and I want to apply the same blue color as we see right here, because is going to indicate that it selected. So click right here and what we want is to jump back right here and to show rooms drop down . So simply click right there, and that's it. So what I want to do now is connect two of them so that you can see what it does. So jump back into prototype mode right here. Simply click on it, click on the rooms or on the arrow. Whatever you want. I'm going to click on the arrow. Or maybe we can click on the rooms because this hit target is way too small and we're going to group to off them when we start coding basically later. I mean, they're developer is going to start called later, and they're going to group these two elements anyways, so let's use this one because it's much bigger to hit. Simply drag and draw it right here, and what you want is for them to be able to tap so they're going to tap on this room's text . Next up, we have the action, so we're going to choose. Also animate because, as I said multiple times throughout the design process, when you have your layers named the same, they're going toe work basically the same when you start auto animating later, when you get to disprove the typing stage off your project, so basically keep it, Auto Enemy destination is going to be prototype one easing. So how the easy is going to look like you can click on these out, for example, you can snap bounds. However, you want this to look, Let's keep it. He's out and duration. Let's use 0.46 for example. I'm going to click right here. Click on the preview and in large is just a little bit. So when I click right here is you can see the arrow has turned, text has become blue and this drop down has appeared from up to below and let's do it the other way around. So I'm going to click on the rooms once again drag toe here, and it's going to contain exactly the same styles as we did before Now, if I click right here in this 1st 1 click preview locally cried here. And if I click right here, you can see the arrow has turned this pop up has shown an effect, like right here it will then simply hide it. So once again, if you wanted to appear a little bit differently, you can do that as well. And I'm going to show you how you can then change that. So, for example, design. Let's do it like so and you can move this up in the first part. So in this part and in the second part, it will then jump down. So you can do that if you want to, and let's quickly move on to another section. So when people click on this flag, go to the prototype and drag it to the second screen and same will appear for for this. And when they click up on this one, it will do the same for this auto animate is out. So we're using exactly the same settings for this one now. Simply go in sight off this second state and Jews, languages dropped down and we're going to do the same for this arrow like with it for the this first arrow. So we're going to flip it work particularly. And if I closed this and go to the preview mold, click right here. Thank you to play. I'm going toe larger just a little bit. So when they click right here and if you click right here, it will open up this drop down. But as you can see, this drop down is not opened. So when I hit close, it will bring them back to my original page. So when I click here and then click here, I can dangle. Click here and click here. So basically, you can play around with it a little bit more and you can select, for example, different languages if you want to change all of her text and play around with it so that you can better present to your client if you have the time. But it's, ah a lot easier if they can provide you with the copy. So, for example, this is the English copy. If they can provide you with the original Greek copy, that would be great. You can then simply copy and paste all of these elements and make them writing Greek rather than English, so you can then animate that further. So, for example, this is the English version, and when you click right here, it will then change to the Greek version off the website. But as they said, you have to ask your client toe, deliver that copy to you because if you use Google, translate off course, it's not going to look presentable and professional. So in the next video, we're going to move on and continue, adding are transitions and I'll see you there. 37. Prototyping 2: let's now continue and start adding our transitions. So in the previous video, we added these to drop down. So we're going to move on a little bit further down on a set in the one of the previous videos. You can add multiple pages using this exactly same method, and then simply add these drop shadows. So if I just click right here and then located on one BG and make it be visible, you can see how that looks like. So basically, when they click right here, it will show this dropped out. And you can, of course, show this to your client. But because we don't have any additional pages at the moment, especially these room Bages, this effect is really it doesn't make any sense because they can a clique learn more and go somewhere because we didn't design that other page yet. So let me quickly hide this and close all of these previous sections, and what we actually want is to design this one. So how we're going to do that is, well, that's why we created these separate copies. So in the stirred copy, So protect number three, we're going to locate it right here, So click on its I'm going to zoom in a little bit closer, and what I actually want is to include a different image. So I'm going to jump into my images folder and locate this light house image. I'm going to drag and drop it inside. You can double click off course, hold your shift key and then simply move it a little bit down so that it fits this preview area a lot better. And this is called Harmonists like house. So I'm going to hit control C from Internet control. We based it. And because this text is for the Dallas, you have to convert it toe area text. Simply click right here. I'm going to jump into my plug ins. I'm going to look a lot of gypsum filled it placeholder text, insert text, and it's going to insert some random a lot of ipsum text right here, and that's basically your second state. So when people click on the 1st 1 they will come here, and when you click on the back arrow, I mean left arrow, they will go back there, So let's simply jump into our 1st 1 So prototype this is a home screen. So when the click on this arrow it will take them right here, and we're going to play around with these settings. So let's choose for the easing. What choose snap, for example, just to see how that looks like. And for the one back, we're going to click on this arrow and drag it to here, keep the same settings. Then he'd preview mode just so that we can see how that looks like with enlarge it. And if I scroll all the way down, you can see how our website is going to look like once coded and because we made all of these sections nice, clear, big. When people scroll, scroll down, they're going to be held on one section and they're going toe. Be able to take their time and read through all of these sections nicely. We don't any other interference and without any other things popping out from the side. So basically, when they come to here, they can then click this arrow and you can see how the animation looks like. But I don't really like it. I think the auto animate is going to be a lot better So what you can do is simply click on this one because, as you can see, this arrow goes, tow this screen. So I'm going to click right here. I'm going to choose auto animate from here and then simply I'm going to choose easy out, and I'm going to click on this one and choose basically in the same settings. So he's in out. And now when I hit preview, let's see how that looks like. So I'm going to go all the way down. Click on the arrow, and as you can see, the transition looks a lot cleaner, especially down there for the text. And as you can see, it looks good. You can also play around and add some additional elements right here. So, for example, you can use the mosques to hide these two portions. So the white portion on the left, as well as white portion on the right and then hide images there and then simply might make a slight show and move them like that. But it's tricky in our example, because we have this background drop shadow. You can also use some advanced mosques, but I'm not going to go into that Because this is simply to make the client where what you were trying to do and to show them some options. So when they click on this arrow, they can see Okay, I get it. It changes from this one to that one and comes back. So people are aware what it does. So we're going to now move on to this section and in the next video over when toe add some additional changes to it. And I'm going to show you how it will look like, so I'll see you there. 38. Prototyping 3: let us now enemy to these other elements. So if you remember in the previous video we added in this slide right here. So we created sort of a slideshow so that clients are aware off what we were trying to achieve their. So now what we want to do is to create these drop towns from right here below. So we have basically three drop towns, but we need to create 1/4 1 eggs as well. So jump into design a moat control D and double click right here and call this one prototype seven. And that's why I like Adobe X d s o. Much because you can simply with a click of a button change from design Moto prototype moved them back again, make some additional changes them back again. It's really that simple to use, so I really love it for it. So let's jumping toe prototyping mode and click on this 1st 1 So what you want for this one is when people click on this arrow, it will then turn upside down, and then it will display this drop down right here, So let's quickly animate it. So we're going to use this arrow right here. So if I zoom in a little bit cool so you can hold control toe klik inside. But let's use the entire field because it's a lot easier that way. So we're going to drag it toe here because, as you can see right here, we have our slight right here. So we're going to use Step Auto animate prototype for That's our Our port is in out 0.4. So exactly the same settings as we did before. And we're going to call or control key click Insight and then simply drag it back. And while we're here, we can add the animations all at once so we can hold control. Click right here, then added to the 2nd 1 like this whole control Click right here, drag it back and we have two more. So second toe last. So this one's for the check out. You can hold control. Click inside, drag it to this one, hold control, click inside and drag it back to home and hold control. Click on the last one dragged here control and drag it all the way back. So that way we add it in the effect toe all of our our ports. And now let's start a heading and including these elements. So I'm going to jump into design mode and jump into this one because as you remember, we added the slide on this one. So I'm going to jump into the room type and on the import. I'm going to include the border back and I'm going to show homes dropped down like so. So that's basically it. We can now move on to the 2nd 1 So 2nd 1 is for the check in. So I'm going toe include the border for the check in, like so, and I'm going to display check in calendar right below. Next up, we're going to close this and move one, and this is going to be for the check out. So once again, include border right here and show check out calendar right here. Now, on this one, we're going to hide book now, button, Or you can simply move it down below, like so. And it's going to stay hidden because we included this check out overly. So it's close this and finally what we have right here is this room type. So I'm going to hold control. I'm going to choose border from the input and I'm going to show guests drop down right here . But same thing like we did before. Simply moved this book Now button all the way down at the back. Now, if you're annoyed by this shadow, you can simply fight the bottom if you want, and then showed back once it selected. But I think it works well. And one thing I want to mention is with these numbers so I can show you how you can meet them. And I'm going to do that right now. So, control, indeed, we are still in the design mode. So what you can do right here is click inside and click three, for example, like so And you can then close this and you can jump into prototyping mode jumping to this 1st 1 click on the plus and then simply drag it to here and you can use the same settings and you can click on the minus and drag it back, and it's going to increase or decrease the number off thes adult guests. So let's start from the start. Click right here. I'm going to hit preview mode enlarge it a little bit. And if I click right here, you can see how it looks like You can see the flag Arrow is turning the other way around and we can scroll all the way down. Locate are what to do in meekness you can quick right here. And as you can see, Adobe Ex d a. Smart because it remembers the position off your scrolling. So if I jump all the way here and then down here, you can see it doesn't move my page at all because it knows that I'm on that stage off my page on that slide over there. So, as you can see, it looks really nice and I'm going to go down and, for example, click on the room type. As you can see, it looks well when you close it, it goes back. And the thing I forgot to add is thes arrows. So let's fix that. So locate the 1st 1 Here it is, right here. Click on this arrow jumping to design mode and simply flip it vertically like so. And I'm going to do the same for these guests down below. So that's basically this one flip it up horizontally, closed his booking form, and I'm going to do the same for this last one. Simply flip it up like this, and let's now go back to the 1st 1 and let's view the entire prototype. So I'm going to click white here, enlarge it, and then let's go over it one more time. So when I click rooms, you can see it. Selected Arrow is turning up when I click the flag, it selected areas turning up as well. You can scroll all the way down, and we can see how this one looks like. So, as you can see, it's changing thes images. We can go down and now select at home type. As you can see, the arrow has turned up and we can click on it and it will close it back down. You can click on the check in. It's showing the calendar, and as you can see, the input has the stroke on it as we wanted. So when you click to hide it, it will show height in the stroke as well. Click on this one. It's showing exactly the same thing and click on the guests and as you can see this arrow is turned back. So when I click right here is giving us this weird effect with book Now button. So what you can do toe eliminate that is positioned the book now button all the way down below in all of these are ports, and I'm going to do that because it's really easy, and I'm going to jump back and show you. But first things first. Let's see if this works. So when I click right here, it's going to show three. When I click right here, it's going toe. Jump back to two, and you can then simply hide it and it will go away. So as you can see, it's really easy to prototype in Adobe X'd, and it's going to give that additional life to your designs that you need toe. Give the the client first of all, the idea off how your design is going to look like, once coded. Sadly, we still cannot add animated gifs, toe adobe X'd files. So, for example, it will be a nice addition if we can add some kind of background video right here, because this is going to be a background video after all, so maybe in the future we could play around with it. But if you want to show some advanced prototypes, you can perhaps go to Adobe Premiere or adobe after effects and then add your effects there . But then clients cannot click on. Your prototypes cannot leave you additional comments, so maybe you can then simply explain to them this is going to be an animated GIF or a background video so you can see with your developers and they can add it there. So let's fix that last thing. And that's this and button so I can click right here, click on the form and its old way down and then simply moved to here. Close all of these ones. Locate button. It's on the back. Click right here. Form button is all the way down below. We can move on. Click right here on the Forum. As you can see, it's at the top, but we're going to simply move it down below, and then we're going to jump back and see if our prototype works with just that section below. Because as X has explained multiple times throughout discourse, positioning your layers is really important because that way you can make sure and that these animations are actually going to work properly and you're not going to have some weird effects and so weird animations and that you're not intended. So simply making sure and that you position and named your elements in groups in the way you want it. He's going to give you that advantage when you start animating, so I'm simply going to move it all the way down and because it's in the same location in all off our, uh, designs and let's do the same for here, even if it doesn't matter. But as you can see, it's now right here below. So let's jump into prototyping mold. Click right here, then he to play in large it a little bit. I'm going to move all the way down and wouldn't click right here. As you can see, we don't have that weird effect anymore. And when I click right here, as you can see, it looks good and the bottom stays behind as it should. So those kind of easy fixes are really easy, really fast and really simple things to do, so you can then simply locate the problem and then fix it while you know what it is. And your designs and going toe turn out a lot better than if you didn't in the next section . Off the course, I'm going to talk about exporting designs because when you finished your design, liquid it right now, you still have toe export them, and you have to prepare the fires for developers as they told you. So we're going to deal with the folder structure we're going toe deal with exporting images , exporting assets. And perhaps most important off all, we're going to create a style guide, which we're going to then later use in the later stages of the project. When we add some additional pages and inside of that star got, we're going to include all of the icons off the colors, all of the text that we use for this project because that way it's goingto be ought easier for us later on down the line when we start creating additional pages to simply and copy and paste those elements and it will keep all the pages look coherent and all the pages look like they do belong together. So I'll see you there 39. Creating Style Guide: before we send any off our files toe the developers and final files to our client, we need to create something which is called Style guide and inside style guide. All the items that you used during your design process are going to be included. So, for example, we're going toe include different funds and phone styles that we used in different colors, different icons. And then when we sent this final file to the client and to their developers, they're going to be able to easily access all of that information now. Yes, they can click right here in the assets panel and they could see everything which is included right here. But we are also going toe include those additional items because it's much simple put for them to see on additional sizes additional spacings between items and so on. So what you need to do first is organized our project a little bit better because this part on the left is a design, and this part on the right is a prototype. So let me quickly select all the prototypes and simply home shift key and move them right around here. And as I said, if you remember all off the interactions are going to be held and going to be contained as we created them. It doesn't matter if you move these airports down, up left, right, they're still going to be there. So we now need to create a new our ports on going to click right here and click on a Web 1920 for example. I'm going to double click right here and type in style guide because that's where our style guide is goingto be insight and I'm going toe expand it just a little bit down. And because this is not a page, I can simply hold this down and remove it all together and inside of this style guide. All off, the relevant information are going to be included. But before we include them, let me quickly create text. So click on the textile, click right here and you can type in design, control A to select everything and perhaps created at two hundreds or maybe even five hundreds. Something like this, and you can perhaps position It's somewhere around here in the middle. Let's say yeah, some rare here, and you can also hit control de to duplicate this position it somewhere around here and call this one prototype because this way, your clients as well as their developers are going to be able to tell that this part is the design. And this part is the prototype. And as I said, because this canvas is really a large space, you can position it whatever you want, depending off your project later on. So, for example, when we add so more pages right here in the future, I might move this protect down below. But it's really up to the project, and it requirements, so let's quickly create the style guide. So first thing that we need are these colors. So I'm going to jump in right here to the asset spell, and I'm going to create letting quickly counts 12 different colors. So I'm going to simply click T and selected a star guide our port click t reduce this down to, for example, 48 like so and I can click and typing colors. No, we don't 48 like this and position it like so hold shift. 12345678 for example. Same in this direction. And I'm going to create 12 different rectangles. So something like this hit repeat great and draw out 12 and we're going to need to make them a little bit smaller. So what you can do is on group grid and then simply drag him back to here around this. Or you can simply turn off responsive resize and then lower decides off them like so. So make sure you have 12. We don't we need one more. So let's quickly select this last one control D and make it look the same. So who are 68 10 12? And I'm going to select all of them like this, and I'm going toe to reduce the size like soap. So now what I need to do is go ahead and create them by the colors so I can click on this 1st 1 click on this color click with the 2nd 1 this color and so on and so forth. But let me quickly pause the video and I'm going toe, order these colors a little bit better and then come back. So now they make a little bit more sense so quick on this one, and then simply go ahead and click on all of them. And what I did here is I went from the top blue, which is our main blue, and went all the way down. But when I did that, I ordered them from dark er's toe lightest color. So, in any case, if you need any of these colors, you can quickly access them from here, as well as from the assets panel itself. I'm going to select all of them and remove the border because it looks not a lot cleaner that way. But I'm going to keep the border for the white color because we need to be able to see it. So one other thing you can do is you can duplicate this text and jumping to earlier special position it like this. And we are going to reduce the size, for example to I don't know, 24. See how that looks. It works fine, and I'm going to choose the color white, and I'm going to type in this hex code, and you can also co p it from here and then baste it to here and just make sure it's white color like that positioned in the middle, and I'm going to do exactly the same thing for all of these other colors. So I'm going to pause the video and then jump back. So now did. Under I can simply select all them hit control G group them, moved it down and name it colors like So now we need to create the different funds, So I'm going to hit control D and make exactly in the same spacing as this one. But we're going to include different phones here. So I'm going to stop talking Florence and make sure it's left aligned ST like this 1st 1 and simply move it until it meets right here Now for the once. We can easily do that by clicking on all of these character styles. So I'm going to hit control D and we don't like so. And as you can see, we're missing the character style for our titles. So we're going to jump into here, click on it added to here. So we have play for display like this, as well as play for display like this. So let's start with that one so we can call it plane fare display like this, and I'm going toe position it like this. And because this one is white, it's not going to read really well. But we're goingto leave just in this dark one right here. So I'm going to get control, De Duplicated, make exactly saying spacing and go from 1 to 1. So this one is regular, as you can see right here. So you're angular and the play for display was bold, italic like this. We're going to duplicate this one down position like so this one is open sense italic like this, and we're going to do the same thing like this, and this one is bold. I did. Joel de duplicated right here, and this one is white, so we're not going to include it. But basically it's regular and we already have it here. And this is regular, and finally, we're going to duplicate it once again. We can include this one if we want, but we don't want and we're done basically. So let's remove that. And now what you can do is at the size. So as you can see, it's at 70 so you can type in 70 for example, and for this one union type in 36 for this one you've been typing 36 as well. This one is 24 and this one is at 24 as well. So now what you can do is simply draw a bunch of text or create and, uh, different paragraphs for all of these different phone sizes and put them below. But I'm going to leave this like it is for now, same like with the colors, because we are still not finalized with the colors. So clients might not like. Some of these colors that we created might not like these many variations off gray, so we're just going to leave it like it is for now. And usually we have someone like five or six colors. Man, we have something like two or three different form families and two possibly three ways off these phone families as well. So we're going to leave them like they are for now. Next up, we need icons with Let's first group, all of this together So central de and going to duplicate this imposition it like so, and we're going to group all of this control G. Enter typing fronts like so colors are going to go into colors, folder and Now we're going to create icons and we have a variation or different icons. But I will now go ahead and select all of them. So it on this one control, see? Click right here, control V and you can click on it and then draw it near the top. Like so. But because this is a smaller icon, I'm going to jump in and select these bigger ones. So bad. Food and beach. I'm going to hit control. C hit right here. Control V N is going to position them in exactly the same location. I'm going to drive them right around here and then simply move them a lot closer. So something like this is good beat. I can't do it like this and you condone. Make sure that they are on the same distance and then you can move along and include these other additional icons. So what we have basically, is this arrow. We're going to move on down just a little bit. We have this arrow, so control. See, I'm going to jump in right here. Hit control V, and I'm going to position it a bit better later. But now let's first select the other ones as well. So basically, we have this variation off these arrows. We're goingto make copies off them, and that's basically it. We only have this social media icons right here at the Footer, so I'm going to hit copy. I'm going to close all these folders, make everything look nice and clean, jumping right here and hit control. Veto based them in. And finally, I'm going to choose one of these colors to make them a bit more visible like this. And now let's quickly create variations for these various icons. So if I jump right here, this isn't down arrow. If a hit control and D and move its some rock, it's moving at 70 pixels, for example. It's going to be up arrow, so just flip it right here. It's going to be up like so most them. I'm going to hit control de move. It's so basically 70 pixels like this and we're going to flip it horizontally or vertically . Or you can simply rotate it like this and it's going to be a right terror like so. And one final thing that we need is a left arrow, so we're simply going to move this one to around here and it's going to be left arrow or keep this right Orton flip this one like this and name left and finally do the same for this one. So 70 like this It's left arrow control De Flip it like so make sure it's at 70 like than this. And this is going to be right arrow like this. And finally, we have social media icons. I'm going to move them right here below. Make sure they're at 70. Like this. Ungh. Group them. So we have Facebook, Twitter, Instagram and YouTube at the end. So these are our icons. Weaken group All of this together hit control G moving down below sequence. And what we need to create lastly for this style guide is to create drop shadows. So we have to include those drop shadows that we created for these various elements. So how we can do that is simply I can click right here. Locate the room one BG hit control C to copy it. I'm going to jump in right here. Hit control V and I'm going toe position. It's something like this. I'm going toe. Give it. For example 50 wits 50 or that's too small. It's used 200 wits 100 and I think that looks a lot better. But let's use squares. So let's go with five weeks fire something like that, and we're going to copy this text. So hit control D Move it outside of the folder like this, then simply move it down to the same distance. And this is going to be drop. Shadows are simply shadows like that, and I'm going to move this till here. And if you can see it because it's white, you can then simply choose some of these other colors to make it look a little bit more visible. But I think it looks good. Let's use for which for like that because we need a bit more space. Heat control D Position it to somewhere like 70 because we used that spacing for the icons above. Troll D 70 earned control D 70 like that, and what we need is we're going to use this first drop shadow for the 1st 1 So hit copy. Click on this one right click and then based, and we need to use this for the button. So right click copy, right click paste appearance is going to change, but you can use this color, but just keep them the same shadow. We have this one because it's this one. And finally, let's use some of these other ones. So let's use this one, for example, because it's just a little bit different than the stop button. And I'm going to click right here based appearance and once again change it to this color so you can quickly find if you did the right job. So tent and 20 55 20 10 10. 20 So we can quickly delete this one. And this is 55 20. So that's basically it for our style guide. You can then close all of them so you can see we have this weird bug right here. But you can double click right here, reduce the size off your style guide to somewhere around here, and there you go. So once again, you can create different paragraphs with your phones. You can show them in different colors. You can show them in different ways. So, for example, if you have Playfair display, you can put it right here at the top and then on left side show Playfair display regular on the right side show Playfair display bolt below show, bold, italic and so one. But I like to show the phones that I usually am using. And I like to show the phones like this because developers get it and I will show you in one of the next videos. When we share for clients as well as for developers. They're going to get all of the relevant information in that shared link, so they're going to be able to see which ones were using and which size of it it is. So in the next video, we're going to cover sharing with client, and I'll see you there. 40. Sharing With Client: Now we need to share our work with the client for the real review before we send them the final files. So how you can do that is you can jump into a prototype tab. You can click on the first screen, and in our case, this is our first screen because, as you can see, all of these arrows go from it and I can click, then share. And as you can see, you can invite toe. Add it so you can invite other designers toe. Edit this file while you still keep the original file share for review, which you're going to select, which is you can share for your clients to review. You can share for development, which is basically this same thing, but with a lot of technical details. And their developers can see different spacings sizes for the funds. Different colors, margins, beddings and so on. So all of that is for them. You can manage link so all the links you shared and this is important. If you are on a free, they'll be exit plan because you can have just one share for review and one share for development link, and finally you can click right here to record the video. If you want to show a tour, clients how your prototype and your design is going to look like once coded and you can then send them that video if they cannot access this prototype for some reason. But as I said, we're going to click share for review and then you can change some more things. So anyone with Lincoln View or only invited people can view if you select the 2nd 1 you have toe, enter email addresses off the people. You want to see this prototype. If not anyone with the link can view this prototype. You can call it different way like if you want to, so if I zoom in a little bit closer, you can see we have a good, honest boutique hotel. So let's start being that because it's a lot nicer when you have the name off your clients project right here. Because later on, you're going to see in a minute when they open that project, they're going to be able to see how that looks like and the name off that project. Next. We have allow comments so you can allow people to comment on your design, and you want that If you want to receive feedback from your client, show Hot Spot hints, which will show to reclines where they need to click so that the transitions can happen. Show navigation controls, which are controls at the bottom of the screen. Some around here. And that's important. And I like to keep that because sometimes client clients get confused as to where should they click? Because they are lost in the process. We have open in full screen mode, which I don't recommend, because that way these navigation controls will hide and you can show in full screen later on in second internment interactions or something like that when they're already familiar with the adobe ecstasies controls and they know where they need to click. And finally, we have require passport, which is basically anyone with the passport can open. Anyone without the password cannot open and cannot see this project. So finally, when you checked and unchecked everything included the title off your project you can hit create link, and the Lin creation process will vary from various different reasons. First reason is your computer, so if you have a slow machine. It will take longer also how big the project is. So right now we only have this one screen basically with different slight variations on it , so it will be a lot faster. But just imagine who have, for example, 100 or 200 screens. It will be a lot harder for it. Generate this link and also how fast is your Internet connection speed. So keep all of those things in mind, and once it reaches 100 it will generate the link. And once it does, you will see something like this. So when you make your changes, you can use exactly the same link simply then hit update and then send them that new link and then you can left off for you. Then you can pick up where you left off the last time because it will update the latest changes to just made in Adobe X'd. But for this 1st 1 you can simply click on this link, and it will open it up in your selected Internet browser. It's Google from in my case, and as you can see, we have the project name right here at the top has explained and it creates a lot more trust between you and the client. When you pay attention to the small details like that so we can scroll down and you can see how it looks like. If this was the full screen mode than all of this would be taken by your design, you can see the navigation controls right here at the bottom. So this home icon is taking you back to home. And we have nine different screens in our case. So let me go back to the top and let's test out some of these animations that we just created in X'd. So if I click right here, you can see it takes us to the prototype one screen, which is the next screen in order, and it shows all of these other information. If I click right here, it will take us back to the original screen. This is the prototype to you can see and we can move. Want a bit down, and I can show you the other animations that we created. So for this one, for example, if a click right here, it will change toe the prototype three. You can see it right here and right here. If I click right here, it will bring us back. Let's just decide quickly. So as you can see it, jump back to here and it gives me some kind off weird wipe because it doesn't keep the position when I jump right here while it did in Adobe X'd. So I'm going to jump in and see what it is. But basically, you can see what it does. You can click right here, and it will take you to hear, but it doesn't keep the position when scrolling, and we need to fix that next time when we sent to the client. But that's it, basically, And if your client wants you to make any changes, think it's simply click on this spin. Place it somewhere around here and typing. For example, change this color to a darker one, maybe hit submit, and the next time you can click on this screen, it will take you to this comment. So, for example, if I am on the screen number, let's say six. I see a new comment. I can click on it and it will take me back to the original screen, and I can then click and locate the comments on This is it. When I hover over it, you can see that this blue color is changing, as you can see right here so that we can know that that is the comment on that particular screen. So that's it. Basically, for the sharing and the sharing works exactly the same for the developers. So if you can click back and hit share one more time, share for development, you can make the settings basically export for Web. So we have to export for websites basically, and you can choose different variations here. So for IOS or Android, but we need to export for Web once again require passports so you can create a new password right here. Include assets for Donald, and it will create PNG's as both one and two as well, a speedy F. And once again, anybody will tell Lincoln View and Onley invited people can view, so that's basically it for the sharing for the client interactions and for the commenting, and I need to fix that error, but it's basically based on the scroll position, So if I jump back right here, prototype, click right here and if I go all the way down to here and if I click right here, as you can see, it doesn't display that error inside of Adobe X'd. So right here. Everything works properly. But when you jump online and show that to the client, it shows that error. So you're going to have these box from time to time. But in those cases, you can simply hit, share and then recorded video. And then you can record the video off your prototype and then send them that video and show them how it's going. Toe look like once coded because we have keep scrolling position once we start prototyping and this is it. So preserve scroll position. But you have to choose in different elements. So if I click right here, it doesn't show up and so on. So maybe record the video in some cases is better than others. Because, as you saw, if I don't hit share, share for review and if I click this link and jumped with once again and show you how it looks like So when I jump all the way to here where the meekness is, If I click here, you can see it keeps the scrolling position so it works on exactly the same page. It works, but on other pages it doesn't work. So you have tow work with those bugs, and when you spot them, it's really a much simpler way just to record the video and then send that video to your client so that they can review it if they're annoyed with that jumping scrolling position. So it's really up to you and your client. In the next video, I'm going to show you packaging structure for assets exporting and in the video. After that, we're going toe export assets for developers, and I'll see you there. 41. Packaging Structure: let me know quickly show you the packaging structure because you have to send these files to our clients as well as to their developers, so have to create that structure in some logical way so that everybody involved can understand and use them right after you finished creating them. So I have created this Assets folder, and if I jumping inside, you have the home page folder because currently we only have home page, and you can imagine that later on, when we designed all of these other pages, we'll have all of that other folders toe a company that so when you jump inside the home page, you can have Icons folder as well as images folder. Now you can place the original eggs, defile here, or you can create separate files and put them right here. But I don't recommend it because eggs is good with dealing with a lot of elements, as you saw during our design in protecting process. So basically right here inside the Assets folder, you can create your original document and put it there. So when you jump inside the home page, you have on the separate folder for the icons as well, a separate folder for the images and reason why we did this is because we're going toe export images as either P and G's or J pegs, so it's easier for developers to use them later on in quote. And we're going toe export icons as s veggies, so it's going to be easier for them toe. Incorporate them in the cold without losing an equality. Because SVG is a Web based file format, So it's going to be basically a vector file for meant. And people looking at the website online can have a lot crisper icons with a lot more details inside rather than if you're using PNG file format for icons. So that's basically it for the file structure. As I said, we only have one page, but if you remember we talked about, we're going to create in some distant future some other pages right here below this, and we're going to send that to the client later on. When we finish it in the next video, we're going to start exporting our assets and I'll see you there 42. Exporting Assets: in this video, we're going toe export assets for developers. So to get started, let's first jumping toe our page. So what we need to do is to export this logo. So first things first. If you remember from the previous video in the Assets Folder home page, we have icons and images, so let's first export our images and then deal with icons. Look it later. So first, let's select logo hit Control E. And I'm going to use PNG used Web because that will create one X and two X size. And I'm going to hit change right here and jump inside the home page, then images and choose that folder because that's where I wanted to go because that's is it's going to display it as an image hit export, and I'm down going to move in a little bit down. We're going to deal with images later, but first things first. Let's export this hero B G hit control E B and G. Webb and one X intellects. You can use it as a J peg if you want to, but being G and J pick will work just fine. So he export same folder, then move on down. We need this image selected by using control and then click on it. Hit control E. J. Beck Hit export, Then move on. We need these three images so you can select them from here. Click on the 1st 1 you can call control, click on the 2nd 1 and then the third. Want to select all three Heat control E. And it's going to export them separately as Monix as well as two X So hit export and we can move on down. Hit this one. So control e he'd export and you can select a these two to get her So garden image and parking image hit control e he'd export. Then we need to export this one. So control e he had export. And if you remember, we included another image. But we're not going to include it at the moment because it's over right here. But if you want to, you can choose it and rename it so it's called our man niece. This image control e hit export because if they want to include it there, they can. But regularly they want. This was just an example, but let's keep it that way because this is not an image. We're going to leave it as it is, and we're going to jump in right here to the footer. We're going to export this background image and we're going to keep the logo as it is inside of the folder, because just this background color has changed. So footer, image hit control E kit export. And that's basically it for images. Control zero. To snap back into place, I'm going to open up the folder, open up the folder with our images and you can see how that looks like. So basically it exported everything at 11 x and two x And what does that mean? It exported, then in original size and two times the size. So why is that? Because it needs to accommodate the different sizes. Wants to get to a responsive design in the cold in responsive website, which basically means this image has toe work well in boat original size as well as those large sizes. So all the way down from phone all the way up to large desk stops and TVs. And I made one mistake with this photo image, so if I open it up on my other screen and drag it right here. As you can see, it's quite white because the opacity is reduced and you can bring the Obey City back to 100% exported like that, and then tell the developers later to lower down, Do you pay city? Or you can export it like this as a J pack and exported like that. But I like to export these images, which have opacity reduced as being Jeez, so you can simply delete them from here. Jump back right here. Selected Heat Control E and the set of Jay Peak. Choose BMG hit export. And now when I jump back to my folder, you can see nothing has really changed, except it's now at as a PNG and not as a J pick. So you cannot see it basically right here because it doesn't show the previous off PNG's. But it just means that it keeps the opacity as it usually waas, so not lens jumping and export our icons. But instead of exporting them from here and selecting them from here, what we're actually going to do is export them from here because we created this style guide for that purpose, and you might be noticing that I included the bottoms here as well because I forgot to include them in the previous section off the course. But you can click right here on the Eichel's and select all icons like so hit Control E and first things First, we're going to change the folder, so we're going to jump into icons, select the folder, and we're going to choose SVG for it. You can keep all the settings as you want hit export, and it's going toe export all off those SP Jeez, separately, any for jumping toe my folder. You can see that it exported all of those icons as they were, why we did this rather than going through the design and just picking juicing well, because I copied and pasted them from these exact same places to here. And I didn't change any size. I didn't change anything. Basically, I just used these icons as they were here and ordered them right here on this page. Now let's export these buttons, and of course, you can export the bottoms as images and what you can do with the buttons you can select them hit control e Change the folder because they will go into images on the home page. Images Select folder, and you can export them as PNG's so hit export. And what that will do If I jump into the Images folder, it will export the buttons as they were right here so you can see the button with the text included, as well as the background shadow. But we want to do one more thing, which is include these bottoms without any text, because maybe later on, developers might want to include a different text inside using code so you can do that simply by opening them up like so and then simply hiding the text from them like this. Then you can select all three once again hit control E and export them as being G's. It'll rip replaced them in the original folder, but you can change the names later, or you can jump into folder right now and just hit text, for example, just at the text right here. Txt. Maybe like that control C and hit control the right here and simply change these names toe . Add this txt extension that you just created so that your developers know what you meant by that, So they will know. Okay, these buttons contained texting site and these other buttons don't. So they will be able to use basically which are buttons they want. And you did your job correctly anyways. So once again, you can select all of them hit control, e hit export. And because you change the names, it will create new ones And don't replace the old ones. And one final thing that's left for us to select an export are all of these extensions. So what we need is rooms. We need the flags. So let's go inside. Include these drop towns and only thing that we want toe export are these backgrounds. And we want to export them as images s PNG images. So he had control e PNG images export. We also want to export this background hit right here hit control e exported and we want toe export these circles as well. But because we included basically exactly the same circle as it was here, simply hit control e and it will export this 1st 1 and then later on they can create additional colors. What? We also want toe export is Discworld. But let me first close all of these other folders. So locate the quote. Hit control, E S P and G hit export, and we can go all the way down and see if we missed something. We missed these background buttons so he had control e hit exports. And finally, we are getting to this section and we need to export all of this other information. So locator subscribe form. You can export it like this if you want to, but for the booking form, I'm not going toe export these inputs because inputs are going to be included inside of the coat because that's the part of basic form. I just want to export these backgrounds for the drop towns so you can locate the room drop down, opening up rooms dropped on BG heat control e exported, and because we have it up there at the top, we want to rename it right here. So rooms drop down BG. But maybe call it form because it's inside of the form hit control E and then exported S P and G. You can hide it, locate, checking calendar, and you can export the calendar background like this heat export? No, the same for the check out so located here. And it should be checked out like this. Kid control e it export. Hide it and finally, guests drop down. So we're going toe. Export it from here. Hit export And that's basically it for the exporting process and you can run through. And that's why it's so beautiful. Toe work inside Adobe Easy because if you meet a mistake, you can then easily jump back and locate the area where you made that mistake. You can fix it, you can come back and you can make those changes as you move along. So that's basically it for the exporting process. Let me quickly close all of this down. And in the next video, I'm going to show you how you can package all of those files that you just exported and how you can deliver them to client without wasting too much off your memory space and providing them with easily shareable files. Because you will mostly send these files to your clients and then they will forward them, tow their developers. So it's really nice to have easy and shareable small file that everybody can access really quickly without any possible. So I see you there 43. Delivering To Client: And now finally, it's time to deliver those files that you created to your clients, and how you can do that easily is you can jump into your folder once again check if everything is organized, as we talked about in the previous videos. Just make sure you have all of these files organized. Make sure you include the original Adobe is defiled right here, and what you can do is right. Click on your file Goto Vince if I'm using it and you can use any other zip extension that you might have in click at Toe assets and one Death Will Do is create a zip file, which is easily shareable. It's small in size, and it can work on both Mac and PC, so clients can access it really easily. And what's nice about it is if I jumped and right here you can see it didn't reduce any noticeable size. So it went from 17 94 to 17 52 in mags. But just imagine that you created the file, which is, for example, 100 megabytes in size and you want toe reduce it. Using this method, it will be somewhere around 10 megabytes so it's a lot easier to share a 10 megabyte file. Also, when you do a method like this, you're on Lee sharing this zip file with your clients and not separate folders or separate files and send each of them separately. So that's really important, because later on, client can easily share Onley this one zip file with their developers, and the process can continue naturally, and it will be really easy for them later on to communicate. And if they need any changes, they can then zip the files back to you. You can make those changes and then send them the same zip file back. So that's basically it you can share it were email you can share it were Dropbox. You can upload it and send them the link. It's really up to you. But I found this over the many years to be the easiest way to share the files with your clients because there are some platforms online that you can pay in use, but you have tow upload, separate files, and it's really hustle. This is extremely easy way to share the files with everybody and for everybody to be on the same track, so that's basically it for the entire process. I hope you got some value out of it. And I hope you really understood how easy it is to work on the websites in Adobe X. D. You just have to follow some basic rules and not to get lost in the process because process can be really tedious sometimes. And if a jump back right here to the assets panel, you can see right here. So we have these many colors right now, but in the future we might delete some of them. We have these character styles. We might add more. We might remove some. And finally we have only three components. But as we started getting more and more pages, we're going to include more and more components. So just imagine over the course off the project, thinking maybe 3 to 6 months, you might be ending up with 200 components. You might be ending up with 500 pages and something like that. So working on this methodology is really important to keep your projects organized and to keep everybody on the same track because, as you can see, how many screens we have for just the home page alone inside of the prototype moat. Just imagine how many screens there will be once you start adding more pages. So rampages additional about us. Page is maybe separate booking page and so on. So it's really important to follow some kind of methodology. And in this course I presented my own methodology, which I found work over the many years and many clients are had in the past. So it's really easy, then, to streamline your projects and your workflow using some kind of methodology. So really hope you enjoyed discourse. I really hope you got some value out of it, and I really hope you're going toe. Apply the knowledge that you gain from it on your future projects. And I really wish you best of luck in all your future projects and endeavors. And you can download all of these project files inside off the course description, and you can use them free of charge in any of your future projects. You can change thes ones, and you can use this as a template if you want to. You can copy and paste the elements from the project that we just created in this course, and you can use it for both off your personal and commercial clients because you have my permission. And you can, of course, use these icons that you see and images. But I'm going to create a separate video explaining about links and resource is and where you can download all the links and resource is, I used to create this course. 44. Conclusion: congratulations. You reach the end of this course. I really hope you enjoyed it. And most important of all, I really hope you got some value. Elevate. I really hope you pick up some tips and tricks about the website design. And I really, really hope that you can apply some of these tips and techniques into your designs and into your future work. In this final video of the course, I just wanted to cover some basics and what we went over. So if we zoom in a little bit closer so you can see we get the client logo. So just a basic logo, which they are going to change later on. Then we get this design brief and you're going to be able to use this design brief as a template for all your future projects. And you can use that file. It's in the folder, and from that design brief and all the information that the client gave us, we went on and created some basic mood board. We explored with some basic colors and we explored with some basic text and basically just surrounded ourselves with the team off this website. Then after that, we went on to create some basic drawing off our wire frames and structuring this website as a proper landing page for conversions because that's the main point from the design brief that the client gave us. Then we went on and created this wire frame using this drawing. So we created this beautiful elements and replace them on the beach. And finally we went on to create a design and style guide in the design. We included different shadows, different icons, different images and replaced them in some nice order, using exactly the same spacing so that we have this nice white space between them. And finally, when we finished, we used all of these elements to create a style guide, which is going to be useful both for us later on. If we design all of these other pages for clients because they can simply glance and see all of the different colors, fonts and so on and finally fault developers because they are going to be able to use all of these different elements from our style guide into their development. And finally, last but not least, we created are fully clickable prototype, which we then shared with the clients to receive feedback, and we showed them how the potential, how the website is potentially going to look like once it's coded and they're able to click on various different points and see what we envisioned for this website. So that's it for this project. I really hope you enjoyed it. I really hope you got some value out of it and picked up some tips and techniques. Encourage you tow watch links and resource is video, because in it I will show you where you can download all of the different links. And resource is I used for this class as well as where you can dollars some additional information if you want to further learn more about highly converting landing pages. And some really valuable resource is about that. I'm going to give you links for different image websites where you can download free images and use them in your projects, both personal and commercial. I'm going to give you only where you can download some basic icons as well as doll Oh, the phone's which we were using in this class. So that's it. I hope you enjoyed it. And until next time, take care 45. Links And Resources: for the last video in this course, I want to say thank you for enrolling. And once again, I really hope you got some value out of it. And in this one, I want to explain to read me pdf file and how you can use it. So here are all the links which are mentioned in the course, and all the resource is which are mentioned in the course as well. So this first tool wings are for the free phones which are Google funds, and they are used in this project. And if you want to use the same phones I did, I recommend you download and use them because the project won't work otherwise. Next up, we have free images. So both from unspool ash as well, a speck, Subait and combined, they have something like three million images which you can use for both personal and commercial projects. Below that, we have icons which are from material that I O which are basically Google made icons which are again free to use for both personal and commercial projects. And finally, if you want to learn more about high committing landing pages, harsher structure, some certain elements onto your page. You can learn more about it on u Bahns dot com Block as well as from this YouTube channel, which is from a great guy explaining all of this into detail. I wish you help learning. And finally, if you have any questions about this course or any of my other courses, you can reach out to me at this email address right here or through the course page. And I'll be gladly answering any of your questions, which you might have. So thank you once again of issue happy learning and have a good one take care. 46. 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 47. 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.