Design E-Commerce Website UI in Adobe XD

what is up everybody my name is radi and you're watching my channel ready 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 woocommerce 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 your primary care this is going to be our secondary color mainly for our typography and this will be used for things like separators and last this is going to be used for the sale promotion offers and so on here on the left side i have a heading 1 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 added 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 add is the same for the font 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 and this uh in this tutorial we're probably going to skip this because we're just gonna focus on the homepage but it's definitely beneficial to have a strong about this page that's why i have the in here and then we want to have offers excellent online support which i'll show you how we can achieve as well we can have popular payment options block ratio is great to have product reviews seo friendly a website needs to be seo friendly so we need to think about this as well it might be nice to offer free shipping uh 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 the 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 lorem ipsum 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 in 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 so good after this we have our menu i've already added some of the menu items that i want all products with accessories toys care and special offers let's go down and have a look at the rest of this stuff this is going to be a section that we want to push the popular product we're going to 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 cart 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 foods 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 going to put the special products and a little bit of description products just like above now let's move on to the next section 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 that brand as ambassadors or story faq terms of service refund policy and under the company we can have about this privacy policy terms and conditions contact us and inside here is ways 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 artboard and now we can duplicate it and we can start designing i'm going to move this artboard 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 bootstrap so what i'm going to do is double click on the artboard 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 artboard is 920 uh the height is just random at the moment but is fairly big he's 4296 at the moment but we can always adjust the height later on for the grid i'm using 12 columns the gear width is set to 16 column width is section 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 you 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 snipping 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 round 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 from top to bottom first of all what i want to do instead of changing the typography 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 mask 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 of recently i found this one here auto icon but i also like to use the icon for design plug-in 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 bootstrap one let's click on bootstrap 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 this has 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 bit bigger you 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 going to 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 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 so 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 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 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 track something like this and that'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 going to 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 would do as long as he'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 uh this looks a little bit better now and then put a free ship in 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 track and we're good i don't know if this needs to be aligned slightly to the left um okay 30 days money 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 look 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 going to look good let's remove this save our little person and this is nice okay this is pretty cool now that we have them done what we can do is they will group 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 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 uh 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 g or command 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 going to leave them stacked and i don't know why this is going really strange but yeah i'm going to leave them stacked like so and then at some point we'll 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 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 keep this background if you wish to align stuff but what i'm going to 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 going to do is i'm going to use this guide here and i'm going to 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 would have been actually useful to center stuff so what we can do is we could keep this box just have it as white put it all the way through if you wish and just with control 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 cart all right let's now add the logo and i'm going to 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 time stamped 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 light on 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 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 center 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 going to keep it fairly simple the search bar i want it to be roughly around even this will 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 that 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 i know so let's change the topography so i'm gonna click on the typography choose the pop-ins 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 bit darker something like this would do and also i'm going to make this a little bit smaller i think like 14 i'll 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 uh 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 card now for the card let's open the library again let's choose poppins 16 and this is already looking nice to me actually so i'm gonna move this to the side and let's just add a nice icon so let's go back to the plugins and then the icon can be cut so let's have a look at which card we can use okay this one is the one i like so let's throw the bag in [Music] okay this is the one i like actually this is the one i was looking for it's actually back it's not a cut or a basket so let's make this a little bit smaller get the color from the color 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 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 2 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 in 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 going to 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 uh let's we need to put them at the top by doing ctrl and right bracket or shift or ctrl shift and right bracket but this color is doesn't have much contrast 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 pop-ins 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 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 you 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 is 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 grooved 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 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 going to shrink this down to fit or guide 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 bold 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 nunito 16 you need to 16 pixels and just make this as white and then put a 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 shot now on top of it of course we need to change the shop now to be neato 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 20 pixels like so and of course remove the border color as always so this is already looking good uh the only thing i would do is maybe just mess uh groove 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 for now let's group all of them like so unsafe by the way that looks no it's okay it looks 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 gonna do is i'm gonna go to unsplash.com and i'm gonna go for dog toy and then let's find one that would suit all style so i think this one looks quite nice so i'm going to click on this and this this photo is by the linker 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 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 v to copy may we can change the color just so you can see i'm thinking of dropping the image in here so it's kind of must 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 e 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 going to have to copy the shape below so let's move it right that'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 mastered the circle we could go inside and just change the circle color so what i was thinking of doing is i was going to go for linear gradient and we could choose the bubble 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 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 all right this is already looking good but i feel like this is taking far too much of 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 dog a little 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 um okay i think this will do the job let's have a look yep 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 um 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 uh shape or we can keep this shape for later use if we wish to mask something out so i'm going to 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 uh first of all that would be nice to be sent it would be nice to center this and i would love to create some sort of a pattern pattern with the dogs so what i could do is in illustrator i could create more dogs like this um and then maybe create a nice pattern with different docs in here but just to show you what i mean i can get the docs from the logo and just change the color to something super light maybe i wonder yeah let's go something super light and then let's turn the opacity down like so and i'm gonna use the repeater grit 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 so i'm gonna have to do it like that and go down i 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 um that's looking really nice but ideally we're gonna have to mask this as well um 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 let's bring him 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 going to try to achieve here is i want to achieve a super quick like pattern so what i'm going to do is change the color off the docks let me group them to something very light like so uh 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 button 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 where is it i think it's what is this which is new pattern here it is so if i click on new pattern this will actually apply but of course the uh this pattern is so close together so i'm going to 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 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 oh 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 ah no i don't want that this is looking cool um let's see i don't know i think i think that the dogs are far too small i need to offset them a little bit more okay this is going to be better so let's do this yeah this is looking a little bit better i mean again uh it's knowing how it's ending here so let's change that one more time super quickly uh 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 it 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 fitting 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 quickly i'm going to use the red color oops uh this red color is definitely not good all 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 going to use pop-ins pop-ins and pop-ins and i'm thinking of definitely make all of them white make them a little bit bigger and bolder so maybe up two needs to be medium or semi boat looks good actually 20 needs to be semibot looks okay and if we go a little bit bigger now this is already looking good just need to have some 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 going to do is just make sure that they're spaced equally like so and this will do i don't know if it needs 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 going to 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 going to do three lines like this so this is going to be i'm not going to 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 um 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 weight 22 pixels or spacing maybe and let's grab all of them ctrl g and let's just centerline them for now and of course we could have arrows as well for the slider if you want it to be a slider or if it's just going to be one image that's absolutely fine as well uh 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 chat button and 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 tap 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 the white put it 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 default 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 fixed 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 hero image and the popular products i think generally speaking i think this is looking fairly clean already so that's roughly height of 90. definitely could 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 nunito 38 pixels and this blue color here so that's all cool we want to make sure that this is center line of course and we want to add our description for this description this will be center lined and then we're going to go with the poppins 16 pixels i know 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 center-lined 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 not it's probably going to be okay and now what i'm going to do is let's start creating some of the product okay so now we need to do the product 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 it multiple times so let's grab this create a component and leave it now let's focus on the actual products we're going to have an image and what i can do for this is let's double click on our artboards 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 uh we'll have a look later anyways and of course we're 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 it 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 bolder so let's do something like medium maybe or even semi-both i think that would look even better then for the pricing let's select the knee to 16 again and i'm actually thinking of changing this to the primary color add 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 strikethrough 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 bolder 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 oh 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 going to 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 it takes the full width of the actual product and that might be okay so let's drag some products so i actually found a couple of products on aliexpress that we can potentially sell so let's do let's create a 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 um rounded corners so we might as well just do 20 and see how it looks this is quite nice and clean quite like it so what i'm going to do is i'm going to 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 whether 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 uh we could even have it like forward like so if you wish so i'm gonna have to go like that uh 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 this button seems a little bit smaller maybe like give it a few pixels more 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'll probably like to do is change the grid a little bit and have um 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 photo 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 going to 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 all 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 i don't know something like this f9 f9 f9 f9 go back and what i'm gonna do is i'm gonna you reuse this square again just to realign my uh title here and we could use the box as well it's not a b okay i've i've aligned this one and let's realign a little bit that's fine that's fine that's fine and we need to send this to back all right now this container is definitely going to be annoying so if we select the go to layers and just lock this layer then it won't 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 for 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 wanna 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 around the corners double click the 20 remove the border and let's add an image of 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 nunito font now so let's click on nunito38 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 nunito 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 going to do is i'm going to 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 so 20 and we can now put the opacity to something like 80 or something that's 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 this so let's do repeat grid there to do and 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 j let's change this to whatever this will scare i should have make 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 cent aligned of course the images will be nice to change and i'm thinking so we have accessories and sail 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 someone oh yeah 16 so this will be 16 as well yeah way too tight okay that is way too tight but in the finished design i'll make sure that i change the spacing now let's ungroup everything here 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 our sales sale sorry so this will be of 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 still i don't know that doesn't look too good to me all right something like this might do maybe i need the other red color from here let's grab this one yeah that would 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 uh maybe we can just wing it quickly this this one looks a little bit better um i don't know i've got another one here okay this one looks a little bit better a70404 it's looking a little 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 off let's make this a lot more 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 uh food we can grab this here um what else for accessories we could potentially grab this one here uh we might need to create a little background on this because uh 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 than this and to use this as a background so let's go wait if i go in yeah that'll 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 other images as well and make them nice all right we are 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 within here or next one is special offers so we might as well drag or heading component and do special office remove this align it to the middle oh nothing is aligned to the middle actually let's align everything okay so this is line to the middle now and for the special offers i'm 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 that and i'm happy with this the products are looking good we can definitely uh check in some more interesting images actually so what is the special office let's just check those images and that will 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 right the next section should be a quick one which is the footer so let's extend our page a little bit and then let's start first of all let's make a little space again from the bottom like so and i'm gonna 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 uh 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 uh this is going to be nunito 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 gonna 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 it 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 were aligned they were 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 um 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 base now uh 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 going to drag them so we just have some random payment methods i don't know if we're going to 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 and this is looking okay i think uh 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 uh 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 going to 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 uh yeah let's do that so let's grab the search bar one add in here and let's just align it like so and instead of search we'll do we'll do sign up with email sign in with email simple like this uh 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 going to do is just grab twitter now oh it doesn't have twitter in here so let's the font awesome should have twitter yeah okay let's grab this and let's use this twitter sign so what i'm going to 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 will potentially have facebook instagram and so on so 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 is 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 we will need to change the icons for the 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 with a slider definitely cut out a slide in here or we can just display four products whatever you know uh then categories that's definitely can be improved a little bit uh i would 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 footer is quite clean and as you can see the button this chat button is following us everywhere and i'm going to wrap it up here because the tutorial went for far too long as always i totally forgot to show you how i done the logo uh 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 mode and this is set to 21pt at the moment but that doesn't really matter as its 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 gank 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 smaller like this to make it look a little 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 uh some sort of an icon that i can use and as you saw on the actual ui design i had two puppies here which looked pretty cool and the way uh 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 uh go with the lasso tool or the brush tool to select the object so i'm going to select sub 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 going to turn this around so the background is set to black and by using ctrl and backspace when i click this will fill the shape with black and now what i usually do is if i deselect this i can actually drag this layer into illustrator so let's drag that in it's a little bit big 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 dock cut it 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 there ever so 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 today 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 better but that's how i've done the logo how this helps and thank you very much for watching don't forget to smash the like button subscribe to my channel if you'd 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 you

Channel: RaddyTheBrand

Views: 2,636

Keywords: adobexd, adobe xd, ui, user interface, user experience, website design, ecommerce design, woocommerce website design, how to design a website, design a website using adobe xd, ui/ux, wordpress website design, logo design, wireframing, branding, user interaction, web deesign, web development, how to website design

Id: 9jv1E4hgxPo

Length: 79min 57sec (4797 seconds)

Published: Thu Mar 25 2021