 All right, what's up? What's up? What's up? Okay, let's see here Man already jumping in super super dub. What's up, Dave Dan Charlie? We're doing this we are doing this Let me make sure my audio is all good. You guys could hear me. Can't see everything. Okay? And I'm using my testing right here. Let me see Once this is good to go and I see we're straight we're gonna dive right in. Oh, you know, what? Oh Hold on one second. I forgot to do something All right guys, so there was some crackling. I was meaning to do this before and What is it? It's the There's a setting here nap I should have done that before okay, that's not it All right, everyone bear with me for just a moment You know what? Let's just kick it off. All right. Sound is good. You know, I made a mistake And it was on my list. I had so many things on my list I need to change like the frequency from like 48 to like 41 point something There's a little bit of crackling happening inside the recordings. Oh Oh Man, I wish I saved it. So everybody watching this. Sorry if you're watching this later in the future after the live streaming here crackling My bad. I am super. Sorry. I'm gonna make sure that it is fixed next time I figured out what the issue was but Just had so many things on my list because I'm ready to get into this and start designing me Oh, what's up? What's going on? Oh, it's so good to see you all. What's going on Pez so good to see you Oh Right Plurat. All right. Hey, this is super dope. I'm so excited to see everybody here Man, you guys keep me hyped for real like I've been looking forward to this all day long. All right All right, gotta get in the zone because this is where we start to have fun tonight. All right, we're gonna be Putting together Everything we did in the last two live streams are gonna be putting it together and we're gonna be rebuilding this homepage I'm gonna be fixing the structure the layout and they're going to be applying the design system and styles After we finish with this Charlie is gonna be good to go to apply that to the rest of his site I'm gonna be going through this in a step-by-step process. I'm gonna keep it open I want to keep an eye on Let me make sure okay, we're good right here, right? I Did not get a Moderator Okay, I think we are do you know what I'm gonna do right here Let me cuz I just want to make sure we're good. I want to be able to see it. So I'm gonna put it on my phone Keep this up here, but turn the volume off. All right cool So I could keep an eye on it right there. All right getting back to it We're gonna be putting all that stuff together now I'm gonna be breaking it down and showing the whole process of doing it and the whole thing is about using the process and the system when we Are designing and this is something that is a real-world Experience when we are doing things for clients websites or even for our own So everything that is used here could be applied to your own sites and so on Alright, so let me check it out. Okay Mia says do you know what? When that's not it Wait, that's not supposed to happen Hey, okay, I gotta turn my Bluetooth off is connecting to my phone Let me turn that off All right that way. All right Spare of me real quick this way. We're all set up and we'll be good to go All right, we should be good to go do it and me on okay You got a high-grade OCD you're seeing it right now happen with me everything happening is OCD. Here's the thing Yeah Here's the thing It's like having a little bit of OCD and design could be useful if you know how to use it And you know how to avoid some of the pitfalls but being able to use it and look at those little tiny details And this is a whole part of building a system and system is perfect for those of us with some OCD Or those of us who just want to develop those Good, you know good practices, but having everything just structured And that's reason why at the very beginning it takes a lot more time Building that but when you do build it and makes the rest of it really smooth and by the time we get to the end of tonight's live stream That's going to make a whole lot more sense. I'm excited. We're gonna dive right in and No puns intended even though this is for a scuba diving website I guess it was a pun intended you guys ready Pablo it's okay. We're gonna have it on definitely we're gonna have this Recorded I'm just glad that you checked in man. Awesome. All right. Cool. Are you guys ready? I need a thumbs up. I want to hear somebody's ready to go ahead and get started with this because once we get going I'm getting in the zone and Once I get in the zone, I just go all in. All right. I got a lot of things happening right here Spend quite some time preparing because I wanted to make sure we have all this stuff together, but we're going in We're designing we're going through the process Alright, I know Charlie's ready. Am I still alive? Judy, let's have Judy Hmm Sorry guys, I'm gonna need to keep drinking. I feel super dry. I got my chaga tea. I love healthy stuff Brew my own chaga I got some water. I need it at night time, especially when I do these Charlie's ready. David is ready Me I want a recap, okay, we're gonna start off. We're gonna do a very quick recap But then after the recap it's gonna be best for everybody to jump to the first one Then the second one and then you'll be caught up to speed for sure But for all those joining for the first time right here, you know what we're doing this Let's roll. I am going to start the screen share now All right, and I did figure this out So I'm gonna put me right over here inside this corner and we're going to dive right in We're diving in into a scuba diving website So Charlie was Charlie was just brave enough to throw his side out there for the tear down and build up And really the goal of this isn't to tear apart a website Not at all. That's not what we're looking for what we're doing here is looking for Opportunities and what we could do to improve and that's what we did inside the first session We looked at the site We look at the areas we could improve and I mean we saw some we saw some inside of design But in other areas as well and I identified three key problems and one of them was a bit of a lack of a Human connection. So there's a lot of content. There wasn't that much human Connection, this is the site that we got right here Rebuilding so there was that there was also Like lack of trust. We didn't have any testimonials trust badges We didn't have anything in here to show the credibility that Charlie does have like they have credibility And we want to be able to show that and then the next one was going to be just the overall design And just being able to have a clear brand to it a clear design And making things a whole lot cleaner easier to use and all that is going to result in more conversions in a better user Experience and so on so in the very first Livestream that we did a couple weeks ago. We broke all that down and we looked at the little tiny stuff You know, we did look at the design and consistencies. We looked at what to look for like alignments grids Things like that now inside the last Livestream which is last week we looked at starting to put together the brand styles and putting together a brand system Now first thing we did was here This is the actual live site and I'm doing all of this off of Clone that I have on my local. We're not going to touch the live site at all Because what we're doing is we're removing a lot of stuff one of the first things we did was we removed Let me close this tab right here. We removed all of the global fonts the global colors We re-added the fonts because there's just a lot going on back here We want to make it more clean and systematic We cleaned up the global colors. I think there is about there's quite a few of them before and then we started Putting together our brand styles, which is going to be used for the design system Now this took a lot more time than I was planning because we did run into a few things and this happens There's always unforeseen. We ran into a few things that took more time to dig in diagnose and fix So what I did was you know for the sake of not having another three hour live stream or something You know super long was I went ahead and cleaned of the Brand style the design system right here and this is going to be our starter for the design system And this is what we're at right now So first thing we did was I cleaned up the color scheme and so the color scheme we limited the amount of colors We don't want too many colors if we go over to the live site I want to see we got like like the what's that green we're going to have like some red right here The colors changed quite a bit Even things also like you know font colors. We won't don't want it to black things like that So what I did was we first cleaned up the font styles the colors. Oops. Let me go back here And then we did the next thing was the fonts. So we did encounter We did encounter a problem with the fonts when we first started they weren't loading right And so what I did was I deleted all the font files We cleaned it all up removed all the global fonts also Had to go in and clear up the typography now. This is super important This is where I found a lot of issues and this is where it gets really confusing using elements or and trying to make a Clean design and trying to do something where we're using Consistency and following a design system and that is we got a section right here for design system Then we got one right here for theme style and this is why I feel many of you are going to be confused I mean I was confused by this for a while But here's the thing if we try to set this up like our global fonts or global colors And if we try to do the same to our typography here our button styles and so on Especially the typography. This is the big issue. We try to set this up here It it it conflicts with our design system It doesn't really fit. In fact, this way is more of an old and outdated way that From this is just from what I remember. This was usually a setting and themes like from years and years ago Just like pretty much part of like a default WordPress theme where we style things by h tags And we don't ever want to style things by h tags because the h tags don't have anything to do with the font style These are all about content and about positioning your titles and the hierarchy and so on So we are only going to utilize these right here the global fonts and global colors Now we set that up. The next thing I did right here if we look on the right, let me turn this off If we and I'm going to keep looking at the chat So I got my chat right here if something happens. I go blank or you can't hear me Just give me give me a Heads up. I'll see it right here because I'm keeping an eye on everything and then any questions as we go along as well Please ask. That's the reason why we're doing this we're doing this live to give the chance to ask questions and The more questions the better that way you can understand more about the thought process behind everything Why the decisions are made to do the things that doing here? All right next up on the right, you're going to see that I define the spacing of the text Now the most important thing is we want to achieve consistency We want to make sure that everything here that all of our spacing for all titles to paragraph graphs are the same We want to make sure if we have one paragraph here and one paragraph here that this spacing is the same Across the entire site. We set it up once and that's what we want to keep and then we also want to make sure that when we have say Where is it at? Where's a good Example, okay, there really isn't a good example here But if we go here like we're gonna see like usually we'll see like a title Paragraph and then maybe like a call to action button or like a card or some kind of other element We're gonna want more spacing around that because let's say we do have a button here And let me drop one just to better show and give an idea. I'm gonna copy this button here and Then I'm going to drop it in here paste that You know, we want to have more spacing From the paragraph for the text in the button because it gives more breathing room around that call to action and makes it Easier for the user to identify it makes it easier for them to use and it makes it stand out more So what we did here was we identified 20 pixels padding on the bottom here 20 pixels padding on the bottom from the title to the text 20 pixels the same we're going to keep a consistent padding bottom from paragraph to paragraph and then we're gonna have 40 pixels Padding bottom from the text to whatever other element there is other than Text so we're gonna keep that consistent across the board Now you might be wondering why are we doing paragraph bottom? There's actually two things right here. You might be wondering. So first off why? padding alright, I Try not to use margins that much except we're absolutely needed padding is for spacing Margins is for pushing things around. I really don't want to push things around Except in certain situations. So I mostly stick with padding now the reason why I'm sticking with padding in the bottom This is just my own system Like for you, you might want to have padding on the top you might want to have You know, you might want to choose something different But the goal here is to choose it to find it and then stick with it And then once it's defined you carry that over through the rest of the site for me I have used the system so many times over and over and over that it becomes second nature It makes me go faster. That's the whole thing. It takes time to put all this together But at the end you become much faster because it becomes like second nature You're gonna see when I start adding stuff inside the front end when we start doing the home page How I could just fly with it. Everything is going to be automatic Now there is one other option as well. You could always use flex you could use the gap so let me just go ahead and Duplicate this and this is totally fine as well. It's totally up to you and your call Let's say I do want 20 pixels and I could carry that same system but I don't want to use like padding or anything and This is just an example and this is for you to choose what you want and that's the fun part about this it's like we get to build our own systems and That's what we that's what we do. That's what we work with, you know And we could choose what works best for us now when I build a system I stick with it and then I look for ways to improve it All right, so like right here if I want 2020 20 I could just go over to my gap in my container and just put 20 and bam I got 20 now if I'm going to use this right here. This is going to work great It's going to save me a lot of time I just need to remember that I need to add maybe I need to change my rule right here to 20 pixels on the bottom That way I still have the 40 pixels And I hope you see where I'm going with this and why I'm using like 20 and I'm using these kind of numbers because we got to do The math on all this stuff when we do things and we set it and we get the system We want it to be mathematical So we know like if we need to offset it and that's going to make sense again more when we look at our containers But this is just another option for me I'm sticking with my system that I've been using Another benefit of using a system like this is if you are going to be bringing in somebody Maybe you're starting to grow getting a lot of projects for your clients. You want to bring on Contractor another freelancer you want to you know hire them to take on a project and to help you out You could have this system for them Walking through them teach them how to use it Leave them the guide so that way they follow that guide and follow up on them and make sure they're following your system Because the thing is and especially with elementary. It's so easy to mess things up big time and make a big old Jumble mess because I could create the same layout a hundred different ways All right, but when you have things just going randomly all over the place You got another team, you know another freelancer and somebody you hire for a project. They're doing their own thing. Uh, Oh I lost my speaker. I hope that's I don't need a speaker. You guys can hear me. All right, right? Yeah, and we get a Somebody else in there. Well, they start doing their own thing then the whole thing's broken But if you could get somebody to follow your system It's much more scalable and manageable and you could guide that contractor and freelancer to deliver the results that you want Deliver. All right, cool. Let's go ahead and move on and keep going What happened right here? So Okay, it looks like just a bug right there probably when I first refresh it it'll go back. Let me delete this Because I want to keep in fact Let me update this and make sure this box gets fixed my OCD is going to kick in I got mad OCD when it comes to design and Making sure everything is detailed. Okay, cool. We're here. It's good next up Now this one right here is going to save you so much time And it's going to have such a huge impact and something so simple to do and this is defining your containers You can do the same thing with sections, but I'm all in in containers already So right here basically what we're doing is we got a few different container sizes that three Sometimes I might use for it, but I never use more than that I stick with them and you're going to see something About these right here. Now if I go to say this large container It's only going to apply to the outer container. We're not doing this in the inner It's just the outer whatever is wrapping up everything. It's going to be your container wrapping up the section And right here. I'm going to use 80. Oops. I got to fix that Actually, you see how it was wrong. It's supposed to be 100 Alright, so it's going to be 100 top-bottom 20 left and right this next one right here. Okay, this is supposed to be 80 Something went wrong. Oh, yeah, I was doing some copy and pasting. All right This is 80 and 20 and then this is 60 and 20 Let's see over here. Now the most important thing about this make sure whatever you choose now if you're using percentages You're using RAM That's fine. If you use in pixel I mean, I'm not you know, this isn't about which one is the best the best thing to do is just to Pick and define them from the very beginning if you're using percentage or RAM, that's great Just go ahead and define it. We want to make sure though that these numbers are Something that is easily mathematically figured out. For example, let's say like right here I got two sections stacked on top of each other. All right, I'm going to make this section now both of them the same background color All right, let's go here. I'm going to turn this background also to the same one now right here I'm using the 80 pixel. I'm using the medium and And if we go here, I got the 80 top and bottom and then here I got the 80 top and bottom, but the problem with this is You know for us an element or looking at the section and the yellow under the pink box around it We see two sections in the front end. That's not what we see. We're going to see is a hundred and sixty pixel gap So we need to offset this so in this case what I would do here to fix that Is go ahead and just use the math on it and make sure it equals 80 I usually do it just 50% off 50% off Makes it a lot easier. So let me go ahead and fix this back And this is how This is how they work now the next thing is we've already fixed this inside the last one Which is our container with we're doing ours at 1280. I usually stick with 1280 But also 1366 is another good number to go with thing is okay This is a 12 column grid. This is a system that I use When I'm like designing and figma and stuff like that So if this is 12 columns, you know, divide in that by 12 each column by 12 Well, the next container which is going to be our smaller one Which we need sometimes in parts of the layout. There are some parts in the design where maybe we want to have like a Form we want to have something in the middle of the page, but we don't want that to stretch all the way out So what I use here is the eight column and just by doing the math I came up with 846 pixels so we're only going to stick with these two is either it's going to be 1280 846 So you would define yours as well and now All of them no matter what they all either have 20 They all have 20 pixels on the right and left I set that up from the very beginning because what that does is it makes sure That let's go ahead and go to mobile and make sure we have a clean line All the way down the website our alignment is going to be perfect This way and I found that with mobile either 20 or 24 works the best so my suggestion would be to Define it and choose either 20 or 24 pixels. I wouldn't use percentages on something like this Only use REM if you know what you are doing 20 pixels though is going to make sure that Your alignments are going to be perfect across the entire site. This is going to solve a really huge issue that many sites have Next thing up. We are going to define the card spacing because they're going to use a lot of cards The first thing I have gaps. So every card has a gap right here in between We want to keep those the same. We go back over to The site right here. We're going to see Okay, Charlie fixed it. Okay. We did point it out inside the last one fact. Let me see here Let me try to go to home See Charlie's good man. He's on top of it I I saw the back into the site when I got in usually the back end is messy But I could tell he learns and he applies stuff as he learns And this was something that we you know found on the original one You can see we got this huge gap right here Horizontally and then vertically we got this small gap And then if we look at like this block section, we got this massive gap right over here So what we want to do is we want to define our gaps and make sure we have consistent blocks Across the board now for me, I would choose one or two It's not bad to have to but I wouldn't do any more than that in fact the less the better And here's the thing when we are putting a system like this together the more you are adding to it the more Chances you have of the design falling off of it getting messy of it getting hard to manage and you know when the design is off And you know it's off like something feels wrong But you can't put your finger on it and you're stuck and you're looking at your website. I'm like Ah, it's just not good enough. What's wrong? A lot of the times is just those inconsistencies All right, so we define our gaps and then we define our cards as well And look at here's a card first off the card is following the system I set here inside my text, you know right here I already said it so right here. I got 20 pixels bottom and then right here. I got 40 pixels bottom So these are set For the system. I defined it for this is the card spacing. This would go like on the Inner container that's wrapping up everything inside the card And that would be 40 pixels top bottom 24 right on left Choose your own it's totally up to you But just select one and just kind of stick with that right there And then I select my border radius now border radius I want to keep consistent across the site I don't want to have some boxes with like two Some with zero and some with 20 or something. I mean we want to keep all of the boxes the same So select yours Next up are going to be the buttons The buttons you don't want too many different buttons if you're using round Square you're using all these different colors if you're using too many of them It makes it difficult for the user to really understand where they're supposed to go It it makes it hard for that user experience. We want to make the buttons clear We want to have our peacock button the one that is our main call to action taking people to Our primary funnel, but we also want secondary ones and then even a third one like I got here This will be like a read more, you know, this is just additional information Like this one would be a primary button going around everywhere And then these two these would be like peacock buttons now I built all these here and we set it up and we're going to get started in the front end But as we're building the front end and on the home page We're going to be adjusting things inside here. This is our This is our space for our system and just because like I built it out here doesn't mean it's set Not yet not until we finish the home page. So say we are designing we're going through the home page and maybe These box radiuses are just too sharp. Maybe instead of doing four, we want to do eight Well, we could come here and we could change it around but when we do make changes in the home page We're going to fix it here. It's just like the fonts Let's say I do, you know add a paragraph here. Let's say, you know, I make a card and I'm making this feature section And I'm like, you know what this text is kind of big. I think the body text is too big I'm not going to come in here in the typography And change it here That is where we break the system What we need to do is we got to make sure it is linked to the body text And when we do change say the colors for our globals or our fonts We're going to come back over here in our site settings and we're going to adjust it here So I can kind of already see that maybe the body text is uh, maybe it's just a little bit too big So I'm going to take this down to one rem right here And let's go ahead and update it now. It's looking it's looking okay and Look at if at some point we're designing in the front and we feel like yeah, we can make it a little bigger We just adjust it in our globals All right, cool. I am going to take a breather and I'm going to see if we got some questions Let me go back over here stop screen share Hey, I'm getting pretty used to this. Oh this wave platform. I'm really digging it. All right What's happening any questions here? Did I miss any questions? I'm going to go through really quick I'm so glad to see you guys. We're all connected over here Andrew so good to see you man. So good to see you Awesome, that's it. We're just having fun. Just learning and geeking. I love this stuff like I absolutely love it If I could just not sleep and just do this all the time I would be so happy like Every night I go to sleep And I can't wait to have my coffee in the morning and I can't wait to get started it's it's uh It's a challenge do my morning would seem like my my meditation prayer and exercise because I just want to dive in But I have to make sure I do those other things first. All right, David. You've been using the uh 1200 picks I mean that's fine. That's all good. There's no, uh, here's the thing. There's no Like absolute. There's something absolute. There's best practices and there's some things we should avoid There's also some things too that We could use and then we just adjust as time goes when we find it When we find opportunities All right, all right well Okay, so pez now you got it at 12, uh 1920 uh Yeah, that's kind of big Do you know what actually Look, it's it's a whole style. I mean it could work especially for the design, you know, when you're using the big, uh Screens and you're designing on there like what I do is Like I work on my desk and I have a 32 inch But when I go to the coffee shop and I try to split up my time at home At my my desk and also at a coffee shop on my laptop because it gives me two different perspectives of the website In two different looking fills And I think it's a good thing for anybody here to try to do both try to balance between your desktop And your laptop because it could give a lot of perspective and we can see how everything scales as well And look at even if you are often into go super wide with your outer container If that is what you want to go for as long as you're defining your containers and your spacings That is the most important thing Oh, okay. The default page is 1920, but the container width is at 1200. Okay Ah, okay. Gotcha. Gotcha. All right. Are you using uh, Are you using a custom break points as well? Do you do the other break point or uh, bigger text? All right, we're going to circle back to that. All right, let's go ahead and keep going now We're going to take the next step And let me move me right over here And uh, let's go back over here. All right, so this is the live site right over here We're going to go now first off. Let me open this up. It makes it a lot easier for me to do this one. Let's open Let me pull that Okay, so when I'm building I like to keep my brand styles page with my design system open I like to keep it here and this is the fancy way I'm doing it and look at when you're doing it like this as well It shows a lot to the client. You don't have to do this always. All right. Here's the thing I'm doing it like this because it's a lot easier for people to see it's easier for me in my design process But I also do this here we go. Uh Here is my new site that I am building right now. I do this just right here in figma And not only do I do it there. I also start off by doing it inside of a notebook as well So if you know, if you want to go fast and you get fast at it You don't always have to spend a lot of time right here If you already have a system You can use a notebook and write it in and find it I like to create these pages though It does show a lot more to clients and it shows it helps me out with my thinking process as well All right, cool. No more procrastination. Let's dig in there. All right Okay, let's do this now I went through it and few things were happening in here as I was going through before I saw this Happening here. I saw the text, but I found out what it was. All right, and we're going to fix all that I found out what it was And it was just margins negative margins being used when we removed all the default styles That were in the theme styles and inside The font styles. Well, that's how everything got all thrown off. You know, we got like negative 10 34 all that stuff All right, we're going to do something and charlie your heart's probably going to drop in fact Your heart's going to drop a few times Tonight and don't worry. This is not the live site I am just going to remove it all because It's going to make things a whole lot easier. In fact, let me go here Delete that. I'm just going to use my navigator right here. I'm going to delete all that And let's go ahead and update this right here. All right, don't panic We got everything still over here All right, I can refresh it. Let's make sure that that wasn't the live site All right, it wasn't the live site. We're all good. All right, there's one other thing We're going to do your heart's probably going to drop again at this Uh, I found something else as I was going through And that was down here inside the templates. All right, there was 82 templates I am going to delete all these including the global widgets. They're throwing everything off. We're redefining the whole system So having globals Global widgets are just going to throw it all off. So I'm going to go all the way down here I'm going to move it to the bin All right, and then we're going to Yeah, that's that's weird. We can't do that right there. So we're going to trash all these I need a clean environment when I am Doing an update to a design You know, we don't have to rebuild the entire site We don't have to all the time in fact this site right here I wouldn't rebuild it all because there's a lot done in it for the SEO There's a lot done in it for a lot of other good things and I wouldn't want to take away from that Plus charlie did a really good job in the back end making sure Everything is clean. It's not like full of plugins or anything like that All right, let me go ahead and delete these permanently. I just want it to be cleaned up all right And that's going to help us out too because as I was dropping things in like I was dropping in some elements They were doing some things that I didn't want them to do Okay, what do we got here? Oh, okay. So these are the theme builder ones All right. So when we're doing this, this is really important I want to make sure that we only have like one single post if we're going to do blogs I see a lot of pop-ups. I'm not going to touch those Uh, oh, I do want to oh, that's going to mess things up if I do that I'm not going to touch the default kicks. I'm going to have to regenerate it and stuff like that All right, we got one footer That's cool. We'll keep that one footer one archive. We got a lot of pop-ups. We'll leave those pop-ups I'm not going to touch those. We got one header cool A single post we got two. We're not going to touch the post right now I'll leave that up to charlie for later, but it looks like we are good to go So now let's get started here on the home page Do you know what I'm going to do is First things first I always start with the headers and the footers. Let's clean those up And uh Let's go ahead and edit this with Elementor. Okay Okay, cool. So we do have We got this top bar. Okay. I'm so excited to get this top bar fixed up right here Uh, let me go ahead and delete this In fact, I'm going to delete all of them Just delete. All right. First thing you want to do go ahead and drop in the top bar. This is going to be for our promo bar now right here We're going to put in let me see 20 pixels right and left just like what we defined So I'm going to put 20 here And then let's drop in some elements right here. I'm going to drop in first off All right, I don't know if you notice this and I mentioned this inside a post Inside the Elementor group, but I don't use The text editor. I don't use this widget at all I use the heading widget only now the text editor I just I mean, it's not that it's bad and they can't be used But I found that sometimes it'll throw extra spacing in Sometimes it throws extra br sometimes it starts to throw in Span tags and when you copy and paste in there say if you do it from a google doc It could carry over some of the meta that's inside there. So I usually just use the header Right here, you know, if I need to edit it, I just open this up. I just changed this to a p right here Let's go ahead and grab this text oops So I'm just going to grab this right here Yeah, we'll write that in and then we already got our font styles So I'm going to make this let's go ahead. I got the font blue right here And then I got a tiny text. I'm going to use the small text right here And then we are going to drop in a button. All right. Yes I thought when we deleted the globals that would stop. Okay Let's go ahead and fix this up again I'm going to use oops I'm going to use a tiny text because we're going to make a small button Now if we go back over to our brand styles and facts, let's go quicker I'm just going to copy and paste the style. I've already defined it right here You know what let's go ahead and go here and I already see an issue right here. So let's go ahead and paste this style All right, so we got it. I want one small button and I want one big one But I think this is still too small. So what I'm going to do here is I'm going to make it smaller I'm going to go down here. I'm going to change this from the button text to the tiny text We're going to make this a small button and then Let me take this down to Let me try this to four and take this down to 12 You know and another thing we could keep open as well If you want to create a third one like a medium size, we could always do that as well But for right now, I'm just going to stick with this small one. Okay. Now I could copy it Let me update this I'm going to go here and now I could paste the style here All right, and let's go ahead and flex this thing up Go ahead and do that. Let's uh add a gap in between I'm going to use our gap that we defined 20 let's center it up and we are good Now there's a lot of spacing on the top and bottom. Let's reduce that We want to keep the right and left. That's part of the system. That is super important That never changes no matter what on the outer containers I want to take this to eight I stay with fours is just part of my own system and then for here. Let's go ahead and Give it a background color. We can give it this blue make it stand out And then I'm going to give it the off white And look at for the font we're only using these two colors this dark one right here Which we did change in the last video We made it to like a black blue to fit the ocean theme or we're going to use this off white Which is also in the blue range All right, and what was this called action that charlie had here more info All right, let's go ahead and Update that right there All right, so as we're going through this there's going to be a couple things We're not going to worry about first. We're not going to worry about links We're not going to worry about content and we aren't going to worry about images We're going to use fillers for all of it. We're going to focus on layout and we're going to focus On the structure of the site and setting everything up and making sure if it's the design After that's done swapping out the images and content That's like the easy part right that's a fun part because you can style it up But it gets a lot more easy with that All right, cool. Next up. Let's create this Oops, let's create the banner right here. So we're going to put a call to action have a whatsapp right here There's too many call to actions up here. That was one of the things we identified I mean got the more info. This is like a promo. We only want a promo If we're not going to do a promo right here I would put in the whatsapp You know, I would put that in and choose one You know, or this is just too many. So we're not going to do that Uh, let's see here What we're going to do is we're going to make a traditional banner right over here All right, let's go ahead and first thing I do always when I drop in the container Let's add in the style. So I'm just going to put 20 But that way we got our 20 right and left. We're good to go on that We could adjust the top and bottom after Let's go ahead and drop in the elements I use images you can use a logo. I personally like to use the image and Oh snap. We got 800 Photos this game through. All right Let's see here. Oh, it's loading. Okay This is why working on a local host is so good because it just goes super fast And here we go. Looks like is that it right there? Oh, but it's converted to webp How's that even going to look? No What is this it right here? Again, webp Ooh trust badge dope. All right. See there's so many Like this is a designer's dream right here the images and the graphics and what we could do with this man Man, man. Okay. I am going to put that there. Let me go and turn this width to pixel I'm going to start off at 120. We don't want a giant. We don't want a big 120 is a good size to start it. Let me go here And all we're going to do is add the link because some link and put a forward slash Now it links home. All right next up. Let's drop in our menu All right, and it's the wordpress menu now, uh formally the nav menu Hope that didn't get too confusing for everyone. Okay, we got this here now Let me see and fix up the typography. We already got our styles right here So we're good. All right, and then we got our our colors as well You see text color. Let's go ahead and make it our dark hover We're going to make it like blue and then active. We're going to make it the ocean blue as well Pointer color. Let's go ahead and just keep it the same color as the text We don't want to add all these different colors here because it could get difficult to use We don't want to do that. All right back over here. Let's remove all of this All these other underlines make it more clean You know, I'm going to leave it on here, but I really Don't like using font awesome. Usually I create my own or I just use a icon library Like I just download the svg But for right now, we want to go kind of quick. Okay Switch this to full width tablet. That's good Center We're not going to do mobile because that's going to take way too long. We're only going to be set enough for this Now we got our mobile drop down. So let's go down here And we're going to keep the typography the same And look at here's the thing if this feels too big and right now to me It is feeling too big already for what we're looking at. We're going to fix all that in one location All right text color. We're going to make it this color the same Hover we'll do the same ocean blue active. We'll do the same ocean blue background color. What's keep Oops, let's go here to normal We'll make the background off white Same thing here. I don't want to get too overly fancy with the drop down. I just want it to be easy To use. All right, cool. This is easy to use And we could always do something else too. We could always do hover Hover, let's say background blue and text color white And then we can do the same thing to the active White and background blue All right, now this is easy to use right here. We'll fix up the typography in a moment We don't need to touch any of that. All right, here is an issue right here This is an issue within elements work. In fact, there's two of them I'm going to show you how to fix both of them. All right first one Look at here. We got spacing right here on the left, but we didn't put in any padding I didn't put in anything here. It doesn't fit my system I'm going to control my spacing between my logo Call the action button the menu We're going to do that right here with our gaps because we define the gaps in our design system I'm going to put 20 pixels right there. So that is going to give it the spacing But by default Elementor throws in its own spacing for its nav menu So if we go here, what we need to do is we need to put this at zero We need to put that at zero put them both at zero and then we're going to do the space in between And I am going to set this to 40 Giving enough space for each Now we eliminated the space here and space here. We still got this bottom space something else is happening I think there's some other globals going on here I'm not going to go too deep into it, but if you do see your pink box Oh, no, I know what it is. We need to center this Bam, look at that now everything is centered. We could even do space in between And even if we were to let's say bring this in it's going to The gap is going to prevent it from hitting that logo. All right, cool. Next up. Let's drop a call the action button in there In fact, I'm just going to go here because it's going to make things go Whole lot faster. Let me copy this Go over here And paste that right there. So now we got our call to action right here and I'm just going to do something like contact We could fix all that stuff up later. All right That is the header right there. So this is our starting header. I feel like we're good at this if anything What I would do here is I probably would tighten this up a little bit maybe to 12 pixels 12 pixels on the bottom I play around with it. The other thing I would do is let me go over here to my text my site settings I would go here to my global fonts. I feel the button text is just too big. I am going to change oops I'm going to change it right here to one rem which is going to be 16 pixels that looks so much better now And then it also took effect here on the button. Okay, cool. Cool. Cool All right, we're good right here. All right got to do mobile and stuff But we're not going to go that deep into it. Let's build out the layout before we do that though We got to fix up this footer something weird is happening over here I mean, I know what happened. We removed the styles, but we could clean this up really quick all right, so let me Get out of here and no not here All right, I thought everything would be done in an hour, but dang we are already hitting an hour Let me check in. All right. I want to see are you guys still here? No, this is not where we're at We're right here. You guys still here All right, let me actually do this Bam I'm getting the hang of this wave thing Yeah, Andrew, I know man It had I put on some other lifestreams or some other tutorials where I'm working as well It really does help out. I like it. It keeps me in the zone and then I'm also learning as well All right, cool. Cool. Any questions coming up David definitely he said this one looks like an ease happy files. I do know what I didn't have time I did want to add happy files to it. I just started using happy file Happy files pro and now after I use it. I cannot see myself Building another website without it. It just makes everything so much cleaner and more organized. I love it. Definitely Uh, if you guys don't know happy files pro go check it out. It's a game changer for sure All right, cool. All right. Hey, do you know what before we You know what? Yeah, do you want to forget? I'm gonna do it. All right, cool. I gotta because all right I can say I'm not good at plugging stuff, but I do have the design course right here that is It goes through all this stuff that breaks it all down But not only is it for like designing with Elementor really? This is a web design course and an Elementor course now the only reason why you know me I don't really show this stuff. I don't really I do the live streams just because I want to geek out with everybody But I do want to show it because I price this thing super low All right, I price it low because I wanted it to be Accessible for people in all different countries no matter the economics in certain countries and Well as a result I underpriced it severely and then I started doing Parity pricing so that way for those of you that are inside certain regions of the world certain countries Where the economics are just a lot different That way it could offset it and I could price it appropriately. So the reason why I'm saying all this is This Friday Since I do have the parody up It is going to go up to the price that you know, it should have been at right now. It's 99 And if you are in another country, you could use this code right here But I just want to put it out there because It is This week. I'm going to be putting it up quite a bit. Okay, cool. That's not me I really am not a plug kind of guy. I want to design. Let's go ahead and do this now All right I'm going to jump over to the theme builder and I'm going to now fix up this footer I saw a few things happening in the last live stream and we're going to fix this up really quick And I think this is going to be a video that takes some time Uh Hope you guys are all right with that. I'm ready to go man. I am ready. I'm in the zone all right, I see that there was a lot of Uh trial and error is happening here and being hidden. I want to clean it up Because uh, I do wanted to stay clean, you know, google could I don't want google reading this stuff I don't want this stuff being in here. Uh, so I try to remove stuff, especially Uh-oh My camera just died Oh my god. I can't believe that just happened Oh no All right, p camera Okay That's how long we're going the battery died. Okay. It's charging. We're doing a live stream We're doing a screen share anyway, so you're going to see a black circle. All right. That's supposed to be me I will turn it back on in a moment. Let me just charge it up for a little while And we'll just do the lives the the screen share. All right, so I'm going to do here is I do like This one. Okay, you made this one for mobile. I think this one looks really clean right here Huh, let me see here. Let me go ahead and open this up Because I want to go kind of quickly You know what? Delete it. Let's just go ahead and use our system right here. First off. Let's go ahead and put Do you know what we could put the text nah? We want to put the logo right here and we can see All right. We're already coming across some things Uh spacing happening inside here Yeah, something weird is just happening across all this and we have negative margins So what I'm going to do is I'm actually just going to delete it because it's going to make things a lot easier and faster I'm going to drop in uh Let me drop in the image for the logo And you know what we are on. Okay, we do have a container right here. So that's good And we have these containers all right dope. So we got this Let's go back down and get the logo out from the bottom From the bottom of the list Let's see here Yeah, for sure, uh File manage happy files would have made that a whole lot easier I'll put that full. I'm going to make it a little bit bigger this time. I'm going to put that 220 We want it to be visible now. We have the spacing here and is that because Okay, our flex controls we got to control that I'm going to go ahead and use The gap in between now next up. Let me go to the live site and I'll just take the information here copy and paste it And let me drop in A title All right, I am going to duplicate that title Now right here. I'm going to turn this to uh, I'll turn it to a p It's up to the scl. We could go ahead and make it into a span or something. Let me set the styles Uh, I am going to I'll first set it this but I might make this background dark eventually Uh, let me go ahead and do you know what? Yeah, we'll leave it at the body text for now and then we have The phone number right over here. Let me get the tell Let me copy that right there. I'm going to go here Put that in and then also I'm going to take this right here Actually, I could put that right here, huh? You already made the the link so That's good. And I am going to change this to a span Let's go ahead and give it a color And I'm going to make this a little bit darker easier to use All right, cool. We're good right there. Let's go ahead and fix this up. So All right We have this giving a bunch of space Let me go ahead and delete that Let's fix these up right here I don't want any margins at all on this Uh, what's happening here? Is it aligned? It might not be aligned. Let me try to fix this here Okay, uh-oh what happened to the text? Did I change the color on it? Okay, there we go. Let me fix our styles right here We're going to give this a button right here. So it's easy to use All right, again by default Elementor adds all this here. We're going to put these at zero and we're going to use the space in between I'm going to put 20 And then what was the title on it? I could take that from the live site design courses Or diving courses Design courses you can see where my mind is that let's go ahead and No, not that I'll snap. That's right. I'm going to put the heading up here I can make this an h4 Let's go put dive courses and now Let me go ahead and set up everything and we got Uh-huh I've got the subheader with that work. Maybe the subheader will work. All right, and we're going to use our system right here I'm going to put the 20 pixels Bottom so now we have that and again we could fix this up all together Uh going forward. Okay Uh, let me copy this Delete this And paste All right delete this And paste Let's go ahead and bring that up bring that up And then let's just take these diving locations and popular blogs All right, and then You guys can see I'm most of the time I'm too lazy to type Uh, I just want to go fast usually. All right popular blogs so now What we want to do when we see a situation like this these words are breaking So I'm going to want this word to break but I'm not really going to use a breaking tag instead What I'm going to do here is I'm going to control the width And you're going to see me do this quite often with my text Because I want to control the breaking but I control it with the width Using pixels. So I'm going to take that Okay, where is the breakout? I'm going to leave it at 200. I'm not going to leave it at 201 because that number is weird It doesn't make sense. I'm going to round it up to a number that fits in my system. I'm going to take this Copy this and paste the style And then again paste the style. All right And we have all this spacing over here, which we shouldn't So let's see what's happening over here Okay, this is 30 percent Uh, huh Let's just make these even for right now Oops Be 25 right 25 percent. I'm going to leave these even for right now. I'm not going to mess with it Now right here. We want to fix this because look at for our containers We're not going to be changing the width unless if we're using the shorter container And then for up here, let's go ahead and fix this up. We need to add in the padding the 20 left and right and you know what the 60 top or bottom actually works because What's Yeah, look at this. Where is all this spacing coming from? We have tons of spacing here That we shouldn't oh, okay Uh, what is this element? It is a menu. Let's delete that Okay, let's go ahead and fix this up. So everything is flushed This right here. We're going to take this to You should go to the top Unless if they're yep, they're spacing around here. Okay, we don't need any spacing in here Instead, we're going to go here and control the spacing and our gaps All right, and I'm going to give it a little bit more spacing on the top and bottom Let me give it 80 oops And I want this to stand out a bit more. So we're going to make this dark right here You know, I'm going to make it No, not that color not yet. Watch and see what I do. All right, let's go white I'm going to go white right here and then the same thing. I'm going to go text color white, but on the hover I don't want to do that orange that orange is going to be our peacock. We're going to do that very carefully. Okay, no active Right here. Let's take this to white as well And let's fix this We are going to take this to off white and then on the hover We're going to give it this sea breeze green and then here Look at they all broke. I'm going to now remove this because Uh, we changed the layout a bit. So Let me go ahead and do that right there and fix these colors. In fact, I could just copy and paste this All right. Now if we wanted to move this over we can Like this I could go ahead and put this to Let's say 28. I really don't like doing this too much But we can give them more space if we want to do that and still maintain The 20 pixels right there and then oh, we need to get uh, I see why you did that We need to get an svg of that But for this now, I'm going to turn this dark now It's really going to stand out and this way too if you want to put like Uh company t and c something a bit about the company you could do that right down here Now we could just go here put 20 Put a background of let's put a background of the sea breeze is super dope. Okay. I could do something like, uh Put this title here. We're going to change this to span and we're going to put, uh, Thailand divers I want to put like I don't know what year you started. Uh, Charlie, but you can put this to like 2012 to 2023 Go ahead and style this up fonts color dark and give it a tiny text All right, there's spacing here. There shouldn't be any spacing and then let's go ahead and Tighten this up a bit. I'm going to put that 12 Oh, no, I linked it 20 and then top and bottom 12 You could do something like that. We could even tighten it up a bit more Put an eight And then you could also put like your terms and conditions right there But here we go, you know, and then we could go in and fix it up right now We're just getting up and going quickly to get a start. That is the main goal for this right here All right. Now we got the homepage and now with the homepage. We're ready to go And start building this and we're going to be carrying all these styles over So we could go here now and start building out our banner But we got these two and I don't know if you guys could see it But this menu right here and if we go here Like already I feel that we are off to a good start I think like this would be a good start a good place to be the next steps We're going to have to do the structure before we even start building the pages Let me see if my camera is working now and stop the screen share. All right, the camera is on That was I think it just overheated really All right, let me see here. Are you guys still here? All right, is everybody still here? Whoo Judy Judy Yeah, I mean, thank you, Judy. I appreciate that about the course Judy says of course is dope Judy's been crushing it you crushed it on it. I saw your site the other night. We went through it It was super super dope. All right Hmm So, uh, okay some good questions here, uh, maxim asked How would you do a sticky header with two sections like now? Okay, so with the sticky header It depends. I mean we could do the simple sticky header Uh You know, I would try to keep the menu. I would try to do two things one I just want to make the first one the desktop easy to use and make that one sticky And then for the mobile if this was let's say didn't have so many drop downs If it was just a regular menu, maybe with one set of drop downs Then I might just use elementors default because for sco and for uh the html markup It is the best When we start using slide outs and mega menus and things like that It does make the sco and markup really messy. It's not uh the best But it's also as long as the desktop is good make that Make that sticky then we can make another one just for mobile And make that like a pop up a slide out and off canvas or something like that You would just hide the the mobile menu Yeah, and then davidin said the element or global css selectors would be good to create design systems faster I could not agree more. I have been using uh Bricks a lot. I've been using bricks a lot. I'm building my site right now with bricks And the thing about it is The the classes it makes it so much more methodical of the way we're building it Like right now having the uh, it's like all right, we have the uh The global colors and the global font styles and you see how quick Those make the process now imagine having That but also for border radius for gaps for containers for cards for You know for all these different things for your buttons Having that built in and then it just it just builds that out. So I'm really excited that Elementor is rolling that out. That is one feature I am really looking forward to when it does come out. You're going to see me doing a lot of work with it Pensola, what is up? What's going on? Yeah, davidin says I hope elementor comes up with a great solution You know the thing is elementor, uh, they do things the elementor way and I like it. I like it They do things very user friendly, you know, like I've been digging in bricks now You know, like I haven't created much content on it because I really want to get to know it And I'm not the type that bounces around like I only have a limited time for things I think it's good though to have You know once you master something to move on and build something else that you know, expand your toolbox uh Elementor does things in a very user friendly way like the loop builder The way the loop builder is done in there is just super Straightforward and easy like you see it visually you drop things in there. I really like that and so Seeing the way elementor does it I couldn't imagine that they're going to do the the global classes A very elementor way as long as it as long as it's not in beta forever. I'm good I just wanted to come out be good and start using on production sites All right guys, all right, so we keep going it's kind of rolling a little bit later than I thought it would I thought we would get a whole lot faster quicker Thing is I have fun and I just started getting into it It's gaining choreographers says yes, we are here. Of course. We are here. All right, cool I just want to skim through I want to make sure I didn't miss any questions Because I really want you to be able to ask anything during this whole process You can even challenge me like hey, why are you doing this? What's up? What's the reason behind it? That's the reason why we're doing this live? All right All right, cool. I don't see any questions if I do miss something. Let me know All right, you know what let's go ahead and take the next step The next step is going to be fixing the structure. I think though for the sake of I thought okay My plan was this is my plan was to complete everything for the homepage I think we're going to need one more session for it. I think we're just going to need one more But what I am going to make sure we do inside this section and we finish up is that we have the whole layout set We might be able to finish it Let's see how it goes. All right So the next step is now we got our our system there We got our starting point going now Let's go ahead and create the structure because let me go ahead and do a screen here Pull me over here to the corner Yeah, you know what? I'm gonna Might hear my air con, but I don't want my Camera to burn out. I'm going to make it cold in here All right, let me see here. I'm going to go back over to the main site All right, we got to use Charlie's live site now Because I deleted everything inside the staging site so we could have Uh, we could have everything Just a clean slate now if we look here at the structure and I could see a lot of what you know, it's trying to be achieved And you know, I could see like we got these courses right here scuba diving training courses We got another structure right here in this section right here for trips and these are really important These are something the business is going to want traffic to funnel to There's another section right here for the simulant islands Leave Charlie said this is okay. We don't have to really put it in here Uh, we have something showing the uh boat, you know, that's being used for the excursions and going out scuba diving more content More content And you know more content. So we got lots of content going on here And a couple things we don't have we don't really have like called actions. We don't have trust Well, check it out. Let's go ahead and take a look at this before we get into the structure building Uh Now I do weekly workshops with the pro the lightbox pro academy. It's our Private group that we have. Uh, we're always doing like workshops. This is one that I did before on You know creating the structure for our websites right here And I thought to pull this out because this could apply to any website right here like this this, uh This this workshop right here was actually meant for us web designers and web creatives to build a website for ourselves But it's the same thing And right here we could see the things that we need. Let me see if I could zoom if that helps No, they don't let me zoom All right. So if we look over here, there are these seven elements I mean first we need to make sure we have the banner with a clear message So right away off the top people need to look at the banner and know exactly What that site is for we need to make sure the services are clear We need to make sure people are able to go to exactly what they want and to know does this website Offer what they're looking for the third one. This one is super important. This is trust and credibility Now this is something that is lacking on the site that we want to make sure That we give and the thing is for this brand this business. They have trust and credibility We just need to find a way to position it and to show it on the website The next one we want to do something that is about the client But it's more focused on their customers and the benefits that could give the customers Uh, this is like a little bit a jinjitsu type, uh, you know, we want to let you know about who we are But we're going to do a little flip but also turn it around and to make it about you The next one is we do want to do something a little bit about like, uh, the brand and we want to personalize it And then we want to show some work We want to show like for us first designers. We want to show portfolios, but for say somebody like, uh The thailand divers we want to show some like dive in excursions We want to show something about that so we could show Something in that way and then a clear call to action. So we're going to make sure we get all those now Let me let me set something up. I got something right here. All right Now first off when I am in this process I started off with a notebook. All right In fact, let me go back over here All right, you guys got to see because this is where I started off My process every time I'm doing thinking I'm doing strategy wire framing and always starts here This is how my wireframes work. In fact, if I don't need to go back and forth with a client I don't need to build a fancy wireframe because this has everything that I need Our the whole process of doing the wireframe and structuring is first To make sure that we have all those elements in there, but it's the thought process How are we guiding the traffic? How are we displaying it? How are we positioning things? This right here is where the value comes This is the huge part of a value right here And this is when we get to a level and we have experience and we know How traffic drives the site we understand People's behavior. We know how to Do research it's a look at specific industries and to really like understand the user Practice empathy and be very strategic on how we're laying out guiding everything That is where our value comes in. This is where us as web creators We really need to charge for that kind of value Because even though the website might look simple it might look Easy it might look like oh, that wasn't all complex. There's not all this stuff going on It isn't simple and easy. It wasn't simple and easy to get to that point Of course if we're doing this for years, we got systems are going faster for us We make it easier for us, but that is only because What we're able to put into it and a huge part is going to be the positioning part and that I think that's the part where It's a challenge for me I find that is a part as a web creator a challenge To position and to get clients to see and understand Especially when we're giving them prices and we're trying to give the prices to match that value Okay, rants over if you guys have any thoughts about that. Let me know drop it inside the comments a little quick Ruben does have a question right here before we dive in because I'm about to go in the zone Has a question about the course and program Okay, cool. Uh, do you want I'll go ahead and just show really quick. All right guys, uh, you see here Let me see. I gotta do Let me go back here to the stream Uh-oh Oh my screen moves. Okay. I'm using arc browser by the way All right, so really quick just about the course and the program All right, the course is broken is going to be uh, it's going to be designed So like what we've been going through inside this it's it's more Thoughtfully broken down step by step to guide giving all the tools needed making all of it digestible Uh, this whole thing was over four months of full time Planning work everything that went into it and we go step by step through the process of web design and understanding it In the goal for this part of the course and this in its own it could be its own course It's just web design and understanding it. It's understanding the theory the logic understanding systems processes and what it does too is it's It has been designed to help you build your own system In your own processes that you're going to be able to carry across Now the one thing that this has when you start off there's an actual project Brief attached to this it's got to choose your own adventure Uh Theme to it. All right. It's got to choose your own adventure theme And you're going to be following along that way. You're actually putting work in with the course and everything you're doing You're going to be able to use uh for future projects The next part is going to be applying it to elements work and it's going to be using like containers We're only going to use the updated stuff And we're going to be looking like everything we've been going through we're going through it very carefully very methodically You know all the way to the layouts Now the next part right here We're just wrapping it up and putting things together where you know, you have a framework you have a system You understand how to use these and then I do have more courses I mean more lessons coming out we have one coming out on Fluid typography next for elements work So the course there's two different things here. We have the course And this is do it yourself. All right, that's that's what it is. But check it out. Even though it is do it yourself I I just want to help, you know, here's the thing. I just want to help the plan was to oops I don't sorry. Judy don't want to show your business here. Uh, I I just want to You know, like I can't say no and not help, you know So if you do got a course, it's all here on our platform right here So we can go to the course And you're going to be taking it here. And now this is a lightbox pro platform This is for our private community right here And you can take the, you know, you'll take the course right in here But like if you run into any issues or anything you can send me a direct message you can connect with me Right over here. Now the program. Let me skip back over here the program. This is it for the program I am only keeping it open until Friday And I'm going to close it down for the next six months because The program takes a lot more one-on-one interactions. We're having weekly design sessions. We have expanded it Like I'm trying to find ways to add more value and do more We expanded the program into instead of just looking at the course and going through your your work on the course And what you've been doing on it, but also your client projects Your personal site we're having these sessions every week So we got these open sessions where we could have personal time We could go through everything and walk through it because look at here's the thing We're usually doing this all alone. Usually when we're working on a design for a client I mean In this uh share right here Usually when we are designing for client and designing for a project We're usually doing this alone And we're trying to make it look good alone and then we're getting just feedback from critique from a client you know and my My my goal is to have a space for designers where we could have that feedback for each other And we could get that feedback before it even goes to the client So that way it's just not just us and a non designer which most clients are not designers Uh, you know and just find ways not do this alone anymore All right, cool. I know I fell off with that It Yeah, I'm not really the salesy type even though I need to be more. I guess. I don't know I want to geek out right now. Uh, any other questions? All right, Elementor makes websites really slow. Why don't you build websites based on gubernberg blocks? Uh, here's the thing. I make elementor sites fast I can make them fast. I mean yeah, the the markup isn't as good and Three years ago. Yeah, it was not good at all with elementor If it's done, right If we use containers and for a very thoughtful and everything that I'm showing right now All these different things if we're not using inners and inners and inners and throwing spacers and doing all these bad practices If we're using good practices Best practices we can make them still fast. My sites are fast. I use really good hosting Now gubernberg blocks are dope as well. I do want to learn that I want to get into them I got a generate press for uh For black friday and I got generate blocks. My intentions are to spend time and learn them But then I started using bricks as well and here's the thing for me I believe in mastering one thing at a time. It's a philosophy I started my career with seven years ago. I did not know how to use a computer Today I'm running a company and I'm doing high level stuff working with brands that are global Like I was able to scale up really fast and to master things really quickly But the only way I was able to master things was to stay laser focused That was the one thing I was able to do my entire career Was to stay laser focused on one thing and get really good at it before jumping to the next I would love to go to gubernberg blocks. I would love to go to generate I really want to see what's happening there. I love seeing what like other people are doing with it uh It's just right now. I mastered elementary and the next thing I'm mastering is bricks But also the next the right now the main thing I'm mastering is teaching That's the main thing. That's my number one priority is helping others out right now But it's a good question man. Really really good question. I'm really glad you asked that Yeah, yeah, david and yeah, you know what it's all about being well thought out You know, you could I could I could build an elementary site and it could be You know, it could be slow. We could make it super slow for sure. It's definitely uh, it's skill in its own But definitely it's legitimate. My thing is Whether you're going to like generate plers generate blocks using gubernberg blocks Pick one and master it and get really good and like the whole point of this series that we're doing in the in these uh Live streams are building and applying Uh design systems. So right now what we're doing with these design systems that could be used across any platform It doesn't matter. It's just the tool All right, cool. So time is come out. I'm going to give it 30 more minutes guys But what we're going to do in this 30 minutes, we're going to build the structure We could do this actually kind of quick. All right. I am going to Yeah, I'm getting a hang of this thing. I finally figured out how to get this little head bubble here. All right Let's go back over here Actually, huh Okay, we got this open, you know, I'm gonna do Let's go over here. I got right here. I'm doing something different. All right. I got to get my iPad out Let me move my desk around a little bit because Usually I am doing this inside my notebook But I found out recently that if I use the new free for app and for apple That it happens like in real time across devices. It's crazy though. It's crazy though. Okay, cool. So let's go ahead and Create this all right first step. We want to create a banner. All right I want to make this big and stand out Because this is scuba diving inside thailand. All right stand out All right, we're going to put a little bit of text. We're going to put a call to action In fact, I'm going to put two call to actions because there are two main call to actions that we have Remember the call to actions. We're going to be the courses And what was the other one it was uh, let me get my keyboard back over here And the other one was going to be the uh, okay the day course And then the day trips. Okay, so we got courses and day trips These are the main ones right here. We want to make sure we link these here my Things are super messy. All right. It is super super messy. First off. I want to hit you with some trust All right, I want to hit some trust right here. Let's put in some trust I'm either going to put in testimonial Or I'm going to put in a badge All right Or a badge In the badge when I say a trust badge, that's like a certificate. It could be uh Geez like, you know, let's say you guys got a good review on google reviews It could be like, you know, just an image of that We want to go ahead and put some of that on there now. I could also put in some I don't want to go to text devy not yet We want to go into the services Uh, you know what? We're going to put in some text and we're going to put in the blocks And then followed by trust I love to Especially when we got a brand like tylan divers that has so many good reviews I want to make sure I am Doing them justice by plugging them in everywhere. All right trust reviews All right, we could do just one You know, or we could do a carousel or something like that next one Let's go ahead and just some text and we're going to do the day trips. All right And all right, there's our so what I'm going to do here for the services This is where I'm going to talk to the client and I'm going to ask the client What is the most important one? Like which one is most important for your business? Which one brings in the most customers and revenue? I'm going to put that one at the top most customers And money so whatever that is that goes on the top right there. All right next up Let's first go over to our list. This really helps out Having this around we want to make sure we get everything. Okay clear services already there Trust and credibility now. Let's do something about the client You know what we need images. I'm going to put an image back here And I'm going to put some text in there because I could already see Like they have some really dope images of scuba diving I saw their image drive And it is just a gold mine for dope graphics. There's so much that could be done right there Uh, but I also don't want to make all this too big You know what I'm going to put maybe one more section. We're going to put a bounce And I'm going to put like a gallery I don't want to put too many images because it could slow down the site But I want to put something with people Customers let's put something with customers and there's something with charlie as well So we could probably put you know something right here and this is where we could even get a bit creative Uh Let me see. We do want another call to action Uh, let's go ahead and follow this up with a call to action All right, I'll figure out what we're going to do on that one. What kind of call to action what we put Let me see over here. What do we have on the original site? All right, they do have the FAQ now since the client has an FAQ here already I'm probably going to put an FAQ underneath I'll put the FAQ though underneath the call to action All right, and then the footer Yeah, so our services are here. These are the primary call to actions Same here primary call to action All right, and then let's say over here. This will be Like somebody just needs help getting guidance around so we're going to say I could even put both buttons right there Or a contact. I don't even really know if I you know what We're going to do a contact right here Fallback I'm going to call this a fallback CTA and we're going to put contact Because I do you know being that I live out here in Thailand and this particular Website this brand is from Thailand. I know that I know that it's really important people want to call they want to call on whatsapp They want a message so we can maybe make this a little bit easier right here For people to contact Oops, oh man. I wasn't sharing it. I was writing it. So sorry. Oh my gosh. Okay I totally finished the rest on my own. You guys are looking at Charlie's FAQ. Okay, so, uh, let me go here Let me see. Can I make this smaller? Yeah, what I did here was a primary call to action here primary here I'm going to put the about gallery. We'll put some pictures of people people having fun That was something that identified on the original site that was really needed Uh, and then we want to fall back call the action right here We're going to probably funnel them to the contact page Uh, maybe even right here You know what I am going to consider Uh, two buttons I want to see if that fits right there because even though we do have Uh, these right here For people to funnel what they miss it they miss it. I still want to take advantage and try to Uh, get that opportunity. So we are good to go right here. This is the structure I am going to set this up right here And we're going to get it started. All right. All right. It might hear me move away. I'm moving my mic around this stuff Let me move my mic back now. Let's cancel that I want to keep this in front of me. So it helps me out to see when I am starting to build the site Before we go though, I am going to stop the screen share and Get some sip of my tea and Let me see if there are any questions. All right All right. No questions. All right Cool. Cool. Let's just go ahead and keep rolling I got to get in the zone now. This is the time. I got to really get in the zone All right, we're going to get here to the home page now. We got our layout This is our layout. I'm not going to now I'm going to do this for a client I'll do something more, you know more polished to walk through but this If I'm doing it on my own, I could work right off of this The strategy part is done and I did it quickly and a lot of this stuff is repeated over and over but that is because of constantly for years now Doing this for clients testing it doing heat maps Optimizing figuring out exactly what works best. That's how I'm able to go so quickly with it. All right Enough said, let's go ahead and make a banner first thing we want to do Let's go ahead and give this some padding Let me give it 20 Banner is the only one where I really give it different types of padding I might be wondering why I'm doing padding instead of vertical height Uh vertical height works sometimes but sometimes it doesn't especially when you're resizing The screen I tried I like to use set things. It just works for me. All right. Go ahead and drop in text I'm going to do more text All right, I'm going to drop in all my elements. Let me go ahead and I'm gonna drop in a third text And then I'm going to drop in inner container And then from here, I'm going to drop in a couple buttons. So I got to open this so I could go back and forth I'll snap Okay, I got to go back to my brand page So that way I could copy and paste things really quick Let me Copy this I'm going to drop two of these in here Uh, I wanted to copy the button Paste that and then duplicate it. All right. I'm going to do two buttons I want to try a double call to action because we have these two called actions The courses and the day trips And I want to make that really easy for people to find. All right. Let me go up here I'm just going to take some things Scuba, okay This right here does not need to be big. This could be the h1 I'm going to change that to h1. Let me go ahead and give it a style We'll change the colors around when I fix the background I here's the thing though, too. We want to avoid doing this We don't want things to be in all caps because if google picks us up And they do put it in the searches. It's going to be in all caps It's just something we want to avoid avoid Cat OCD kicks in right now you guys can see. All right, cool. We got that. Let's go ahead and give it the spacing Next up. Okay, right here when I'm building on the side, I'm not going to even try to think of the content here I'm going to write I'm not going to do all caps I'm going to write something big and Stand out All right, let me do that All right, that'll be the h2 And then we could set this up. It's going to be this extra large and then from right here Let's go ahead and do I don't only want to do the ai Let me see. Here's some more All right, I'm going to make a short paragraph. I don't want a lot of content inside the banner Because we don't want people to read a bunch of stuff I don't need to as long as this right here tells them exactly what they're doing and builds that connection then Is you know, what we're trying to do has been achieved. Okay, body text. Let's go ahead and give the spacing Padding bottom 20 and then right here. We want to get padding bottom 40 Get that space. All right, cool. Next up. I'm going to go here and let's make this vertical. I'm going to just control my uh Container, this is why I use containers. It's so easy doing this stuff now. God. I love it. All right, cool I am going to let's go ahead and make this one Green and again what we're doing here on this home page This is just We're just starting it. All right. We're going to polish it up This is where the most time is and this is why we're going to need another live stream in another episode next week. All right I want to show a few things though. Here's a couple of my tricks Uh, you can do this a couple ways you can try to control the width, but it breaks the whole layout I don't want to break the layout. I want to keep my system. So when I am controlling text I'm controlling it with my width. I use custom and I use pixels I do this all day long. I have full control over it and I'm going to take this to Music kind of take it to 50. Yeah I want to keep sure make sure it's rounded up And then right here. I am going to do the same and I'm going to take this to about 500 pixels And what we want to avoid all right first off It's hard for people to read a full length uh screen if you see here Look how wide this text is. This is not easy to read. It's hard for the eye To track it this far, especially on a bigger screen Same thing here. We don't want imported content To be in all caps. So we're going to fix a lot of the typography And I'm going to show you how to use best practices like this right here This should be about Let me see for the width like we could put this Uh width at 500 pixels Go and having a little block like this is just a lot easier to read and take in because when the user is going They're scanning through so we're going to do that right there All right now This is just the outline right here. What I'm going to do here is I'm going to put a darker background Let me change these colors around because I do want to put like some ocean stuff inside the background I just want to make sure my layout is set up all right before we start going that far into it All right, I'm actually going to make this one the darker one And then here let me go ahead and just drop in some images I optimize a few of them before we started Okay, drop those in Let me drop a bit more God, there's so many good images inside charlie's uh Drive This is a total total jams going on here. I love these man. These were super super. Oh my god. That is dope. Okay All right. Let's go ahead. Keep that full position center center. No repeat display size cover Okay. Wow. This is looking cool already Uh, let me put a background overlay though. I want to give it a bit more of the blue Uh, okay, cool. Now from here I could sit here and I could geek out over it I could go more into detail more into depth. I'm not going to do that yet I'm going to keep the graphics and the content for the end What I want to do is just create the structure and make sure everything is clean One of the tricks Let me stop this screen share real quick One of the tricks that I learned early on when I was learning design and I had an awesome design mentor Helping me out along the way was that when you're looking at a design and something fills off and you're on it for like Hours and hours and days and you're trying all these things out But no matter what you're doing the design just keeps filling off When you the design fills off Just start to remove things from the design like that's a trick you start removing Images you start removing graphics you start removing Stuff that you try to get really creative for and usually once you remove enough All of a sudden it looks clean and then you kind of see where the problem was at All right, any questions is people still here I feel like we I think it's been kind of long. It's been longer than what I expected. All right, so check it out Hmm This is what we're doing. All right All right, let's let me let me just go back here real quick This has turned out to be a lot longer than I expected I was aiming to wrap this up and have a fully designed homepage inside this Live stream, but I think it's going to take about another hour. We have all the parts ready We can start adding stuff here. You know, we have our system defined I could start adding in the trust badges the testimonials the services We're going to do that though inside next week's live stream. We have everything set The main thing is I want to show the process Behind us. I'm going to save it as it is right now We're going to come back to this and then we're going to take the next step and polish it off Because I'm going to be straight up with you guys. It's like 10 o'clock here where I'm at and I'm not that young designer that could stay up all night. I used to be able to do that Can anybody else do that? Can anybody here stay up all night long? All right, cool I want to make sure this is productive full of value and helpful It's something that people can follow along even on the Even on the recordings. So with that, I am going to sign off right here. Plus. I don't see any comments I think that's a good sign that okay. It might have been quite long Anything before I announce does anybody have any questions? Another reason t is needed. I don't know if you guys know this when you talk for two hours straight Start to fill it Definitely need to have t All right, okay with that I'm going to shut it down. I thank you all for being here for watching it We're going to have fun. Okay. Yeah, okay somebody Finally, okay, andrew. Thank you for sticking around. I really appreciated it Uh, it's awesome. I'm really happy to see you here and charlie Thank you. Thank you for uh Thank you for hanging on for this journey turn out to be a whole lot more than what was planned I thought this was going to be like a one. I thought it was going to be one episode to be quite honest I was planning on doing like, okay. This is what's wrong. This is what you need to do, but Things just evolved and snowballed from there and here's my thing. It's like If I keep finding ways where You know could add more value help and like show more I'm just going to keep doing it and there's a great opportunity over here. I'm glad to help out And I'm thankful that you guys are all sticking around for so Dave did awesome, man. Awesome. I look forward to seeing your designs, man. I really want to connect with you more for sure All right, cool. So with that guys, I'm going to sign out for the night But we will be back again next week the same time I'm going to really try to keep it out one hour next week and wrap it up We should get there though. We're at the very end. We're getting to the fun part now normally What it's just me and I'm not talking and I'm just in my zone. I got Either some lo-fi playing or I got some, you know, some of my underground hip hop That's what I listened to. I got some of that playing And I get in the zone and I could just start cranking it out plus the systems that I'm showing I work those same systems over and over and over and over so that way it becomes just like A second nature and I could just kind of fly with it This has been a learning experience for me being able to teach and guide it inside Live setting. I'm really grateful for it All right Thank you everybody. You guys all have a good day or night depending on where you're at and see you guys next week. Cheers