 Hi everybody, my name is Wadi and you're watching my channel, WadiTheBrand. Today we're going to design a landing page for a personal project that I wanted to do a few months ago. Now, I haven't had the time to do anything on this project but I did develop a few concepts that I wanted to share with you how I've done step-by-step using Adobe XD. The idea for this project was to create a single platform where creators can give other creators credit for their work. So for example, if I used images in this video from another creator, I would not only give a credit in the description but I kind of wanted to create a platform for that. So I'm not sure whether this is a good idea or not and I'll probably won't end up doing it. But anyway, with this video I was hoping that some of you might find the process interesting and helpful and that's why I decided to share it with you. And if you do find it interesting and helpful, smash the like, subscribe to my channel because there will be more videos just like this. And if you have any comments or if you have any suggestions, please comment below. And now let's jump into the computer, open Adobe XD and get started. Welcome everybody, let's get started with this video tutorial. I've already opened Adobe XD and I've created an artboard which if I double-click on, this artboard is 920x1080 but of course feel free to choose a size that is suitable for your resolution so it's a lot more comfortable for you to design on. And also I've renamed the artboard by double-clicking on the name here on the top left corner and I just named this one Home. For this tutorial I will be mainly focusing on the desktop version but if we do have time, if the tutorial goes under one hour I will try to fit in the mobile version as well but what I'm trying to do is try to stay within one hour because I don't want the tutorial to go for far too long and if you wanted to see the mobile version created after this I can always create another tutorial, just let me know in the comments below. Now here on the left side of the artboard, if I move with holding space on the left mouse on the button you will see that I have some styles, some fonts and colors. Basically this will be my style guide for the design layout and I've chosen five different colors that actually complement each other that means that we can use them together to create a beautiful layout and I have two different headings here I have heading one which will be the main heading of the website and this uses Source Serif Pro and is 62 pixels semi-boat then heading two is the same font, Source Serif Pro but this time we have a 40 pixels semi-boat. For the body text I have chosen Montserrat which is 20 pixels regular and we have 37 pixels line spacing which means the spacing between the lines so last but not least I have a button here which I have converted as component which I will talk about in a second and basically this button has the width of 263 pixels which probably shouldn't matter too much because we'll most likely end up resizing it and has the height of 51 pixels and inside this button if we zoom in we have again Montserrat but this time we have 16 pixels and medium now that we have this out of the way I have also added the styles into the assets and to visit the assets you can go here at the bottom left of the screen click assets or control shift and Y to open the panel and as you can see I've added each individual color here I've added the character styles and I've added the button as component which means that if we change your mind about a font style or a color or if we change the style to the button this should change the button everywhere on our layout which makes it very easy to update instead of us changing every single individual button on the page manually so let me close the assets now and focus on creating the layout first of all to save us some time I usually like to come up with the content for the website and once I come up with the content that makes it a lot easier and enjoyable to actually design instead of having to stop and think what you should be adding what you shouldn't be adding how you should be laying it out and so on so come up with the content then come up with the structure of the website how you want it laid out maybe you want the most important bit of the website to be at the top and going down let's add some of the content and let's create some of the sections and this step is going to be a little bit ugly but we're pretty much adding a lot of content and then we'll start designing so first of all let's double click on the artboard zoom out with control or command if you're Mac and minus and then let's change the height to something around 3397 we'll do for now and we can always change it later on and let's zoom in now with control or command and plus and now let's start by designing our layout so first of all we are going to have a header around here and what I will do is I'm just going to be using the rectangle tool to create every single section so we can separate the sections with colors so first of all I'm going to remove the border and just change the fill maybe to something like grey and this will be our header inside our header we're going to have a logo of course and let's change this to something smaller actually let's change it to Montserrat and just go down for now just like this it doesn't matter too much so here we're going to have a logo then we're going to have two links here one will be for creators and then we're going to have another one here and this will be resources just like this and maybe we can make them a little bit smaller because they are fairly large so 18 pixels seems reasonable I think and the alignment doesn't really matter at this point and then on the right side I want to have login button and join button so let's copy one of them links copy and paste with ctrl and c in ctrl and v and move the text to the right just like this and as I said we're going to have login and then we're going to have a button here which will be sign up it's free but instead of me creating a button I'm just going to go to my guides here but instead of making a button I'm just going to copy the button that I created earlier this is already a component and we can reuse it so let's copy and paste this in here just like this and let's just move it around and let's change this to something like sign up it's free just like this now this will be our header and the next section that I want to focus on is the hero section so the hero section will be the first section that the user sees and this will be the section where we literally need to grab the user's attention and explain what the website is about so first of all let's change this color to a slightly darker one so we have this contrast between the header and the hero let's zoom in and let me copy some of the text that I've prepared just to save us some time and the first text that I have will be our heading and this will be give credit where credit is due and then I want to add a paragraph underneath here and this paragraph would say easily manage your credit contribution in one platform just like this and then I want another sign up button just underneath them so let's copy this button and paste it and let's just say sign up like this and then on the right side I want to have some sort of an image or animation that conveys what the website is about so for this let's just use the rectangle tool and create a square and this will be our placeholder for now the next bit that I want to create is will be another selling section so let's create another rectangle here below just like this and this rectangle will be like different shade of grey and let's remove the border as well and basically what I want to do in here is I want to add a text which will say which will say are you a YouTuber, blogger, Instagramer or Twitch streamer learn the benefits of using our platform and this will be another kind of link that will tell people more about the platform and so on and the next section that I would like to create is the testimonials section which let's create another rectangle in here this one will be slightly bigger I guess somewhere around here will do around 860 pixels let's change the background to slightly different grey again and basically this will be all testimonials so for the testimonials I've prepared a heading which will say a few words from more creators and now I was thinking of creating 3 creators into kind of 3 different columns so for example we could use the we could use the ellipse tool in here to create maybe a user profile photo then maybe just paste these 2 more times just like so the alignment doesn't matter at the moment and let's put a little bit of text below them so we can have so this might be from the first creator and this will be this platform allows me to easily manage the contribution credits into my work and then this could be let's say from me and obviously we'll have a picture in here and let's copy these 2 more times just like so because I didn't prepare other testimonials but that would do for the design and now the next section that I would like to focus on is why you should be joining this website so let's create another rectangle in here just like this and for this let's go it's slightly less grey let's remove the border and and now let's add the title which will be why you should join and then I've prepared a little paragraph for this so let's copy and paste the paragraph and I'm not going to read the paragraph now to save us some time and then I'm thinking of adding 3 sections and the sections that I have prepared text for a piece of mind save you time and spread the love so what I'm thinking is we can have 3 different images so let's use the rectangle tool again just like this so first image here another image in here and the first one will be why you should join because the piece of mind you want to give credit why credit is due then the second section will be save you time this platform will save you time if you use it just like this and the last section will be spread the love just like so and then I have prepared a little bit of text for each section so let's copy and paste this here and I'm not going to read every single bit just like this this is the why you should join section here done now and the next section that I want to do is how does this platform work so let's we might need some more space so let's double click on the artboard and drag this down a little bit more and let's create another section in here just like this and this section would be how does it work so let me copy the text on how does it work in here I have the title and I have a paragraph explaining how it works and then I'm thinking of breaking up the layout a little bit because we use kind of the same grid so far so what I will do is I would have another title in here on the left side just like this and then I will have and then I will have a little paragraph explaining how it works and what I'm thinking of doing is here on the right side I'm going to add another like image or animation potentially which will show how the platform actually works demonstrate how the platform works and last but not least we need to add the footer for this design and I've just prepared a bunch of links so for creators terms, community, block about popular contactors and help center so let's take this and this will be the guide for our layout and now that we have everything set up we don't have to mess around anymore with trying to figure out what content to add and so on and we can now actually focus on the most enjoyable part which is designing this layout let's start with the top and go from there so let's go from left to right and here we have our logo here we have our logo and for the logo we need to change this to our name so credit badge is the name of this website let me move this around just like this and I want this to be Montserrat and I want this to be around 20 pixels and also I can use the assets styles from here so I could click Montserrat and that would take the paragraph style which is already 20 pixels so this is our logo I knew it's a little bit basic but this should do for the project and to make it a little more interesting instead of having it like this I'm just going to select and change the Montserrat 20 regular to Montserrat to and I will change this to Montserrat medium just like this so it looks a little bit more modern and better so now that we have this I want the hero section to be roughly around 60 pixels in height just like this and we can move the bottom section up so we can see the contrast a little bit better and I will middle align this like so and maybe 37 pixels on the left side will be absolutely fine just make sure you remember this number 37 and we can actually drag one of them guides from the left side here of your artboard you can drag a new guide and just make sure that this is the same size as the 37 pixels and to make it easier for myself sometimes I like to use the rectangle tool so create a new rectangle here just like so and use this rectangle as guide but I like to make the rectangle as close as possible to the text so let's zoom in and this would be actually 38 pixels so let's zoom out, let's move this rectangle to the right side of the screen and set all guides and this looks good so I can move my guide here just to snap next to this rectangle so and obviously I can align those elements later on just like so so they have equal space to the left and the right side of the screen now let's focus on the links and for creators I can just go around here make sure you just center line on the header you can usually tell by these guides by this middle line and also if you wanted to you can select the text shift and select the header background image and then use the alignment tool here on the top right side of the screen and just do align middle like so and that should align your text and so on so I'm going to do the same for resources but what I want to do here I want to leave a little gap between the logo and those two links but I also want to add a chevron for those two links as well and to add a chevron we can go to the plugins and then if you don't have the icons for design plugin you can go here to the plus sign and search for icons for design and this should allow you to search for icons so I want a chevron icon like so and they give you different styles so font awesome the feather icons, material design icons and open so let's add the feather icon chevron down I'm going to cut this, zoom out and paste it exactly by four creators and let's scale this down a little bit like so and as you can see this icon is overpowering the actual link here so what I can do is click on it and change the border size to be around one and I think that's already a lot better and all I want to do now is make sure that this is center aligned with the text so if I hold the chevron icon and the text we can use the alignment tool like so and that would align it in the middle and maybe make a little space around five pixels there let's remove the plugins let's copy the same chevron icon to the right side here for resources and let's just make sure that the spacing between the chevron and the links is the same and then I can actually move them to the left like so and also if we wish we can actually group those two by holding shift and clicking on them and then controlling G to group the resources is well just like so controlling G to group and maybe you might as well group them too now make sure that these are aligned in the middle like so and controlling G to group okay, I'm pretty happy with this I could space them out a little bit to the left like so and I think this looks good now let's focus on the right side of the screen where we have a button I want to make sure that the login is the same size as the other fonts which is 18 and I want to make sure that this button is obviously a lot smaller because it looks quite big here in the header and what I can do is I can untick the auto box to Emmanuel and I can resize this a little bit just like so and I think this is making my text a little bit smaller but it doesn't matter I can actually fix this in a second so I want my button to be roughly like 40 44 pixels and I want it to be roughly and I want the size to be roughly around 174 and obviously we need to change the text now because this is shrunk down quite a lot and 14 actually looks decent but this button looks way too big let's center it I think this button looks far too big so let's scale it down a little bit more just like so and I think this looks a lot better so this is now center aligned the button can be aligned next to it and what we can do is measure the space between those two links with the rectangle tool like so if you want to be precise zoom in it will be like one pixel off there I think and move the rectangle to the right side of the screen and then just make sure that they are they have equal spacing between them let's make sure that everything is center aligned to the header here like this and I think it is so we are good to go ok now we are pretty much done with the header but one thing that I would like to change is potentially the color so what I am going to do is select all the text in here so I am going to select the logo those two and the login and then I am going to go to my assets and I will select this green text here and I think this will look a lot better so let's close this down so one thing that I don't like straight away is the spacing between those two elements so I am just going to space them like this a little bit closer together I don't think that looks a little bit better but we can always come back and mess around with the styles if we wish to now the next section that I want to focus on is the hero section before we start designing the hero section I want to double click on my artboard and create a new grid for this this will basically allow us to easily align all the components of our page to the grid so everything is perfectly aligned and also this will help us with the CSS later on if we wish to develop this website now the grid that I want to go for is going to be 12 columns I think the column width will be around 68 pixels and I want the glitter width to be roughly 30 pixels but I also want to have a lot of space on the left and the right side of the screen I want to make sure that this space is around 387 pixels to the left and right of the screen and this will be our grid now that we have our grid set up we can start styling our components for the hero image I have the feeling that this might be far too big so what I will do is I will change this rectangle here to be roughly around 688 pixels like this and I think it will give us a little bit more space to put some of the other things such as this advertising section and the testimonials so let's try with 688 and obviously this image would have to be a little bit smaller like this maybe and we'll come back to this in a second but for now let's zoom in and let's start styling this section I want to change the background color of this section to the green so let's go to the assets and choose this green color and I really like this green color so I think that would actually work really well with our design style and for the heading what I will do now that we are here in the assets I want this to be the heading number one which is this one here so I'm just going to select that heading and as you can see the text has changed now we need to probably resize this to fit the rest give create where create is due just like this and I think this would work quite nicely but obviously we need to change the text to maybe this creamy text like this or we can have as white so let's align the text here inside the grid and let's focus on the paragraph for the paragraph I can select on the text and choose the character style Monterrat paragraph just like this and now again we can use this creamy color here for our paragraph as well and I think this looks good already so let's just align it slightly like this like this so they're not too far apart but they are kind of together as well and last but not least let's align our button here just like this and let's close the assets and also let's double click on our artboard and remove the grid for now just so we can see how this looks like and what we can do here is we can select all those three elements Ctrl and G to group them and now we can select the background color here and align everything in the middle of the page and this is actually looking fairly good and what I want to do is here on the right side of the screen I want to create some sort of example of how credit badge works and obviously we haven't created that section but I haven't mind how it could look like so what I'm thinking of doing is creating a little browser in here so first of all let's double click again on the artboard to toggle the grid and I want to make this a little bit smaller than it is maybe like around around here I think it might do the job maybe like around 516 and 381 just like this let's center align this to the background and we can actually remove the grid now so it doesn't get in a way and we can focus on this first of all let's change the radius of this square so if we click on the rectangle square and then click here on radius corners I want to have 3 pixels on each side and as you can see this gives it the oval corner and also let's add a little bit of shadow on this so down here we have the shadow box and just click on the shadow and I believe that this shadow is ok it looks nice actually so I'll leave the default and the default shadow is for me is black which has alpha of 16% and we have x set as 0, y set as 3 and b set as 6 which is black to create some sort of a browser I'm going to create a little bind here and also I just noticed that we have the default border here so let's remove that as well and let's create another rectangle in here like this for width and I want this to be roughly around 18 pixels remove the border and I want this to be like a very gray color so let's go and select one just like this and I'm happy with something like this this is f5 f5 f5 let's move this to the top but of course this does not have the rounded edges so what we have to do is select and click on this icon here the radius for each corner and then we just need to set the top left and top right to be 3 pixels and as you can see this is now working well to make this look like a browser I'm going to use kind of like a Mac style browser where the minimize close icons are here on the left side and what I will do is I'm just going to create 3 circles like so remove the border obviously and I'm actually going to leave them white as they are and just set them around 4 pixels make them a little smaller center line them and just copy paste copy paste and I'm pretty happy with this this is already starting to look like a little browser and now for this I want to show kind of like the dashboard of this project so what I will do is I'm just going to copy this side here paste it cut pasted inside here and I'm going to use the green color from our assets menu like this and I'm going to write project dashboard project dashboard obviously we need to make this way too small smaller like this 22 looks good actually maybe even smaller we'll see and if you want to center line this we can untoggle the text area and just toggle the point text and just center line it to the box here and I think this is actually looking too big so let's scale it down to maybe 16 looks good reasonable and then we just need to mimic kind of like the project dashboard so normally you'd probably like have a new project so let's do another rectangle in here like this maybe this will be like the input for the name of the new project and what I will do is I will keep the border but I will change it to something slightly less intrusive maybe like C9C9C9 that'll look good change this the corners to three pixels so they go well with this design maybe make this a little bit smaller actually at the moment is height of 21 pixels and width is 323 pixels and inside here we can add text with the text tool here or T on your keyboard and just type something like name your project and for this I would like to use the body text which is Montserrat let's do that and let's make sure that this text is gray so I don't think that this color will do the job we're just gonna have to change it to maybe the border gray so let's select the text and select a different gray color just like the border maybe I think this will work around 12 pixels will do the job what looks good that doesn't look very center line to me that looks a little bit better and maybe here on the right side we can have a button which will pretty much say so let's copy and paste this rectangle and change the button to the green that we used everywhere and maybe this button will say add new like add a new project so let's copy this text and paste it and let's just put plus add so it doesn't have to be perfect and also I want to remove the corners from here from the left side so I can select in this box actually let's make this inside here like this let's make it a lot smaller than it is we might need to change the border a little bit so maybe to 2 pixels but I also want to change the border to the top left and bottom left like this and center line the text okay I think this will do the job the border looks the border on this looks a little bit too much for my liking so let's click it again and let's change it to something less like this and instead we might be able to add a shadow and I think that would pop it out a little bit more but this shadow is too much so we can change it to less dark shadow like this I think this button is far too big and it can be changed to white like this and we can maybe make it smaller like this to look a little bit better change this as well change this text a little bit as well and so on okay this looks a lot better now let's add some projects in here so kind of like fake placeholders so I'm going to use the rectangle tool and drag a rectangle around here and this will be roughly 25 pixels then just make sure that this is center line in the middle of the box like this remove the border let's add a very gray color just like this and of course let's change the radius to around 3 pixels so it matches the rest of the design here and what we can do is just duplicate this a couple of times so we can use the repeat grid just by clicking here and then just dragging the repeat grid down like so and I think this will actually do the job on the right side of the corner here I'm just thinking of adding illustration and for the illustration I'm actually going to be using a website called opendoodles.com and the opendoodles are actually created by Pablo Stanley and they are free to use for personal and commercial work awesome let's now find and all the images in here are actually SVG which is pretty awesome so you can change the colors and so on so the one that I'm thinking of using for this is this one here so let's get the SVG I would probably have to control and save to save this on my desktop so let's save this so let's drag it here like so and I'm going to change this the angle to be like this so it looks like she is flying a little bit and when you scale down the image hold shift so everything is in place and let's just move the image around here and we'll probably have to make it a lot smaller as well just like so I think this looks good and one of the things that I would like to change is the color so it matches my website and for this let's double click on the shirt here and as you can see because this is SVG we can actually change the color which is super helpful so I'm just going to choose the orange color and now this looks like is being designed for this layout which is great now the next thing that I would like to do my idea for this bit was some sort of animation where different projects are added and they kind of animate or something like this but because we're in Adobe XD and this is static I think this would do the job for now but later on I would probably explore more to see what kind of animation I would like to do but anyways the hero section is looking nice but it's also looking a little bit too clean for my liking I know this is a weird thing to say but I would like to make it a little bit more interesting and because the illustration here looks like she's flying I would like to add some sort of circles and triangles around floating this can be also maybe animated so let's use the polygon tool wire on your keyboard and just try the triangle and for this what I would do is I would select the color of the hero here the background color but I would also make sure that this is a lot darker so it contrasts a little bit so let's create a couple of shapes like this around the page just go just go and rotate them make them smaller, make them larger and so on like this just to make it a little bit more interesting and maybe one round here now let's maybe add a few circles so I will use the ellipse tool on your keyboard make a little circle obviously remove the border and put the fill to this dark color and let's copy and paste this circle a couple of times around maybe like make some smaller ones from here so it looks like they're splashing around but yeah just let's just add a few shapes until we have some interesting concept here I guess let's maybe add some squares as well so I will use the rectangle tool to do exactly the same bit remove the border add fill and the fill would be this and just let's add the squares around as well I don't know, you probably don't want to add too many of them but you know you just have to balance it out and adjust this super quickly I don't think it looks decent but of course it can be better if I spend a little bit more time I think this looks a lot more interesting now if we were to set the keyboard and preview this on desktop you will see how nice clean and interesting this is and I think I've got a hover effect on this button which I don't want so I would have to remove this but it's not a big deal so both buttons have a hover effect now that we have the head done let's now focus on the next section here let's copy the text and the background color and move it to the top like this so they're together and let's make sure that we're using the body text which is in our assets and Montserrat paragraph it's a little bit too big for my liking so what I'm going to do is change it from 71 to somewhere around 39 or 40 40 will do and let's now change this text to be around 16 pixels around 16 pixels like this and what we can do is convert this from text area to point text and this will allow us to easily select the background now and just make sure that everything is center lined this doesn't have a good contrast just yet so what I'm going to do is select this background color and change it to the background color of this dark shape that we created earlier and also now we would have to change the text color and I will change the text color to this creamy one which is EFE7DA and I think this looks fairly good now if it were to preview on desktop I quite like this I only have like one pixel gap which I will fix now and obviously you can see those buttons they need fixing it's the hover effect but it doesn't matter at the moment I could click on the button and change change the hover effect to be exactly the same size as this I guess just so like so and I can do the same for this button actually copy the width change the width on the hover state and also I need to copy the height and change it here and by the looks of it I will need to remove the text as well which is tricky so we are on the hover state let's move the text and we should be good let's play it again and as you can see we don't have that effect anymore which is good and as I said we will probably move oh these are together I don't know why it's not it's not lining up properly but it's not a big deal it looked like maybe just my screen ok so let's play this again there is a little line here but maybe we can solve this line by by making this background color a little bit bigger so it overlaps and this background color is obviously underneath so hopefully if I play it again we don't have that problem anymore and I think this is because we could potentially I think this is because of my screen what we can do is make this one pixel less so it will be 6 8 7 move this up and now this should look sharp or sharper but it doesn't matter actually ok this looks good anyway the next section that we need to focus on is the testimonials so first of all let's drag the whole section up I'm not so sure how big I want this to be but I reckon that needs to be a lot smaller than it is maybe like around 620 pixels make those images a lot smaller but first of all let's start from the top and go down to the bottom so first of all for the main heading of course we're going to go to the assets and instead of choosing h1 the heading one we're going to choose the heading 2 which is the smaller heading than this one just like this and this already looks very good and instead of having it as text area I'm going to use the point text again just so it's easier to align so let's align this let's align this in the middle of this box by the way if I zoom in you'll see that this is not the fully green text this is like the slightly darker one I believe let's have a look so this is the color here 0026 2626 this is almost close to black but it's nice green that color that we can use so now that we have this title here I want to make sure that the title has enough space from the top of the section and to do this I'm going to use the rectangle tool and drag a box and I want to make sure that we have plenty of white space around so I'm going to make sure that this box is roughly around let's say 100 pixels I think this would do and I know and this time what I will do is I'm actually going to align the text with the actual outline to the box just because it would be easier than aligning the text like this every single time I guess so let's do that and let's make sure that the bottom of this section has exactly the same space so we could potentially use the Adobe XD guide or I could drag one around here but I don't think it's needed at the moment so I'm just going to go back and remove it so far so good I want to make sure that these images are a lot smaller than they are because these are huge so far so maybe like 127 I think that looks good so let's copy this paste it everywhere hide this would be this might be the best way to design one and use the repeater grid for the rest and if you remember we actually need to style everything inside the grid so let's double click on the hardboard and press grid then I want to make sure that these actually take in equal space for each column so at the moment we have 12 columns and 12 divided by 3 is 4 so each section should hopefully be able to take 4 grids just like this if that makes sense and we should be good to go so let's make sure we align all images like so in the middle here and maybe we can do this one as well okay and let's now change our text the text will need to be the body text which we can go to assets select Montserrat make sure we double click on this text and center line and also what I can do is make sure that this text starts from here from the start of the column and ends here as well and I believe that this text is a little bit too big so I'm going to go with the minimum which is 16 pixels and I think that looks already quite smart so I'm just going to leave it like this and also we need to change the username maybe just maybe put the box to be full width taking the full width and then just center line the text inside it so if you were to change the text if it's slightly longer or shorter you'll always be in the middle which is quite nice and to me that looks fairly good actually and we also inside or boundary here which is perfect and now we need to add three images for those circles so what I can do is go to plugins and there was a plugin that I had which is called UI faces and if I click on UI faces we should be able to select the three circles in here let's say we choose unsplash.com and then we can actually go to filters and we can select maybe one male and female and we want to be happy, neutral and to be fair it doesn't really matter I just want three faces it doesn't matter what they are so let's just put apply randomly and see what UI faces this ok so we have three women here they all look very professional and cool it would be nice to have different genders I guess but it doesn't really matter I think that's pretty awesome anyway now that we have the images everything is kind of already center aligned what I'm thinking of doing is let's change this text to the Montserrat text but also we need to change this to be roughly 16 pixels and let's also change this to be both as well just to make it a little more interesting like so let's change this to the orange color and see what happens interesting it's a shame that the images are very dark but maybe we can choose other random months later now let's copy this three more times and as I said we could have used the repeat grid which would make it so much easier but it's not a big deal here because we literally have to copy and paste just like this copy and paste just like this and we are done with this section up front and also let's double click on the artboard and remove the grid so we can see what's going on remove those guides that I had and also this is looking really nice and clean let's remove this actually I'm going to keep this box for the next section here but what I'm thinking now is that we need to change this to maybe white like so and we need to move the next section here so like that and to make this more interesting we could use the same sort of style from here we can add a few squares and circles so let's add that but instead we're going to have to choose a very let's actually we can choose the very creamy color from here and I think this would be actually really nice this is looking really cool so let's select a square, a triangle and a circle let's change those to the creamy color from here and I think this is pretty awesome let's just paste them around rotate maybe the triangle so they don't all look the same make them smaller, bigger whatever just make it a little bit more interesting I say alright I won't spend too much time on this but this section is already looking pretty cool we could do with like a little paragraph in here but I didn't prepare one and I think this is looking pretty cool anyway so so far we have everything working really well and now let's focus on the next section which was the white join website or this platform so first of all I'm going to use this square again just for my guide so I know where the heading is going to be I'm going to move everything actually let's just move everything up just like this and let's start styling the white joiners again I'm going to use my asset and heading 2 and we already done here so I'm going to convert this to a point text make sure that this text is aligned with the background color here so which one was it now it's this one here on the right and so make sure that this is obviously aligned just like this perfect and I'm going to use this guide for the bottom as well later on so I'm going to move it down so it doesn't get in a way now let's convert this text to the Monterey paragraph center it like so make sure that you double click and center the text inside as well and I think this looks a lot better the space between the heading and the paragraph I want it to be roughly I think this size is already looking good to be honest this is roughly like what is it roughly 51 pixels yeah this is roughly sorry this is roughly 48 pixels but we can copy this and use it as a template for the below sections as well so let's move that on the side here and also first of all and this is actually looking really good but instead of 20 for this I'm going to do 16 like this I think this is pretty nice let's change this gray color let's change the gray color to this one here the creamy color that we used before and I think we have a little overlap within those two sections so let's actually select everything here and just move down so we don't get the overlap and now we can do exactly the same thing as that we did before here with the three sections same thing here now we can do the same thing that we did here so I'm going to need three images for this I'm going to need to style the headings and the text so let's begin first of all let's put our grid back by double clicking on our artboard get a square make sure that the square is roughly taking the four four columns and we can do the same thing these ones is no problem for now because those squares will be replaced anyway and that would look good to you and let's use that as a guide now so I'm going to move my title here and what I'll do I'll stretch the text area to be full width like this make sure that this is aligned center because this is like a subheading I'm going to make it a little bit bigger let's make it semi-bold maybe semi-bold looks decent let's do the grid because it's kind of getting away I think this looks decent let's change the color to the green color here maybe we can make it even bold I think I think that looks real nice and then let's change this to Montserrat and let's make sure that this is set to 16 pixels and let's align center and I think this is actually looking really nice I'm not sure whether we have too much space between the text but maybe we can mess around with this a little bit later on and now let's apply the same styles so I could have copied and pasted this so what I actually what I can do is let's use the grid for this time so I'm going to use the repeat a grid here and just drag like this and if the columns don't match we can just extend them so they match and I think we have 30 pixels between each column and I think this looks good but obviously we need to change the text so let's copy and place the text save it's time let's copy let's change the last column like so and let's remove the rest of the stuff and now we have the three sections but we need to also choose three images so to keep the website so first of all let's align this to the bottom maybe like this it doesn't have to be perfect but we need to find three images and the first one will be the piece of mind so let's go back to open the windows and have a look at images that would suggest piece of mind and to me straight away this image looks like she's having a piece of mind so let's select this image I will download this quickly let's also find another image for save your time and this could be somebody working maybe I think this image is quite good actually save your time so you have more time for the stuff that you enjoy doing like reading so let's so let's save this image as well and the last section that we have is spread the love so for spread the love we can actually use this one because it has a little heart in here so let's save this and now I'm going to grab all those images and check them into all layout here just like this and this one here ok so let's have a look at where they go ok piece of mind so piece of mind let's scale this down to fit the squares like so we have a lot more space which is awesome I think this will do actually and we can center line maybe and also I will come back to changing the colors in a second so let's change this one which is this will be spread the love so let's scale that down and make sure that they kind of match sizes so they will ok and I think this is looking nice actually like so I think this is looking nice and the last one which will be save your time let's drag this down as well this one is a little bit bigger I think yeah this one I think this one is a little bit long image so what I am going to have to do I think is make them slightly smaller like this and I am going to have to make those ones smaller as well so there is kind of like an equal gap between them and this one as well this looks a lot better I believe and this can be moved in the middle maybe and now let's remove the squares and also we can actually move these up like so and that's looking good and in fact this is actually working out fairly well with the spacing below I think this is working quite well but one thing that I don't like straight away is the colors I want to make sure that the colors are set to the orange so it goes with all out so let's select everything let's select this one let's select the heart I guess actually that works quite well I am pretty happy with this section as well so let me close this and now let's focus on the next section now because we have so many styles already done we should be able to quickly copy and paste some of the styles on the next section and modify it super quickly so first of all let's grab this rectangle tool and move it to the top here on this section I am thinking of leaving it as white let's drag this square to the top so we know how much space we need for the heading and I am actually going to copy this heading here and the paragraph paste it and scroll and pull them down like so and instead now I am going to copy the text just to speed up the process and paste it in here and copy this one as well and as you can see this needs aligning so let's align it quickly we can align both of them to the background just by using the Element tool awesome, this is looking good I would maybe make this a little bit smaller so we get more text on the second line as well that looks a lot better to me so let's center align again oh yeah, that looks a lot better to me let's remove this square so it doesn't get in a way and let's remove those two because we've already created them and now let's focus on the rest of the steps now first of all we need to switch back all grid so we need to know so this image will need to fit somehow around here I mean it doesn't have to I mean it doesn't have to fit there but I like to follow the grid in this and make everything looks very tidy so let's use this in there inside here just in a second and let's focus on changing the text super quickly, first of all because this will be a second heading I want to make this to be the monterrat text but I want to make it a lot bolder so maybe semi-vote and I want to make it a lot bigger, maybe like 28 pixels I think this looks really nice and for the text here we can maybe use the monterrat again and instead use the 16 I think that looks really nice and maybe we can do a cool separator here as well let's have a look in a second so what I'm thinking is let's scale this text down just so it fits those let's scale this text down so it fits in here nicely let's go space for the image on the right side we can actually move this down a little bit and maybe maybe change this place to be a little bit bigger or what we can do is actually reuse the one from above that we created earlier here for this section let's go ahead and actually copy this thing from the top I should have grouped this so actually let's group it now select everything here and if you hold shift and deselect background deselect some of the shapes that we created I can actually control and G this and group it ok now that we have this selected I actually think that we are missing the circles there so I'm going to have to unselect this ungroup, select the circles as well right click and group again ok now that we have this grouped we can copy it paste it here at the bottom like so and let's just align this right here in the middle of our text and we can figure out this in a second the alignment but I just want this to be aligned to the right side of the grid and also let's remove now the grid so it doesn't get in a way and let's remove this image of the woman flying around because I want to have a different one maybe we will have a different sort of different animation so for this actually let's choose another image from the open dudo website and the one that I would like is actually this one looks pretty nice so let's use this I'm going to save this now and let's drag the SVG here ok and what I will do is I'm going to use this character just like this to break up the layout a little bit I think this looks fairly cool and obviously change his shirt to the orange or we can change to any of the colors that we have there but I think that's pretty cool and we could change this a little bit as well but I'm just going to leave it now to save time I think this looks fairly decent maybe we'll do something else a different animation explaining how the project works but yeah let's keep it like this for now and remember my separator here I want to actually make sure that we're using this and I know this we have a white background color let's change it for a sec ok like this so the image I'm not so far I'm not so worried if it's going to be down here but what I will do is let's make those two as a group then let's make sure that this this browser thing this browser image is aligned in the middle with the text by selecting all of them like so and now we can move them up a lot more I think this is like a decent space and I know the human is kind of like running out but that's not a big deal we have plenty of white space on this page or section so now let's move this make it white or whatever because this looks very empty I'm just going to use the same trick that we used here so I'm just going to copy some of the elements around and paste them around here obviously they need to be re-shifted a little bit so they don't look the same and I can just imagine this being maybe like them being animated flying very smoothly with JavaScript or something like that let's hide and I think this section is looking actually pretty clean and nice and the last thing that I would like to do in this layout is the photo let's double click on the layout and select grid then for the grid let's make sure that we have a little bit of space here just like this and I'm going to convert this to 14 pixels or 16 let's go for 16 like this and make sure that we're using the green color maybe and I think this is looking fairly nice to be completely honest with you we don't have to spend much time on this and one thing that we could also do here let me remove the grid we could make a very nice separator using the rectangle tool just like here I don't know if this will work and then just use this gray color remove the box and maybe we can make this smaller like this and just have a nice separator I don't know I think it looks it adds a little bit to the design it looks cool pretty much and to make this a little bit more different actually let's make sure that this is maybe like a watchable video because we have a little bit more time I think it's going to be under now let's make this look like a video and to do this I'm going to use the ellipse tool here and let's make this to orange color like so and we can maybe remove the border add a little bit of shadow underneath like so maybe maybe make it smaller make sure it's in the middle and we need the play button for the play button we can use or plugins and icons for design and just do play maybe and this one the feather play icon looks decent so let's copy this move it inside here and let's make sure that this contrasts nicely so we can do white like this and make sure this is aligned in the middle and I quite like this that doesn't look in the middle I quite like this but we could simplify if you wish maybe like do just white or maybe just do border to be white and so on I think this looks quite nice actually let's now remove the plugins save this make sure that white board is a little bit smaller now because we have a little bit of space left just like this save your project and let's press preview desktop and let's have a look at what we've created so far so as you can see this is actually looking pretty nice everything is looking very nice and clean and this will be really nice to develop and animate and yeah that's pretty much everything from this tutorial I hope you liked it I hope you learned something new I'll probably spend a few more minutes creating some murder pages just to show you what you can do but yeah that's everything from this tutorial don't forget to smash the like comment below if you'd like to see more tutorials like this as always my name is ready you're watching my channel ready the brand don't forget to subscribe alright see you in the next one