 What is up everybody my name is Roddy and you're watching my channel Roddy the Brand. Today we're going to create an e-commerce website design in Adobe XD. We're only going to focus on the front page but I will also show you the wireframe, the plan, the branding and at the end of the video I will show you how I created the logo as well. If you're interested at developing this website this is what we'll be doing in the next video using WordPress and e-commerce. Before we begin if you find the video useful please consider subscribing, hit the bell notification button, smash the like button and if you have any comments or suggestions please comment below and now let's jump on the computer and get started. Hey welcome everybody and let's get started. In front of me I have my home wireframe which is a desktop version and on the left side here I have a little bit of branding guidelines and a plan. Now let's have a look at some of the branding styles and as you can see I've kept this very very minimal. I have four colors and in fact we're mainly going to be using those three colors. This is going to be our primary color, this is going to be our secondary color mainly for our typography and this will be useful things like separators and last this is going to be useful the sale promotion offers and so on. Here on the left side I have a heading one which is Nunito 38 and both and underneath I have the body text which is poppins 16 and set to regular. Of course it's nice to have a few different headings like heading two, heading three, heading four but in this design I'm probably going to end up just using one and later on I might just finish this off and create the rest and the other thing that I wanted to mention is that if you go to a library here on the left side you will see that I've already added the colors so I can easily reach them and use them throughout the design and I've also add the characters and to do this usually you just select the colors and you press the plus sign here and it's not available because I've already added the colors and it's the same for the fonts you can just select them and press the plus and it will add them in here automatically which means that if I ever change my mind later on and let's say I wanted to make the heading a little bit bigger and I change the global style from here it will change on the whole layout which is pretty useful now let me quickly walk you through the plan now the plan is fairly simple we want this website to be to have an engaging website design I'm going to show you how we can do that we want to have a great about this page ideally with contact details address and social media this in this tutorial we're probably going to skip this because we're just going to focus on the homepage but it's definitely beneficial to have a strong about this page that's why I added it in here and then we want to have offers excellence online support which I'll show you how we can achieve as well we can have popular payment options blog for SEO is great to have product reviews SEO friendly or website needs to be SEO friendly so we need to think about this as well it might be nice to offer free shipping just to compete with bigger websites we also need a way of grabbing emails we need high resolution photos we need some offer incentives encouraging social sharing and we need we obviously need some legal stuff like refund policy copyright and so on I usually like to create a design and then iterate iterate and iterate until I come up with something that looks fairly good okay now this is the plan and let's have a look at the wireframe now the wireframe is fairly simple you can either do the wireframe in here in adobe xd just like I have or you can do your wireframe on a piece of paper like many people prefer the reason I'm using adobe xd is because if I change my mind I can always drag stuff around and and just modify my layout that way I want it so that's why I prefer adobe xd and once I have an idea of what I want to design it's usually nice to have the content that is going to be used for the real website instead of using laura mipsum so definitely do that if you can so let me quickly walk you through the wireframe and then we can start designing in order to create engaging website design I decided to have a big hero image and also maybe this could be a slider on the left side we're gonna have the heading a little description and a shop now button on the right side we're gonna have an image we can also have one of them pop-up chats which are quite useful for customer support and this is how we can offer great excellent online support and also as you can see at the top we have easy way of getting in touch with the company so phone number email address and here on the right side we have some offer incentives such as free EU shipping 30 days money back guarantee 24 7 customer support and below this we have a logo we have a search bar and we have the car this is all good after this we have our menu I've already added some of the menu items that I want all products with accessory toys care and special offers let's scroll down and have a look at the rest of this this is going to be a section that we want to push the popular products we're gonna have a little bit of a description in here and then we're gonna have a product image description of the product price and add to card button after this we have categories and I wanted to break the layout a little bit inside here we're gonna have again description and then we're gonna have a few different categories such as toys food care accessories and sale of course we can always move this around later on and see what we can come up with special offers is going to be exactly the same as popular products we're just gonna pull the special products and a little bit of description products just like above now let's move on to the next session and this will be the footer in the footer we're gonna keep it quite minimal we're gonna have about section company section and keep in touch in the about section I've just added a few things as a demo we're probably not gonna develop absolutely every single page because that will take far too long but ideally you would want to have shipping deliveries return exchanges affiliates if you do and the brand ambassadors all story FAQ terms of service refund policy and under the company we can have about this privacy policy terms and conditions contactors and inside here is a waste of grabbing emails and also encouraging people to share the website on social media so we're gonna have a few different icons for facebook twitter instagram and so on and then at the end we want the copyright and we want some payment methods that people can use now this is the plan I'm going to leave this and I'm just going to double click on the outboard and now we can duplicate it and we can start designing I'm going to move this outboard around here just so I have it all right okay let's start from top to bottom and we'll work our way down but before we do this it's nice to have some sort of a grid for this just so we know how big our website is going to be and I'm actually going to base this nearly on bush trap so what I'm gonna do is double click on the outboard and then show the grid the grid that I'm going to be using is a little bit different than the standard one that Adobe XD shows you and also I forgot to say that this outboard is 920 and the height is just random at the moment but it's fairly big it's 4296 at the moment but we can always adjust the height later on for the grid I'm using 12 columns the girder width is set to 16 column width is 6 to 93 and the left and right margins are set to 314 pixels now I've actually made the columns color a little bit lighter than it is originally but I'm also going to be removing this from time to time because it sometimes it just gets in a way and what I can do is let's grab some lines from here so let's do that okay let's zoom in make sure that the line is snap snaps right where or grid starts and let's create one more so if we create one more around here I think this one is looking good already nope all right I think this one is looking good now and we can remove the grid just so it doesn't get in a way all right let's start designing front top two bottom first of all what I want to do instead of changing the topography the color on every single element here I'm going to create one and I'm going to create a component so let me drag the phone number above here and let's start working on it first of all if we open the library I want to choose the primary color which is this purpley color and I want to change the font size to be roughly around 14 a little bit smaller than the body text the body text is going to be around 16 and then I want to add an icon in front of it to make it look a little bit nicer and more interesting I'm thinking of just adding a circle so what I can do is let's use the ellipse tool by pressing T on your keyboard and by holding shift and pressing with the mouse button I can just create a new one so let's do something like 31 pixels with 31 pixels and then I want this to be the primary color and let's remove the border this is looking good maybe we can space it out a little bit like so and also I want the opacity to go down to 20 I think this is gonna look good and now let's find an icon for this so we need a phone icon and to do this you can use the plugins in Adobe XD and as recently I found this one here auto icon but I also like to use the icon for design plugin which is pretty good so let's use this one here and the reason I'm using this one is because they actually have the most popular icons so I'm going to use the boost drop one let's click on boost drop and let's find the phone so phone let's drag one in here and let's make it smaller like so I think this is actually looking good and the only thing that I want to do is change the phone color to be the primary color I don't know if this needs to be smaller but that's looking good to me now that I'm happy with this I can actually select everything and create a component by clicking the plus sign here and as you can see these have created a component now I can drag the component anywhere on the page and every time I make a change so let's say we want to make the font a little bigger you'll see that it changes everywhere which is fairly useful if we ever need to change something this is a good let's do the rest of the stuff so we're gonna need the email so let's grab the email and just replace it like so let's copy this and paste and let's do free shipping paste let's copy and paste let's copy paste let's copy paste and do the next one which is 30 days money back guarantee and I think we have and I think that we have one more which is 24 7 customer service all right now that we have all icons we could select all of them and just make sure that we align them a little bit better like so and the reason I've stacked them like this is because I want to add the rest of the icons so let's start by getting all the icons that we need and then we're going to replace those ones if you go to plugins let's search for envelope this one is looking good I'm going to be using the outline icons so they're all consistent then we can do track we also want some sort of time for the 30 days money back guarantee maybe clock all right this will do and then for the last one we want a customer service so maybe some sort of like a user or a person all right I quite like this one so let's start by replacing them now one mistake that I used to do is I used to make every single icon the same width and height if you do this especially with those icons they will look out of proportion let me show you what I mean so if I was to select those two and if I was to make them exactly the same size you will see let me do that you will see that the envelope is looking so much bigger than the truck and if I was to do maybe the circle I mean the circle is not so bad but the truck is definitely out of proportion I'll probably have to do the truck something like this and they'll look a lot better so definitely don't set the same width and height for all icons saying this let's start with the envelope so I'm gonna cut the envelope go inside here paste it and move it inside and let's just base it around the phone so something like this will do as long as it's like in the middle sometimes you might need to mess around with the pixels so they kind of like snaps better in the middle but let's save some time and keep on going so yeah this definitely doesn't look in the middle to me this looks a little bit better now and then for the free shipping let's grab the truck make it a little bit smaller maybe even smaller I think this will look good so let's go in remove this one save the truck and we're good I don't know if this needs to be aligned slightly to the left maybe okay 30 days many back guarantee let's do the same can you see how this is like so much more to the left I think this is because we probably just need to make it slightly bigger okay yeah this is looking looking good now all right and then the last one is going to be the 24 7 so let's grab that and make it much smaller like so I think this is gonna look good let's remove this save all little person and this is nice okay this is pretty cool now that we have them done what we can do is they were grouped by the way but what we can do is start placing them around let's remove these ones so we have free shipping around here we have 30 days guarantee around here and definitely don't want to lose this one then we have the customer service so let's remove it all right obviously they're not aligned at the moment but what we can do is let's grab both of the icons on the left side here we can align them to the left if we want with bootstrap there might be a little bit of padding we'll see how it goes let's grab both of those items the phone number and the email let's make sure that they're aligned to the top like so and let's group them to group them you can press ctrl and g or command and g on your keyboard and then we can use this stack option in here that would basically give us the option to space the elements around and also that would give us the option to vertically stack them if you wanted to do the mobile version as well so I'm gonna leave them stacked and I don't know why this is going really strange but yeah I'm gonna leave them stacked like so and then at some point we might have to change the spacing actually that's not looking too bad all right this is all good let's do the same for those three icons so what I'm gonna do grab all of them align all of them ctrl and g to group and then stack them the stack will be 30 pixels in between and then we can move them to the left this is looking fairly good now what I'm thinking of doing is we probably need to have this section a little bit smaller than it is so I'm gonna go with something like 50 pixels so let's do 50 pixels like this and you can't keep this background if you wish to align stuff but what I'm gonna do for now is I'm just going to use this line here that we've created in fact let's create a new line so what I'm gonna do is I'm gonna use this guide here and I'm gonna create another line using the line tool and then let's just change the line color to the color gray from here so if we get the color picker like so okay we can now remove this box and that box will be actually useful to center stuff so what we can do is we could keep this box just save it as white put it all the way through if you wish and just with ctrl and left bracket just send it to the back and we could potentially just use this now to center align stuff in the middle in the middle like so all right I'm pretty happy with this we can also group this section like so and now we can move around if we need to one thing that I'm noticing is that there might be a little bit too much space between the items but it's okay we can always iterate which is part of the plan as you can see in the next section we have the logo a search bar and or cut all right let's now add the logo and I'm gonna grab it from here copy and paste and if you wish to know how I made the logo I will show you at the end of the video it will be timestamped so you can quickly skip to that part if you wish so I'm gonna make this a little bit smaller like so and center align it and that would do the job now let's create another rectangle just so we can measure how big our heading is and at the moment I'm thinking I'm thinking of setting the heading to be roughly around 80 pixels in height so the logo might be a little bit too big we'll see let's have a look yeah let's make the logo a little bit smaller like so we can always adjust the laton and then we can move this line here to the top like so and we need to change the color as well so let's select this one here actually we can't select that we need to grab the color picker all right that's looking cool um of course we're gonna have to move the search and we're gonna have to move the items I think this is gonna be cool not sure whether the logo needs to be a little bit smaller but let's leave it for now so I'm going to actually drag this square as well and the reason is just so we can have it as a section and we can send the stuff with this square but definitely don't need it in fact but yeah definitely you definitely don't need it so let's move it to the back I'm sending it to the back with control and the left bracket and we can definitely group this in a minute but before we do this let's finish the search and for the search bar I'm gonna keep it fairly simple the search bar I want it to be roughly around even this would do I think 47 and now let's make the corners round by clicking on the box and then selecting those circles in here and you can just drag them and I would make the search box round and also I want to make this a little bit smaller than it is now maybe around 500 pixels I think 5 570 looks good to me and also I want to change the border so let's select the box again and let's color pick this color from here the gray color and that's looking good and also let's change the topography so I'm gonna click on the topography choose the poppins font and I want to make sure that this is not so prominent I want when we start typing the text will be that kind of color but just so it's not too destructive I want to make sure that this is maybe we can use the same color as here I don't know this is too much maybe a little darker something like this would do and also I'm going to make this a little bit smaller I think like 14 and make sure that everything is just middle aligned like so and let's just say search the store okay or search is not done we definitely need to group this one more thing that we can do to the search we can either add an icon here or we can leave it empty I do like the minimalist design without the icon so I'm tempted to just leave it to be honest but yeah normally you'd have an icon which you can click here but most people just type and press enter so yeah let's leave it as it is so I'm gonna select this search box and select the text by holding shift and then Ctrl and G to group them and we might as well make a component of this just in case we want to reuse it later and by the way I don't know what to name this but let's say we can do this this could be named as offer incentives and this could be named as search like so let's close this and now that we've grouped the search bar we can actually select the search bar select the box below it and we can centerline it and centerline it just in case it's not and now looking at the logo I mean the text could potentially go down a little bit I don't know yeah I think this is looking a little bit better anyways let's continue and let's do the cart now for the cart let's open the library again let's choose poppins 16 and this is already looking nice to me actually I'm gonna move this to the side and let's just add a nice icon let's go back to the plugins and then the icon can be cart so let's have a look at which cart we can use okay this one is the one I like so let's throw the bag in okay this is the one I like actually this is the one I was looking for it's actually back it's not a cart or a basket so let's make this a little bit smaller get the color from the from the color palette in here and let's just move it to the side yeah this looks already so much better and I'm not sure whether they need a little bit of space potentially but these are the things that we can always iterate on and change so what I'm going to do is select both items make sure that they're center aligned Ctrl G to group them and I'm gonna by holding shift I'm gonna press the background shape here and make sure that they're middle aligned as well and we're pretty much done with those two sections now let's focus on the menu for the menu I'm thinking of using the primary color so what I'm going to do is with the rectangle too on your keyboard let's drag a rectangle that goes full screen like so I could have zoomed in a little bit and now what I'm thinking is let's make it around 50 pixels and let's select the primary color which is the purple color and then of course we need to remove the border don't forget to do that and we should be okay I don't think that there is a line here is there oh yeah there is so there is a line here which I don't actually want let's remove this line and let's put that to the top all right this is looking good now what I'm gonna do is focus on the items here what I can do potentially we could just grab all of the items select the color that we want I don't know if let's we need to put them on the top by doing Ctrl and right back it or shift or Ctrl shift and right back it but this color is doesn't have much contrast in my opinion so I'm gonna go with clear white and this is looking a little bit better but also I want to change the font to poppins so let's do that and maybe we can set it to be poppins 16 and then potentially medium and also we might as well to make it a little bit more readable we might as well just make it make the text uppercase by clicking the button here and that's looking better obviously they are all not they're not equally spaced now and you could use the spacing options in here to horizontally align them but but what I'm gonna do is I'm going to group them first of all and I'm going to use the the stack trick that we did before so let's click on stack and that would basically allow us to just easily move them so if I put 20 pixels so I can grab this now and just easily move the icons as much as I want and I'm thinking of giving it around space around 60 pixels maybe let's have a look yeah that looks quite clean to me so let's grab this grab the menu grab the menu solid shape at the bottom and center line all right this is pretty cool we can definitely group this as well so let's select everything Ctrl and G all right let me show you something cool quickly and I think I moved the logo actually so let's move it like that that's looking better and what I want to show you is how you can check for contrast so for example if I was to grab this whole product and let's just leave it here on the side for now and if I was to grab this and select the layer below and if we go to plugins I have this plugin called stack so if you click on the plugin and then you can check the contrast so as you can see at the moment the contrast is good the text is readable everything is good but if I was to change this text to something darker let's go click on the purple and let's make it like something like this I think that would do so now if we select the text and the shape below and if you go back to stack check contrast you will see that the colors didn't pass because there is no contrast and it's hard to read so it's a pretty cool plugin to know about so let me remove this and we can continue the menu is now looking good let's make sure that is all grouped I think it is already no okay the menu is now grouped which is pretty cool and this line is not required so let's remove it and we can now focus on our hero image or slider all right first of all so let's remove some of the stuff I mean I already know what I'm gonna have and let's just have a little bit of space at the top I think this is roughly around what 30 pixels maybe all right yeah that's 27 pixels maybe we can have it more like that and so on and let's focus on the actual hero image so I'm gonna shrink this down to fit or guides now first of all let's start by changing the actual color of the shape so if we go back to colors do that and of course we'll have to change the setting to nonito but for this one I'm gonna go with like maybe extra both and change the color to white and I definitely and I definitely want this text to be a little bit bigger than the normal headings maybe like maybe like 48 will do and we can definitely for this text here we can definitely use the nonito 16 nonito 16 pixels and just make this as white and then for the button maybe we can just drag a shape with the rectangle tool and maybe make it 176 by 36 something like this and let's add the shop now on top of it of course we need to change the shop now to be nonito 16 pixels like so let's remove the border and we can add shadows as well actually saying this maybe we just take it off and I'm thinking of keeping the actual buttons sharp for this one but then for the actual hero image I'm thinking of giving it a little bit of a border maybe like 10 pixels like so and of course remove the border color as always so this is already looking good the only thing I would do is maybe just mess group those things and maybe just like mess around with the spacing a little bit I mean that that's already looking okay to me we can definitely fix it later and maybe instead of having the secondary color for the button let's go for the primary I think this might work okay so let's leave this now let's group all of them like so and save by the way that looks nice okay it looked like it's one pixels outside but it's looking okay I think let's now focus on making this a little bit more interesting now first of all let's find a an appropriate image for this so what I'm going to do is I'm going to go to unsprach.com and I'm going to go for dog toy and then let's find one that would do it or style so I think this one looks quite nice so I'm going to click on this and this and this photo is by the rinker and I will definitely include the link in the description and my blog post so let's download this save it and I'm actually going to put this into my working folder I'm going to create another folder called photos and paste it in here so we're just a little bit more organized quickly go back to Adobe XD and if we copy this layer here ctrl and c ctrl and v to copy a map we can change the color just so you can see I'm thinking of dropping the image in here so it's kind of masked already so let's grab the dog and drop it inside here and as you can see this is already looking good but but ideally I'd like to see a lot more from the dog so I'm gonna go inside and shrink it quite a lot maybe halfway through and this is already looking good to me maybe we can show a little bit more from the toy and that's pretty cool so let's leave this and as you can see this is already looking good but we can even we can take it further and make it even more interesting and what I'm thinking of doing is if we use the ellipse tool here on your keyboard and if we drag a big circle I'm thinking of using this circle kind of like kind of like as a mask in here to create a nice effect so that's looking cool definitely remove the border and we're definitely gonna have to copy and we're definitely gonna have to copy the shape below so let's move it right let's cool paste the shape and we might have to mask it right click mask with shape all right now that we've masked the circle to be fair now that we've masked the circle we could go inside and just change the circle color so what I was thinking of doing is I was gonna go for linear gradient and we could choose the purple here and then we can maybe choose I don't know a lighter purple let's just choose the same purple and then let's go lighter and this is looking cool and maybe we can change the gradient so it goes from like the top left corner to the bottom right corner like so and release right this is already looking good but I feel like this is taking far too much off the image so what I'm gonna do is I'm actually thinking of moving this a little more until the image the image is started to kind of like show but I might have to just make the image of the dock a little bit bigger I think this would be pretty cool all right this is looking cool so if you double click on dock we just make that a little bit bigger just so it fits okay I think this would do the job let's have a look yeah that's pretty cool and now if we click on this top layer here we can go we can do control and left bracket to send it back and this is because I wanted to show the text but now this one is to the top so we're gonna have to send one this so we're gonna have to send this one back as well and also I believe that we might as well remove the bottom one so I'm gonna send everything to the back and just remove this bottom shape or we can keep this shape for later years if we wish to match them so I'm gonna leave this so we don't get the outlines and so on so this is looking pretty cool so far maybe I wish this was a little bit smaller so we could select everything here and just make it ever so slightly smaller like so all right the next thing I would love to do is I would definitely love to like first of all that would be nice to be sent it would be nice to send to this and I would love to create some sort of a pattern pattern with the docks so what I could do is in Illustrator I could create more docks like this and then maybe create a nice pattern with different docks in here but just to show you what I mean I can get the docks from the logo and just change the color to something super light maybe I wonder yeah let's go yeah let's go something super light and then let's turn the opacity down like so and I'm gonna use the repeater grid tool and now just to like show you what I mean obviously this needs to be masked as well so I'm gonna have to do that okay let's do this and then we'll mask it later I'm gonna have to do it like that and go down I don't know this is looking pretty cool I know it's not the best but definitely spend a little bit more time on the marketing materials but yeah that's looking really nice but ideally we're gonna have to mask this as well so what I could have done is I could have taken this shape from here and just let's grab this shape and I could have cut it so it's a little bit annoying but let's grab this shape back so let's copy paste us bringing back and what I'm gonna do is okay if we select the circle and the shape at the bottom here we can actually intersect this and this will give us the shape that we need for the pattern okay now that we have this shape we can actually save it somewhere around here just in case we need it later on let's copy the shape and paste it into Illustrator and actually I need the logo as well so let's grab the logo go to Illustrator and paste it and what I'm gonna try to achieve here is I want to achieve a super quick like pattern so what I'm gonna do is change the color of the dogs let me groove them to something very light like so maybe change the opacity down quite a bit I don't know something that looks good and then in Illustrator we can do object and then pattern and then make this way we can make patterns I mean they're a little bit hard to see because of the color now actually but if I click done and if I click on this shape here I can definitely go to where is it where is it where is it I think it's what isn't that's what just new pattern here it is so if I click on new pattern this will actually apply but of course the this pattern is so close together so I'm gonna have to change a little bit what I can do is make the dogs a little bit smaller like so or I can just mess around with the settings in here okay I think this is gonna look okay so let's leave it as this and now I can technically cut this and paste it into Adobe XD and if this works copy I'll paste here it is if this works we can have the pattern I mean to be completely honest is not what I was looking for maybe a little bit bigger so we can edit the pattern again and make them a little bit bigger and then we can change the grid to bricks this is looking cool let's see I don't know I think I think that the dogs are far too small but I need to offset them a little bit more okay this is gonna be better so let's do this yeah this is looking a little bit better I mean again it's knowing how it's ending here so let's change that one more time super quickly we're probably never gonna win now all right this will do for now let's copy and paste it and I will finish this later but that's how I would do a pattern maybe make a little bit more interesting and have it somewhere in here like so in fact this is looking pretty decent I think and it's within the exact same shape and maybe the text is kind of hard to read now so I would probably go down quite a lot on this even further maybe like this all right this is looking cool we have a nice interesting header and maybe the last thing the last two things are what is potentially you could spend a little bit more time on this maybe create like a big circle in here saying like up to 20% off so let's do that super quickly I'm gonna use the red color oops this red color is definitely not good right I found a better color so let's use CB0F48 and let's remove the border and now inside here we can copy some text so we can say something like up to and then let's move that inside here we can copy paste this will be 20% and then we need one more and this would be off so now we want to start this a little bit we're gonna use poppins poppins and poppins and I'm thinking of definitely make all of them white make them a little bit bigger and border so maybe up to needs to be medium or semi-boat looks good actually 20% needs to be semi-boat looks okay and if we go a little bit bigger now this is already looking good just need to have semi-boat on this one as well and I think this is okay maybe we can have this one 22 and this one 22 as well just so they match and what I'm gonna do is just make sure that they're spaced equally like so and this would do I don't know if it needs to do a little bit of a drop shadow but that's fine let's just grab everything and Ctrl and G to group them and the last thing I'm gonna do in this is create either dots or something that can show us that this is a slider so what I'll do is I'm gonna do three lines like this so this is gonna be well I'm not gonna measure them now but basically you can use dots or whatever so 30 pixels something like that and then make sure you group them and center align them like so so this could work I think this looks a little bit bigger thinking about it but yeah okay let's change this a little bit to 29 to 3 and let's just add two more wait 22 pixels or spacing maybe and let's grab all of them Ctrl and G and let's just center align them from now and of course we could have arrows as well for the slider if you wanted to be a slider or if you're just gonna be one image that's absolutely fine as well this might need to go up a little bit as well it's been annoying me for a while all right this is looking cool and the next bit is the next bit that we can do is this chat button this is basically going to be one of them live chat so what I can do is grab this I don't know how big the circle needs to be here but as long as it's fairly big to top on a tablet that should be fine and let's choose purple inside here I'm gonna do a shadow remove the border and then inside here let's add a nice icon so if you go back to auto icon start this and do chat maybe we can grab this one here change it to white you can't see it now but it's around here change white put at the top and grab everything Ctrl and G to group and then we just need to make sure that this is here on the right bottom corner and this is because this is where the fault happens so this is full screen usually so if I play this sorry if I start this you'll see that this is on the right side and this is and I also want to make sure that this button stays there as we scroll so to do this let's go back and do fix position when scrolling I just want to move this a little bit so let's move it one two three four five six one two three four five six simple like this so now if I start you'll see that it looks nice and if I scroll down the button stays there as well which is pretty cool and we can continue with the rest the next section that we have is popular products hopefully this will be a quick one and what I'm going to do now is first of all we need to figure out the space that we want between our hero image and the popular products I think genuinely speaking I think this is looking fairly clean already so that's roughly height of 90 definitely get up it up a little bit and I think that might work all right as long as we stay consistent with this now I think we should be okay but yeah we can always change it later so first of all let's go back to the library select the title and select or from all characters style select or title which is new nito 38 pixels and this blue color here so that's all cool we want to make sure that this is centerline of course and we want to add or description for this description this will be centerlined and then we're gonna go with the poppins 16 pixels and now it looks fairly small now but it should be nice to read okay this is actually looking good and let's grab both of them and just make sure that they're centerlined I think they are so that's pretty uh with actually done with the heading I wonder whether this is going to get in a way probably now it's probably gonna be okay and now what I'm gonna do is let's start creating some of the product okay so now we need to do the products and what I'm gonna do here is actually before we do anything we could do this as a component because we're gonna be using a multiple time so let's grab this create a component and leave it now let's focus on the actual products we're gonna have an image and what I can do for this is let's double click on our artboard and trigger the grid so it shows and we could pretend we have 12 columns we could potentially have four products on each line we could have it as a perfect square or we could have a slightly larger like that we'll have a look later anyways and of course we gonna need the title so let's copy let's write some text and in fact we've already got okay let's grab a title for this paste there and I'm going to change the title to be the lunito 16 pixels maybe we can change the color in a second and let's get the pricing that would be there and the button I'll create in a second so this will be our product I might make the title a little bit border so let's do something like medium maybe or even semi-boat I think that would look even better then for the pricing let's select the lunito 16 again and I'm actually thinking of changing this to the primary color and this to the primary color as well and what I can do here is we could potentially have like a sale price and current price so like something like this this could go it was 14 pounds 99 and now is 7.99 and this could be we can cross this by clicking on the text and then selecting the strike through and then let's just change the opacity down to something that you can still see but okay that's looking cool I don't know maybe a little bit more and I wonder whether to make these a little bit border I'm not so sure they look good so far and we can definitely put them together with the title like so and I want to have a big button under every single item so let's actually we could grab the button from here I think we need to move this down let's grab the button paste it in here and let's just change it slightly so for the button I'm gonna go with the primary color the text color will be white the text color will be white and I want this to be full width like so so you take the full width of the actual product and that might be okay so let's drag some products so actually found a couple of products on Ali express that we can potentially sell so let's do let's create the products folder and I'm gonna copy everything I found and paste in here so let's grab this one here it's like some sort of a plush toy and let's try it in here and also this image has a border that I just noticed so let's remove this and we might want to have the consistent rounded corners so might as well just do 20 and see how it looks this is quite nice and clean quite like it so what I'm gonna do is I'm gonna remove all these and I'm going to trigger the grid back on I'm going to grab this and do a repeat grid so now we can drag and see where we can fit them okay I think we need to go down a little bit maybe like so is this one it's pretty hard to see now they've turned the colors down but that's looking good and they all fit okay that's pretty cool and potentially when we develop the website we could have it as a slider as well we could even have it like for it like so if you wish I'm gonna have to go like that we could do this I'm not too sure I'm gonna stick to the I'm gonna stick to this one here and decide later now one thing now one thing that I don't like is the spacing between the button I think that needs to be moved down quite a lot maybe like so and now we're gonna have to extend everything yep all right this is looking good maybe this button seems a little bit smaller maybe like give it a few picks of small and just make sure that everything is aligned all right this is looking a little bit better now it's a clean design let's remove the grid um to be honest one thing that I'd probably like to do is change the grid a little bit and have a little bit more space between them but to save a little bit of time I'm gonna go ahead and leave it so for the for the categories let's quickly grab the rectangle tool have a look at how much space this is and we can use this to make the next section potentially actually that needs to be moved up I'm gonna move that up a little bit like so and then we can start doing the categories so for the categories let's check all headings component and the text is exactly the same we just need to change it to categories and I've actually forgot to centerline this so let's edit the main component let's click right click edit main component and what I'm going to do is convert this to fixed size I'm going to pull it up a little bit like so and like so and then I'm going to centerline the text and now this will help me out a little bit so let's remove this add a new one and do categories usually I would align the fonts like so on the top right this is actually wrong what I'm going to do is remove this and this will be where the section actually ends so I'm going to use this guide and create another rectangle for the next section and then we can give this rectangle some sort of like a very light white color so let's go for something like you mean something bluish maybe and I something like this f9 f9 f9 f9 go back and what I'm going to do is I'm going to reuse this square again just to realign my title here and we could use the box as well it's not a big okay I've aligned this one let's realign a little bit that's fine that's fine that's fine and we need to send this to the back all right now this container is definitely going to be annoying so if we select it go to layers and just lock this layer then we won't be able to select it so we can move stuff around which is pretty good and we definitely need to figure out spacing between the sections but this is looking good to me so I'm gonna use this one here so I'm gonna go from actually let's go from the box because it's exactly the same and let's scroll down okay so this is where it's everything is going to start like so and maybe we can create another box just so we know where the thing will end but but I haven't done the boxes yet so let's leave this one for now and let's move the special office down with everything else okay let's now focus on the categories for the category so let's double click on or canvas and then let's create three boxes so let's remove those ones from now and so that would be four that's fine I definitely don't like the space between but I might have to change this later on just because I don't want to like have to go back and change everything in terms of size this is looking good actually I like it so what I can do is I'm gonna do the round the corners double click the 20 remove the border and let's add an image of a product so I'm gonna add the same product here and to make the actual text a little bit more readable I'm going to use to use the nonita font now so let's click on nonita 38 and then let's just change it like so and for the title let's go to the library double click on the text go back to the library and press the nonita 38 I think that would be nice and let's just change the color to white as you can see the contrast might not be very good with every image so what I'm gonna do is I'm gonna create a little bar in here with the primary color so let's grab in fact let's grab this box here now let's grab a rectangle and do one at the bottom here and let's just change this to the primary color remove the border and then let's do the different radiuses for each corner and I'm going to select the bottom one do 20 and then the other bottom one the left bottom one to 20 and we can now put the opacity to something like 80 or something that is readable makes readable and then just put this at the back I think this is grouped so let's ungroup it quickly and go back too much and that's fine so we can definitely put the title in here and I would say let's make it a lot smaller maybe like so we can potentially fit bigger text as well that's something that you want you you might want to think about okay now that we're done with this one we can replicate it so let's do repeat grid and that that was almost there so we definitely need to change this I wish I didn't do the this grid it's not as nice but that's fine I think when we develop the website it will look nice cool that's looking cool then let's change this to food by clicking food and let's let's change this to whatever this will scare I should have made sure that this is all aligned by the way so I could have put the fixed size and shrink it from the left to the right potentially and then centerline them so everything is 100% centerline of course the images will be nice to change and I'm thinking so we have accessories in sale here let's grab them and move them away let's repeat this one more time I want to make sure that the space between here and here is equal so I don't know what this is actually does it say let's have a look it usually says somewhere oh yeah 16 so this will be 16 as well yeah way too tight okay that that is way too tight but in the finished design I'll make sure that I change the spacing now let's ungroup everything if you're and to make this a little bit more interesting let's put this as accessories first of all so let's copy the text from here paste in and let's remove this and for the next one what I'm thinking of doing is remove this and just make this a lot bigger like so and this will be all sales sales right so this will be a sale and we can make this a little bit more interesting by putting the sale in the middle and potentially we could create another container on top here and give it a border radius of 20 like so change the color to this red color here and put the opacity down way down but so it's still I don't know that doesn't look too good to me all right simple like this might do maybe I need the other red color from here let's grab this one yeah that'll look better to me so let's remove the grid and let's make this a little bit better I don't know actually this red doesn't look good to me at all maybe we can just wing it quickly this this one looks a little bit better I don't know I've got another one here okay this one looks a little bit better a seven zero four zero four so it can be better and let's make this a little bit better now so we can do instead of sale we can make this oops we can make this a little bit bigger and do special office and then we can copy this and do up to 40 percent off let's make this a lot smaller like so and we'll have to play a little with this to make it look nice I'm definitely not happy with this color I don't know why right this might be this might be a little bit better but I think the spacing between the elements is definitely really annoying at the moment but that's cool all right now that we're done with this we can definitely change the colors of each section and make it more interesting but for now let's just plug in some pictures so let's say for toys we can do this one here for care we can do this one here for food we can grab this here what else for accessories we could potentially grab this one here we might need to create a little background on this because yeah we might need to give this one a background color and so on so what I could do is inside here I can create another shape I can create another shape give it a 20 border radius and then just give it a nice maybe like dark green in this and use this as a background so let's go with if I go in yeah that would look a little bit better just so the product stands out but of course we can make this product a little bit smaller as well just like so and of course and yeah feel free to adjust the images as well and make them nice all right we're pretty much done with this section now let's measure the space from the top and to the bottom just so we have equal space and let's unlock this by clicking the lock at the top and do that all right cool we're done here or next one is special offers so we might as well drag our heading component and do a special offers remove this align it to the middle oh nothing is aligned to the middle actually let's align everything okay so this is aligned to the middle now and for the special offers I'm just going to copy exactly the same thing that we did here so I'm going to copy these products copy and paste make sure that we have a little bit of space I can't remember how much space it was so I'm going to have to go back and do them and I'm happy with this the products are looking good we can definitely check in some more interesting images actually so what is this special offers let's just check those images and that would be done and for this one as well let's just check some images like so of course the title will probably need to be changed but that's looking good all right the next section should be a quick one which is the footer so let's extend or page a little bit and then let's start first of all let's make a little bit of space again from the bottom like so and I'm going to use this okay it's a little bit messy now let's move everything first of all damn this is annoying this is a little bit annoying we have to move everything but it is what it is then let's go to the top and I don't know whether this is going to be extreme but I'm thinking of using the either this color or this color all right let's go for the purple one just because it might see the website a little bit better and then we can make a little bit more space and I'm going to start the titles from this line here it doesn't have to be perfect but first of all let's select everything and make the font white okay the color white and let's start with this here so this is going to be in the middle but I want to make it white and let's make it a little bit smaller so maybe like 32 will do that looks quite nice to me and this will be poppins so let's do poppins that's looking cool and maybe we can just go for 16 I don't know whether we're going to need a little bit more space between between every single link so they're easy to click and let's do exactly the same thing for company so what I'm going to do is you might as well copy the about and this and just paste them in here and just replace company here and replace this in here cool we just saved tons of time and then the last one is keeping touch so let's copy this and what we can do grab this change here grab this and paste it but now this is maybe far too extreme 25 is probably a good one and let's just do that I think they're all aligned I believe so yep they're all aligned they're all aligned that's fine maybe we just need to move them a little bit at the top like so and I definitely forgot to use the grid I just I bought it so that's why they're all off at the moment but what we can do is open or trusty grid and maybe we can start this one from here and this one from here just like so actually maybe make this let's start this one from here cool for the next bit let's grab the same spacing from the top and put it at the bottom here so we know that we don't need all this space now we can move the copyright stuff and put it as poppins 16 let's do the payment methods which I already have so I'm gonna drag them so we just have some random payment methods I don't know if we're gonna be using them but these are fairly standard so let's do that for the demo just gonna centerline it okay and that's not too bad of course we're gonna have to do this this is looking okay I think definitely might need to be centered a little bit better okay now the next bit we can do is keep in touch this is going to be another input so I wonder whether to do the borders let's have a look that might work actually I think that would look quite nice and what I'm gonna do is I'm going to copy the one from the search bar so let's copy this in fact I could have literally used the search bar to do this yeah let's do that so let's grab the search bar what are in here and let's just align it like so and instead of search we'll do we'll do sign up with email signing with email simple like this we definitely need a button somewhere um button could be around here but let's leave it for now and for the next bit we just need a few social net a few social network icons so what I'm gonna do is just grab twitter it doesn't have twitter in here so let's do font awesome should have twitter yep okay let's grab this and let's use this twitter sign so what I'm gonna do is remove the border make this a little bit smaller maybe like so and we could do this as the primary color and I think that would look nice so if you had we'll potentially have facebook instagram and so one so all I'm gonna do is repeat grid and just repeat a few of them around here for now but you get the point maybe that needs they definitely need to be much much much smaller and let's change the okay that's looking a little bit better we might have to add a button for this we will need to change the icons for the rest of the social media but let's have a look at what we have so far okay let's start this so as you can see the design is looking quite nice and clean obviously we can definitely spend a little more time to improve it I could add arrows for the slider definitely cut out a slider in here or we can just display four products whatever you know then categories that definitely can be improved a little bit I would love to make some better like marketing materials for this because it's a little bit boring and special office is looking good and then the photo is quite clean and as you can see the button this chat button is following us everywhere and I'm gonna wrap it up here because the tutorial went for far too long as always I totally forgot to show you how I've done the logo and this is going to be a super quick example of how I've done it I've got the branding colors here that I selected for my layout and I have the main font of and I also have the Nunito font here as you can see Nunito extra boat and this is set to 21 pt at the moment but that doesn't really matter as it's vector we can always scale it up and down and first of all what I've done is I changed the this color to be the primary color so I can select it and then I changed the gang to be this one here and also depending on what the domain name is I was thinking I can copy some of the text like so move it to the right and do for example dot shop or maybe shop with capital letters and just make this a lot small like this to make it look a little bit more interesting you know but that's that's part of it but in order to make this logo a little bit more interesting I wanted to put some sort of an icon that I can use and as you saw on the actual UI design I had two puppies here which look pretty cool and the way and let me show you the way I done this I didn't put too much energy into this but the way I've done is I went to unsplash.com and I found some suitable images of dogs okay basically this is one of the dogs that I found on unsplash.com link in the description and what I've done is I unlocked the layer then in Photoshop you can select subject with this quick action or you can just go with the lasso tool or the brush tool to select the object so I'm gonna select subject sorry and then as you can see this has selected the dog for me so what I can do is in another layer I want to fill this with black so I have my foreground set to black I'm gonna turn this around so the background is set to black and by using control and backspace when I click this will fill the shape with black and now what I usually do is if I dislike this I can actually drag this layer into Illustrator so let's drag that in so a little bit back so let's move it to the side here and this is at the moment this is a JPEG but what I've done is I use the image trace option in here in Illustrator and if you click that this will trace the image for you and then you can expand it and then if I double click I should be able to grab the dog cut here let's remove all the stuff that we don't need and just scale it down so this is the first one that I done and it was like this and of course I think I retouched the episode slightly I fixed some of these parts by with the lasso tool and then smooth it over just so it's not that rough and then I believe that I reflected this so transform and then reflect okay make it a lot smaller like so and and I did the same thing for the other dog I found an image and then and then use exactly the same method to there so let me just copy the other one from here to save time and here it is just like so and this one needs to go a little bit smaller but as you can see I didn't put too much effort into it and it looks fairly decent I guess it's not the best and it looks fairly decent I guess and then let's just change the color of this dog and we're pretty much done of course this could be fixed a little bit better and this could be fixed a little bit better but that's how I've done the logo I hope this helps and thank you very much for watching don't forget to smash the like button subscribe to my channel if you like to see more videos like this and if you have any suggestions or questions please comment below and I will see you in the next video