 All right, welcome to this video where we're going to be taking this layout and redesigning it in Adobe XD The idea with it is this is actually a user in the community So if you don't know about the community, it's a discord channel where we all hang out There's a link to it in the description below so you can come there. So this is from sebeck This is a product that him and his wife have created. They do granola sugar-free no oils All like natural food really cool They needed a website put together really really really fast like super fast and they threw it together as quickly as they could Just to have something that was online because there was going to be advertised They needed if somebody were to search for it They could find it and they got this it worked It served the purpose in that last minute pinch they had but they wanted something a little bit nicer in the long run So we're looking at refactoring this actual website now I was gonna just jump into the code and redo what we have here So we have see this little thing and there are other pages But I'm just focusing on the home page for this video as I said, we're gonna be doing it No be adobe XD where I'm gonna be explaining my thought process on Starting here and the chain why I'm making the changes. I make to it and the the new Design decisions that I'm making along the way. I hope that sounds good If it does stick around because we're about to get started so What I'm going to do is I want to do a few simple things here. I actually also have the Logo I was a bit lazy with it. It's a font. So we have it right here Instead of right now. It's stuck off to the side there, obviously So I'm just gonna take the logo keep it the same size and just center it dead on the screen Instead of having it lost there and the navigation right now is a bit You know, it's lost in the lost in there a little bit so I'm just gonna come in here at home and Let's put on the repeat grid and drag that out and So we want home I Can't even read it. So let's zoom in a bit home about connect and products cool thing if you push command to you zoom in to recommend three is what I meant to connect and products In this case, maybe the repeat grid wasn't the best one because my gaps are overlapping, but I Just want to do this pretty Simply and quickly. Let's hear one thing you can do if you have Something like this where you're playing around with this and you know, my spacing isn't perfect is the word lens Actually one thing I'm not sure about if I select that Yeah, I'm just gonna ungroup it so they're all individual and they're all on their own and then I can just hit This one and it's gonna actually space them out evenly. So it could be a nice little thing and then I'm gonna select them all and Crimson text because that's the font that he's using. What's Do I not have access? It'll be XD with their font sometimes has some problems because I know there's a bolt. Anyway, let's just leave it like that for now. I Think we're gonna do that And then we need to bring in our monkey. So I'm gonna drag this I want to go full screen with this I find it's a little distracting the way it is right now. So I'm gonna go full screen on This and I'm actually gonna take a dark fill something like that and I'm gonna copy and paste that so actually have two boxes now. So let's go see I have the monkey somewhere in here There is so I'm gonna drag the monkey into here and then overlap these But what I'm gonna do is I'm gonna send them to the back So I'm gonna push command shift and the open square bracket and then on this one that's on the top I can use this shadow background blur is what I want, but the brightness we're gonna put down to zero So it's not I'm gonna take it with the blur and I'm gonna bring the opacity up So my monkey is there, but I want the text to be the king here and not the monkey And you can see the monkey gets lost a lot anyway So I'm gonna go with something that's more like that and then we can take that same text that we had So that was no sugar No oil all real food I almost feel like the all real food could be Like we could put more of an emphasis on that even and let's put this up to white I'm gonna switch the font here as well to good life sauce. It's not the same one obviously that he had on The site I'm not switching the font to this. I just don't have that font There is a condensed version, but it doesn't seem to be changing anything So I'm just gonna do like a negative 100 on this It's not a perfect replica for what he had at all But it's gonna have to do for now because yeah, just to give a style a little bit and scrap both of those And make that a little bit bigger Cool And let's make our art board a bit bigger and we're ready to rock and roll. Okay, so for the next part I'm going to be Breaking up sort of what we have here because as I said the focus right now is not super clear I want people to know what they're here for when I get to this page. I don't even know what it's for I see a monkey's head so making this more important and Making that stand out. I think is part one is just like this becomes super clear I know it's about real food now But let's make it even more obvious and to make it even more obvious They have some good awesome copy here. So we are let's grab this We don't need welcome to hippie chicken arms Maybe it could be like a little sub thing, but I want to make this a really big. That's all in white now. So let's change this Let's just go with a gray for now and Let's change this to a box oops and Say we did something like that, but the line height is 70 There we go. It's maybe something like that. We could put like oil free could maybe come in with a color We could either go with the green. I think we'll go with the green. I'm just I dropping it for now Pow ah, I hate that it does that. Let's just add that then. Whoops That's okay swatches. I'm just pushing the plus and it's gonna add that green you can also put it into your library Whatever it's called But just for now. There we go. So something like that. So it does draw attention. Maybe it could be bold or something too I'm not sure if the font has a bold so we can do something like that. So we know it's oil free You know even if it's that's fine. I think something like that Centered on the screen. There we go and boom. So now we get there We know what this page is about and maybe this can be it whoops not rotate a little Easiest thing if you want to change font size. This is change it back to like Something like that. There we go I'm giving it a lot of room to breathe if we go back to the original design and this well Actually, there is quite a bit of white space around it, which is nice A lot of the time people will go with not enough white space. So I want to make sure people get here They know exactly what they're doing here and then we can come in with sort of an interesting Feeling or interesting thing. So let's Come in now one thing that Sebeck did mention to me is that we could use the purple color from the monkey's shirt a bit more So, you know what? Let's just grab and fill that So we have it and So I might tone it down a little bit because that's really bright and it's gonna be hard to put text on that So I'm actually gonna push it more into a purple and a little bit darker It's actually something like that And now because now it's gonna be easier to put white text on top And so we can change that all the way and let's go back to the original site because again, we have lots of stuff here I'm gonna grab you. Does it make sense? Yes, I'm gonna grab you and paste that in and We could come up with something like that again the font size here can be quite a lot smaller I don't know if we'll stick with that font. We had crimson was our other text crimson text That's not the right. Why does it look so weird? What's wrong? There we go. Okay, and this can go down to a zero One cool thing with line height just in case you don't know if you put line height to zero it actually resets back to the default 70 actually I'm gonna keep that at zero for the second because the font size will be down 59 did I do that 59? Let's just jump that up to 60 Okay, and here We're gonna do like a 48 over 60. Maybe if it's smaller actually 36 I'm just playing around a little bit right now and Again to zero. It's a not tight enough. Let's just go with a 50. I guess there we go And even yeah, let's leave it like that. There's the middle of the page. Maybe no doesn't make sense. Anyway, let's Snap into something, but we'll put it something like that and then I'm going to switch this over to the other side and We can get the rest of the text that we had here copy that and This is gonna be regular body text now the regular body text. We haven't we're finally getting there Was it like 16? I think I'm gonna go with 18 I like my fonts a little bit bigger and this 25 That's not too bad actually, but Even I think we can push there's not lots of text on this site So if the font size is a little bit bigger, I don't like these necessarily being the same font I'm gonna break this into two paragraphs too because whoops. Why not and there we go and even Let's just center all of it like that Okay That could look good. No, maybe I'm just trying to think like we draw a line that splits it or something Maybe I want to bring an image in as well So maybe I'm gonna put an image in here That's so weird when I'm selecting at the font shifting. Anyway, so what I want to do here I want to make this a bit more interesting You know what I'm gonna think I want to try two things because we had the welcome What if I put this in with like a light color Said 21 is for our body size and it was Welcome to Is it welcome to it was I said so if I take that center Boom that's way too light. So we need a bit more contrast in there. Would that work? I Don't think we need it. Yeah, let's get rid of that what I'm thinking here is either we go back to this font What was it called again? I Literally forgot Good life good life, I think I'm gonna do that actually and It's a little bit heavy though, so We believe in not only having delicious foods, but nutritious foods that you can feel good about eating I sort of like this second line here a bit better So what if this line? was like 28 that's awkward a 26 I'm just that's not really 24 would make a bit more sense in a font scale So something like that could work and what if I lowered the opacity of this to like 90 Doesn't bother me too much. I don't know if that's too low contrast I was saying that maybe we could bring an image in it's like what if I don't know where the middle of my page is But I guess it's that Okay, so what if I brought an image? Oops, okay. I drew it anyway. There we go. We have my image So what if we took this now this is a picture from on splash and not from them, but I was on their Instagram They have some fantastic imagery. So if you just you know Grab some of that stuff from Instagram. The pictures are so nice That why not, you know, because there's Where's my picture and paste and send back All right, there we go. Something like that could be interesting, right? I think I feel like Something like that could be fun. It's a bit hard to see so opacity is gonna The background image is not the most important thing here. So please don't treat it like it is The text is it's more about giving you like a bit of feeling there we go and Then this this and this this and this and we can center that way So that's not really centered is it you'll notice I'm not working with a grid right now I'm also I'm trying to whoops wrong one. I'm trying to do just like a quick idea more so than Doing like an exact layout on things I just want to get sort of some ideas flowing on how I could do it and doesn't look like it's really perfectly centered either This would have to come this way more that looks more like the middle. So say we did something like that like I think that could be fun Cool, cool, cool. Okay, good. So I like that then and We'd probably want to do our order online stuff, right? So we could grab the you and do order online and Let's go get the text again that they used because I think that's fine and I'll grab this Paste that in You know some yeah, I'm not doing mobile either right now Phil can be my dark text color My text can be centered This probably be a bit bigger Center all that on the page. It already is cool. So order online Maybe we have something like that This could be in my green color Phil could be order online just we're bringing back the green a few times and then We'd want some buttons so you could actually order because you have to order Through like there They're a bit limited in how they're allowed to sell So we could just do some bootings like that This is again repeat grid Give myself three buttons Because now if you change one of them all three of them will change and then we can just change the spacing a little bit There we go something like that. I'm not going to put the text on the buttons. It's just Facebook Email and something else. I'm wondering also say we did like a background color on this Turn off the border zoom in So if there's a background color, but like don't go into the grays Well, it could be in the grays but like really late know these little subtle shifts if no one even notices It doesn't matter, but it could help separate it from the next section So order online Like that And then literally I love this picture. They've already had so I have a screenshot of it that I've already prepped This is from the actual products page and I think he did a nice job on it This is like the actual font they're using and stuff. So I again the line height would need to be fixed But I love the artwork in this and this is something. It's not on the home page right now But I really think should be and the reason for that is like what we don't want to have to force people to skip through some of our products So by doing this and bringing this in here, they don't have to skip through You know, they don't have to click into the products to actually see some of the stuff that they're selling again It gives them more of an idea of what's actually on the site, which is super super useful So as you're you know, you get to the site right away, you know what what it's about It's about real food. They're Northern Ohio's first oil-free sugar-free granola company So we know what's going on right off the bat. We can scroll down and even I'd almost be wondering if we should switch those around To be honest We have our color there And then this can be Just white Not sure if it has the same impact exactly But because this is telling you what exactly is going on And then this is a bit more information But I think this can make a nice impact and get people to stick around if they're into it They know what's happening. They get more information on it. They can order online. Don't be scared of scrolling People don't mind scrolling on websites these days So we can get the information we can order online. Maybe they don't want to order right away They want to you know, they might click through and try and make an order But they might also just want to see like oh what type of stuff is here now if we're doing that I'd probably want to bring Some buttons in as well but We'd also want to have like a let's on group that and oops delete I Don't know if it would look great with like a big giant button And we have a purple so let's add that to our swatches You know, we could do like something like that where this is like What would it be see? See all our products Could be like this big giant button at the bottom and then this is the same three that we had here So if somebody who does want to buy right away they can but if they want to click through and see more I don't know if that would look great. I just this is sort of where we want people to click on At this point So I'd be very tempted To have that bigger instead, you know, just so it dominates a little bit or maybe Something like that would make more sense See all our products you can click through if not they can order right away and then down at the bottom We can put a nice little simple footer So yeah, there is the finished design and Nothing too tricky, but again, it's all about Focusing the attention as the person's going down. So not trying to overwhelm them with anything We have one piece of information Another piece of information lots of white space around it. We get down a bit more In-depth because at this point they've scrolled a bit there one, you know, they might want to actually read know a bit more about the Company, we're giving them that chance. We're letting them place an order Therefore I just want to see here this means you're unable to set it for the time being there for their purchase line You have to you have to Use one of the options below. I think would make sense Don't worry about the font, you know font sizes can be nice and big a little bit Really clear just like outlining sections lots of white space. Don't be scared of larger font sizes and Just you know, I have a lot of empty space here at the top. Maybe that's not ideal, but it's not the end of the world either I think it would work fine It was something like that and maybe this could Yeah, we could play with that a little bit, but overall I think the the look in the feel It's a lot, you know going for a super clean look in coding wise. This is probably Easier to code up than the original design. Oh, we only have the two columns. So maybe not but a lot of time by doing this You're going like, oh, it's not the most interesting to code because literally, you know, it's not that much I'm going to steal that from the homepage From the products page here. We have just like a flex two columns background image. No background image It's not like it's a difficult thing to put together And just simplicity sometimes can go a really really long way. So that's it. I hope you like this design I hope you liked watching me create it and seeing some of my thought process in what I was doing with it from where We were to what we have here I'd love to know what you think of it And if you have any suggestions before I start coding it up Please let me know because I'm going to be coding this up in the next couple of days and putting out that video Next week. Thank you again so much for watching a huge Thank you to my patrons for helping support everything I do here on this channel if you don't know about patreon You can check out the link to it in the description below It's somewhere that people can go and support everything I do here a Big massive shout out to Lauren who's my supporter of awesome Thank you so much for that Lauren and of course until next time don't forget to make your corner the internet Just a little bit more awesome