 Okay so let's get started with this project and the first thing I'm going to do is open a new artboard and the artboard for this project will be 920x1080 but of course use the artboard that you're comfortable with and maybe if your screen is bigger obviously you can use bigger artboard or if your screen is smaller you can use smaller artboard so it's comfortable to you to see. But I will be starting from desktop and going down to mobile. So let's select 920x1080 and the first thing that I'm going to do is name this artboard if you double click on the top left corner of your artboard you can change the name I'm just going to call this home and then the second thing that I need to do is obviously save this file locally or on the cloud so we don't lose it and you can click on the top left corner then save as local document and I'm going to call this project guard WooCommerce so let's save this and guard is the name of this project as we will be designing a website for luxury face masks so I came up with this random name it's obviously not a real project but I couldn't think of a better name so let's go with it. You might have already noticed that I've already have Photoshop open in here and also Illustrator and this is because we might end up editing we might end up having to edit a few images with Photoshop and also I wanted to show you how I created the logo and let's go to Illustrator quickly and to be honest it's not much of a logo I simply chose the Tozel medium font from Adobe fonts and I just typed the name of the project and I felt that this is looking fairly decent obviously for a real project I would probably spend a lot more time designing a proper logo with nice icon maybe and choose the correct colors and so on so this will be a logo and obviously I used Illustrator because Illustrator is a vector based which means we can blow it up or scale it down as much as we want without getting pixelated. Let's copy a logo and paste the logo into a project let's move the logo to the top left of our screen and I'm moving the the artboard with space and left click on the mouse just dragging and then if you want to zoom in on Windows is control and plus and if you want to zoom in on Mac it's command and plus which is exactly the same command and plus and control plus so let me zoom in a little bit more select the logo and as you can see you can see and you can see this little circle at the bottom of our graphic of a logo so this means that if we hover over it we can resize it quickly so I'm just going to make a little bit smaller and we can mess with it a little bit later first of all I am going to use the same font that I created the logo with for our body text so that I know what I'm going to do is I'm actually going to use the text tool here on the left side of our toolbox or you can click T on your keyboard and I'm just going to drag a little box here on the left side and this will be a body text and what I want to do is actually want to fill this text box with some dummy text so we can see how the text looks like and to do this there is an easier method rather than going to a website like lauren ipson we can go to the plugins of Adobe XD here on the bottom left side of the screen or shift control and P or shift command and P if you're Mac so let's do that and if you go back actually to plugins you will see that I've got a plugin installed which is called lauren ipson and you can add this plugin by hitting the plus sign in here and just search for it and then click install so I'm going to use this lauren ipson very quickly click on it and then quick lauren ipson this will fill our box and I probably don't need so much text but let me hide the plugins toolbar and I'm going to double click on this and remove and remove a lot of the text so it's not so much and then I'm gonna highlight this text and just change the font to be to STOLZL and this will be a body font and the second thing that I want to do is make sure that this is set to black and potentially I'm not too sure yet but potentially we'll probably have to change the line spacing to somewhere around 29 which makes it a little bit better to read I assume but we can always mess around with those styles and I'm just going to make this a little bit smaller so we can actually add this to our library now so we can reuse it later on and to do this we can click here on assets or shift Ctrl and y or shift command y if you're mac and then we can add this as a component just by hitting the plus icon so select your text and hit plus icon and we can call this simple like body text now that we have the body text let's think about the headings as well and I've already chosen a font for this as well and the font I chose is the play fare font let's copy this box quickly with Ctrl and C and Cmd and V and actually let's create a new text box on top of this and this will be let's say heading one and of course we need to change the font so let's select it and select the play fare display and this is a free Google font and I would assume that this will be around the size of this heading one will be around 70 pixels 70 not 7 70 and then we can then we can maybe copy this and make a second heading and so on so we have some sort of styles that we can reuse on our layout and speed up the process so let's say heading 2 and you can do heading 3 4 and 5 of course and so on and I'm just gonna stop at heading 2 at the moment and maybe later on we can add some more and of course we can add those to our component but first of all let's change the heading 2 to be around let's say 46 46 and maybe like this I don't know I think this looks okay and let's add or first heading to the components by selecting it and hitting the plus sign and we can call this one then let's choose heading 2 and type heading 2 and I would probably arrange them like this so we have heading 1 2 and body text and also one thing that I would need to check is whether this text is set to black and if I scroll down to fill I already have a set as black which is perfect so one of the main colors of this layout is going to be pretty much black and white and we can actually use the circle ellipse tool here to make some sort of a palette for us so I'm gonna create a little circle but that's you don't have to do this now because we're not gonna be using many colors so let's fill this with black and we can copy this paste it and make the second box maybe white and of course we can we can add some more later on as we develop the website we'll probably need some shadings of black and so on and of course it will be fairly useful to add this to our colors as well just in case we decide to change the colors of our website this will allow us to make it super easy for us so let's choose this one white one okay so now that we have some sort of style guides then we can start developing the website layout okay let's start by creating the navigation bar and for this I'm gonna press T or my keyboard and start typing so the first element that I'm going to add is gonna be perfect and as you can see we probably need to change the font to something else so let's change to STOLZL let's make sure that this font is set to 16 pixels 16 make sure it's set to black and so on and of course I could have used my body text from here actually but I might leave this as a separate component just in case I want to do some extra stuff with this font and so on so this is actually 20 and I want to set this to 16 okay so this is looking a little bit better and so on so let's continue now I've added the product and I'm going to leave this text box to be the point text but of course you can use the area text but this will make it a little bit harder to align I guess in a second so let's add products and you can either do those separately by copy and pasting the elements or you can just use your space bar on your keyboard and I'm just going to add a couple of spaces here so let's add around I don't know 3 4 5 6 7 8 9 10 11 12 13 14 15 I think 15 is a good number and then after this obviously we're gonna have to add a few more elements let's say we're gonna have a sale and then I can copy this spacing so they equal and add another element in here and that will be about paste another set of spacings and then I cannot support so now that we have a navigation bar this is looking cool and simple the next thing that I need to do is add a little shopping cart in here and maybe a search bar to do this let's head back to plugins and the plugin that I will be using today is called icons for design it's a free it's a free plugin you can literally add it from here just click on the plus sign discover plugins and search for it and this will basic this basically has all sorts of styles of icons that you can search inside Adobe XD and just add them they have like material design metro design Ionic font awesome and so on and let's just go ahead and look for it search icon and the one I'm going to use is this feather icon here so let's click on it this what the icon randomly in here so I'm gonna have to just move this somewhere around here and the second icon that I want is the basket or let's have a look or maybe card and the one that I'm going to use is the same sort of style icon which is the shopping cart in here and this as you saw these are this was added to my screen I can remove the plugins now and these are vector based icons which is awesome and you can actually modify them from here you can change the color the size of them and so on so let's move them on the right side of the screen and I would say that and I want to make them a lot smaller than they are actually the border can be changed as well so they look a little bit more premium so I'm gonna change the size to 2 and I'm gonna change the search border size to 2 as well and what I want to do now is kind of want to make sure that they're a little bit smaller so they kind of fit well with the navigation bar I don't want those two icons to overpower the logo or the navigation bar so I'm gonna just make them ever so slightly smaller maybe maybe like this I think this looks nice and obviously I need to space them out and make sure that yeah let's space them out now so first of all let's align the cart from the right side of the screen and what I'm gonna do is select it and just use shift and my arrow on my keyboard to align it so I'm gonna go with 1 2 3 4 I think this is like 70 okay let's have a look and I'm going to create a box in here just to see what's the size like and that's 40 that's 41 pixels and of course you can just drag it down to 40 and move the icon like this if you want it to be a full number and then we can actually use the Adobe XD guides and you can just drag them from here from the left side or the top side if you're gonna drag one down so I'm gonna drag one from the left side of the screen to the icon and this should snap into 40 it doesn't but that's fine what I'm gonna do is zoom in a lot and just make sure that is from 40 as you I think this is I think this is 40 I believe yes you can see it's 40 and I'm not actually using a grid for this tutorial I wanted to remove the stuff freely but yeah you'd normally probably have a grid and so on so let me align this icon now maybe I'm gonna align it first of all with the basket just like this this is aligned maybe like maybe like this and then just move it like one two three four four times this looks like decent spacing and and to be and to be completely honest we can maybe make the smaller and so on but they look fine for now so what I'm gonna do is select both of them make sure that they're vertically aligned by pressing the alarm button here the next thing that I want to do is I'm going to greet them so they're one element and this is you can select the two of the two elements and press control and G or command and G feel Mac then I think the problem here now is the logo is far too big and it's overpowering the other two elements so what I'm gonna do is make sure that the logo is a lot smaller and I'm gonna click on it and make it like around 30 pixels this looks fine to me and I'm just gonna make sure that the logo is spaced out equally with the top the same as those two icons and the menu and also I want to make sure it's spaced equally from the left to the right and this is 40 pixels so let's track another line in here just like this so now that we have those three elements obviously they were grouped these this is one line of text and this in the logo is one line of text as well so we can select all of them together and make sure that they are aligned by using the alignment tool here vertically aligned just like this and also I want to make sure that the actual menu is aligned in the middle and to do this we can use this icon here distribute horizontally let's click on that and as you can see now everything is aligned well one mistake that I see is that people align their text with the actual outline of the text as you can see here on the logo there is a little outline of the text with their grid just like this and I usually like to align my elements my topography with the actual grid and in this case I would drag it ever so slightly like this so it aligns with the line as much as possible and this is what I'll be doing for the rest of the topography as well now that we have the menu of course we can select all the elements and control entry to group them another thing that I can do is to space the navigation or the header equally maybe like 40 pixels from the top as well but of course we can experiment with this and have a look so it would be 40 will be around here and I would normally drag my heading like this maybe and delete the box and see how it looks so this looks this actually looks quite good I'll leave it like this for now but of course we can change it later now that we are done with the header of this website the next thing that we need to focus on is the hero section so to do this I'm going to use the rectangle tool or our new keyboard and drag a big box from the top left corner of your screen and down just like this and I'm going to maybe have the height around 920 and the width will be obviously full width of the screen and as the default adobe likes to add border for some reason which is cool sometimes it's kind of like allows you to see the box but in this case I'm going to remove the border and I'm going to change the fill into a very light gray color like this and this is just because I have a white background on my board and I want to see where this box is so let's use the V tool to deselect and now we need to move this box at the bottom of the screen and to do these there are two ways you can right click and arrange send to back or send backwards or you can obviously use the showcase which is shift control and left bracket or you can simply use control and left bracket to send it to arrange this box to the back and I'm going to use control and left bracket obviously for Mac will be command and as you can see we can now see our menu and this was kind of hard for me to come up with images because unsplash.com didn't have any suitable images I went to Nali express and I found a bunch of images some of them are quite bad but we're gonna have to use all imagination photoshop skills to create something out of nothing pretty much so I found this image here which is actually quite nice it's not high-res but it will do the job so I took a screenshot of this image and I went on unsplash.com and I will link obviously the image in the description below of the order and I found this nice image and I was thinking that I could superimpose the woman with the mask on this image and make it look a little bit more realistic and let me show you how we can do that and I'm not going to spend too much time on it of course make sure that it's looking nice for your shop because you don't want to make silly mistakes and make your shop unprofessional and obviously if you can get a professional photography then yourself that's even better so let me show you how I did this now that we created this box in here I'm going to use this size 1920 by 920 is the size of this box and I'm going to use the same size for photoshop document so let's open photoshop new file and put 1920 by 920 of height click okay and what I'm going to do is I'm going to add this background image in photoshop I'm just going to drag it and obviously we're gonna have to zoom out a little bit and scale this on this tool we don't have to hold shift it's already holding kind of scaling the image proportionately for us but what I want to do is if we go up I want to see maybe like a little bit of the floor and a little bit of the lamps and so on just like this I would say maybe scale it down so we can see a little more detail like this just to make it a little bit more interesting and of course we can move this up and down in a second when we add the image and let's now add the image of this woman with the mask let's drag it in and as you can see this already has potential let's drag it around here I think this will look nice and obviously we need to remove the box of this image and to do this you can go to the properties in photoshop and convert this image to layers so let's hit that and this will pop up and just click yes and this will convert it to a normal layer and now we can use the quick masking tool in photoshop or you can manually mask it whatever it's easy for you but if you zoom in I'm gonna just be lazy and do the select subject in photoshop and hope for the best and as you can see photoshop is doing a really good job in this selecting or subject obviously we can do a little bit better in here but it's not a big deal for now and then all I have to do is click on the mask in here and that should mask the image first and of course as I told you it's not ideal it's not perfect but for one second job that's absolutely amazing and I think this would be perfect but obviously if I wanted to do a little bit more I would click on select mask and refine the mask in photoshop by using this tool and so on but let's I don't want to waste too much time on this now and the next thing that I want to ensure is that as you can see all navigation is here is and I don't want the head of the girl to kind of get in a way so what I'm going to do is I'm going to move the girl slightly down with shift and the arrow key down maybe like maybe like this and of course we can always modify it and so on maybe a little bit more and we can make the one smaller or bigger and so on so let's save this image I'm pretty happy with it of course save the photoshop file so you can edit it later and I'm going to call this hero image.psd and I don't think that you can actually drag psd's so I'm going to have to save this as an image as a jpeg as well so let's save it quickly hero image save we obviously want the quality to be as the maximum quality save us and we're done now that we have this image with the perfect size we can literally we can literally drag this image into xd and drop it and we get this beautiful looking image so far so good the idea behind this hero image in my design is that obviously this is not going to be just women's products so we're gonna have to maybe do kind of like a carousel where the hero image swaps into from a woman to a man to another one different outfits you know what I mean so to do this I can very simply with design make sure that we kind of like add three dots in here you've probably seen them already in other designs so what I'm gonna do is make sure that this is the body is set to black and this will be set around here then I'm going to copy this and space them out like 10 pixels apart and then let's create another one and for the selected image you'd normally do something like you change the fill into something like dark nearly black so this will indicate that currently the carousel is on this is on this point and then it will move to another one and so on of course we can probably make them bigger we can make space them out and so on maybe like make him maybe maybe make him 10 pixels and just paste them out a little bit just like this I'm not too first and so on and I think this is actually they're too small so let's make them even bigger like 14 will be fine this time I'm sure and let's make sure that they have 20 pixels separation okay this is looking slightly better it's one of them things that I can mess around with for ages but let's make sure that they agree with now select all of them control and g or command and g on mark and now let's select the actual select those three bullet points and select shift and the image below and make sure that these are aligned in the middle just like this and also we can make sure that there is 40 pixels from the bottom to the top if you wish to maintain this kind of sizing everywhere but you don't have to so I'd normally do height 40 just like this move them just like this and we're done so we know that they're nicely spaced out to the element this is in the middle and so on the next thing I want to do is add some kind of like marketing text in here and the first thing that I'm going to do is I'm going to I'm going to copy let's copy the navigation here and paste and what I want to add is something like the collection and of course you can think of some nice marketing materials for your branding and so on let's make it look premium so the new collection maybe we can bump this up to 20 pixels maybe we can space the text out a little bit to make it look more premium I don't know and the next thing I want to add is some sort of a hero text in here and for this I'm going to use the heading one that we created earlier so let's copy and paste this in here and this as I said earlier this is play fair display regular roman maybe we can maybe we can change the mean a second to make it look nice but what I'm going to add here is I'm going to add something like elegant and luxury elegant and luxury and this is looking nice and make sure it's like we'll make sure that these are aligned nicely in the middle later and also let's this is looking nice let's quickly select both of them and align sorry align in the middle here but we can also try different styles of text maybe like I don't know bold italic how does that look this is the problem I can spend so much time on this just looking at different forms and styles so let's check italic like this I don't know I'm kind of uh so what I would normally do is I'll normally copy and paste two headings like this side next to each other and then I will change one just like this and then I'll just like see which one is more elegant maybe more powerful and so on and to be completely honest for now I might go with the bold version so let's change it like this exchange okay I think this looks a little bit more luxury let me know in the comments below which one would you prefer and yeah let's let's go with this I think this looks a little bit better so let's make sure that these are they still aligned like this and normally in modern design this would be actually a one big button that people would press usually on their iPad or on their phone but we can also add a button as well just to kind of make it look like it's clickable on desktop as well I guess so to do this let's create a button and to do this I'm going to use the rectangle tool on your keyboard drag a box and this box will be I don't know let's say roughly around 180 pixels and 45 in height and to make this button look a little bit more modern I'm gonna add some style to it and I'm I'm gonna make sure that the border is set to 2 and I'm gonna make the border black so I think this looks like kind of like luxury minimalistic style I'm going to align it around here and maybe we can copy again the navigation bar buttons let's copy this paste it paste it and I'm going to use this for my button as well so maybe we can say browse collection like this and let's see if it fits that doesn't fit very well so we're gonna have to either make or button we're either gonna have to make a button smaller or the text so let's make the button a little bit bigger I would say maybe like 210 a line a line and I think this is looking nice maybe maybe a little bit longer I would say just like this to give it a little bit more breathing space we're at the design stage so we can mess around with it and come back later and once you're happy with this button we can actually we can actually group this button with command and g and actually add it as another component that we can reuse it lights on and so on so this will be our main button and we can add it in here if you wish copy paste it so this is the original button if we change it this one will change too let me show you uh so let me show you so if I was to change this button to I don't know let's say let's say I want the border to be red you will see that this one is changing as well so this is the master button and that's awesome let's change it back to black and leave it there so I want to make sure that those three elements are like equally aligned just like this um oh sorry um horizontally aligned just like this and maybe the button needs to be spaced out a little bit more to the bottom like this maybe even more like this all right one of the things that I'm not too sure about I would usually look at it and okay I think this looks okay for now so let's save this and continue and the next bit and we need to do is extend this outboard let's extend the outboard and to do this you can double click on the outboard zoom out a little bit and just make it ever so slightly bigger we're gonna need some more space anyway so let's make it around here and go up so this will be kind of like the folding point of the website so this will be excuse me this will be full screen so if I put this on desktop preview you'll see this will be kind of full screen and then we'll probably start adding some more elements in here so the user can see that there is more to scroll I guess okay let's start working on the second section here and on the second section we're gonna focus on two sections one on the left side and one on the right side and basically we're gonna have shop for women and shop for men and let's get let's get going with this first of all what I want to make sure is that the spacing between the hero image and the second section is roughly around 80 to 90 pixels depending on your design you can choose whatever you like obviously maybe you want more spacing and so on so this will be my spacing and of course I can drag one of them guidelines from the top just like this and remove the square and I can actually use this square with the 90 height and just rotate it so it's 90 width and I'm gonna use this so there is 90 width on the left side like this and 90 width on the right side like this okay and I haven't obviously we're not using grid on this which you can do it might make things a little bit easier for you but what I'm gonna do now I'm gonna have to figure out how much space I want between them between those two boxes and maybe you know what in fact we can do we can use the same box from here so that's 90 so I'm gonna use this as my middle spacing as well so I want this to be my middle spacing just like this but I'm gonna have to centerline this first with I'm gonna centerline it with the hero image select both centerline create a new box drag this to the left like this so this will be for me 8 to 5 and I'm going to copy and paste another box in here and let's give him a background color of gray so those two boxes like this then what I want to do is this will be shop for women women whatever pronunciation is correct so let's copy the second heading and paste it in here so this will be our heading and remember I usually align my text just to the point here and also I forgot to remove the border from those two boxes click on them both remove the border and we're done so heading one will say shop woman and then I'm gonna use the body text that we created originally copy paste and paste it around here I think actually this spacing I didn't measure but this looks kind of nice anyway and what I want to do is add some space add obviously some text in here and I'm going to be doing the same for male but also want to make these boxes slightly higher slightly higher than they are maybe roughly around 450 pixels like this and 450 pixels like this and obviously this will be now actually depending on how much text we have this will be grouped together and center aligned on the box so let's say shop woman and add some demitex so women's new arrivals it's time to it's time to explore your options and we'll do the same for male probably and what we can do is we can either turn this we can scale this down turn it into a text area if you like by clicking this button here and just scale it down if you like whatever style you want to go for and I think this is looking nice actually so I'm going to go with this group those two together make sure that they are lined in the middle of this box just like this and now I'm going to copy this paste it and move it to the right side right here make sure that they're aligned like this and obviously we're gonna do one for shop men and then just change this to men men's new arrivals and this is looking good now what I want to do is add some images on those two sections I'm actually going to copy one of the boxes and paste it for later I will show you why and I'm going to move this down so we can have it available so let's find a suitable image for women and the one that I want to use is this one here and this actually doesn't this actually has a white background I haven't edited it yet so let's drag this in here and if you double click on it you can actually move the image the way you like you can scale up and down but I actually like the way this landed I really like this so I'm going to leave it just like this and I think this is perfect I'm going to do the same for the male so let me drag one for male I actually have only one for male and let's drag this in and the thing that I want to make sure now is that those two images the aspect ratio of those two of their heads the same as you can see right now this is overpowering this and this is because the aspect ratio in this one is slightly bigger so what I would usually do is try to align their eyes maybe just to like make it look similar I don't know like I'd say like this the eyebrows and the eyes and I think this might just work so then let's place this to the right side and we'll have a look and adjust accordingly so let's leave this and as you can see they're very similar now maybe maybe this needs to be a little bit bigger I don't know but you see what I mean make sure that they're similar and the next thing that actually spotted is that this image this image is a lot warmer than this image and this is something out normally fixes I'm if I'm working for a client I'll make sure that all images have the same sort of feel so this will definitely need to be changed but I'm not gonna waste time doing this and continue and I talked about earlier how this is a one big button those two are potentially going to be two big buttons as well so if you tap on this the hall area this will be a button especially if you're on a tablet you don't want to mess around with small buttons like this so this will work as a big button but of course we can also if you wanted to we can also use one of our buttons that we created earlier copy and paste it and this will make it look super pretty as well so this is another option just like this and of course I would align them nicely just like this and obviously they need to go in the middle of this section and of course this is looking cool but maybe we can even center this text if we wish let's have a look like this so it's just like this so it's all about exploration trying different things what you like what you don't like quite like this but one issue that I have currently with this is that there is a lot of space and you don't really know where the button ends so there's a few ways we can do there are a few ways we can do to do this obviously the first one I'm thinking is add a background color the second one maybe just like this that's why I use the box obviously we have we have to crop the image but maybe we can add a background color just like this so we can see where the outlines are or maybe another another option would be to to add like like this to make this white and to add like a shadow underneath it depending on your style obviously this text now will need to move inside and that looks super stylish as well real nice but if your website design does not have shadows obviously stick to it don't do that and the other way that we can do all this is to separate to create a separator between them obviously we need to like this maybe like a even a smaller one to make it look cool just like this all right I'm just showing you that there's so many ways of doing this I would I would now probably go ahead spend some time cropping those images and put this background underneath them so they look the same and let me copy this button for now and continue because it's taking a lot of time so let's make sure that the text is aligned together just like this this text needs to be aligned in the middle let's text align align boxes and obviously probably want that to be aligned like this I don't know and the button needs to be middle aligned make sure you select those three combine them make sure that they're aligned horizontally there so we're good to go okay I would definitely go for the option with this background color in here and these are looking nice now you can desktop preview this super quickly just to see how your website will look like scroll up and down maybe to see how it looks like I'm not a big fan of this button but those are the things that we can change whenever you like and so on and let's continue now with the next section and the next section is pretty much displaying some products and to do this let's use exactly the same spacing from here which I already forgot how much it was that's roughly 90 so we can create another rectangle here drag another line if you wish just like this drag it even more right there and then this then this will be our new section in here and what I want to achieve here is basically add like maybe woman's best sellers so let's copy this second heading again paste it and move down here in the middle like this so and obviously make sure that this setting is aligned in the middle you can also text align it so when we type it's always in the middle and I will just type woman's best best sellers make sure you align it properly with your line just like this and and then let's add a little bit of text just like here and in fact we could have copied this as a template and use exactly the same spacing let's do that so I'm going to copy this text delete it and just replace this one here obviously center align the text and drag this into here make sure that those two aligned oh okay make sure that those two are aligned like this maybe ungroup those two and align them like this make sure that this is obviously aligned in the middle and I can just use select both of them align with the here section just like this and now we know that this is in the middle and the next bit that I want to do is with not so much space maybe half of this space so half 90 is 45 so maybe we can just do 45 pixels like this at the bottom and this will be our new line so let's drag one down like this and this is where our boxes will start appearing from sorry all items so in this case I want to create five items and I'm not exactly sure how many we can fit and how much space I'm on between them but what I can do is I can create a little box around here and I know for sure that the box I wanted to be roughly 400 pixels maybe maybe that can be roughly 300 and I don't know 320 326 maybe I think that looks like a good number then what we can do is use the repeater grid to kind of figure out how many we can fit in here so what one two three four five is what I want and I would maybe like do it like this sorry so I think we are now now we need more we need more a little bit more spacing so 28 pixels between them that's not too bad I wonder whether this is width or without the borders maybe we can have maybe we have to make them a little bit smaller or calculate it properly so like 22 and and then change the padding all right this is a little bit so make sure you calculate yours okay so make sure you calculate yours instead of wasting so much time like me and I think this is working quite well the spacing between them is 45 and we have five columns which is cool and I can actually undo this and remove it and more probably now create just one and duplicate that one instead and just to remember the 45 pixels now let's let's add a box between them here just like this okay this will be all spacing guide for later okay so obviously we need some nice photos for this as well I'm gonna drag a few and I won't be spending time editing them just like this I think this is working quite well and then I'm going to copy some of the body text from here and in fact I'm going to copy the button as well and the body text paste them underneath here and I think this is looking nice obviously this box will need to go down to fit the size of the product that we are selling remove the border and we can name we will have to give this a name obviously like gold I don't know sparking mask not very good with giving them names and another thing I want to do is just below here let's copy this text and paste it and just below here maybe around there I will add the pricing as well so we can have ten ten dollars quite cheap for premium mask I guess and then we can have two spaces and we can have what's the dollar sign we can have eight dollars just like this and because this is this is technically on sale what I can do is select the ten and use this strike through text effect in here and then I can actually do the opacity on the ten to be around 60 so excuse me not on both just on this and like this just on the ten I want to make sure that the can use 60 and it looks like it's selecting both so what I'm going to have to do is actually separate them which is a little bit annoying but let's separate them make sure that this is set to point text copy this paste it just around here make sure that this is set to eight and remove the strike through text I think this is looking good but obviously I wanted to make sure that this is less prominent than eight so I'm going to set the opacity to 60 so eight pops out a little bit more then we obviously can do with a button if we select this button and scale it down with holding shift this should work for us and what we have to do now is instead of browse collection we'll just replace this with add add to add to basket and of course we can make this button ever so slightly smaller like this make sure that the text is aligned and so on I think this looks okay looks presentable and the next thing that we can do on this is because this is on sale we can we can actually make a little batch that actually on top of here so let's do that to do this I'm going to make a little circle just like this circle can be around 51 51 make sure that the circle is black just so it suits our team and it sticks out a little bit to create this cool effect we can make it so it sticks out kind of like the same sort of okay and then inside here we can obviously put sale let's copy this text here paste it and go like this sale and obviously we have to create this as maybe white so we can see better like this and I think this is a little bit bigger so let's do this as 12 to okay this looks perfect actually quite like this and we are pretty much done now let's use the repeater grid tool let's select all of this ctrl and g to group it and if we do repeat the grid then we can just track make sure that the spacing between hits this mark here which was 45 if I remember correctly correctly and just let's add the rest of the items and that seems to work perfectly obviously we're gonna have to replace some of those items so what I will do now is let's ungroup that group in here we can change some of the pricing of course and so on so let's say this one is 40 and remove this put the opacity up remove destruct the text obviously we didn't select the sale which is good actually so we don't have to remove it but you get the idea I'll probably finish this later on just make sure that they looking good and then let's just walk a few images on here just to make it look a little more presentable so I'm gonna go ahead and add a few more like this one looks nice and the this this jpeg looks nice this this one looks nice and so on obviously change the naming to make it a little more realistic and so on and the next section I'm going to do which will be an exact copy of this so let's copy the size of this which was 90 90 like this let's drag another grid rule this thing here like this so we got 90 spacing remove it we can now copy this full section copy and paste and just move it down so it aligns with our grid that we just made up like this let's I don't know let's change this to something else new new arrivals and then we can change this to something else as well so new new rows updated every day it's time to it's time to explore I think this is sufficient this is good and I noticed I actually copied this section in here so let's make sure that we got we add some nice text in here and I will say oh smooth and soft with and some marketing obviously you can make this a lot better at some marketing stuff just like this make sure it's aligned with everything like this okay and this is looking perfect nice obviously we're gonna have to change we don't want the same images to repeat in here so and the names and the pricing so I'm not gonna waste your time changing all this but I'm just gonna put some new images in here so let's start with this image because it's just super easy and we could have done this in an easier way with the grid but I kind of forgot so let's just do it super quickly anyway this one I think you can select multiple images and drop them on the grid and that will actually work but it's kind of too late now so leave it for now like this and one more this one looks cool save this and let's finish this off with subscribe button and foot on social media so let's make this a lot bigger and for the sign up section that I'm going to do I'm probably this was 90 so I'm probably gonna double double the spacing so let's do something like 180 or whatever because it will be too close together I think if we did 90 again but this will be a new guide so let's add another guide like this just like this okay and we'll probably use this in a second as well so let's copy the second heading we use this quite a lot the second heading so let's copy this paste it around here and what I'm gonna do now is let's add some text so first of all let's do something like sign up to God's newsletter and get updates about all latest arrivals and exclusive sales something like this I think this looks real nice and we can also make it italic if you wish I think this would look cool I don't know why this broke but round 62 will be nice I think this looks cool makes it look expensive I guess make sure this text is properly aligned and like this I think this will be fine and obviously we're gonna have to create some sort of input box in here so I'm gonna use the line tool which is left on your keyboard I know I'm not going to measure it just gonna drag a line like here make sure that the line is set to black and I'm going to copy some of this body text here paste it and what I'm gonna do is add something like enter enter email address make sure that this is like this aligned with the box I think this looks cool make sure we can put this to opacity down to 60 and we can copy and paste this at the end here and maybe do sign up sign up and I'm gonna leave sign up as well to be the same looking like this again I think this looks nice let's group all this together and what I want to do is I want to make sure that these are aligned in the middle like this and I'm pretty much done here so I'm gonna use the 180 pixels at the bottom now to start creating the last section of this website and I'm sure that you're glad to hear this the last section of this artboard which is the footer so we have 180 let's use one of them alignment lines like this remove and what I will do is for the actual links what I will do is I'm gonna use again the body let's copy this paste it in here and let's add a few lists just like okay I'm gonna use this for the buttons for the list and I'm gonna use the same font for the headings but I'm just gonna bump this up to like I don't know something like 25 would be fine I think so let's name this how can I help with a question mark make sure okay like this and as you can see I think that these are like really close together so maybe I would probably bump up the line spacing between them to be like 36 instead so they have a little bit more breathing space like this I would say so they're easier to click I guess as well but on mobile we might have to space them more and so on and let's create a little separator between the heading which will be nicely aligned here and let's make it like this I think this will be looking nice what we can do for the separator let's create a line just like this and depending on how many sections we have we might have to calculate the spacing again which it's a little bit annoying but let's do that and let's first of all before we do that let's make this line gray as well just like something nice like this I'm sure you'll look nice and sharp when we zoom in okay make sure that the spacing between those two elements those three elements is kind of equal like this by using the alignment tool in here distribute vertically yeah let's calculate how much we can fit so let's create a box replicate the grid c1234 and let's see how far we can push it maybe like this but that's a lot maybe maybe like I think 40 sounds pretty good um let's make the box is bigger this was so lazy but it is what it is so now that we have this sort of grid here what I can do is use this line to align like this and I can copy this and multiply it around here just like this to save us a lot of time and effort and what I will do is now just swap some of the elements just like you can say useful info info on this one let's create some model lists ability and so on then we can say maybe like a company and for this we can say about I think I already had about I don't know we can say about in contactors I think we already had contactors but it doesn't matter it's just the me text anyway and here we can maybe do download app just to fit the spacing and I've already downloaded um Apple App Store app icon that we can add just like this yeah remove the text and of course we can add the google one as well and so on and last but not least what I want to do is finish off this website with adding a foot at the bottom here so what I'm going to do is make this for width and then say 220 God and I need to copy and paste the copy the copyright sign in here like this and I can obviously centerline this right that we can make it this as well and last but not least we can use the plugin the icon plugin icons for design and just add some social media plugins like let's say Facebook I like this one let's add Twitter I like this one let's add Instagram this one looks nice I like let's say snapchat for example and YouTube of course okay let's copy those icons let's cut those icons and paste them right in the bottom here like this and what I will do I'm not going to spend too much time I'm just gonna like figure out the spacing I think just like this I think this will be okay and what I will do is I'm gonna use the I'm gonna select all of them and then do the equally distribute horizontally like this make sure that this is aligned with the copyright at the bottom and you move them like this and we're done save us and we are now done with the first page let's have a look at what we've created so far click and as you can see everything is looking nice maybe this could do a little bit more work I would say the button I'm not a big fan of but everything else is looking pretty nice I would say now that we're done with the desktop version it should be actually super easy to convert this into mobile and let's get going with this so the first thing I'm going to do is create a new artboard by clicking on here on the left side or just press A on your keyboard and this should give you all sorts of different devices and the one that I'm thinking of using is the iPhone X XS 11 Pro and the reason I always use this one is because there is a lot more mockups than the max 11 I think but you can use whatever you like so I'm just going to go for the pro and let's zoom in and get started so the first thing that we are going to have to do is we're going to have to kind of we won't be able to fit this anymore we can keep the search icon and the basket but we can't fit this so we're going to have to make the use of the burger menu let's get started first let's copy the logo paste it where is it paste it somewhere drag it in here let's copy those two the search and the basket and we will create the burger menu ourselves and what we can do on here is let's do it like this just like that make you obviously want to do some usability tests make sure that they're not too close together when it's used on mobile and so on the logo will be in the middle of the page and let's create the burger as well we might have to actually go down with those two I think I feel like gonna have to do that and the board of them looks quite big so I'm gonna have to go to one make them a lot thinner then they are that looks a lot better already so make sure that they align like this and I don't know what space to use between them maybe like let's have like maybe like one space what is this I don't know maybe like 16 will be fine just like this and I'm gonna add 16 pixels at the left side as well where we're gonna add the burger menu so let's do this like that is this 16 I don't know okay this is 16 now it's looking good to make the burger menu we're just gonna use the line tool basically I'm gonna make it roughly 17 pixels in width so let's do that 70 pixels in width make sure that this is set to black and copy this paste it make sure that there is like a little bit of space maybe five pixels will be fine and another five pixels and here is our burger menu select all this group it align it here on the left side then zoom out select your logo maybe I don't know I have the feeling that we might have to make the logo even episode slightly smaller as well just like this I think this will be nice to make sure that we have aligned everything nicely I'm gonna use this box again to align everything but yeah I think I'm gonna line those let's select everything first of all make sure that they're aligned control G to group them and I'm going to align them like this with this at the top okay and this is looking nice and professional the other thing we can do on mobile is maybe add like a background color background for the navigation and to do this I'm just gonna select white go down make sure it's like equally spaced and and we'll come back to this in a second actually let's remove it and the reason I was thinking of adding this is because when we copy this image and scale it down like here let's scale it down like this actually let's create let's create a square that is going to mask the image like this so rectangle tool somewhere around there not too sure how much we want not actually let's make it a lot smaller because we don't want to waste too much space like 400s 420 should be okay let's mask let's mask this image with this box so if I put the box on top right click mask with shape and here is the image masked so I can align this now in here I think I made this box slightly smaller let's do this and now that we have the image inside I can double click make sure I line the person the way I like it just like this I would say okay make sure that this box has no border like this and this is pretty nice actually maybe now obviously we're gonna have to send this to the back and we're gonna have to this is why I was thinking that we either have to move the model down or we're gonna have to do like a white background in here which is totally fine to do too let's align in the middle in the middle okay perfect so this is totally fine and the next bit obviously we need to transfer is the title like this so I can copy and paste this put it around here and Adobe XD should allow us to literally scale this down holding shift and make it look like this and if you are worried and this is usually a hot button I'll probably remove this now but let's leave it but if you are worried that this is hard to see on some images of course we can add a white background maybe like this I know it's not the best we can do this maybe like this put the opacity down or maybe we can move this entirely outside here so there's so many ways that you can explore so depending on your image you can do all sorts of things I'm gonna leave mine like this to speed up the time I'm not happy with the extremely happy with the button it looks a little bit small maybe but let's go with it or maybe the button can be like this in the middle here and maybe make it bigger like this let's see if I can shift resize the button no okay that's fine I can align it maybe we can align the button here in the middle you know there's so many ways we can do this I think this is pretty cool as well so yeah I'm not too sure about this so I'm gonna move it up and leave it for now and the next bit that we need to do is obviously replicate those three boxes and they're very easy to do copy paste move move it like the amount of spacing that you want let's say 30 pixels shift and scale down make sure that the fonts are still readable in here because Adobe could mess up with them so in here maybe this font can go down I don't know maybe that's too small it's up to you to decide like this and I think something like this might work maybe we can left aligner now whatever you like and to be completely honest I'm not I think this font looks very bold now compared to the heading so I don't know whether we will need to overpower this with with like a border font let's say bedroom and and so on I don't know I'm not too sure about this so this is the way you'll do anyway I'll probably so I'll probably choose a font that fits better and because we made this as a component in here I can change it and this will change everywhere on the whole page which is good but anyways the only thing that I notice is that we didn't do this and I'm pretty happy with this now and maybe we can even make a cool effect and make the woman look like this I think this is pretty cool and we can allow for more text from here like this what's happening with this text like this you know I think this looks pretty cool as well so many options in here let's get this aligned and so on so I would do exactly the same with the man section copy paste paste in there let's copy the image of the female of the pan pasted in here so we don't have to mess with it too much obviously we need to scale it down like this I think this looks cool and also we will have to extend the outboard as well double click on the outboard extend down down and keep on working on this so let's change this to man and let's change this to man and so on and the next section will be the woman's best seller I would literally copy this make sure paste it make sure it goes in here and I'll probably at this point make sure that this that this text here which is now 19 is the same as this one so 19 so this text needs to be the same as this one so they equal and this text needs to be the same as the other one and so on so this will be 14 maybe like this make sure that they're centerline and so on and we're losing some text in here let's make it like this and I think the line spacing is quite too much in here so maybe put a 16 like this and put equal spacing between the elements and so on I'm not putting much details in this as you can see but I just wanted to speed up the process let's copy this element here paste it we're gonna have to resize this a little bit like this you know he wants now probably maybe because of the sale but that's fine we can literally just make the image slightly bigger and that would do but this is quite a big image so instead what I'll do is actually I'll move this here I'll probably probably make the image slightly smaller and like this and then I'll move everything like this and then we'll continue with the rest of the stuff with the rest of the website exactly the same way obviously this is a very quick demonstration how I'll do it I'll probably spend a little bit more time to align everything and so on but you get the idea now I think the desktop version is looking pretty cool and that's everything from this tutorial I hope you liked it in the next tutorial I'm going to show you how we can develop this and don't forget to subscribe to my channel comment below smash the like on this video and if you have any questions if you have any questions yeah please comment below so I'll see you in the next one thank you very much for watching