Adobe XD Masterclass : UI Design | Joseph Adam | Skillshare

Adobe XD Masterclass : UI Design

Joseph Adam, Graphic Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
23 Lessons (2h 26m)
    • 1. introduction

      0:48
    • 2. Create New Project

      3:07
    • 3. Tools Part 1

      6:37
    • 4. Tools Part 2

      6:07
    • 5. Layers

      3:32
    • 6. Assets

      5:28
    • 7. Repeat Grid

      2:50
    • 8. gradient color

      2:43
    • 9. Add images

      3:32
    • 10. Add Colors

      2:38
    • 11. Add Icons

      4:19
    • 12. App Design Part 1

      12:39
    • 13. App Design Part 2

      12:18
    • 14. App Design Part 3

      9:06
    • 15. App Design Part 4

      6:17
    • 16. App Design Part 5

      10:24
    • 17. App Design Part 6

      8:28
    • 18. Prototype

      7:41
    • 19. Web Interface Design Part 1

      12:04
    • 20. Web Interface Design Part 2

      5:43
    • 21. Web Interface Design Part 3

      7:26
    • 22. Web Interface Design Part 4

      5:34
    • 23. Web Interface Design Part 5

      6:22

About This Class

The Adobe XD professional course is for designers and programmers to teach you how to design websites interfaces and apps in a smooth and easy way. The course contains an explanation of all the software`s details and all its tools that you can`t find in software`s like Photoshop or Illustrator. In short the Adobe XD software is considered the most powerful software to design websites and apps as it contains a set of cool features that saves you a lot of time and effort.

In the course we will work on two examples the first one is a full app with six pages and the second one is a car selling websites interface. When you complete the course you will be able to create any design you want whether it’s a website or an app or any web design using what you learned in the course.

As for programmers when you will complete the course you will be able to execute your own designs in a professional way without retaining a designer services as the software allows you to create the designs you need in a faster easier and uncomplicated way.

Transcripts

1. introduction : Hello and welcome to the Don't be 60 full course. In this course, you will learn all about the software's tools and how to use them to create ads and Web sites. Interfaces to the examples that we were gone in discourse as we will design professional on multi pages at and the World Sites interface you may have tried to create website designs on other software is like for the Shop for Illustrator. But be sure that the adobe expert is a different thing entirely again. See that after you use it, you will make it remain software to design your work interfaces because it has so many cool features that saves you a lot of time and effort, like the repeat great feature that enables you to duplicate chase in a matter of seconds. And at Victor's that works. Then we have the assets menu on a lot more cool tools. Short scores will set you on the start of a new journey in Web design 2. Create New Project: Hello, everyone. And welcome to the Adobe Experience Design Full course. I would start this course by showing you how to open a new project with any settings he wants. This is the software's first interface. And if you want to open a new project you have here for sizes that you can choose from, you have the phone size, the iPad size or the tablet size, the computer size and the custom size. You can click it, select different phone sizes. As you know, phone have different sizes, and this option let you choose the exact size you wants by selecting the exact phone you have after you select the phone you could acute to open your new page like this. Never go back to the interface. Same thing here. You select your tablet size in here as well. You select one of these three sizes, then we have the custom size to select any size you want. If you already have a project and you want to open it, you click here on your computer. On locates death project. If you are using the software for the first time, you won't have any projects to open, but you will have it later after you create your projects and save them because you will go back for adjustments or to continue your work. We have this list in here. We start with the Adams. In here, you will find multiple Adams that you can add to project and use them. You can select any ad only once in here. We have you. I gets. And these are some ready to go kids that you can download from the software's website. Select anyone you like and click on download. I already have this one that loaded. So I just click on open. We wait a little bit, and here it is. You can start get in it and working on it. Here we go. As you see, we have here a lot of designs that you can choose from. Check them out and select the ones you like. Just click on download and you can download and added to your source. So this is how you can open a new project. And that's it for this video. Thanks for watching. And I'll see you in the next video to check the tools off the software 3. Tools Part 1: Hello, everyone. And welcome to this video. In this video, I will explain to you the software's tools. Now I opened this project with these settings. This is just an example. You can select any setting you want. You zoom in a little bit perfect. On the left side, we have the tools bar, same as any other adobe software. And in the right side we have the properties window and in the middle, of course we have the workspace. First we have the selection tool, and drawing to you can select and move any shape or object you have in the workspace. The second tool there is the rectangle tool, and with this sole, you can drove shapes like this one. And you can paint shapes from here like this. And as I said before, using the selection tool, you can more shapes like this. As I said before, the rectangle tool is a very important tool that you will need to create shapes with. As you know, all the apps and websites consists of shapes. So the rectangle told is a vital tool shapes for example, like this one here we painted with this color. As you see we have you this shape and you can use it as a menu for your app or website. And from here you can align the shapes like this, begins aligned the shape to the right or left because it's occupying the whole space. So I will adjust it like this and just its size like this. And from here you can align shape to the left and right and center like this. From here, you can adjust the wits and the height of the shapes, and you can adjust the position of the ship from here, although it's better to do that manually. Using the selection toe from here, you can rotate the shapes in here. We have the shapes capacity. From here, you continue the ship's color. Sorry, and it's go back from here. You at the border or a frame to the shape, and you can adjust the border sides from here. You can increase it or decrease it. It depends on your project. From here, you can make the border indexes, and from here you just to get between the dishes between each dish. In here we have some more border auctions, but the race back to zero in here, in here as well. And from here, you can edit the border, edges round edges, simple edges. We put the shape here, and if you want to make around edges for your shape, just click on these dots and pull toward the inside like this. I just shape size like this, but it here And as I said, you can make this shape it just around it like this, just clicked and pulled toward the inside. From here, you can add shadow to the shape, and you can adjust its position from here. Pull it down a little bit like this, and it's the best. See from here the shadows, capacity, it's. And as I said from here, you can adjust its position. So this is how to adjust shapes. And in here we have the left stool, to which you can draw circles. If you want to draw symmetrical circle, you hold ships button while you are going to draw symmetrical circles and you can adjust the circle same as direct ago. All what we saw before apply to the circle shape as well. Now, if you want to duplicate the shape, you select it and hold the old button, then drag like this to duplicate the shape. I just sit in circle color like this. Now I put the circle here and I want to merge the two shapes together. All I do is I select them like this and I click here and here we are. Two shapes are merged together and now are one ship. And if I want to cut the seven shape from the 1st 1 I click here and here we are. And I click it if I want to leave on Lee, the part where the two shapes interfere with each other that in here this option is the opposite of the last one because it cuts the part where the two shapes interfere with each other. So we covered the selection tool, the rectangle and the lips, too, and we saw how to edit and adjust shapes. I will see you in the next video to talk about the rest of the tools in the tool bar. 4. Tools Part 2: Hello, everyone, and welcome to this video in the former video. It talks about the first Street falls in the Tools bar, and now we continue with the tools we have here the line tool. This tool allows us to draw lines. Just click and drag to dough and using the selection tool, we can adjust the lines using the selection tool and to these two dots in each end, and you can adjust the position, the size and everything about the line. From here, you can change the light color and its size, and you can make its consist of dishes. And it is the space between the dishes from you. So this is the line tool, and you can adjust the lines busty from here as well. You move to the next all the pencil, and through it you can throw any shape you want. The rectangle tool allows us to draw geometrical shapes on Lee, but with the mental, you can throw free shapes and geometrical tools as well. Sorry free shapes and geometrical shapes as well as you see. We told this shape like this you can change the ship's color from here, as they said you control free shapes and geometrical shapes with the mental like you. Would a rectangle, for example, even draw a rectangle as well? Any geometrical shape, you want to control it, use in pencil or direct angles. And if you want to draw a curvy line, only have to do is to draw the line like this, then click and drag up or down like this to make it a curvy lines, and you can just the line as much as you want. So this is the mental, and here we have the text tool, and with that, you can type whatever he wants. Example. I type Adobe X'd and you select. You can change the font from here. After you select the text. It's like the difference you want. And in here we have some other text options. You can just text a regular both or anything, and in here we have the text size. You can just text size as much as you want, and from here you can align the text, you select the text, then go here and align it like this to dry to the life center as much as you want. And you can do this manually as well. From here, you're gonna line text also using the selections. Or and in here you can edit this space between letters. In here we have sex, a busty. And if you want to write a paragraph, you drop boxes in the text tool. They need a line of text and you slept the size. Then you start typing whatever he wants. Next we have the character cells. And what did you can add new pages to the project? As you see, we have this page in the workspace. I was amount so that you can take a look. Here it is. And selecting the character cells, we can add new pages just like the settings of the page. And here just click and it will be ended like this. And this is useful when you are created an app that uses multiple pages. And finally we have zoom tool, and with it you can zoom in and ebbs. And you can do that from here as well. Or using the keyboard shortcuts control at the plus button to zoom in and control was the minus button to zoom out. So what? This school we have completed tools bar and we have reached the end of this video. Thanks for watching. And I'll see you in the next video. 5. Layers: Hello, everyone. And welcome to this video. In this video we will talk about the layers. If you ever using adobe software, you will be familiar with the layers. And if you have no idea about the layers that this video is for you I will start withdrawing shape in here like this. I painted in blue. Now I drove another shape on top off the 1st 1 and I paint it in Dr. Now, as you see, we can Onley see the second and the bigger shape. And that is because we have two layers on top of each other. If I want to see the smaller shape, I go here to show the layers menu. And as you see, we have here two layers, one for each shape now to removed to reveal smaller shape. I need to pull its layer up here like this. And here we are. Now we can see the smaller ship and you could put it whenever whatever your wants use in this election toe. So these are the layers and the shape you want to appear. You put its layer on top. He I'll show you another example. I don't This rectangle and I paint it red. Yes, I just It's edges. Make it rounded. I slept the rectangle, The nightly control plus See that control plus V two duplicated. Then I changed its color like this. Now we have two rectangles in here. I go to the edge of the rectangle. I hold the shift button. Then I just decides of this one like this and I center it like this. Linus from here Central, probably like this. Now If I want to hide this shape apple, it's layer down like this. And if I pull it up, it will abuse again. If I want to hide this shape, I just hide it and not deleted. All I do is I click here and it's gone right here. Hide and it's gone. It's just hidden, not the leader, and I can bring it back like this. Now if I want to freeze shape, I click here to look. It's layer and it will not move no matter what you do. As you see, I could move this shape, but not this one, because it's locked. It won't move until my own look. It's layer like this, and now I can apply my changes to it. And this thing, this feature applies to any layer. So that's all there is about the layers. Thanks for watching. And I'll see you in the next video. 6. Assets: Hello, everyone. And welcome to this video. In this video, we will talk about the assets menu. Now we slept Sex tool and I type for example, Joseph Adam. I selected control blister agents like the whole text and I painted in black. Then I just text size a little bit, but 50 for example. And he is in the selection tool. Align it like this. Perfect. Now I will type another sex in here, for example. Outside they'll be X'd and I'll make it in a smaller size like this. I just its size, for example. 15. Perfect and using the selection tool. Align it like this. Now, if I want to change the size of discs districts to make it like this one, I have to go all the way to sites option to change it, and then we'll take some time. Now remember, we have only one sex here, But when you will start working on your projects, he will have a lot of text on other stuff to change their size. So that will take a lot of time. Now. We slept text and we go here to the character styles and I click on the plus sign. Now old characteristics of this text are safe in here. Now it's like this text. Then I click you and here we are. All the characteristics off this text are applied to this one. For now, it's just the size but weaken copy and paste a lot off other features. Now I delete this assets. Let's collect in the lead and I changed this text fault. Adjusted to this point like this, for example, this is just an example. Now it's like this takes and I click on the plus side on the character Siles. Now it's like the sticks and I click here and here are this text took size and the phone's off the other one. So all the characteristics of this text are applied to this one. So you change your text without any for effort, and it saves you a lot of time. No, I just decisive districts. For example, 30 or maybe 35. Perfect. That's that's better. And I would change this text sculler painted in blue like this. Now go here to the color menu and click on the plus side. Then I select this text. I click here and here we are gained the same color as the other text. Now I don't This shape any shape you want. This is just an example. Small rectangle Paint it in this color. Perfect. And he was in the selection tool just inside like this. I just did a little bit like this is amount a little bit perfect. I change its color. No, I slipped this shape the night click on the plus sign in the simple section. Now I go here and I click and drag like this. And here we are. We have duplicated this shape In an instance this is just a small shape or symbol But you can duplicate any shapes you have in here. So imagine how much time it will save you. You could duplicate anything you want with a single click. Just click and drag And here it is And you will see me use this tool further intercourse When I am designing the ebb and the website examples So that's it for this video. Thanks for watching. And I'll see you in the next video 7. Repeat Grid: Hello, everyone. And welcome to this video. In this video, we talked about the repeat Great future. This feature allows you to save a lot of time instead of doing the same work again and again. It really does save a lot of time, and I will show you a practical example. First, I drove a wreck single in here. I make it rounded like this. Then I will add this image to direct and go. Now let's say that this is a menu and we want to duplicate it for six or eight times or even more to duplicate this mini Oh, you would have to select it, then copy and go back and face it for so many times. But with the repeat grade, you can save a lot of time and work. All we have to do is to collect on repeat grid and you get these two symbols here. I drag it to the right like this, and here we are, the menu or the image in this case is duplicated. In an instance, you can adjust the space between the shapes like this, and you could duplicate the shape several times in an instance, like this just click and drag like this, and here we are. We filled the whole space with the image. You could duplicate your menus and images without making any efforts and in the shortest amount of time possible. And if I want to change the images in every single shape, all I have to do is to select all the shapes like this that I locate the images I want to add to the shapes. I already have these image ready. So I slept all the images and I dragged them to the first shaped like this. And here we are. Software at all images shapes automatically each image to its own box or its own rectangle . In this case, so the repeat agreed, allows you to duplicate anything in a matter of seconds, saving you a lot of time and efforts. It's a really, really important feature. So that's it for this video. Thanks for watching. And I'll see you in the next video 8. gradient color: Hello, everyone. And welcome to this video. In this video we will talk about color ingredients. I start by growing a wreck single in here and I paint it in this color you can use any color you want is just an example. And then we will see how to make this single color ingredients. Now click here and we go to solid color and we get this list. And as you see, we have here lining ingredients and radio ingredients. So we start with the line ingredients, we select it and here we are. We can select the first color from here this click on the start and select any color you want. Then click on this second dot and select any other color towards you can adjust the color like this. It it it's direction and even you can reverse it like this. It's totally up to you. You can add another dot in here to add another color like this. You can add as many shots as you want in here. It has many colors. No moved to see the radio radiant. We selected like this. I need to delete these dots you use the same way to change the colors in here just like the dots, and select the color you want. Select the dot and select the color he wants. It's very easy and simple, and you can adjust the colors like this and, of course, add new colors like this just at any 30 wants. And each dot is a newcomer. So this is how you can make radiant colors. Thanks for watching Enel CEO in the next video. 9. Add images: Hello, everyone, and welcome to this video, and this video will see how to add images to the software. First, we need to select the space where we will add the image. So I would go wreck sandal in here. I will paint it in any color so that you can see it, for example, this one. Now we look at the image I need to just size of this window. Here's the image. So I selected and I drag it here like this. And here we are. The images added to the software. Zoom in a little bit. I can double click on the image to adjust it like this. As you see, the software automatically fit the image inside the rectangle or the space I set for the image. So it's adjusted. Just double click, and you can adjust it like this and you can't draw any shape you want in here. For example, I would go another rectangle, paint it in this color, and you can keep creating your project like this, and we will see how to create four projects further in the course. Now, if I want to add a background to EP, you can add it, using the same way we used to add the image just like the image. Click and drag it to the workspace. Or you can go here and import the background like this. I have this image I will used as the background. So the conflict imported it is, as you see the images too large. So I hold control plus minus button to zoom out. Then I hold the shift button and I just decides of the image like this. Perfect his women. And here we are, background Israeli. I can double click on its adjusted like this, same as the image before. If you want to make the background blurry, you don't direct angle and covered the whole background like this. Then you select this option background blur, and you can adjust the blur like this, the amount of blurred from here. You can select any amount he wants, and there will depend on your project. You can adjust the blur as it said, and the brightness from here as well. We have the amount of blood and we have the brightness in here. So this is how you can add images and backgrounds with software. Thanks for watching, and I'll see you in the next video 10. Add Colors: Hello, everyone. And welcome to this video. In this video, I'll show you how to download and add colors to the software. We have this website right here. It's called Color Hex. It gives us multiple color planets that we can download. And there are many sites like it that you can google and use. We select any color palettes we want. For example, this one click on it didn't writes. Click and save image as or we can click on download. We wait for it to be downloaded. Then we go to its folder. Here it is. We copy and paste it in our project in the projects file, it is your basis here we go back to the software. Now I have this circle and I want to change its color because ABS usually does not use more than three or four colors and you won't need any other colors. Now we just need to add the color palettes and use its colors. And to do that, it's very simple. Go here, click here. Then I go to imports. Then I locate the pallets. This is the way that safe I click on import. It is no this is the policy. I need to adjust its size and put it right here. Perfect. Now go here. And I select the big color from screen tool the nice like this color. And he did this now to save it. I click here now it will be there permanently, and I can use it whenever I want. I use the same way to slept and save all the other colors. This one here it is that promoted the other one until we select all the colors. I don't another shape, for example, this rectangle and I can paint it with these colors directly like this. And if you want to delete an Ecologist, click and drag it here like this and it will be removed. And of course you can replace it using the way we saw in the video. So this is how to download and add colors and so forth. That's watching. And I'll see you in the next video 11. Add Icons: Hello, everyone. And welcome to this video. In this video, I'll show you how to download icons and add them to your software. The first websites we have here is called flats. I can't come and it has to section the free and premium. The free section has a lot of great icons that you can use in case you don't want to spend your money on Icahn's. You just click on the search box and you type whatever you want. For example, we need social media icon. So we type social media. And here we are. We get a lot of icons. You can download any icon he wants, but the ones with star our premium and you need to pay for them. But the ones without the stars are free, and you can download them whenever you want. If you like a certain icon just selected like this, you go here, it's let its size. There are different sizes here. You can select any says he wants dependent on your project. When I'm gonna use in icons my projects, I will be using to 16 pixel size just to let you know. And of course, you can use any size you want. But for me I will be using 16% besides pixel size. And then you can select the type we have here, PNG or SBT. I always use the PNG type, so select the PNG and click on free double. And here we are, the icon is that loaded to my computer. One more thing I want to point out is that before you download any free icon, always make sure to read the websites turns over the attribution guide so that there is no copyrights problems, whether it's this website or any other one. You need to know if the website allows you to use the icons freely or if there are any conditions in terms before using the icons. Now we go to software. This is the After that I would be working on in this course. Now go here and I go to import and I need to locate the icon that I just downloaded. I don't know. What did I downloaded so barely for sitting Okay, I will move it to this folder. No, go here. And here it is a selective click on imports and here it is. The icon is added to the project and the software and you can adjust it like this. I put it whatever you want. Now we go to the second website I confined dot com, same thing as the first website. You have the search box type whatever you want, whatever you are looking for. For example, I will type shot and here way, have some shot icons and, of course, even select premium free or anything you slept the icon you like. Then you slept its type. As I said, always download the PNG because PNG's without a background. So we click download and here we are. The icon is downloaded. Now I just need to locate it and added to the software like I did with the first icon in here. You select the sites off the icons. It's not like the first website tell you are downloaded. Then you get to truth type started size. You can select the sites from here in this website, and from here you can select the background color. I prefer the flood icon software because it's easier to use, and it has a lot of icons that you can use. It's a massive database of icons that you can select any of them. But I opted to show you to websites in case you don't find. And I got in this website, you will find it in the other. So this is how to download icons and have to add them to software. That's it for this video. Thanks, fortune. And I'll see you in the next video. 12. App Design Part 1: Hello, everyone. And welcome to this video after we finished talking about all the tools and settings of the software. Now we will move to work on ABS and websites. And in this video we would stop working on our first AB design. We have here in app, often online learning platform. And this is a practical example. And in it you will see how to create EPS and techniques and tools that we use to those up So you can learn and apply what you see here to create your own ab designs. No, we looked this speech. We go to the project based. This is the size I chose for the project. You can select it or select any size you want and here we have the colors that we will use in this design. I already added them to the essence menu, using the way that I showed you before. But if you missed it, I will show you a quick way to add colors to the SS menu. It's like the lab stool and I know circle in here. I paint it in red, for example. I know it's like the struggle like this. Then I go here and click this plus sign and here we are. The colors are added to the essence medium. Now remove these two colors because I won't need them leaving only the two original colors . No, we start by designing the interface. All the images used in this will be in this design will be included with the course so you can download and use them. No, I select this image and I added here like this, I just its size. Perfect. You can use this image or using the images using this way or the other way, I explained. You don't shape in here like this. You don't move the border's and bases with any color. Then go. Here locates the image you want to use like this, just this window and drag it to the shaped like this. And here are the image is added to the software. And he was in the selection tool. Double click on the image and adjusted like this if you want. It's very easy and simple. Perfect. Now it's like the pencil and I drove this shape in here, but the first start in here another in here. I clicked and dragged to make this go to the line. Then I put enough dot in here just his position. A little bit easier keyboard. Perfect. Now, here, here. And I connect the less one with the 1st 1 like this. I need to close the shape. Then I activate the fell and I remove the border. I paint the shape in this color perfect. And I select the pencil to draw another shaped like this. But the first thought in here. Then the 2nd 1 in here, I clicked and dragged him in a curvy little line like this. Then I keep going and again I close to shape like this. Then I just the curvy line I did before Like this, I activate the fell remove the border and I pain second shape with the second color in the SS menu, which is the blue one. Now it's like this shape and I decrease its the best day like this. You can select the same settings I use or you going to use a different capacity. I will just this shape a little bit. You can just it like I do, or in a different way, or even living as we did in the first time. It depends on you. We don't have to follow the same exact steps or moves I make just a little bit more perfect . Now I live it like this. And now I would draw a rectangle in the bottom so I select the rectangle to and I don't direct angle in here painted in this color the nice like the mental. And I drove shape in here like this. But the first started here. Sorry. Put it in here. Set in the one in here. Click and drag to make a good line like this. Perfect. Didn't make another dot in here. And I'm a correct angle in here. Then I just shaved like this. Perfect. I'm off the border and I activate the Phil and I paint it in green like this. I just this shape a little bit using the mental. It's like the layers select the rectangle layer. Then I select the selection tool and I just selection the rectangle like this Sony click of this stuff. And I'm just a shaped like this. Perfect. Now I had the text. I use the text from this website Lauren epsom dot com It is so I copied it. Six I selected like this is this short text, right? Click copy then go back to the software. I select the text tool and I dont rectangle in here. Then I based the text inside of it by control plus V to base it, then control plus a to select old text. Then I just its size. From here you can use the same size I'm using or use a different size. It's totally up to you as this in before now online. It's in the middle like this. Select it again. Then I paint it in white like this. Then I just its size like this. I just decided off the rectangle. Hence I just decides off the text. Now I line it like this. Perfect. I don't rectangle in here like this. And I click and drag toward the inside like this to make its edge is rounded. Perfect. I learned into the middle like this and I Linus money like this. Perfect. No, I type. Start learning in here first. I need to painted sex in black so that we can see the text. Then I type start learning in here. Sorry, text wasn't in black. I need to set the text in black because it didn't work before. Here it is so that we can see the text. Perfect. Now I just text size and I put it in the middle. I centered like this. Perfect. No, I slept dealer stool and I hold the shift button while I draw a circle in here to make sure it's symmetrical. Just a little bit. Perfect. I'm off the border and I put it in here. Zoom in a little bit. I need to just its size a little bit more perfect. Now I imports an icon and I will put it inside the circle. So I go here, go to import. It's like the Facebook gone import it is. And as I said, I will send it right here. Then I select shaped like this. I select them boat From here. It's like the Ellipse one and Facebook layer controlled, and I select boat shapes. Then I select drippy great feature and I duplicate B I sounds like this. No, I sent her the late D icons like this. Now I go to this folder a select all these icons, and I dragged him here. And here we are. Each icon is added to its own circle. Twitter icon, YouTube icon Facebook icons, etcetera. No, I slept direct angle tool A zoom in a little bit. I don't box in here. I make it grounded like this. Click and I direct or d inside, but not too much. Just a little bit. Perfect. I painted in this color. Then I drove small rectangle in here I move the border and using the selection tool, I hold the ultimatum and I dragged rectangle to duplicate it like this. I do the same thing again and I just space. I just space between each rectangle like this. Perfect. I just need to adjust the space a little bit more now it looks perfect. It's the same space between each rectangle. I'm off the border. And he, uh this is our interface. We can make some shade over this button like this was selected and we activate the shadow from here. Then we just its position like this. Here it is chosen here. So that's it for this video. Thanks for watching. And I'll see you in the next to you to continue working on our abs design 13. App Design Part 2: Hello, everyone, and welcome to this video in the former video. We started working on our project and we have finished the first page, which is the interface. So in this video we will work on the second page. But before we do that, we need to save this menu icon in here as we will need it in the second page. It it is I can drag it out off the page because when I click and drag, I will get this image instead. So I need to look the image layer. I go here to the latest menu. It is the image selected. This looks, it's layer and I like it like this. I love it from here now. We slipped the menu icon and we added to the assets menu in the symbols section Click you, and now we can get it anytime we want. Now it's like the sport to add a second base to start working on it with the same settings and size as the first page. First read the menu icon in here, click on its and we drag it like this and we put it on the top left corner. Then we don't small rectangle in here It is assuming a little bit. So did I. Couldn't walk properly. Now remove the border. Then I activate the film and I just the color like this I just color a little bit. I make it a little bit darker. Sony zoom in a little bit more so that I can select a properly. Here it is I just the edges like this cause it was a little bit rounded. Now I need to make the age is normal Straight perfect. I just direct angle, color, lead with assisted I might get darker that I zoom out now I don't another rectangle. I hold this I select this rectangle and I hold the ultimatum from the keyboard. Then I drag it to duplicate it like this I adjusted scholar put it here and then control plus D to duplicated again. And I put it in here just its size. And I just color like this I make it to green. Perfect. In here we will have the categories menu and in here we Woodrow the go back I got so I drove to go back I got it's direct and like this or a narrow wherever you want to call it. Now I paint the border and white and I just its size and center it in here. Perfect. Now zoom in and I type category in here. Perfect. Now change its color toe white. I just its size a little bit. I just its position in here. Then I slept mental and I drove the down arrow in here a painted in white. Then I just its size and position. Perfect. No, he's amount. And here we are. The top part is ready now. I don't Not a rectangle in here painted in this color. And this will be the search box. So I put another white rectangle in here like this Perfect center it like this. Just this rectangle. A little bit. Perfect. Center it like this. Then I removed the border and I just color of this wrecked and go like this I make it a little bit darker. Now I add search icon in here. I will include the icon with course so that you can use it. Of course it is important and I put the icon right here on the right side. And as I said, the top part off Our base is ready now. I don't rectangle in here. I'll painted so that you can see it with any color. It is then control plus D to duplicated. That means it as well. I'm painting the rectangles solely on the purpose that you can see them. Now I just district angle size like this. Now I add an image to the first rectangle. That's up one. I have a bunch of photos in here. So I and this image to this rectangle, as I said then I paint this rectangle discover Perfect. Now, I had sex in here, so I can't be the text from the Laura Epsom websites. Here it is lips, um that come then using the textile, draw a rectangle in here, and I based a text inside of it. Then I select the whole text would control plus A and I just its size. And I aligned the text of the left like this. I just decides of the text even more perfect. I mean sex involved from here, and I just its size a little bit more. I make it a little bit degrees. It's size perfect. Now I don't rectangle in here. He's indirect. Angle to it is like this. A painted in blank remove the border and I painted in blood. Then I just It's the best seat like this. Perfect. I need to zoom in and look a bit. And now I add star Icon because this will be the ratings area. Here's the star. I put it here. Then I duplicate to start multiple times. I hold the altar button and I drag it to duplicate it. I need to make sure that it's the same space between each star like this. Perfect. Now I add another start, but it will be in white so that it gives the impression that the rating is four out of five . Perfect. Now we have five stars in here. Now I will add the like I got in here so that you can like the course and go back to which whenever you want. As we said, this is an app for well learning platform on online learning platform. Now I don't circle in here. Make sure to hold the shift button while you are going to draw symmetrical circles. I painted in this color Perfect. Now I had this heart icon. Here it is, and I will put it in the center of the circle like this, and it's just it's a little bit more. It's not perfectly and center now. It looks good, his amount perfect. Now I will fill the whole base with this window. But instead of creating the books from scratch, which will cost us a lot of time, I will use the repeat great feature as they showed you earlier. And the course. It's very easy and simple. A select box like this and I select that would be great. I just space in here between the two boxes or two to windows. Perfect. Just a little bit more Now it's perfect. Then I dragged down like this and here we are. We have six boxes or six windows in an instant, which saves us a lot of time and effort. Now I will add a different image to each window, so I select all the windows like this. Then I go here and I slick the images Have these images in this file six images. Now I select them and I dragged them to the first window like this. And here we are, each image is in its own window. So this is the final look for second page and we have reached the end of this video. Thanks. Watching See you in the next video toe. Work on the next page off our design. 14. App Design Part 3: Hello, everyone. And welcome to this video So far we completed two pages of our design. And in this video we will work on the third page. So using the art aboard tool, we add another page. Here it is. It's the same settings as the two former pages we select direct and little. And I would tow rectangle in here. This page would show the content of the course. So, as I said, we don't rectangle in here. Here it is. We remove the border and we paint direct angle in any color just so that you can see it. We just the size of directing a little bit. Perfect. Now I will add an image to direct and go. Here it is Just click and drag And here we are Perfect. I will select the lab stool and I would draw a circle in here. I hold the shift button while growing. Two drove symmetrical circle. I sent her this circle from here and I removed the border. Then I painted in discover. Then I just do your best c with circle like this Zoom in a little bit. I use the mental to drop triangle inside of the circle. It's the play button perfect. Remove the border and I activate the Phil and to paint triangle and wait. Then I center the triangle like this. My line. It's like this perfect. I just decided to circle a little bit like this. I need to align the triangle again since I changed the size of the circle. Perfect. Just a little bit anywhere. This is the play button. As I said before now I don't smaller rectangle in here. That means it's in this color. Perfect. I duplicate this rectangle bike drop plus D. Then I just its size like this and I paint it with this car. I select what's try and go in here and I duplicated again by control plus D. I pulled it here. Then I go to the layers menu and I place it's layer on top like this to show it. Zoom in a little bit and I just decided to try and go while holding the shift button to make it fit you. Perfect. Now drop triangle in here. Sorry, directing not a triangle I don't hear and I duplicated using control plus t again. Then I zoom in. I just decided to second rectangle like this and I paint it with this color in green and I remove the border from both rectangles. I will add the volume I got. Now Here it is. Here it is. Click on imports and I place it in here. Perfect. You can add many more icons in here. The next and last video icons, the fast forward icon, etcetera. I would add only the settings icon to save time, but feel free to add any other I. Kony wants in here now draw small circle in here while holding the shift button. Perfect. I remove the border, place it here then I hope the ultimate, and I drag it to duplicated. I do that again. It is. We have three circles in here and I need to adjust the space between each one. It's still not the same. It's like the last circle and I hold control. What's shift? Then I select the first several to select all three of them. Then I hold the shift button and I just their size like this. You can put them here or here, or whatever you want. Perfect. Now I will add the rest of the course videos So I draw a rectangle in here. It's like directing tool and I don't direct angle like this. Perfect. I remove the border and I painted in this color Let the great perfect I select and duplicate this triangle with control plus d Then I put it here. I need to pull its layer up here. It is perfect. Then I painted in this color Perfect. I need to add a name to this video. So I will copy the text from this website lipson dot com. Copy it And I based a text in here. Then I just its color and size could drop plus A to select the whole text Change its color like this. Then I go here to adjust its size 15 is perfect Now using the selection tool I just It's place like this I select regular from here Perfect. Now we duplicate this rectangle using the repeat great feature I selected a select repeats grid and I duplicated like this seven will be perfect. Now I draw a rectangle in the bottom of the page and I paint it in this color Perfect. I duplicate this rectangle by control pas de and I change its color. Then I place it here. I need to copy this triangle here. So I hold the altar button and I dragged down here like this. Perfect zoom in and I just its position. And here we are. The page is completed. The multimedia player on the rest of the videos in here. I just need to adjust the space between direct angles like this. It looks perfect now, and you don't have to stick with same space. You can just space however you want. As you see European great is a great feature that saves us a lot of time and efforts. So that's it for this video. Thanks for watching. And I'll see you in the next video. 15. App Design Part 4: Hello, everyone. And welcome to this video. We continue working on our APP design. I already added the next page views in the arts board tool. It's in the same settings as the former pages. No, I've been in this page with this cover and I drove a tiny circle or dot in here like this. Now it's a menu in here I just its color and size. Then using the selection tool, I place it here. Perfect. Now I draw a rectangle in here I make it round it like this I click and I drove toward the inside to make the edges of the rectangle rapid. Now it's like this rectangle that control plus D to duplicated when a duplicate an object using control plus t the replica would be placed on top off the original one and you will not notice until the drag the republic out like this. So this is the original one. And the 2nd 1? No, I just second rectangle like this. Then I painted this one with this color and I removed the border of both rectangles. Perfect. I lined this shaped like this. Sorry. Let's put it back. Perfect. Now I don't a tiny circle or a dot in here. I hold the shift about in a while, doing debt painted in this color, and I place it here. The nice selects the text tool. I typed Logan or sign up. I changed the text color first, So it appears to you painted in black. I just position of the text and its size. That's good. Take a look at the bolt. No, maybe I'll leave it at regular. That's better than I just disposition like this. Zoom in and I used a pencil to draw a rectangle in here. Sorry, I would talk triangle animals the border, and I activate the film in whites. They go here to him off the border and in here to remove or activate the film. Just a reminder. I place the triangle here denies amounts perfect. Now it's like the whole shape, and I duplicated using the repeat great feature. Six will be perfect. I just its position now. I'll change the text in each shape. It's like to shape them like like on here. Then I changed the texts in here than the book Click here. Then I change the text as they said Al. Type instructor in here, then blood in here. Then belts pass in here. Double click here again. And sports. Of course. You don't have to type the same things I type in here. You can say whatever you want that affiliates in here. Perfect. And here we are. This page is completed. So that's it for this video. Thanks for watching. And I'll see you in the next video. 16. App Design Part 5: Hello, everyone. And welcome to this video. In this video we continue working on our APP design and we start working on our next page. So using the ultimo tool, we add a new page right here. We painted page with this color. This page will be for the instructor informations. So, using the text tool I started typing on your revenue. I just the word position like this. Then I type the amount of revenues. We will take them in dollars. So, for example, $3000. 198 cents. I'll select bold in here. This revenue is random. You can say whatever he wants in here. This is just an example now, but the number in here just its position. A little bit to leave space on the top. Now add and image in here so we don't circle in here. This is the instructor profile image. I would add an image inside of the circle. I have this example image Sony. I go back and I added right here, double click to just the image. Perfect. So this is the instructor image. I just the color of the border and I just its size a little bit Perfect. Now I hold the shift button and I don't another circle in here. I pull its layer down here to make it behind the profile image. I select both of them and I sent her the image like this and I removed the border of the circle and I just its color like this. Perfect. It is. So we have a profile image and circle surrounding it Now, using direct angle tool, I draw a rectangle in here, remove the border and I just the color off the wreck Tender like this make a darker than the image than the page color. Sorry. Now I would go. I used been tool like this to go this shape no change the color of the border. I used eyedropper to copy this color to make it in this kind of like this. Then I just the sides of the border like this Perfect center it like this now control plus D to duplicate this shaped like this. Take a look at it. Here is And now I hide the top shaped like this I only it's up one and I leave the lower one now select in the mental and I drove this shaped like this and he really I'm off the border and I activate the Phil and I select line near Radiance. It's like the first color, and I based this one to it. Then the second color his dive capital again and I paint it with this gun. Then I just dig radiance of the color like this. No, I show that's shaved. The 1st 1 it is Show it anywhere. Perfect. I just greedy int a little bit like this. Perfect. Now I will add the months in Hue. What I'm doing here is just an example. You don't have to follow the exact same steps showing you. So we have January, February, March, April, May, June, July, etcetera until we reach December. Perfect. Nice. Like all the numbers slipped regular from here, I just its size a little bit perfect. And I just It's positioned like this to fit with the shape on top of it. No, I m adults in here or small circle. I hold the shift button. Then I drove the circle or the gut. Then, using the text tool, I typed the profits or anything I want in here. This is just an example. So I will type just Lauren up some in here as they said, This is just an example. Text. You will type here whatever you want and it will depends on your app. And what do you want to type in here? So I'm just a position of the text. Nice. Like the whole shape and reveal grip. Then I do prevent it like this. I just the space between the 1st 2 shapes. Perfect on group. Great first. Then I changed the color from here. A copy kind of code. The nice, Like this layer and go here. It's like the first color. And I based the kind of coat like this to make it in this color like this. Perfect. As I said before, you don't have to follow the same steps I'm doing here. You don't have to draw the exact objects I'm growing. You don't have to use the same text. I'm doing the same icons. You know what I mean? I'm just showing you how to do things and the tools to go or to create things. No, I don't Rectangle in hue painted in this color. Then using text to I drove with The grow in you type will grow in you Now I make it involved and I just its size a little bit. Then I center it like this. Perfect. And here we are. This page is completed. So this is the instructor page as you saw it. So that's it for this video. Thanks for watching. And I'll see you in the next video toward on the next page off our design. 17. App Design Part 6: Hello, everyone. And welcome to this video. This is our design so far. And in this video we will design the last page of our It will be the logon page. So we start by adding another base Using the art aboard Tool, we use the same settings as we used in the former pages. We paid the page with this color. Then it was like the text tool And we time creates a new account Using the selection tool We center the text right here. We have landed from here as well. Then we just the text size from here It landed again. Perfect. Now it's like the rectangle to we go direct angle in here. Perfect. Remove the border. We'll leave it at a white Then it was like the big color or the I've ever to. And we take this color from here and we pain direct angle with it. Resuming a little bit. Now select the rectangle toe again and we don't rectangle in here. We will make it around it. So we greet like you and we drop toward the inside to make the ages of the rectangle around it. It just it says a little bit perfect. I will duplicates the rectangle. So I selected the control plus DT duplicated. Then I would change the replica directing his color Perfect. And I just decides of district ankle like this make it look like a circle. I removed the border and he were perfect. Now at the Nikon. So I go here to import They have a Nikon in here. You know it is. I put it here in the center of the circle. This is an email icon which led the textile and we will type in here, for example We type type your human Since it's in white, I need to change the color. I put it in grey Perfect. I just its position and I put it right here in the center. Then I just the size of the text like this and I need to adjust its position again. Since I changed size double click here. Then I put three points at the end of the sentence. Perfect. Now go here to the layers menu. I looked that ground layer. It's like this wreck tango and using the repeat great, I will duplicate it multiple times. Four times it would be good and on group the grid just like the last direct and go and I just it's positioned. I lower it down a little bit. I would remove, of course, the email icon and I will delete the text and this single a paint. It's in green like this and I removed the gun from here as well. Select it and I will replace it with another. I can't have icons in this file. This folder Her place is with the user icon and I replaced this one as well. The Logan icon Perfect. So we have the email icon on top in the middle, the user icon and in the end, logging. Now, of course, I will change this Texas Well example. So I've used her name in here, for example. Password. This is just an example. Of course. Never go to district angle using the text tool and I will type sign up. I just decides with text. Perfect. Now it looks perfect. Now we are finished from the these boxes right here I select this wreck tango. Then I hold the old button on dragging them to duplicate it again. I put it here change its color to a darker one. Or maybe like this Perfect. Then I used textile and I type signing Perfect. As I said again, this is just an example. You don't have to take the same thing typing Now again, I select this rectangle I hold the ultimate in and drag it down to duplicated. I just decides this rectangle. I put it here perfect change its color toe white. Then I will add an icon to district tango. It is the Google icon. I put it here. Then I type with Google. For example, this is an option to sign in with your Google account painted six in black and I just It's positioned right here in the middle of directing. Perfect. I select it like this. Then, using repeat grid I duplicated like this I just space between the two rectangles. Perfect. Now, of course I'm gonna change the with Google sentence sign logo and I and group the great first. Then I changed the color. This rectangle let it to a darker color darker blue. Perfect. Then I changed the text and it's obvious this will be with Facebook change. It's white. Perfect. Here it is. And of course, I'm gonna change the Google local and replace it with the Facebook logo. Here it is. I have Facebook logo in this folder. So our place it like this perfect. And this is our base. It's perfect and it's completed. So, as you see, this is the final page for design, and this is the whole pages off are designed the full AB design what it is. We have six pages. The interface content page, another content based menu page instructor, revenue page and the last page, As you see. So that's it for this video. Thanks for watching. 18. Prototype: Hello, everyone. And welcome to this video. In the former video, we completed our full app design. As you see here we have our APP design. It's showing right here. It's a full AB design that we designed and in consists of six pages. And in this video I will show you have to set all your app in motion. So to do so, you go ahead to the prototype interface. It is he selected and you have all the pages off your design. You have your six pages of our design and you click here play to set your app emotion. And as you see when we do so, first base does not interact with us. We can click on the start line and bottom or anything. So to make the app contract with us only have to do is duplicate to get this blue sign right here. So, for example, we want that when we click here, we get this next page. So we dread this signed together toe late, the first page with 2nd 1 and we get this window we have here to trigger we have your tab drag voice. You can select any trickery. Want in here we have the action transition or anim overlay speech playback previous out Port, Select anyone he wants in here we have the destination. We have said it already elected to the second page in here we have slide left, Slide writes. Like that slight. It's the animation or the transition in. Here we have the easing easy out easy in is in out snap, wind up bounce, etcetera because select whatever you want in. And we have the duration, which is the duration off transition effect. Between the first page into the second page, I will leave all the settings at their defaults. Then when I go here, click play. And as you see when I click here, I go directly to the second page. It's perfect again. We have this page as you see in the window. Here we have black color, but in the original page we have white color. And that's because the page does not have any background so willing. This first page with 2nd 1 you can unlike a base like this, just click and director with the original beach. Now we have this icon here, his woman and little bit on Let's say I want to link this icon with this page. So I select the icon and I link it with the page like this again I get this window just like the trigger, etcetera. Now, when I click play an accurate here since its length with the second page, when I click here, we will be directed to the second page again. For example, we want to link to stop Learning button with third page. So all we have to do is to link it this way. Now, when I click play, I can click on this many of to be directed to the second page. Or I can click on the start learning button to be directed to the third page or any page I've selected and linked with that button. So you get the idea of linking the button with any page he wants is women a little bit. So now we have here the four page that many of age you can link it as well like this. Get for example, Logan or sign up. You go directly to this page. The instructor, they will link it with the structure page. Here it is like this now when I click play, click here to get the second page like we did. Now, when I go to start learning, I get to page that I linked with that one. Now, when I get to this page and for example, I clicked on you collect on the right order left button from the keyboard to get to the next page. And then we don't click on the Logan since we linked it with the last page. Here we are. We moved a dead beach. We go back to this page, we click on the instructor, and it's linked with the instructor page directly like this so I could link any button or any icon to anything I want on. I can add the backward button in here, and I will link it to the former page, and when I click on it, it will be directed toe the former page unlinked this buttons, and now I will click on this button right here. I link it to the speech. Then I click here, and I linked this page with, for example, right here, and we will call that the president's or the backward. But now, in a click here As you see, we get this page and now click here. Here you go. I go back to the former page. So this is how you link whatever you want. Toe whatever you want, a button or a Nikon or even a many or anything. You think it's what whatever you want. So this is how to link all the pages together. And you know so So that's when you are ready to coat your AB. You know that the programmer will know this link or this button where will be directed to. For example, when you click on the former page, it's obvious that it will lead you to the former page, but sometimes it's not dead obvious. When you click on a certain manual, for example, the category you wanted to be linked. For example, let's say to this page. So when you go here, you understand I am linked the space because when I clicked, I got it. So now it is. It's length. I click play, and now, as you see this page, I click on category, I will be transformed to redirected to the speech so you get the idea and you need to be clear on each button or May Neo, where he wanted to direct us. For example. We want this button to link us to this page and this page. We wanted to direct us to the next one, and this button will direct us to this page. This button one directors to the last pitch. No, when I click, play like lucky I get to the next page implicated. I go back when I click on Start learning. I get directed to this page. I click here. I get directed to this page, and as you see, we get redirected to any page we want and precisely to the one we selected. So they said, This is very important so that when you give you walk to a programmer or even if you are a programmer yourself, you will understand what I mean. So this is our full design emotion and how to like each bait with another thanks fortune and not see you in the next video 19. Web Interface Design Part 1: Hello, everyone. And welcome to this video. After we finished designing our app design in this video will start working on our website designed. This is the website that we will be working on in discourse. So we start by creating a new page they opened. A new page of it is with the Web site settings. Perfect. Just give me a setting. You said the workspace a little bit perfect. No, it's ready. First select direct angle tool And I drove a rectangle in the top of the page on top of the page from site to site. How it paint it in black. Here it is perfect. Now I selected that control plus D to duplicated. I removed the replicas border and I will paint with second rectangle in this color. No drug, it's just its size. Leave it like this Perfect. And now I will add the slogan. So I select the text tool and I will type car one in here. And of course, this is just an example. You can type whatever it wants in here. Then I would change the color of the text. I make it in red. Then I type as I said before car one in you again. This is just an example. You can type whatever you want in here. I just decides of the centers. Yes. Let's bold from here. Slept great again from here. I need to be bright red. Perfect. I just It's position. I put it right here. Perfect. Nice. Like the sex tool. And I will change. 01 toe white. Perfect. These are the colors that I will be working on in this design. So I need to save them in the SS manual. So it's like the SS menu. I select direct angle like plastic colors. And here we are that we slept the slogan as well, and I click plus again. And here we have four colors in here. Red whites. Great. And like Perfect. Now I will add the social networks icons in here. So I slept the alleged stool and I drove circle in here. I draw while holding the shift button. Two dross medical circle. I put it right here. Perfect. Then Now it looks perfect. Need to zoom in a little bit. So didn't work properly. Paint it in this color. Or maybe I need to make this color a little bit darker, A little bit like this. Perfect. Since I'm using this new color, I will believe the old one from the SS menu. Click on it. Then I liked delayed from here Perfect about the signal right here. Then I go here too. The Facebook icon to the circle Diaco's used in this video or in any video will be included with the court so that you can use them and work with them. Nice. Like Facebook. I can't. I put it in the center of the circle. And as you see, the software gives us precise metrics so that we can know where we are. Adding object now I need to love the background layer. I look it from here and I will look this rectangle background as well. Then I select circle. I go to the repeat grade and I duplicate the circle right? Like this for will be enough. Just need to just a space between each one looks perfect. And I dragged them to the right side like this. Now we go to the Icons folder and I need to select all the icons the Facebook like on the Google on Instagram and what's up? Thank God. Perfect. Now drag them and I add them toe circles like this. And he we are Each icon is added to its own circle the zoom back and here we are. This is our design. So far, 19 zooming to work on this part. This will be the sign in and sign up section. So using the text tool I type sign in I would start what side? Sign up then I type here sign and perfect Now controlled ages select the whole text and I just its size like this fix. It's like regular from here And I painted with white Perfect. And it just the space between two to sentence and I positioned them like this. Perfect. Now I would have to sign up on designing icons, of course. So go here too. Imports. I have the user and the Logan icons click on imports. They are both of them. But this one you hear, this is the sign of bike on and the signing icon. I will add it right here in between the two sentences. I need to just zoom in so that I can make sure that everything is precise As you see, I need to just decide that this icon a little bit and this one as well just to make sure that everything is in its right position. And as you see, the software helps us with precise metrics. Perfect. These women back like this. Now I slept direct angle tool to draw the second rectangle or the seven menu helping the rectangle and whites, Or I will paint it in Great So that you concede but its original. It will be originally What? No. I draw a rectangle in here. Remove the border and I slept. This exact red color paints the rectangle with it. Then I will add the home icon. So I go here to import And here it is. This is the home icon on import. I drug it the center of the rectangle. And of course, I'll need to adjust its size to make it a little bit bigger and noticeable. Now it's perfect. Now click here and I would add a text in here. It's like the black color and I started typing right here. First time home in here. I need to paint the text in blank. Of course, this is just an example. You don't have to take the same things like typing. As I said before. You need to leave space between each phrase and we have a home about us, and this space needs to be even. You don't want to leave a different space between each word or each face, so you need to be careful about your metrics. And of course, he will set the space with your keyboard. I mean, let's call it four spaces between each word or each phrase, and you will use the same space between each word or phrase. 1234 Or just green This crease Amusing treatise. Three spaces between each word. And of course, you're free to use how many, How much? It doesn't matter. You slept the space between each work use like you get to decide how much space you want to lay. Between each work, we have your home about us caused listing shop blawg elements, and I will finish it would contact us, which is context that would like just like the whole text. Then I slipped bold from here. It looks perfect. And then I just decides off the text a little bit like this. Make it a little bit bigger so that it's noticeable. That's perfect. Zoom in a little bit. Now we will add a search box in the site right side. So I drove direct angle in here. I just its size a little bit. I'm off the border and I need to make the edges off directing around it. So I click here and I tracked over the inside. I'm not gonna make it totally rounded, so we need to make it a little bit like this. And of course, you don't have to follow the same steps. Amusing. Now it looks perfect. And I make search box in great, different Great, Great. Now I select the rectangle and control possibly to duplicated. Then I just the size of this one, and I will make it in red. The same red in here. I'm not using the SS menu because it covers up the workspace and it will make the work a little bit harder. Says this is a website size. So I need to know what to be pretty big. Now I add search icon. I just decides of this rectangle or a box in this case, and I sent her the search icon like this. Perfect. So this is our present so far and it will be all over this video. Thanks watching. And I'll see you in the next video to continue working on our website design. 20. Web Interface Design Part 2: I love everyone. And welcome to this video and this video. Continue working on our website design. In this video we will design the slider part. So using direct angle to we don't rectangle in here like this we painted with discover. Perfect. We dropped its later down here, making the bottom layer so that this Benner look on top of it. We just dismantle a little bit. We reduced the size from the bottom. Perfect. Then we make this menu in white like this. Perfect. Now we will add an image in here. So we go here, we go to import. It's a PNG image. It is. It's an image of a car. I need to just its size. Here. It is perfect now using the ellipse. So I will go circle in here and make sure to hold the shift button while you are going to drops medical circles. Remove the border and I paint the circle in red like this position is here. Then I hold the old button and I drag it like this to duplicated again, using the same thing, holding the Olds button and dragging it to duplicated for the fourth time. Then I select this one and I painted in white so that it look, it's like this is the slider page selected. So we have four slider pages and the one in white is the one selected. You get the idea now we will add text. So we selected text tool and we go to this website to copy the text. Let something come. It's a very famous website toe copy text from it. Now it's like the text. My copy it and using the text tool. I draw a rectangle in here and I copied it. Sex inside of this rectangle by control plus V control plus a just like the whole text I changed. Its color is white and I will degrees. It's size like this and I will choose regular from you. I need to just It's a little bit more now. It's perfect. 25 will be good. Now I just the position of the text limpet like this put it next to the image car. The car image. Now I would add another text in here, so, for example, I will type the type of the car. It's a Mercedes Benz control plus day, and I just decides off the phrase or the text. Then I select bold from here. This will be the head for the paragraph. Then I being sext Sorry, painted the border. I slept with Phil, and I used big color from screen tool and I paint the phrase with the red color. Then I just his position to put it right here. As it said, This is the paragraph head now. It looks perfect now at some icons beneath the text. So I select the rectangle tool and I don't rectangle in here like this. I make its edge is rounded. Perfect. Now we have around the rectangle and it's just it's sighs. Let me control Bless D two duplicates the rectangle and I just decided that the replica on like this. Then I click here and I'm on the border and I paint the rectangle behind in red like this. Perfect. Now, using the text tool, I wouldn't draw read more old type, read more in here control plus a just like the whole phrase and I just its size and I will center it inside Director like this? No, it looks perfect. I need to just just a little bit anywhere. And we have here our slider. I need just discovered a little bit in the search box. Now it looks perfect. So here we are. This is another part of our website design. We have the slider part. So that's it for this video. Thanks. Watching. And I'll see you in the next video to continue working on our website design. Thanks for watching. 21. Web Interface Design Part 3: Hello, everyone. And welcome to this video and this video. Continue working on our website design. This is our website descent so far Now we need to extend the base base. So double click here and we grow the page. So would the bottom like this We extended based space and now we continue working on our website design. First, it's like the rectangle tool. I don't direct single in here. There's a small one. I zoom in to work properly. Animals the border and I will paint drifting with any color for now just so that you can see the rectangle as this is not the real color for the rectangle. So here we are, the rectangle appears. You're perfect And now I will add an image to director. That's why the color of the rectangle does not matter. So we had the image like this. I would not a rectangle in here smaller One perfect pains. It's in Great. Then I select a pencil and now I throw this shape like this. But first start second thought another one and I read connect the dots like this. I'm off the border and I activate to fill. Then I paying the image or the shape of this color. Then select in the text tool attacking you in here. I painted in white, remove the border. And as I said that painted in white like this. Then I dragged a word right here. Now I will rotate the world like this to fit in with the inside shape we created. Then reposition the world like this. Perfect. No, I slipped the pencil. But the first start in here 71 in here, another in here. And at last I reconnected us together like this again. I am off the border and now I will paint this shape in red, then select in the text to I'll type the car price. For example. 50,000. I just decides price. Here we are, $50,000 and we put the price right here, the click on it. And I need to just its size a little bit more to fit inside shape. Then I use the selection tool and I positioned the price right here. Perfect. Now I go here. I will copy it. Sex from here. Geologists sentence. Then I go here. I slept a sex tool. I don't rectangle using textile. Then I paste the text in here control plus ages like the whole text. Then I will change the text color to black. Perfect. Here we are. No, I slept this rectangle then control plus D to duplicated. Then I thought we discovered that means it Will it then I just the size of this rectangle like this to make it look just like the line. Now I don't small rectangle here from the lower light right corner. Then I paint it in red as well Like this. Then I would add shopping icon in you. It is It's a shopping cart like on go here than imports. I locate the icon. It is all the icons used in this course would be included so that you can use them now. We slept the shopping cart icon. Click on import. Here it is. We put it inside the red box. Now that's perfect. His first window. Now we will duplicate this window. So I selected like this. Then, using the repeat grid feature, I will duplicated multiple times like this. Here we have four windows and just the space between each one like this. Perfect. The first row vitro will have four windows and here we are same thing for the next room. 71 I need to just space between each row like this and it looks perfect. Now it's like the whole windows because I will need to put a single image to each one will change the images inside the windows. So we have eight windows, so we need to select eight images. Here we are, drug them right here, and he we are Each window has its own car or its own image. And of course, you know you will need to change the text, double click on it and change its I won't do that to say this time, but you know how to change the image, the text or the colors or anything. So, as you see, the repeat great feature saved us a lot of time and effort, as you see instead off duplicated or creating another window from scratch. We just duplicated using their B grade, never really here on play to take a look at our design. So far. So that's it for this video. Thanks watching, and I'll see you in the next video to keep working on our website design. Thanks. Watch 22. Web Interface Design Part 4: I love everyone and welcome to this video. And this video will continue working on our website design. So of course, we need to adjust the space of our page. We need to increase it. So double click here. And we dragged down to increase the page space like this. That will be enough for now. I always liked the rectangle tool and we draw a rectangle from side to side like this when I'm off the border and we paint the rectangle with this color and we had an image inside the rectangle. So it does not matter what color you paint rectangle with. So we dropped the image inside of the rectangle like this. Now I add another rectangle on top of this one like this in the same size. I am on the border and I paint the rectangle with this color bright red. Then I degrees Thea bestie of this rectangle like this Perfect. Now I would ed an image of a person. The images I'm using in here are PNG because they are without a background. I just decides the image and I put it right here. Perfect. I just sighs of the image a little bit fit inside the rectangle anywhere. Now we got a text from here to complete this paragraph, then using textile rectangle in here in the control buzz V two based the text inside of direct angle. Then I select the whole rectangle and I painted in white. Then I select regular from here. And of course, I need to just size off the text like this. Perfect. No, we had another text from the same website. It doesn't matter Detects that we copy. This is just an example. It's like the text tool, and I copy or based the text in your control, plus a just like Dole texts. And I, of course, I need to adjust its size as this the title off the article in here. Perfect. So, as you see, we have an article in here and I need to adjust the space off the page a little bit like this. We need to increase the page size now copy another text from here. Then I select the text tool and I don't rectangle here. I based it. Sex inside of the rectangle, then control bus ages like the whole text, and I changed text color to black. Then, of course, I need to adjust the size of the text. I just text live, but like this zoom in and it's like directing onto first any just the position of the text . But it here, that's good. Then I slept the wreck single tool and I had a rectangle in here. No pains. It's been read. I'm off the border. And as I said, I painted in red. Here we are. I'm just a position of this rectangle. I need to just its size the text. Perfect. No, I slept the article like this. Then using to repeat a grade, I'll duplicate it like this again for any TRO, and we have to rose. Now we have to adjust the space between each window and I just space between each row like this. Perfect. We click play from here to take a look at our website design. It looks pretty cool and attractive. So that's if this video thanks for watching and I'll see you in the next video to continue working on our website design. Thanks for watching 23. Web Interface Design Part 5: Hello, everyone. And welcome to this video. And this video will continue working on our website design. And this will be the last video in designing our website as we are almost done. So to start we need to increase space of the page so doubly here. And we increased based space like this. Then we slept directing tool and we go rectangle in here, which would be a moving slider at the bottom of the website. No, we pain to direct angle in black, then control plus D to duplicate the rectangle after we select it were just the size of the replica. Remove the border and we paint the second rectangle with this color now and group this grid and I would copy this window control plus D to duplicated and I drag it right here on I put it down here. As you see, the window is beneath director the slider or direct angle. So we need to pull its layer up. We will put it on top. It is now it appears above the rectangle or above this later. Now I need to just this ice over the window like this. Sorry, I hold the shift button while I'm adjusting into size so that nothing changes and I position it right here on the left side. Perfects now I need to adjust the size of the text, so double click on it and I just its sights from here. Perfect. I removed its color Paint us in white instead of black, and I would change the background as well. Breath and that will be painted with this gutter. Remove the shopping icon and this boxes will. Then I just changed the color off this line. I'm painting with this color as well. Just make it a little bit lighter. Perfect. So the point of doing this is that you know that you can use What do you have? Your resource is the real already resource is you have on your page The already existing resource is You can use them to create a new tools or new designs for you. You don't have to create another thing from scratch. Using the already existent sources allows you to create new stuff. Now I need to look this background I selected who it is and up the background restricting looking as well we long it's layer. Then we slept the window and using to be great, we duplicate it like this. We are We have three windows in here. And of course, we need to adjust the space between each window. Perfect. Don't. Here I will end slider pages. So using the Ellipse Stal, I will don't wrecked. Sorry circles in here. And remember to hold the shift button while you on drone circles so that you can draw symmetrical circles. Perfect. Now I Baines circle in this column. Perfect. Then I hold the altar button and I dragon. Sorry, I hold the altar button and I drag it to duplicate it like this. Then I duplicated one more time anywhere from the side as well. And here we are. We have five circles and always remember to keep the same space between each circle. The software takes care of that. As you see. No, I select the middle circle and I just It's kind of like this to make it look like it's the selected page or circle. Then I go to this website and I copied the text, right click copy and go back here. It's like the text tool and I based the Texan here he's the selection. Talk to adjust the position of the text, double click on it, slipped on the text and I just it says like this. Then I select regular from here I just its size again from here and a pain to text. Angry. Perfect. And I sent read like this. That looks perfect. So here we are. Our website design is completed. As you see, this is our whole website and it's ready to be programmed or coded. So as you see, this is how to create a website or an app design. As you saw in the scores we create and boat an app and a website. You can click play to take a look at your whole website like this. And as you see, it looks perfect. And I hope that you learn what you need to create your own website design using the X d software. So that's it for this video. Thanks for watching. And I hope that you liked our website design