 All right. Turn off the music. Let's see. Are we live? I got to check it out. Okay. Okay. Okay. I think that means we are live. All right. What's up, everyone? What's up? Loud and clear. Charlie, what's up? You are definitely the man of the hour tonight. Let me get a little bit more light in here. All right. We are looking good. What's up, Pez? What's up, man? All right. Cool, cool, cool. Let me go ahead and get my studio on right here. Just make sure everything is good. I'm going to have to bounce around a bit. Let me see my man, Ben. He's coming on. Going to be helping me out with the moderation. All right. That's my phone running some tests on everything. Hey, everybody. How are you? Uh-oh. Oh, snap. Alrighty. You guys, I'm bouncing out really quick and I'm going to be right back. Just give me a moment. I got to change browsers. All right. I should be back now. Let me see here. Cool. We got everything set up right. How to change browsers. They're making me add more. They're making me redo permissions and stuff. Always a browser thing. That's the thing about streaming live on a browser. I mean, this tool is great, but a lot of times the permissions get reset. It gets a bit redundant. All right. Let me see here. Are we live? I'm going to check out the live chat. Put it up here. Larry, what's up, man? So good to see you. Okay. My man, Ben, our moderator says I'm on. So that is cool. Op-eds, a 40-inch monitor. Man, that is dope. It's a 4K, dude. I mean, 1080 is cool, man, but if you get a 40-inch 4K, especially color calibrated, man, you know, when I was out traveling and trying to do this remotely, I have my 32-inch here. I brought my 28 with me and I tried to use it, but a lot of times I was just on my laptop for six weeks. When I got back home to my 32, I forgot how awesome a big monitor really is and the difference it makes. All right. So, Ben, are we good? Are we good? If we are good, give me a thumbs up and we're going to dive right in because we got something. We got something good planned for this one. All right. I'm going to have to make sure we get everything done right. I want to make sure that we are, first off, I need to finish setting this up. I've got to close my other browser down so that way I could give it the permissions. I've been using a new browser Arc. So you guys are going to see that coming up. Let me go to my system settings. Okay. Let me go to my accessibility over here. All right. Everyone bear with me, but it'll be worth it once we get this dialed in for sure. Okay. Privacy and security. Where's my screen recording? Okay. See, it is good. All right. The permissions were there. All right. Ben gave me the thumbs up. So let's go ahead and get this thing started. So we're going to be doing a tear down and build up. Let me get my space going right over here. All right, guys, it's going to be worth it. It will. All right. What is going on here now? Wow. It looks like something just happened to my browser right before this. All right. Forget it. We're using old school Chrome. All right. Try to do something. Don't use an Arc. It's been going smooth all week. Like I've gone a week now without using Chrome, Safari, anything else. Trying to use Arc, this new browser is super dope. But for some reason, right when I get to the screen recording, it wanted a trip. All right. So name happening. We're old school Chrome. All right. This is what we're doing. All right. This is going to be our first one. We're going to be looking at a website. In fact, let me just go ahead and get the screen share going. I want to make sure that Ben, let me know, man, if the audio goes out while I'm doing the screen share, that was something that happened previously. I should have it solved though by now and we should be good to go. All right. Let me open this up here. Okay. Well, it looks like we did. Get back here. Okay. We're good. We're good. All right. Cool. I'm going to start the screen share right now. All right. What's up, Farhan? Awesome. Awesome. We got this, man. We got this. Okay. All right. So let me pull this up. Now, please give me a thumbs up. Let me know that if the screen share is showing, I want to make sure everybody can see this because we're diving right in on this one. We're diving right in. And I'm going to have to do, I really want to fix this up where we can see both. Is that possible? Hold up one second. I want to see, is this possible? I think it is. Let me see over here. Ben, let me know if you could see my little bubble head right here, man. I know. Sorry, guys. I know I should have ran some more tests, but let me see if you could see my bubble head here when we go in and, you know, outside of this. I want to see if we could see it on top of what the screen share is. All right. Ben says the screen share and voice is okay. All right. Again, I just want to toggle what I'm going to do. I am going to split my second screen up. So I want to be able to see the chat because what we're going to be doing inside this one. Okay. So I can see it. I got my bubble head here. It's working. All right. This is going to be different. All right. This is something I've been wanting to do for a while. And I got to give a big shout of respect to Charlie for stepping up and saying, hey, what's break down his website? Let's take a look at it. Look for opportunities and then fix it up. We're going to be doing something inside this world. We're not just going to, it's not just about tearing down the website and looking at everything that's wrong. It's looking for the opportunities, but then the process, the steps to take to go ahead and fix it up and make sure not only does the website look better, you know, the design looks better, but it is set up for better success that it becomes a website to get more results. Because at the end of the day, that is the main goal when we are building websites for clients. We want to make sure their website is aligned to their business, their business's purpose, and that we could deliver them results. We're going to be doing this a few different ways. Now let me see. I did have something right here. All right. So this is going to be the breakdown. And this is okay. I got my second screen right here. Ben sent me. Okay. If you guys see me looking, I got my other screen over here. And yeah, looks good, man. Awesome. Awesome. Okay. So we're going to be breaking this up in two parts. The tear down is, is not going to go too long. You know, I don't really want to nitpick and go, you know, just, just break everything up. What we're going to be doing is first, we're going to be reviewing the back end. A lot of the times when I do get a website that needs fixed needs to get fixed up. A lot of the times the back end and the way that things are structured in the back, it could be quite a big mess. So before I even begin to touch a website, begin to fix up anything in the front end that back end needs to be cleaned up. So we're going to start there. Next, we are going to start looking for opportunities in the front end. And we're going to be looking at three different parts when we're looking at this. First one is probably the most important. That is going to be the messaging and positioning or positioning and messaging. Here's the thing, the positioning and messaging. When these are dialed in right, the design, it could be a terrible design, but the website's going to perform very well. There are websites out there that are old outdated. They look like whatever, but they are well positioned and they get incredible results. So to me, this is always top priority. And this follows that. This is part of the positioning and messaging, but it's more of the strategy behind it. And that's going to be the user flow and CRO. We want to make sure that everything is optimized for conversions, that Charlie, his site is getting leads. And then we are going to take a look at the design. Now, after we've looked at the different parts of the website, identified the opportunities, next we're going to go into the buildup stage. Now, the buildup, first thing we always do is clean up that back end. I want something clean to work in. I need a clean environment. Next one is going to be creating a design system. Before we even start touching things in the front end, before we even try to attempt to fix anything in the front end, we need to apply a system. And the system is going to be something that is going to be used for the entire website. Now, for this, for tonight, we're going to optimize this own page. We're going to change things up a bit. But the design system, and once it's dialed in, can be used for the rest of the site. The next one, we're going to put together a strategy. And this one, we could go pretty quickly. We could just go through, make sure the flow is right. Make sure the call the actions are right. Make sure that there is a clear strategy in the way we're navigating the users. After that, we're going to go in, have some fun, update this home page, and then the rest of the site is going to be set up. So, all right, I need to take a breath, because look at this is where I have my fun. I love working on websites. I absolutely love it. And running an agency, I don't really get the chance to do this this much. In fact, for it's been like a couple years that I couldn't even get in there and work on clients' websites and build them up, because when you start to build up and you're building a company, you have to look at some other parts and your attention needs to go to other places. So, I'm excited to be able to roll my sleeves up and get dirty inside of this website. All right, where are we at, everybody? Okay, bubble head is okay. Larry says everything looks good. I want to test something right now. Let me see. Okay, cool. We can still do this as well. And Charlie, Charlie says, have you had loads of tea? So, I got my turmeric tea. All right, it's late night here in Thailand. I can't do caffeine late at night, but I do need my late night tea for these late night calls. So, let's go ahead and kick it off. We're going to first take a look at the back end. Now, I'm going to be very careful. I don't want to show anything sensitive. All right. And I already did have quite a bit of look already. I didn't really go too deep into the website. I'll let you know. A lot of this is coming. Like, you know, I want to just show you the initial process and the walkthrough, but I did have a quick look through the back end because I wanted to make sure that, you know, we weren't going to show anything sensitive. I got to be careful of that. So, check it out. Normally, when I get a site, normally, I'll see tons of stuff going on here. I'll see tons of notifications, like especially if we go over to plugins, but we don't see this in the site. So, I have to give big props to Charlie for keeping his site clean. All right. Don't worry about these updates. These are new updates that just came through. Like, I think they just came through today, like just now. So, with that said, like, okay, first thing I look at, are there unnecessary plugins being added? Are there plugins that don't have licenses with notifications all over the way, all over the place? Are there redundant plugins? Plugins that aren't needed or plugins that should not be used, outdated, old, you know, things like, you know, I don't need a Google Analytics plugin. We don't need a plugin to put in a Google Analytics code. Like, we could do that right into the site, you know, without that, you know, like, these type of things are what I'm looking for. And things are done clean. Like, the plugins that are in here right now, and what Charlie has chosen, I could tell, I could tell he's been doing this homework. All right, let me just go back over here to make sure everything is all good. I don't want to go off for another 10, 15 minutes with no sound. All right. So, back in is clean. Plugins are clean. This was me getting this from a client. I'd be very, very happy to see this. This is going to make my job a lot easier. Also, I wouldn't have to charge a client as much for the cleanup job, which is going to be really good for Charlie. And by the way, this is not a paid thing. Charlie is not a client. He is just a really cool dude. He is also, you know, he's not, I don't think he's in Thailand right now, but he does this thing out here in Thailand. So, you know, another expat like me, it's all good. Okay, now going through it. Now, there's a couple of things that I also like to take a look at. And one now is going to be the elementary settings, because a lot has changed with elementary work. And, you know, with elementary now, we got all these ongoing experiments, betas, new features and things like that. And this takes an extra step to clean up. So first off, I turned all of these off all the ongoing experiments, everything and beta and alpha, I just turned off. So I'm going to put this on inactive. I hope it doesn't break anything. There's a chance of my, but I've had this already breaking things. I just leave it in inactive flexbox. So all right, now I know that this is let me know what you guys think about flexbox container. All right, normally, I would keep off everything and beta and alpha for a live site. Flexbox for me is the one that I would make an exception. And the only reason why I would make an exception is I feel that flexbox has been inside experiments for this long, not because it's full of bugs or it's going to break sites. I think it's been in here for this long to give plugin developers for like add-ons and things like that and Elementor users a chance to catch up to use it. I think Elementor has just given people a whole lot of time. I have been using this and look at it. It's about to go live anytime now and it's better to do it now. This is just my opinion. I feel it's better to do it now than to wait a month where you're going to have to redo a bunch of stuff. So I'm going to make this active. All right. Going through, this is another thing. Don't leave it on default because I have seen it where something like this editor bar or nested elements or something that's in beta, it might get pushed to life. Well, when that happens, it'll just stay on default. And by default, it'll turn on. So I want to turn all these on inactive. Now, stable features. I leave the performances on for sure. Additional breakpoints. If I'm not using it, I'll leave it on inactive. In fact, everything I'm not using, I put on inactive. I like the old school theme builder. So I'm just going to put that in inactive. Already check landing pages aren't being used. So let's turn these off. You know, things like notes come active, all these come active. And I've checked when you leave it active, it is going to load extra code in the front end. So turn these off always. Now, I don't know the loop builders being used. I'll leave that on just in case it is informed submission. Always leave this on. We want to make sure clients are capturing leads. Let's go ahead and save this. And yeah, Nicholas, what's up, Nicholas? All right, dude. I absolutely am with you on this one. There's no fear to use about Flexbox. Flex is good. Let me just catch up on this. Yeah, see, David too. I also love the Flexbox as well. Once you get used to using Flex, and we're going to do it in here, we're going to convert some of this homepage into Flex. Once you get the hang of it, you don't want to go back to sections for real. Okay, now, there's a couple other things in this back end. I did a deep dive. All right, first, you know, the snippets, there's not much in here. Everything is really clean. The themes. Now, this is one thing I would do in cleanup. This is just part of my cleanup process. And keep this in mind, guys, I do have a little bit of OCD. I just can't leave things off. That's why sometimes it takes me a little bit longer. The little details I have to get. All right, now, there is one area of opportunity that I found. And this one is for Charlie. And if this is my client, this is what I would be telling the client. The images. Now, since this is for a diving company, and just to show you guys the front end of the site, we'll get to the front end in a bit, but this site is for a scuba diving company in Phuket. Now, I lived in Phuket during COVID times. I went there for a little while, and it is, it has some of the most beautiful beaches inside the world. Like, it is incredible. I haven't gone diving, but I've done tons and tons of snorkeling. And it's like swimming through an aquarium. It is beautiful. You know, there's so much. And then all the surrounding islands over here. So with a site like this, we should be seeing a whole lot of really good images. Like the images should be able to speak. And after going through the design, you'll see it as well coming up. But I felt like, wait, what about the images? And then when I took a look in the media, I found out what happened. So when I look inside here, I'm seeing all the images are cropped right here at five, 10 pixels. So we got a lot of good stuff. I mean, the portraits really, you know, they're not, they could be usable to an extent. Okay. Oh wait, we did have a couple. Okay. So the big ones, these ones wouldn't be able to be usable for sections. I'm looking for the assets. So anytime I'm taking a design with a client, a big part of it's going to, you know, like the design direction, what kind of graphics are we going to use? What direction, what creative direction are we going to go in? And a lot of times it is going to depend on what kind of assets could the client deliver? What do they have? If we get a client that has a bunch of super dope images, they got tons. You know, I get a client that, you know, even had a photographer come to the place, capture a bunch of beautiful images, it makes our job so much better for what we could do as far as the creative direction on the site. Looking at this, now I could see that, okay, there's some fillers, but you know, you can see here, we get some more images. I know they got a lot more. I checked out their YouTube and stuff, but everything is cropped down right here. So what I would do, I would go in and I would ask the client, can I get all these raw? Like I want just the original images. I don't want the client to ever crop images for us. I want us to crop it because we could do it really quickly and we know the size and how to optimize it. So I would ask for all these raw. I would spend 30 minutes and I would reoptimize all these images, load them up there and then use them for the design process. Also, I would ask for videos because I did see there are some videos on their YouTube channel and I'm sure that through their dive in, I'm sure they've been taking growth, GoPros and stuff like that. Pez, what's up? Good looking out. Definitely, make sure to hit that thumbs up on that. All right, we're about to put in some work on this one, everyone. And look at it. We're going to just keep flying through it, but what we're going to be doing here could be applied to everybody's websites because this is a very common situation to get in. All right, now let's take a look at our process. Where are we looking at now? Let's go to the front end and we're going to look at the positioning and messaging. All right. Okay, cool. So here is the banner right here. I'm not going to get into the aesthetics yet. Right now what we want to look at is the content, the flow, the positioning, how is it looking? Is there too much content? Too little is a very clear what they do. And right at the bat, the Phuket Scuba Diving Center, that is very common. I'm pretty sure this is an H1. Let's see. Yep. So that's the H1 right there. And it looks like it's well optimized, like reading in Thailand, divers in Phuket-based scuba diving center over 18 years. So yeah, this is so far the text is there. You can tell this is good for SEO, SEO Optimize, or Explore Scuba Diving in Phuket. Again, they should be ranking really well. I did not check the SEO on this, but they should be doing pretty well for Scuba Diving in Phuket. All right. Looking for unique. All right. One day, two day course, three day course. Nice, nice, nice. Making a really clear their packages. So so far the flow, I can see, okay, this is the flow is there. You can tell what it is and they go right into their packages. Yep. And I see Pes already bringing up the main hero picture. Yep, I'm with you on that. And I got solutions for that. So we're going to look at a solution for sure on that one. All right. So Phuket diving day trips. Okay. I'm just skimming through the content, discover the wonders. All right. This is pretty small and hard to read right here. Okay. They got their day trips right over here. Kauracha. I heard it's dope. I haven't been there. Pee-pee classic King Cruiser. I've heard about this dive right here. This is a famous dive right here. Semillion Islands. This is supposed to be some of the most beautiful islands inside the world right here. Like, okay, they snorkeling trips. So we can see what they offer right here. Okay. Mermaid. So they got a boat trip right here, which is also popular. You know, that's a thing to do inside Phuket. And then more scuba diving Phuket. Best dive insights in Phuket. Okay. Why choose Thailand divers experience? Okay. Frequently asked questions. All right. And then reason blogs. And then we have the footer right here. All right. All right. All right. I'm digesting right now. First off, let's take a look at the flow. Structure wise. Structure wise is good. It's there. Okay. I'm clicking on it, but nothing's happening. All right. I guess you got to go to the buttons right here. Many people will be clicking on the images. So ideally the whole card would be great to click on, but at least the images should be clickable. So we'll make sure to fix that so we can fix the flow. Let me go back to the messaging. I need to digest this. What do you guys see inside the messaging? There's a couple of things I see in here. All right. The messaging is like, it's clear what it is and it's clear what they do, but some things aren't clear. A couple of things that aren't clear is what makes them stand out? You know, okay, they got these right here. They got the similar islands right here. But what makes them stand out? We got a lot of content here and I'm lost in the content right now. And then we go down here for why, see, this is where we should be looking at. What makes them stand out? All right. This is where I got to break out my notebook. All right. Part of my process is look at, if you look at my notebook, let's hit the mic. If you look at it, it's all structured. Like every single page in here is just writing out flows and structure. Like this is the way that I strategize and I think of flows. Let me open up a new page here. Let's go ahead and strategize this right here. Let's take a look at this flow. So first off, in the banner, all right, got clear. We have it clear like this is what we do. All right. Then we go right into the main packages. This looks to me like the main packages. It's a diving center and they have their courses and I would have to discuss this with the client more. Like I would go in in a discovery call and I will want to discuss this, like what is the primary goal that they want? What brings them the most business? Because I see they got a few things. They got the courses. They, okay, they got the day trips. You know, they got, okay, it's more information. They got a boat. What is their driving factor that is bringing them business? If it's courses, great. It's good to keep it up there. We want to have the driving factor for their business up at the top, but it's still lacking something inside this flow. All right. Let me see. I have to write this out. I know I probably should do it in Figma right now. I usually do this in Figma, but after my notebooks, I just want to scribble our main services. All right. Then they got more services. So they have secondary services. Could these be combined? All right. So we got a couple of different things going on. We got courses and we got trips. Then we also got the simulant islands, you know, trips. You know, I have to see even what that is about right there. All right. Snorkeling trips. God, do you know what? I really want to do this too, man. Charlie, next year, next time we're in season, like I know right now the simulant islands, I believe they're closed. They close them for, like, a big part of the year for equal restoration. So I definitely want to get in there. Okay. Charlie is, Charlie's, so that's cool. All right. So the first section, learning how to die. The second section is for people who are qualified. All right. The boat is why they go on all their trips. Oh, okay. So let's show them the boat. Okay. All right. I'm seeing it now. I'm seeing it. So here's what's missing right here. All right. What's missing is what makes them stand out above all the others. Where is the credibility and the trust? You know, where are the reviews? Where are, where is the interaction with people? Where is that personalization? It needs trust. It needs people smiling. It needs Charlie. It needs their, their, their customers smile on a trip. Like there's so many good opportunities to add to add this. Hold on. Hmm. All right. I got to check out something really quick as well. Let me see here. Let me see. All right. Thailand divers. I'm pretty sure, I'm pretty sure you guys got good reviews. All right, Charlie. I hope I'm not pulling up your reviews. Got like a 2.4. Just kidding, man. Oh no, not my name. Thailand divers. I'm pretty sure. Look at that. We have 48 reviews out of 4.6. This needs to be highlighted on there. You know, look at the, I'm sure the reviews that you got have been some great ones inside here. And look at, you take the time to respond to everybody. This is you, by the way, right? Just want to make sure I'm pretty sure it is. Okay. So you have some gems right here. You have some really, let me open this up so I could bounce around. All right. So this is what's missing. Trust. Now, what we want to do is sprinkle this trust in. You know, when you open up the webpage and you go in is you want to know right away what is this about, what to expect, what to offer. So this flow, I mean, I would reduce all this text right here. We're going to look at that. But right away, you know, opening up like this is what we do. And then also going right into, you know, the day course and the day trips, like that right away, let's people know what it is. But then we need to follow it up with some type of trust, like some sort of reviews, something like that. All right. Nicholas has a great point. Switch the focus to the experience they provide instead of the services. You could tell the story. All right. And we're going to look at doing that. Telling the story that just the story itself of the experiences that delivers what is going to be done. Like the story itself is going to also give the information for what you deliver. The story alone, you talk about the story, the experiences, you have that like experiences, like three day thing, you know, like, then people are going to see this is what could be done. All right. So I feel like we're using a lot of space here just to show the boat. You know, I would go more into people. This is what is missing here. We're missing the connection. You know, this section right here, we should be putting this more at the top. What separates you from the others? Well, we're going to have to restructure this. I wasn't, I wasn't, yeah, I didn't know what I was getting into. I did not want to dive into this prematurely. I wanted to do slide because this is all part of the thinking process. And then, and then, yeah, see, Nicholas again, the, the emotion, you see, this is what's good too by doing this live and why I want to keep these comments open because when you get a couple of us together looking at a design, why are you going to get, you're going to get just much different results? Most definitely. All right. Let me see here. Frequently asked questions. This part's cool. Blogs. I don't think blogs are needed here. I don't think blogs are needed here. I'm not on this homepage. There's already so much on this homepage. What's the flow? All right. What do we want to do? What is the end goal? Let's see what the end goal is. Let's see what the flow is. All right. Can you book a trip directly right here? All right. I'm just going to go ahead and let's see what this was. Okay. So you can check out and pay. Nice. Nice. All right. That is a quick flow right there. Let's see the contact us. All right. So you got the contact us and that is should be on the contact page. Okay. No, I don't want to open up WhatsApp. Where is the contact page at? Is that this right here? No. All right. You guys can see what's happening. Right. Right. Right now. Right. All right. You guys can see I can't find the contact page. So we got to fix this flow. All right. Now obviously we can't do all this right now. We're just identifying everything that could be fixed. Okay. So we've identified a few things here. All right. First one. Let's see here. The breakdown. I'm just going to go ahead and make notes here. Areas to focus on are one, I would say emotional connection. All right. The next one is trust building. You got to build trust. You got to see what separates you from everybody else. We need to see reviews. We need to see real actual stuff like let me see here too. Is there badges like certifications? Yeah. See we're lacking all the trust elements. So that is a big area that we need to fix. Like for something like this, I would want to see some sort of accreditation. I want to see some badges. I would like inside, you know, like if I were to take on a site like this, this is what I'm asking a client. I'm asking them and looking for those trust elements. What kind? Because these are tools for us when we're building a site for a client and we are doing that discovery. These are the tools that we need to find from the client. We need to look for those assets. What kind of trust elements can we get? Try to get as much as possible from the client. I don't worry about content. All right. When I was new, I worried about content. I worried about images somewhat, but always worried about content. I found that content is not the area that we need to be focused in. We need to be focused in. What can we use to make sure our clients are getting leads, getting sales and maximizing the potential of their website? So going back to that, okay, we need trust. All right. Trust building. We need something else. We need to adjust this flow. Three, adjust the flow and layout. I will go ahead and change this layout a bit. I would definitely, we're definitely going to redo this banner right here. It's okay having the services was being offered up front, but we need to also build a connection with that. So right up here, if we're going to do something like this, we need to throw something with somebody on there, like a testimonial or a picture of people doing this together. Like there needs to be something here instead of just going into more content. All right. I think right here we don't need so many pictures of the boat, but I don't know, we have to take a look. Okay. I want to hold off from going into the aesthetics because we're about to get into that. FAQs, I think is great. I like these FAQs. Like here's the thing I find out of all this, I found the FAQs, the most easiest to find information out of everything. Even when I look at these, it feels incomplete. It feels like the information really isn't there. And I want to know more if I'm going to get a one day. Let's see here, but sure if you click on it, we're going to get more. Yeah. So this is all good. And maybe it's just the design that needs to get fixed, but the FAQs going back to it are really good. Wait, are they different here? Ooh, they are different. Okay. You guys ready to get into the design? Okay. Before we get into the design, let me go back over here, adjust the flow and layout. Yeah. We need to fix that user flow. If we do just these three things right here, just these three things, focus on emotional connection. You know, throw some trust building elements inside this design and adjust the flow and layout and the way that we're navigating through this. If we do just those things that forget about the design, the site's going to get a lot more leads. All right. Before we jump in, what does anybody else have to say? Does anybody else have some input? All inputs are welcome. And Charlie, I hope you're okay, man. Like I said, I bet you you're doing good already with this, man. If you are, give me a thumbs up because I'm pretty sure just by our interactions together, you're like a super cool guy. So be able to have those interactions. I'm sure you're carrying that over with your customers. And I'm pretty sure you're getting leads as well. Give me a thumbs up or a thumbs down. All right. What do we have here? How many people are online right now? Dang, it's already been 41 minutes. Okay, Charlie, all okay. Okay, cool, cool. All right. Let's see. Dante's has something interesting. Why choose Tylen Divers that part doesn't say anything to make them stand out every diving part. Yep. Yeah. So we want to make them stand out. All good. Okay. Let's take a look at the design now. And let's go over here. Let me close this up. All right. First thing I'm going to do is I'm going to take a screenshot. This will make sense in a moment. All right. Let me do the full page screenshot. I'm going to use this. And we're going to fix a lot of things with the we're going to fix a lot of it with applying the design system. So that's what we're going to do here. We're going to apply a design system. All right. Let me save that right there. Okay. I can close this out. No, don't look at my calendar. All right, we can go ahead and close this out. All right. So we're going to go with the flow. Now there's all right. All right. Where to begin? Where to begin? First off, I love top bar promos. I like them. They help out to show when something, you know, is new, something's out there. The problem with this one though, it's in red and it's in this danger red. It's in this red where it's like for errors and it's not part of their design. It's not part of anything that is inside their design system. So this red right here, we definitely need to remove right away because it doesn't look like, Hey, here is a promo. Here's something that's awesome. It looks like, you know, there's an error or something like that. And remember that everybody reads this, you know, it just kind of skimmed through it. So we need to fix that up. All right. The WhatsApp button right here. Like, I know why there's WhatsApp and it's because we're out here in Thailand. I get that. And a lot of us, a lot of people are just traveling. And so they're just using SIM cards from here, like towards SIM cards. So WhatsApp makes it really convenient. First, this button right here, the way the hover is with the box, these kind of errors we just got to fix. It shouldn't be there like that. So we definitely got to fix that up. And leaving the WhatsApp right here, I'm not too sure about making that the main call to action. Also using the green. Now just because WhatsApp is green doesn't mean we need to use their brand colors. We want to use our own. We got the email here, we got the WhatsApp here, and we don't see a contact page at all. You know, it might be, I don't know, I would explore simplifying this because sometimes when we give just too many options, it confuses the user like what is best to use. So I will want to rethink this. I want to rethink this along with the flow of the sitemap. Now the sitemap looks good. I mean, all this looks good over here. I don't see anything wrong with this. It looks like the information is right here and easy to find. I would just want to do something different about the contact. But then again, too, another thing is I would like to do before even changing this, like if this side is already getting heavy traffic, I would want to use a heat map. This is where heat maps could really help out. Because if I use a heat map, you can just use hot jar, get a free account with hot jar, collect at least a thousand views on it, and see what people are clicking. Are they clicking email or they clicking WhatsApp and look around and then probably throw a contact in here. See what people really click on. All right. Now the banner. So this banner really isn't a banner. It feels like we're on an about page or something. This completely needs to be redesigned. Right here, this is not accessible. The text is hard to read. We could go over here and we could go to a color contrast user. Let me open this up so that way we could see it. Now if we, let me grab this color right here. I'm going to just grab this. All right. And let's take it over here. And we could see even if I make this black as possible, it's still not going to pass the accessibility test. It's going to be hard to read right there. And also this is light font too. Like this light font makes it a bit difficult. Same thing for the all caps. All caps are not easy to read. So we want to make this a lot more easier to read less text and make it more like a banner. Now I briefly went through the site and let me see. There was one page. This is it right here. Like this is a banner right here. You know, and this is a thing with business like a diving company. We should be able to get really good images like the designer should be able to find awesome images to play around with and be able to have a lot of fun designing a banner. All right. Let's see. I just want to. Okay. Charlie says 80% come from WhatsApp. Okay. That makes sense right there. And let me see. Pez says he likes the way the logo doesn't take. Yes. Yes, man. Yes. The logo isn't these big huge logo, which yeah, we see those. We don't want that. This is, you know, the main is well done. It doesn't take a lot of space, but we want to make this a banner right here. Now let me go back over here. Oops. What happened? All right. I am going to go ahead and create a board and we're going to start the design system. I'm going to show you what we're going to look for. All right. Let me open this up here and I'm going to I'm going to drop this in here. All right. Yeah. Let me go ahead and open this out. So it fills it up. I want to make sure because one of the things that it's off and we see off on many, many sites are going to be alignments, the consistencies. These are what is going to separate Paul's professional website right here. A lot of times are going to be using grid systems and consistency. So what we're going to do here is I am going to create a grid. All right. Let me go ahead and turn this into columns and we're going to make this 12 columns right here. All right. Let's go ahead and give I'm going to give a margins until things line up. All right. Well, usually I put a like 60 80 from my margins, but nothing really is lined up here. So let me go ahead and I gotta just fill it in until it does. All right. So what I'm doing here is I'm dropping these columns down to fit the content. When we do that, it's going to make things a bit more clear. It's 286. It's a weird number that weird numbers really get to me. All right. Can you guys, okay, wait, everything's good. The screen, your voice, okay. All right. Our moderator saying something. So let me, am I stuck? Let me see our moderators typing something. I want to make sure we're still on right here. Are we good guys? Are we still on? It didn't go through. Maybe he's got to go take a bathroom break. I don't know. It's all good. All right. So check it out. We want to see everything is okay. All right. My race is everything is okay. Cool. We want to see a clean line going down the side. All right. So right here, we can see a break. All right. We can see it's right here. And for some reason, things aren't aligned right here. We have this space. This space should not be here. So things are not centered. So there's no way this section is centered. If it's centered, because this right here is centered, our columns are centered. So that part is off right there. All right. This line should go all the way down. But breaking it right here, we're breaking it right here. We're breaking it again right here. The text right here is broken and it's not aligned here. These are the details right here that we need to fix. And what we're going to do is we are going to fix this because a design system will fix this. And when you see the way the design system is used, it's really not that complicated at all. It's just working with a system. All right. So this is broken. And then the blog stick way out over here. And then right here, the footer, we can see the footer sticking way out. And then the content is way over here where this footer, I mean, all the content, the content should be here. And then it should be stretched out. Now, we're going to be focusing on this left line because this left line is definitely 100% manageable to have a clear, crisp left line, like everything is flush. The right line, well, that one is not going to always be flush, but it should not go over here. It's going over here. Here should be flush because we're using blocks, but for using text, it's different. All right. So this is what we need to fix. The next thing is let's go back over here. And it's too blurry. We're not going to be able to see it. But I just want to show you this for reference. This is the next part right here. I'm going to put 10,000 right here. I'm going to put this at top. And everybody does this differently. I do mine at 20s. We should be seeing equal spacing between these texts. You can see, okay, this is 40 pixels. Each one of these little grids right here, this is 20 pixels. This is 20 pixels right here. All right. We got 20, 20 here. Cool. Right here. It looks like it's less than 20. It looks like this is more like 37 or something. We see a lot more spacing right over here. A little bit of spacing right here. Okay. We got the 40 pixels right here. We got the two spaces and so on. So this is what we are going to look at. Now let me toggle off my grid. All right. Cool. Let's dive back over. I'm going to show you how to apply this now. All right. Now I need a sip of my tea. Okay. I'm going to take a look really quick. Yo, Jimmy, what's up, man? Yes, yes. So good to see you here. All right. Somebody asked me about the tool. Yeah. Pez, clean lines for sure. Are there any questions I'm missing? I want to make sure we can get to all the questions inside here. All right. Well, that's so cool. I see a lot of you guys are connected. No problem. You guys got this. You guys got this. Okay. Next step now. Okay. We identified a lot what's going on in the design. All right. We got inconsistent spaces. We got some accessibility. Like right here, we got a lot of extra spaces and that just needs to be rebuilt. We need to utilize images a lot better. One thing for me, I'm big on typography. These are typography issues that we're having right here that we need to fix. We need to fix this text because we should have things aligned for sure on the side so we could fix those up. Next thing that I see. Okay. So this is one I did notice the first time I looked at the font changes. We have different fonts going on. All right. So we have this font, this Sarah font. We got the sans there. So let's take a look at what we have in the inspector. So it looks like we got a railway. It says railway 200. I thought it would have been 300 if it's two that's still too light. Stay away from 100s and 200s. They're hard to read. I got a 4K monitor right here. But what if somebody has an older device and, you know, like they don't see that way. I need glasses by the way to see it. Like I don't normally wear glasses except from my computer so I could see these things better. So the font is a big, it's a big problem. It needs to get fixed. We need to fix this font. And then here. So I also noticed this when we look at this font here, it's also railway. So there's something happening with the fonts on this website. There's air, a bug, or it could be the actual font files being uploaded that are broken. And then we have just the inconsistent usages of the different fonts. Now we have fonts here inside Sarah that are in the body text. So it switches from San Serif to Serif. We need to create that consistency. What we're going to do inside this, we're going to build the system. We're going to apply it. And then Charlie and his team, they could take that across the board and they're going to be able to use that system and fix all this up. All right. First thing I'm going to do now, I am going to go to the back end because it's time now to start applying these solutions. Now we broke it down. All right. We tore it down. Charlie, man, you're a champ. You stuck in there. Big props on that one. All right. Charlie said the fonts have always been an issue concerning the page speed. Hmm. It shouldn't be. It shouldn't be. There's a bigger issue happening here. I feel there's another issue happening. Let's take a look at the custom fonts. All right. We got this railway right here. Let's take a look at what we got on here. Let's edit this. We got one, two, three, four. Okay. Four shouldn't be a problem. Let's take a look. Hmm. Okay. You're only using the wolf two, which should be small 20 kb. So you got four font files that are all 20 and 21 kb. This is ridiculously small files like font. This should not be an issue regarding performance. It's something else. I have a feeling it has to do with the way the fonts are being delivered or it's the actual font. And the reason why we look up over here, to me, this is the problem that we need to solve. We can see here this is still being called out as railway, even though it is not railway. So you got more fonts being loaded on here that are not inside your font. There are bigger issues happening here. Let's see if we can solve them though, man. I'm game. I'm game. All right. I'm ready. I'm prepared. All right. Cool. Cool. Charlie. Okay. Nice to see you. Remember he's saying all right. Okay. Let me get away from the chat. I want to keep my eye on it. Okay. I have fun doing this, guys. This is where I have fun. This is my joy right over here. I love love the stuff. Okay. First thing I want to do is let me go create a page. I'm going to create a brand page. All right. This is where we're going to start our seat. Before we do that though, you got a rank math going on here. I want to see can I I don't really use rank math. Is this it right here? What I want to do is no index. There we go. All right. So I'm going to put this at no index, but check it out. This is, oh, by the way, guys, to develop responsibly. Okay. When you do stuff and that's why we use staging sites. All right. Definitely use a local host, a staging site or something. So that way we're doing everything responsibly. Okay. So let's go ahead and edit this page to Elementor. Let's find out what's, wait, what is, oh, this is in the footer right here. You put the blogs in the footer. Oh, I would remove that. Yeah, I would remove that. Are these in all the pages? Let me see here. It sure is. Okay. No, you got some authority on your site. You don't need to do this right here. The blogs are cool, but not for all the pages. I focus more on, I focus more on the emotional connection, the trusting, more imagery than blogs and a bunch of content. I'll be going in a different direction. All right, let's go ahead and do this. I'm just going to, let me see. I'm going to remove this. All right. Oh, we got some hidden stuff down here. What is this for mobile? Oh, we got three footers going on in here. All right. We got to clean all that up. Let me just make sure none of these are like special footers for mobile. Okay. Do you have a special mobile footer? Oh snap. One's for mobile. One is for tablet and one's for desktop. Okay. I would fix that. I'll fix that. That's not needed. That's very redundant. It's not needed to do that. I would rebuild this whole thing. We'll take a look at that and see if we get time, but I would rebuild this whole thing. In fact, let's go ahead and do this. Now I want to convert this. All right. I don't want to use sections. Let's go ahead and convert this right here. All right. What are you? Okay. Here is another thing we always want to stay away from. Never use spacer widgets like this. This right here is just causing a lot of extra code, extra blow, and it's not needed. Always keep the spacing widgets out of there. We don't need that. All right. So what else do we have here? Okay. Okay. Okay. Okay. I'm getting, you know, we're going to come back to this. Let me, let me set up my design system before I start fixing that up. All right. So I got to go back to the page. Let's go edit this page. I am going to make this a canvas. I don't want to see anything that's going to distract when I'm seeing. All right. High title. Make sure we hide that. And now before we even start to get into anything, what is this? Convert. We want to go into containers. Yeah, we are containers. All right. Let me go ahead and drop in one right here. And let me just drop in a heading. You see by default, we're getting that serve. That's, there's your font issue. We're going to fix your font issue right now. All right. And I'm just going to call this brand styles. All right. Let's go ahead and update this right here. We'll fix that out. I just want to do that for one thing. All right. Now the first thing I want to do is go to site settings. Okay. We're going to fix up the global colors and global fonts. The first thing I want to do is we need to fix up this layout because first this thing right here, this container padding. All right. This container padding is an issue. It comes by default with 10 pixels. And I feel that Elementor does is to make things more accessible because when you stack, when you, when you start to put in like inner containers, they stack on top of each other for the editor, but this messes up consistency inside the design. Like you cannot keep a clean design system with 10 pixels padding around all your containers. It's going to mess it up. Like this should come at zero by default. So make sure to set this at zero always. Content with this is too big right here. All right. And even that, it says 1500. When we look at this right here, I mean, this is things are being set only to about like 80, like 860 something. So what we want to do is let's set this up. We're going to make this know what I'm going to show you how I choose my container widths and how I come to that conclusion. So let me go back over here and I'm going to turn it back on my grid. I'll remove the rows. That way it's a lot easier to see. So we're working with a 12 column system right here. All right. So I'm going to go to this 12 columns. Let me edit them. And I am going to remove this margin. I'm just going to put 80 pixels margin right here to give enough space. And this is where I want the content to be in between. So the main containers, oops, I should have got more tea. The main containers are going to wrap around this 12 column grid right here. And if we look at the size right here, we can go ahead and use the tool to measure it. It's going to be 1280. All right. So that's going to be the main one. Now we're always going to use one big container and one smaller container. And the smaller container is going to be the eight column container right here. So we're going to set this up. This is the first part of our system right here. Because we're going to set this up, these two containers, and the whole site is going to follow these two containers. We're going to have perfect alignment through doing this right here. And that smaller one, I believe it's going to be 846, 845, but it's 846. There we go. All right. So it's 1280 and 846. All right. So let's set our content with to 1280. Now this is my personal preference. I choose this number, though, based on a 12 column system. All right. So the next thing we're going to do, gap in between elements, I'm going to put this at zero again. Now this one's completely optional. Put it at 20, put it at 24. Default is 20. Either one we're going to work. I put this at zero because I want to define my gaps outside inside my system. And I'll show you that inside a moment. This one is like one you can go back and forth on. I go back and forth on it, to be honest, but yeah, it could go either way. Default page layout. We're going to go to theme. All right. And the reason why I go to theme is going to be purely for SEO. You put it on theme when you're using Hello Theme, you're going to get a main tag wrapping around the content that's going to be better for your HTML semantics. When you use the element or full width, you are going to just get divs instead of that main tag. The only difference is with this theme, now you got to go into each page and you got to manually, I can't do that right here. You got to go to your page settings and turn off show the page title. That's the only downside to it. All right. So we got that set up next up. Let's go check out our global colors and ooh, ooh, okay. All right. So this right here is where a lot of the inconsistency has come from as well. And look at this is all good. I mean, you should have seen my first couple of years, you know, was like this where I had even one of my first start of building elemental websites. Like I had a chance to revisit an elemental website. I built four years ago. Excuse me. And that website was all over the place. I still haven't developed a way to use systems with it. So what we're going to do here, look at, I'm just going to delete all these. All right. We're going to remove them and we're going to start from scratch. Wait, should I? Hold on. I don't know if I should delete everything quite yet. You know what? Let me refresh that. I want to take a closer look real quick before we just go in. I did save this though. Let me make sure I save our layout. Okay. Our layout is set. We're good to go on the layout. Let's go back over here to global colors. All right. So we got a header blue. This is like blue background gray text header text, uh, light gray background, but in blue, white background blue. All right. H1 transparent, heading purple. So what we need to do here is we need to come up with a color palette with three to four colors. All right. We're going to keep it very minimal and clean. We're not going to use, I mean, if we use like a green or an orange, we're going to use one of the other for the standouts. Definitely we're going to use a blue because a blue makes sense for a diving company. It's going to reflect well when it comes to, uh, when it comes to water. In fact, we might even just use blue and green, but we're not going to have these different types of greens. Like you see here, we got the WhatsApp green. We don't need another brand's color. We need our brand's color on there. Okay. Cool. So we're not going to, we're not going to delete this quite yet. All right. We're not going to delete it. Let's go over here now. Okay. H1, H2, H3, H4. First thing is we do not want to, we do not want to label our fonts by the H tags and we don't want to decide the font sizes and styles based on the H tags. H tags are based on content and hierarchy. They're not about the size. So we want to make that a bit more clear. Now, let me go ahead and show you a little bit more. I'm currently working on my own new site right here, building my own system. I'm in the middle of it. What happened here? No, that's not it. All right. So what we're going to do is instead, we're going to label it in a way that makes more sense about the size and style instead of the H tag. So we're going to create something like this and we're going to create our font styles. Now, let's see what's happening. So right away, okay, it's not showing. We've got the railway here. Huh? This is very interesting. It's very interesting. Yeah, something is broken. I think I know what it is too. Okay. So look at the font you have installed on here. The font that's installed. Right? First, when we started, hey, when I started Elementor, we didn't even have the global. So we see Ben didn't even know about the global colors and fonts. And this is why we are doing this. This is why I want to do the tear down and build up lives because there's so much to unpack. You know, in a tutorial, it's really hard to do all this. Sorry, guys. My mouth gets a bit dry with this. Okay. So something is happening here where this is not loading the fonts are not set up right here. So I think it's safe to say we could start over with everything inside here. So before we do start over, oops, didn't want to do that. I want to take a look at something because I did notice when I went into the snippets, it has something for Elementor custom fonts display swap. I think this might be causing an issue right here. So let's go ahead and turn this off. We're going to turn that off. And then let's go back over here. Let me see in the front end. Do you know what? Do you have clear cache? It's still railway. So this is something really weird happening here with this fonts font family variable. Let me move this over here. What is the variable? That's going to be railway. Okay. All right. Could be above. I'm not sure. I'm not sure to be honest with you. What that is, it's going to take some digging into. But let's go ahead and just delete everything. You can delete this, but we can reset it. All right, we're going to reset all these fonts. All right. And I am going to delete these and delete that. All right, cool. And now what we're going to do here is I'm going to just start to name the basics that we need. And we're going to go ahead and fill them in. Small title. Normally, I would probably put body text. I forgot which one of these are body text. I think this one is. I forgot what it is. I could change it later though. But let's go ahead and get this going. Okay, we got small title. Now I'm going to put large body text. And we are going to put button text. Menu text. And then we are going to put body text. And then tiny text. We need a small text. You know, I saw you're using the sub headers. I like sub headers too. So I'll put some sub header text. All right. Now let's update this. All right. And we'll stick with railway on this one. Let's go ahead and add some. Let's go ahead and fix this one up right here. So I'm going to center everything up and go ahead and make sure this is center text right here. All right. We don't have whoa. Yeah, see something, something's happening with your globals. Hopefully when I reset the globals, that'll fix that issue because that shouldn't be happening. You know what? I think I know what's happening. Typography. Yes, this is it. Okay. Man, I didn't even look here. All right. Setting up the colors here is okay. But this right here, stay clear of setting up your font styles right here. Keep clear of it. You don't need it. It's going to mess everything up. This is going back to, this is going back to basing your style and sizing on fonts on the h tag and the h tag should not determine the size you are going to use. I'm even going to remove the colors. Now you can use the colors. It won't even remove. Yeah, there's something. Oh, it doesn't want me to remove anything. All right. So the colors here, we don't want to use different colors for our fonts. We don't need to. You need like one color for our font, maybe two. Use like a dark, not black, black, not like zero, zero, zero, but something close to black and maybe like a gray for like some sort of different color. We want to stay away from using like blues, light blues, things like that. Oh yeah. And white, you know, white for the darker backgrounds. Okay, cool. Now we could, we, okay, something is happening in here. We're just not letting me clear, not letting me clear this. All right, the skating choreography. Okay, yeah, I know it's going to take a bit, man. I could come back to the replay on this one. I knew this one was going to take quite some time. Okay, we'll define our own colors and see if we could do that. But there's like a bug in here that's preventing us from doing this. You know what I'm going to do? Let me go to my plugins. Just give this a shot. I really want to clear everything out. All right, let me go ahead and deactivate all this and go back here. All right, let's see if we can fix that now. No, it's not that this is, this is an element or something is broken right here. All right, let's move back on it. Let me go ahead and reactivate these. Maybe it's cash. I don't know. Let me see here. Don't show. No, no, no, no, no, no, no. Trying to get away. No, get away. I don't want to show any back end stuff. Shit. Oh, sorry. Oh, no, I just probably going to get hit from a, for cursing on you too. I don't know for, yeah, we can. Who cares? It's late night. All right. All right. Check it out here. So it's all good. We'll find another solution around it. Oh snap. I didn't save it. Well, fonts, please tell me I did. Let me see at least if I could change the color. Okay, at least I could change it. All right. We'll fix that up later. Now, the next step is let me make a cool little banner right here. All right. I am going to put 20. I'll show you why I'm doing that in a moment. Let me put 120, 120. And let's go ahead and give it a background this time. We don't have any globals we're going to use yet. We'll use globals later. Now, I'm going to go ahead and start with the fonts. And let me do the same thing here. I'm going to do 20. Then we're going to do, let me unlink this, 120, 120. Oops. Now, we're going to drop in our text right here. And we're going to show a large, forget about the h tags. H tags do not matter right here. We're going to duplicate it. Let's keep duplicating. Maybe one more should be enough. Oh, yes. Extra large title. I'm going to fill this in real quick. Large title, medium title, all title, large body text. You see, I'm going in order because it's going to make it a lot easier to see visually when we are applying our system. Button and menu text, main body text, right? Tiny text, and then sub header. I think it's just body text. All right. Now, what we're going to do over here is I'm going to go to the extra large right here. I'm going to go to typography, and I'm going to link it to it. Now, let's go back and update it. In fact, I'm just going to do that really quick on all these. All right. We link them all to their thing. Yeah, you see there's, you know, we can see right here, there's all this spacing up over here. You see these little details right here, and getting these things fixed up from the very beginning have such a drastic impact on the website. All right. We're going to get this all right here. Large body text. Yeah. Seems like the old styles are being stuck in there somehow. We'll figure that out right now. All right. Body text, tiny text, and sub header text. All right. Now, I'm going to go over here to my site settings, and you know what? We're going to make this one super easy. Let me go over here to my design tools. I believe I have it in here. Type scale. Yeah. Let's go ahead and use type scale. This will make it really easy logo. We're going to do a perfect fourth on it so that way we could kind of fly by on this one. All right. Is this based? Okay. It is based on 16 pixels root. Okay. Cool. Now we could go here to our global fonts. Let's set everything up extra large. Let's connect it to your font file. All right. No uppercase. Never put this at uppercase for your defaults. If you need to make an uppercase for something like go in and manually do it, unless if it's like the sub header, but I never put those at extra case. All right. Let's go ahead and whoa. That's not supposed to be it. All right. 4.29. Okay. Wait. It's a title. We're going to put it at bold and then we are going to change the line height to one. All right. Letter spacing zero. Word spacing. We leave at zero. All right. We go here. You know, we don't really need to change that. Don't need to change that. You don't need to change that. Let's go to mobile. And okay, this is cool right here. Don't need to add that. Keep the code clean. Got this railway 200. We got to change that name. Let's go back. Let me update that. And then we're going to go and do that with the rest of them. All right. And I'll go to type scale. If anybody wants to know about type scale, let me go ahead and drop this in here real quick. All right. You can use type scale. It's a really, really easy way to, I hope it went through. I'm still alive, right? You guys are still there. I haven't seen a bin for a while. I know sometimes this happened where 20 minutes goes and I'm in something and didn't realize it got cut off. Type scale just makes it really easy to go ahead and quickly add font styles. You can adjust these. All right. Cool. So the next one, large style. Let's go here to large. That's going to be 3.157. I'm going to go right here. Let's put that 3.517. All right. Weights. And again, we'll go ahead. I would like to use semi-bold, but I don't think you have that in here. Let me go back and just check what options we have for fonts. I would redo the fonts. Okay. No, you got medium. All right. Oh, you know what? We need to fix this. Is it an extra bold? Let me switch that to bold. What is going on here? Medium, regular. This 200 right here. You know what? This 200 is too like, I'm just going to delete this. Prevent from making any errors. Let's change this right here. I'm going to change this to railway optimized. So it's easier to, oops. I want to be able to make sure things are labeled so that way they're clear and we know what we're working with. All right. I probably would want to go in here and is this a semi-bold? It does not look like a semi-bold. I could be wrong. It is. It is a semi-bold. Okay. Let me see what file this is. You know what? Okay. We're going to move this at 800. That's what the file is. It might be that. I would probably switch these up though. You know, for the typography, I probably would either add a 700. I think 800 is just too bold. But then again, let's see. We're going to work with this. All right. I'm not going to get caught up. You guys see, I can go down and wrap a hole, right? Okay. So here we go. Here is the issue. I found it right here. Okay. We are going to stick with, let me see if we're 800. Okay. 800 work. We don't want capitalize. We're going to go to default. All right. We'll leave this on default. This on default. Line height is at 40 pixels. So your line height is broken. Let's go ahead and remove that. Go to M and we are going to put 1.1. Now, when it's really big text and this is just a system that's worked for me, when it's something like XLR, I find 1M works and then the smaller it gets, we make it higher. So usually it's like 1M, 1.1, 1.2, 1.2. And then like when we get to the body text, then we're at like 1.75. All right. Let me get back over here. Let me fix this up. I want to make sure nothing is happening inside the mobiles. All right. We're good right here. Let's take this to mobile and all right. Let's remove that letter spacing. Let's remove that. Let's remove this as well. All right. Ooh, that got really, really small for mobile. Let's go ahead and remove that. And what was it in type scale is 3. Okay, I'm going to move this to 2.8. All right. That's cool right there. And the line height can remove it. We don't need extra code loading inside that media queries. All right. Let me go ahead and update it. All right. Let's go ahead. Let me refresh this so I get that railway optimized in here. All right. See, okay. See what happened here. When we changed the name, it disconnected the font from changing the name. So you got to, if you do change the name before, I didn't know that would happen. I'm glad we do now. But yeah, see that's what happened. And let me refresh this. Make sure it's connected again. All right. And it looks like these, let me make sure these are all connected now that we changed the name. Okay, cool. Dope, dope, dope. Let's go back over to global fonts. All right. Railway optimized. Go back to type scale. We're going to do 2.639 height. Okay. I can remember that 2.369. We're going to take this down to semi bold. Line height 2.5 is massive. That's why we have all this spacing right here. We're going to take this to 1.2. We're going to remove the letter spacing right here. Everything is good. Make sure everything else is on default. Let's go over here to the responsiveness. All right. We're going to remove this. Keep in mind these smaller titles, when you get to a small screen, they appear smaller on the mobile phone. A lot of the times when it comes to like a medium or a small title, you can get away with leaving them the same size on all devices. The extra large and large, you definitely need to scale down. And then also if you're going to use something like fluid typography, but that's the whole other subject, we're not going to get into that now. Let's just go ahead and finish fixing this thing up. Okay. We don't need that. We don't need that. We don't need that. Okay. All right. I know it's taken a bit of time. That was taken a lot more than I thought it would, but this is a very important part of the process. Okay. 1.777. This is going to be for our small title right here. All right. The weight, see, we don't want to have it on bold or normal. Select the weights right here and make sure that weight is matching with what you have inside your custom fonts. So we're going to select on the semi-bolt. I want to remove that upper case. Keep that there. I'm going to put this at 1.2. No letter spacing is needed. This is looking good. We're going to keep this at the same size all the way around. So let me just remove these mobile settings. All right. Let me update that, take it back. All right. We're going to fly through the rest of these. I'm going to use my own settings I have. So we have these around, right? Yeah. Good. All right. I'm going to put this at 1.5. Weight is going to be at 400. And line height is going to be 1.5. Letter spacing zero. That's good to go on all of them. But in menus, we are going to put this at 1.1. Hmm. What do they have here? They use 1. I don't know. 1 seems kind of small sometimes. You know what? Let's go ahead and leave it at 1. See how that does. I'm going to put this at 4. It's going to be more legible. You know what? I'm going to make it a little bit bigger. I'm going to make it 18 pixels instead of 16. I just find it easier to read. I like bigger text as well. I feel like the design trends have shifted. We are using bigger text and titles now. You'll see that on all the major sites. All right. Line height 1.75 for body. That is a good place to be at. These are good right where they're at. We're not going to change any of those. Oops. Oh snap. That was for the buttons. Well, you know what? Okay, button. Check it out. Buttons. Keep it at 1.5. All right. I found 1.5 when you use that inside buttons keeps the text centered. If I, for some reason, if I do 1.4 or 1.7, it adds just like a, like a little pixel difference on the top or bottom. So 1.5 is the sweet spot. And then I am going to give this a semi bolt. I want the buttons to be a bit darker, a bit, have a bit more weight. And then the body text, let's go back here. Change this a rim. Same thing. 1.125. I'm going to make this like about 18 pixels. 14. Line height, we are going to make this 1.75. All right. Tiny text. Let's go ahead and set this at a rim. 0.875. And I am going to set this at a semi bolt. So that way it's easier to read. Good for, you know, it's good. They're very useful in some situations. Line height. I'm going to put this at 1.5. Don't need to set that up for mobile. And then these sub headers. Let's go ahead. First off, did I make sure I gave this, see, I kind of forgot some things. Forgot to give the connected. All right. It's a bit late here, guys. I might be missing a few things. If I do, call me out instead of chat. All right. So let's see here. All right. Now the subheader, let's go ahead and have fun, man. We're going to go ahead and, wow, should we make this one? I'm going to make this 1.25 right now as well. But this one, we're going to go ahead and make this one the uppercase. I saw the uppercase styles were there. We could use those. We just want to use them more thoughtfully in a way where they are not for key content, key text, like major titles. That way they're more legible and more readable. But we can still use these. I like subheaders, especially for SEO. I like them because they're a great way to use H2s and slip it in when we're speaking to Google and then use the extra large title. Make that an H3, but that's where we're speaking to the user. That's the reason why we don't use H tags for based on the size. Okay. And for line height, line height, you know what? I'm going to put 1.2. It's going to be a lot more condensed, but it should not break. And if it does, we don't want a bunch of space because it is going to be in all caps. And then for the letter spacing, I'm going to put five pixels on it. And then let's go ahead and put this, okay, it is at an uppercase. All right, let's see what we got here and what we're working with now. Should be all connected. All right, everything looks, okay, this is thin. It should not be thin. Let's find out why this is thin. Let me go back over here. Global fonts, our body text. Wow. This text is really thin. It looks like a light font. I really don't like a light font. It's really hard to read. Huh. You know what? Let me go back over here to, you see, is it that thin? It might be, huh? Yeah, if I was doing like a redesign of this, I probably would choose a different font going forward on it. Railway is not bad. Railway is still a cool font. I like Poppins. I think Poppins would be a good font for this because I think we can make this into a fun site. All right, let's go ahead and add a gap here. Now, that is our first system. Our first system, we got our font set up. Now, what we're going to do when we use this system, we like start to fix up things. We're always going to just dial in that homepage. As we're dialing in, we can make adjustments to our global fonts, but we won't make adjustments like they're on the page, like going into here and going into here and starting to change things up. We're not going to do that. When we make adjustments, we're going to do all the adjustments right back in here in the global fonts. This is the only place we are going to use when we are changing our font styles. If the font is not big enough or it's too big, or if the line height is off, or if you do need to like add a pixel or two to the letter spacing, you do it here and not the individual font. This way going forward, every time we add a font to the site, all we do is we're just going to connect it to the styles right here. That's it. That's the first system. This alone is going to have a huge impact on the overall look and feel on the site because your typography can get dialed in if you set this up right. Next up, let's go ahead and set up. I want to get our containers first. We're going to do the colors as well after, but let me do our containers. I'm going to drop this up to the top. Let me take it back down to the bottom. We're going to make this our large container. We're going to make a medium container. All right. We're small, large, small. All right. We're just going to work with the two and we're going to keep going based on what we have right here for our 12 column grid. It's part of the design system right here. Let me drop in a title so that way we can distinguish this. We're going to call this a large container. Then we are going to make a couple. Let me see here. Let me center this. All right. Let me give this a style. I'll just make this large right here so we can see it. I need to drink a water right here. You guys still here, man? We still live? How long has it been? Jeez, one hour and 41 minutes. All right. All right. Okay. We're going to finish making this design system. We're going to begin the applying it. We're just going to begin it. I think we're going to break this up into two parts. So, okay. I know it's long. I know like I don't want to make these too long for everyone. What we're going to do here is we're going to finish the system. We're going to just barely start to touch on the home page. We're going to come back next week and we're going to dial in and design this home page using this system. How does that sound everyone? Does that sound good? Or are you guys down to go for the full ride? I don't know if I can. I probably do need to go to sleep soon. I got client meetings tomorrow and stuff. All right. So, check out. This is going to make a huge, huge, huge impact. This part right here. This is the game changer right here. Ben says it's going for four hours, man. Yeah. I saw Jonathan and Kevin do that recently, man. Yeah. Legends right there. Legends for real legends. All right. Cool. All right. Let's get serious. Okay. I'm going to drop in this heading right here, but I'm going to make this a paragraph and I am going to define my rules. Okay. So, this is going to be for large. All right. Uh, why is there a spacing here on the bottom? See, that shouldn't be happening. There's something else happening inside the site. There's something happening. I want to reinstall fonts. This isn't right right here. What's happening? We shouldn't see this spacing here on the bottom and this on the top. And here's the thing, like if you start seeing this in your building sites or fixing the site for a client, don't just leave it being. We have to find out what that is because if we leave it as it is and we keep going, we're going to be building on top of something that's broken. When we do get a side light, I'm going to use this as an example because sometimes we do get clients that come up like, hey, the site is doing good. We don't really need a complete rebuild. We do need this one fixed up. And if we're going to fix up something, we need to fix it. And this right here, something is wrong here. Something is wrong here. Something is a foot. This is not right. If I were to reset the style, see, look at this is resetting the style. You know what? Let me do this. I need to find out what that is because if I keep going forward, it's going to it's going to be wrong. All right. Let me inspect the element right here. Yeah, let me do this. All right. I'm going to inspect the element because I feel like, yeah, you see? All right. I know it's down on the bottom of the page right here. But when I hover over it, I can see there is some, there's some spacing going on. All right. We have, oh, look at this. Oh, man. This is the stuff right here. All right. You guys know how I feel about seven pixels, right? I flip my lid when I see seven pixels. The only thing worse than seven pixels is 11 pixels. All right. There's 11 pixels margin bottom happening on the paragraphs. All right. All right. It's a bit late. Let me see. Okay. Reinstall the font that way you can demonstrate the process. Okay. You know what? We might do that and we might come back for part two next week. But first off, there's something else besides the font. There's the font, but we have something else going on right here inside some of the code. We need to find out where this bit of code is that's given margins, 11 pixel margin bottoms to the paragraphs. So let me see. Is there something else happening? You know, this is making me like wonder if there's some code somewhere. Okay. Is this inside? Where is this at? All right. It's inside the global. Let's see if we could discover where it is. Is there any code in the customizer? No code in here. All right. Let me see if there is. Let me open this up. Let's see. Is there any code inside? Okay. No code inside here. You see, and this is, this is a reason why I'm so big on centralizing all CSS and all code. Like there should not be, look at, we don't have any margins going on here. So why is there a margin bottom happening? There's something else. There's code being, you know, there's some CSS being loaded somewhere else on the site. It says the kit. You know what? I think I know where it is. I think it's inside this typography here. Hmm. Is it? No, it's not in here. So now we got to find where 11 pixels is coming from. You guys got any ideas? Charlie. It's all good, man. It's all good. I'm so glad we're doing this. David, 11 pixels is worse than 7. It actually is, man. All right. It's all good, man. It's all good. That's why we're here. All right. It turned out to be a little bit more, but it usually does. And this is the reason, guys. All right. For anybody out there building sites for clients, you see something like, ah, that shouldn't take so long. Whatever you're planning on charging and considering the time, always prepare for the extras, the unforeseen, the things that need to get done. That's the reason why us as web creators, when we do start to get to this level where we are dialing in the details, looking to deliver professional results, we need to be able to charge professionally. That way we can deliver professional results. If we're not charging right to cover all of this, to dial in to know where to look, all that kind of stuff. If we're not, it makes it really hard for us to, if we're not charging right, it makes us hard to dedicate the time and to really put in the love and care a site like this would need or like for any other of our clients. All right. Let me go to the back end home. So it's not as nip. It's right here. We don't have anything. Oh, shoot. I hope the theme file wasn't changed. I don't even know if I should be showing this. Let me just scan through this. I don't like this 15 pixel right here. 11 pixels because of perf matters. Let's see. All right. Charlie's asking if it's from perf matters. I'm not familiar with that. I know it's good. I've heard a lot of good things from it. What is in here? Do they have, okay, they have the dis, okay, look at their disabling Google fonts and so is elements or preload. Okay. I don't even want to dig in here yet. I am just going to deactivate it. Let me see. Is there a way to clear all this? All right. And let me go back to the front. Let me refresh that. I think that was it, man. No, we still got that 11 pixels on the bottom. It's from Elementor kit. Where is this at? It's not a kit. Do we have a kit going on here? Let me go back to this back end over here. It's Elementor. I think it's tools. First off, let me regenerate this. Let's go to the kits. There aren't any kits. Are there? No, there's something else that's loading this code in there. It could be. It could have been from that. Let's see if that regeneration did it. Do you know what? Things are getting a bit more tight. Still there. I do that. This is a really weird one. Where would this be at? You know what? I think I have an idea. Let's go to save templates. I did not look at the templates. There's a whole lot of them. Usually there's a kit template by default in here. But if we delete it, I think we have to do the styles all over. Let me go back and check the site settings. Someone else is saying the site settings. I didn't see it in there, but let me take another look. Snap right here. This means I have to go to sleep. It was right here. It was set at 11. I can't believe I missed that. This is web development. Check it out. When you start to get into web development, there's a couple things. One, stay up late at night. Make little mistakes. The little tiny things are easy. They'll take you forever. Sometimes the complicated things you think will take you forever go smoothly. Check it out. Let's proceed. I want to wrap this up, guys. We're going to wrap this up and proceed forward. That way, when we come back next week, we can redesign the homepage altogether. Let's go ahead and close this part out right over here. What I want to do inside this container, we want to make three different rules. This still should not be doing it. Let me refresh that. There we go. Now it's looking right. Okay, cool. Large rule, what we're going to do is, first off, we're going to have 20 pixels right and left through the entire site on every single container. Top and bottom, we're going to have 100. Bottom, let me see. How am I going to label this top and bottom? Large, 100 pixels, and 20 pixels. This is going to make a sense in a minute. Let me see. Okay, we got top, bottom. Good, good, good. That's going to be large. Let me duplicate it. Let me duplicate it. We're going to make three rules right here. We're going to make 80 and 80. Then we're going to make 60 and 60. I do this just about every single website. You know what? I do this on just about every single website. When you keep doing this over and over and over, you're working the system. One of the biggest benefits of having a system and working it, it becomes repetitive and it becomes second nature. Right now, I could build sites without even having to do all this because the system is just ingrained in the way that we're developing and building websites. Really, websites are all very, very similar in so many different ways. We are just changing different styles around to get different looks. Let me see here. Medium, and then we're going to do small. Let's go ahead and duplicate this. This one is going to be our small container. There's one other thing too. Let me duplicate it. This one, I am going to define the width. The width of this is going to be 1280px. Then let me do the same here. Duplicate it. This width is going to be 846px. 846px. For anybody who came in late, the way that we got those widths is based on a 12-column grid right here, a 12-column layout. When we have a full screen like this, and the 12 columns will say this one right here, is going to be 1280px. It probably needs to go flushed in order to get it. Then when you go down to 8 columns, it's going to be 846px. That's how we get those two widths. Let's go ahead and style this up. Now, the way we're going to use a large, medium, and small, first off, box automatically is right here. We're good to go. What we're going to do here is we're just going to use padding. We're not going to use margin. Now, if you build your system and if you use percentages, that's fine. I can't say, and I'm not going to, if pixels or percentages are better or not. I know that some prefer percentages, some pixels. Both of them work. What works though is create a system and make that system consistent. We only have these rules. The entire site is going to follow these. It's not going to break them at any time. Not one section will break this. First off, what's really important is having the 20 pixels side by side. You do this right now from the very beginning. When we go to mobile, we're going to have a clean line on mobile no matter what. Okay, something happened here. We'll figure that out right now. But this right here, this is 20 pixels on the side. That is just right for mobile devices, 12 to 20. 20, I find, is a sweet spot. But by doing that and making all of our containers the same, it is going to look so much cleaner. All right. Let's define this right here. Then we want to have the top and bottom. It's either going to be 180 or 60. If you're having a big thing, you're going to have, you know, make your judgment as you're going through. I'm running out of steam guys. It is now 10 PM over here. I don't usually work. I'm older now. All right. When, you know, six, seven years ago, when I started building websites, I was working all night every night just because I loved it. But age caught up and so did the stress of running a company. And I can't really do this all the time like I used to. Definitely going to be filling it tomorrow. Now, the smaller container right here. All right. We need to make this 846. And then we got to set this right here. You see how quick and easy it is. You know, we could do, you know, usually the smaller ones, I usually don't do 100. I might just leave at 80 and 60 in effect. Let's remove it. The less that we have, the better. You know, we want to keep the rules that we make for our design system as minimal as possible. Because when we have too many, that's when things get messy. That's when things look off. So we're going to stick with this one right here. Oops, let me go back here. Top, we'll do 80. Oops. No, I didn't unlink it. All right. So we're good to go on these right now. And we're going to follow along. Okay. Ruben asked how old I am. Man, I'm 46. 46 years young. All right. So why not Ram or M? Because we're using REM for typography. You know, REM is for typography. That's, it's for the fonts. We use REM. It's a very good question. You know, we use REM because it's going to scale up the fonts when somebody is zooming in the screen for accessibility. But when we are doing sections, I want to define the section, I don't want that to change when people are zooming in. I want to keep my padding that I set consistent. And again, this comes down to my personal preference for my design system. It works. So I don't really find a need to change it and do something completely different with it. Ben says he thinks I'm 25. I wish, man. I would be fully awake in a lab right now. Okay. Now, we got one more part. We actually got a few things, but we'll keep coming to it. Now, the next thing we want to do is we want to create a color guide. We need colors because right now, let me update this. Right now, one of the biggest problems on this website and the design style are all these different colors. So we need to remove all these. We're going to keep a very minimal color palette and we're going to go from there. So with that, I'm going to create now a space and you know, I'm just going to go here. Let me just copy that and paste it. All right. So now we could create this. Now what I'm going to do here is I'm going to have a little bit of, I'm going to use spacers. I don't use spacers in the website. All right. I'm against spacers. I don't use them to create spacing and layouts. I will use it though. However, in certain situations, like this for fun. All right. Like this and you'll see like what I'm about to do right here is the duplicate, duplicate. Oops. I don't know what I just duplicated right now. Okay. We got three of them. I'm going to create one more. Let me go ahead and move these to the side. Wrap them. Oops. Oh snap. I forgot to do something. I forgot to set my width. I need to turn them back here with let's do custom. I'm going to do px. I'm going to do 100. You know what? Let me copy, paste style, paste style and paste style. Now I could go ahead and I want to get the green. I'm going to get one more blue here. All right. And then I'm going to get the black color for our text. All right. And what we're going to do is we're going to fix up this color palette right here. That pushes it off the screen. Oh man. I'm, you know, guys, I think I'm going to need to call it a night. All right. All right. All right. We're still live two hours while I was not planning on doing this for two hours. You know what I want to do because I am fading out and I want to respect everyone's time and I want to make sure that we're getting the most out of this. What we're going to do is I want to continue this next week. All right. We're going to continue it. We're going to pick up right here and I'm going to wrap this up. And what I'm going to do is instead of building this out, I think you kind of get the concept what's happened. In fact, let me stop the screen share. Let me get this back over here. All right. So this is what I want to do right now because this did take a whole lot longer. And it's my first time doing one of these breakdowns. And I want to keep doing it. Now I feel like we got to the breakdown part and we identified quite a few things, but we did hit a few issues. And now when we hit those issues, I think it's important not to just skip them and fly by them. It's just not in my DNA. It's not in my nature. I have to get those details down. I got to make sure they're done right. Also, I want to make sure that best practices are always being shown. It's one of my goals. It's one of my missions here. I want to make sure that when we're teaching web design and we're teaching how to take care of clients, build projects for clients, and doing all this that everything is done the right way. It's the best of my ability. I'm always in the process of learning, always looking at ways to improve my systems, improve my processes. It's an ongoing journey. It's why I love doing what we do. There's no finish line to getting to mastery, even when you become a master, which is very, very far away. I think for very, like, it's a very rare thing to hit. It's ongoing learning. But the thing is, we all, the thing is, is this keeps us in the process for everybody here watching, you're in the process of learning. And this is the best place to be out. And this is the reason why I do this as well. It keeps me in the process. What we're going to do now, all right, we're going to wrap it up. It's late over here while I'm at. We've already gone a couple hours in. We're going to make a part two next week. And next week, I'm going to, I'm going to do a few things on here. I'm going to show you what I did, but instead I'm going to streamline it because I want to get into the design part and how to use this system. So next week, we're going to be back the same time. We're going to keep this going no matter what. All right, every Wednesday is live stream day. I hope that's okay with you guys and Charlie. And you know what? That might be good too. He says he gets some high resist images. Feel free to share them to me. All right, go ahead and share me the images. And what I'm going to do is I'm going to plan out because I kind of have a feeling we might need two more live streams for this. I kind of have a feeling that one is just not enough. All right. Now, when it's like me by myself and somebody say, you know, if the client came to me and said, Hey, can you just fix this up? Can you clean it up? The design is off. Like I know that it's going to take me probably a couple of days, at least one day, but I could get a lot done in that day, but it's just me not talking in the zone, you know, playing my music also in my peak performance hours, which are usually in my mornings, you know, so we're doing this in the evening times over here. We're doing a live and a whole different style that, you know, I've never done. So what I'm going to do is I'm going to break this up into a couple. All right, Charlie, you're going to get hooked up, man. All right. I'm not just saying that, but you know, like, I usually do charge quite a few grand, you know, for doing jobs like this, but I'm happy to do this. I'm very grateful that you stepped up and you put it out there. It's not an easy thing to do to put your work out there, put your side out there. I'm really grateful that you did. And I'm really grateful for this opportunity to use this to help others, to use it for teaching and to showing and to give more of that inside look. Also, I look forward to more of you joining too. And also for you guys, sharing in your feedback, because this is the thing. This is what Lightbox Academy is all about. It's for web creators to learn and grow together. It's a together thing. It's us. This is the vision for Lightbox Academy. All right, everybody, that's going to be it. I'm so glad, Charlie. I'm so glad, man. All right. So, yeah, we're going to sign off for right now. Okay, we're going to come back next week, same time. We're going to make this part two and you're going to expect this next week, right? Expect for, you know, a part two, part three, maybe a part four. I don't know. We're probably probably just two more, but it's going to be a bit more structured, going to have things planned out and we're going to be able to dial it in. All right, everybody, thank you for watching. I'm really grateful for you guys being here. I'll see you guys next