 Think we might be live All right, just waiting so I get a verified on my phone up. I see See you live. So if you guys hear me, let me know inside the comments Charlie, what's up, man? I see you're already here the man of the hour for sure Okay, I do see it. Let me make sure I got audio here. All right dope. It's all looking good Gonna run another test real quick just to make sure I can see a screen share All right, are we able to see this? Want to make sure we're all set up and good to go Larry, what's up, man? So good to see you here. Haha, dope dope Thailand divers in the house Let me turn this down Alright, so what's see here? Okay Started a little bit early this time. I gotta have a hot tea got my elementary mug with some hot tea I'm ready to go. I'm ready to go Man Larry by the way, dude, I gotta show you. I got a new puppy. You got a new Frenchy, I'm gonna have to show you some pictures. I'll send it to you inside Inside our circle space So everybody if you do notice that you know, there are I know I put the glasses on the kind of hide the bags underneath the eyes I might seem a little bit tired. I dig the new puppy this week She's an adorable little thing. Her name is Princess Leia and She yaps She she's already good at keeping us up all night But yeah, it's gonna be worth it. I know Yoda was the same when he was a puppy But so far three days in and already happy playing around so Yeah, that's how tonight is going to go so Alright, okay. All right. Let's see what's happening here. Who's here? All right. It's been a while. I'm a little rusty I feel a little rusty So I did we had a postpon the last couple weeks and things came up out of my control and We have been going on the series now This is the fourth one of the series now originally this is only supposed to be one live Well, we're going to do a tear down and to build up and you know My goal for it is not just like break down the side and just like hey, this is what needs to be fixed This is what needs to be fixed. This is what's wrong and so on the goal is To identify the core problems and look at applying a solution to it And when it comes to design one of those one of the biggest solutions I found is having an actual design system So that led to you know, let's look at building a design system is seeing how to implement it on a real-life website Not a trial website not a mock website an actual real-life business So that's what we did. So in the last couple of episodes, it was three first one We did the tear down. We looked at what needs to be built up. We identified the core problems Then we began the process of fixing them But it turned out to be quite a bit more because it is a real-life website We do have a little a real-life website. There's always going to be unforeseen So we found some Unforeseen that came up things like fonts that needed to be fixed things like global settings and a little bit more of a deep dive So we started doing that and then it's at the last couple live streams We looked at building that design system. We completed it. We have our brand page built out We know the direction we're going to go in now tonight tonight. We are going to be bringing this full circle So what we're going to do now is we're wrapping this up with just a straight-up design session now Anytime we are building a website. I should say when I am, you know It's just part of my process when I'm building a site and we're designing it Whether it's a redesign a brand-new build or so on there are steps before we actually start designing Because the goal is to make sure that the site is effective that it is That it is delivering as primary purpose that it is going to be Solving whatever problems need to be solved and achieving the goals That's going to help the business and in order to do that there are some first steps We need to do there's a process to get to that point. I would never just go in and start designing Skipping some very important steps mostly Identifying the problems Being able to apply the right solutions and then the whole strategy and building the foundation It's kind of like building a house without a blueprint, you know, and you do that It's not going to hold up for too long, you know, so let's see. All right, Dave name. What's up? Nicholas so good to see you here, man. So good to see you here Alright, so All right, what we're gonna do here. This is how we're gonna do tonight This is gonna be a bit different because the last ones it took quite a bit of time a lot longer than what I was planning and You know, this is all new to me. Oh, we're learning as we go and one thing I learned was If I keep just talking talking and talking things aren't really getting done and I really want things to get done So this is going to be a straight-up design session like I'm gonna go in the zone All right, I'm gonna do some talking, but it's not gonna be like Instead I want to sit there. We're gonna relax. So everybody watching this put on some music, you know, put on some lo-fi you know and and As you as you're seeing things, you know ask questions because I'm gonna be keeping a very close eye on The live chat and by the way looking at the live chat see emron. What's up, man? So good to see you here, man dope dope dope Alright, so as we're doing this We're just gonna have fun. We're gonna design and as if you have questions drop them in there And I'm going to walk you through the process in the steps. We're gonna build it out So let's just jump right in. All right get in the zone. That's right, man Cool. So I got a screen share going on here and first let me fix my head and put my head over here in the corner Alright And here we are right here So this is the site that we have been working on This is the one that we did a deep dive on and when we did the deep dive The first thing that we did was we identify the problems and we had some core problems right here Let me expand this out. So the core problems that we had was you see First one was building a human connection now this brand it has a lot of Awesome assets. It's amazing when we're designing a website and the client has all these incredible assets like reviews like Tons of photos like really good high quality photos things like that So we have this site right here, you know, we got a picture of somebody here But I feel like it's really not connecting with people not really putting people to the first and for Foremost right here. So that was the first one. The second one was building trust There's no trust elements on the homepage now. They have like a 4.5 Trip advisor were like 500 and something reviews. They have like 4.6 Google reviews for the stars Tons of reviews Also, I'm sure there's certifications things like that. So one thing I would like to do is build trust I want to make them look established that way when somebody goes to the site They know that they're dealing with somebody that's super super credible And then the next one was to create a clean design system. So You know what I actually thought of a quote the other day when I was right. I'm gonna pull it out Okay, so this is what design systems are all about It's turning random guesses into calculated decisions You know when you build things randomly and you do things randomly you get random results But when you calculate and you build a system and you have processes Then you are building more calculated and predictable results. It also helps to streamline everything We're gonna do all this inside elements work now where we left off with in the last one We built the brand styles page. We started playing around with the fonts. We redid the whole Typography like the font styles of global the global colors things like that. Let me turn this on make sure I can see On my phone. All right. I'm using my phone to make sure we're still there And if any time audio or something goes out somebody shout out I am keeping an eye on this chat for something like that All right, so we are gonna we're gonna try out some completely different like colors Definitely, we want to go with the blue or like aqua Because this is a scuba diving company, but we want something else like some other highlight Then we changed the typography now We set this up in the last stream but after the stream I had a few ideas and I wanted to get a bit more prepared and I wanted to implement those ideas and one of them was to change the fonts because Last week we just chose a very safe font. We changed I think it was what prompt or pop-ins one of those and it was just a safe Google font I felt like you know what this is a site. That's like for scuba diving company here in Puket, Thailand Like we should be being a little bit edgy, you know, this should be a little bit fun You know and not too safe and so I have this other font right here It's not way out there, but it is a little bit more Different little bit more edgy. So I've applied this right here Just clean some of this up. We defined our cards our spacing We defined You know our containers this way we're going to have clean alignment throughout the site And then we define our buttons and now what we're going to do is we're going to jump into the home page And we're just going to start building as we are building the home page I go through a couple different steps All right, the first step is I just start to lay out all my elements I start to put them together. I don't worry about images graphics. I don't worry too much about colors I don't worry about content at all It's more about putting everything together and aligning it now. I cleaned up See here. I did clean up the wire frames We did this wire frame in the last one and this is usually my wire frames Look, does anybody else have wire frames that look like this? Like this is one of my typical wire frames It's just chicken scratch, but it's just like the whole thinking process. You go super super fast So I did that but again after doing this, you know, my thoughts kept going And I had some ideas. So I went in here and I cleaned it up with the cleaner version of The direction I want to go in as far as a layout and we're going to use this right here as the guide And I'll show you how I use this as well. So that's the first step I'm going to do all that with element or drop and then everything structuring it using our design system The second step we're going to go back through want to clean it up That's where we kind of like change the backgrounds making sure we got balance making sure like there's good You know dark background light background like, you know the look and feel is there and then in the third phase which I'm not sure if I want to get to because sometimes I do that in another day after I've had a chance to Relax and rest but usually in that third step. That's where I Put the final details into the creativity side like as far as selecting the images Creating graphics like literally go in and I use fig I use figma here to create my graphics And I already started creating some that we could use here But you know, I use like UI kits like this. I usually pull out graphics out of them You know, I got a bunch of stuff here and I this is what I do I use a bunch of resources. I put them together and that's its own step and its own process Right there. All right, cool. So about to jump in to start building before we do I am going to Let me see how that Boost me up over here. Let me just catch up on the chat. Just make sure like we're all good. Haha. Oh Yeah, Imran says it is scribble. Tastic. I love that dude That's a super dope name and way of putting it man But that's it dude. It's all about quick making it quick and easy Like when I do a high fidelity Wireframes for a client is because they're paying a lot of money and I want to deliver that higher experience but it's for a regular project and like we are working with just, you know, a regular budget And if it's just us and the client doesn't really care about it. I'm still going to wireframe, but I'm going to make it scribble. Tastic All right, and Nicholas got his paper notebooks. Oh dude, I got so many just like notebooks is that that that that I love it man Yeah, I do like the notebooks too. I'm trying really hard to put my iPads in test But anyways, I'm I'm derelling. All right, let's go ahead and do this And let's get started. All right, so this is a life site I'm going to keep them separated and I'm using art browser by the way Superdome browser. All right, so we left off here last time and this is just where I started to explore with everything Let's get started. All right, I'm getting in the zone right now I wonder if I could put on some lo-fi in the background. You know what I might do. I'll probably get a copyright strike though. Oh Yeah, that's gonna give me a copyright strike. I Usually put on my music either lo-fi or gangsta rap one or the other. All right, cool. Let's take a look. I'm going to Keep this with me for my reference. All right, I got something in mind here, so What I want to do in fact, let me first change this header All right, we need to oh, yeah another thing that I oh Yeah, there was two other things I did too and they're actually quite big First one was I changed things from pixels. So we had like I never do my fonts and pixels I do all of them are M. I got a video coming up this week though showing How to make this a lot easier? It's already recorded. I just got to do the final edits and I'll publish it. But basically I changed the base font size to 62.5% so now we could use RAM a whole lot easier If we go to like This container like this container is a hundred pixels on top and bottom 20 pixels on left and right and that's how I normally do it, but I am upping my game right now Just making some adjustments to my development workflow and I changed it to RAM So now it's at 10 RAM on top and bottom to RAM on the sides and I'll go forward with that This is all just personal preference right here. Just trying to improve some best practices so we did change that and Let me see here Charlie I hooked you up man. I Added happy files pro so I started using happy files now that I you know, I'm using like bricks as well I've been working on some projects and they're using happy files once you use happy files You can't go back. All right. You cannot go back to Normal stuff you can't go back without it So if you guys don't have happy files, definitely check it out. It's like 70 bucks for a lifetime deal Let me see here. I Got some more logos. I don't know how that one is going to work, but let's see All right, let me go ahead and update this. I'm gonna have to fix this right here But I'll show you what I'm doing. I'm making a transparent header. So I made a second header That way That way I can make this stand out a lot more. All right. I want to do that because Because look at this is There's some powerful photos in here. We could be doing a lot to really really make this stand out We're about to make this banner looked up. I'm about to put some love into this banner All right, let me go ahead and open this up right here. Let's fix this transparent header And I'm gonna go over here I'm gonna fix this Oops not that one. I'm gonna fix this logo So we could use it on the site and that is going to be Are the dark one there we go remove that so it's clipped. I forgot how to do this right here I'll fix that clipped path. Is it this one? Nah There we go had to find the right one whole command Okay, here's my thing when it comes to fig my know, there's like a Debate about not using it versus using it like especially for building something like for elements or I This one's a little frustrating here did I get there we go But you don't just have to use this for mockups It could be used for all kinds of other processes as well I need to make sure see this one though is important when I'm doing it I need to make sure I get this all the way to the edge or else it's going to mess up my Alignment on the left the right I could have off a few pixels All right, let's export that. I'm gonna call this right logo Now let's go ahead and choose another one Put on logos here. This way we could organize everything. I Wasn't what I was trying to do. All right. Yeah, let's go ahead and change these colors And hover let's make this hover and active. Let's make it that color That new aqua All right, cool. It's pretty fresh that now. All right a way to fix that is Hi, I close that out. Huh a way to fix that would be For the z-index, so I got to make my banner z-index the lowest But I need to make sure this one is also higher and that should fix that You know, sometimes some words will break and we want to prevent any of that from happening right Do oh No, don't show my passwords. I clicked on my dash lane. I was about to show my passwords in a live stream That would have not been good Alright, let's see here refresh it. Yeah, reload that All right, cool Now this is where we need to use it got the navigator dope intersection Go ahead and make sure to label all that dope. So here's what I wanted to do here. This is too blue I want to make this You know, like even if I remove wait, why does that blue? Okay, there's a background overlay Yeah, remove that right there. I kind of like this dark color right here. In fact Let's make this even darker right here. I think there's something about that right there That is super dope. All right, let's change this to RAM now I got it from you know, 100% now. I got it easy where One RAM equals 10 pixels. So it's gonna be so much easier Doing this I'll do 16 Let's always do 20 or two 20 pixels on left and right so two rim on left and right and 16 We could do a little bit more All right, I'm gonna do 20 20 All right, you know, I'm gonna center this You know, I do want it with the black background. I Mean the sides right here being dark helps out because it keeps the contrast and real quick I'm gonna take a look at my comments right here. All right So somebody asked about the common typography fonts, you know, mine was Helvetica now for a long time. Tiempo says one of my favorites What else do I use lately haven't been using too many different ones lately. All right, let's go over here and fix this center Everything up. All right, I think I'm gonna have to fix these buttons too. I'm not feeling them, but Okay, this inner container right here So let's go ahead and put that here. Then I am going to add in another inner container. All right, cool So this one would be the CTAs All right, and this one's gonna be my trust badges All right, so what I'm gonna do over here is I'm gonna drop in a couple images here And let me select on graphics upload and this is where I'm gonna put Those reviews that I created. All right, and then let's duplicate that and upload the next one So let's go ahead and fix up This one right here, we'll center this up All right, put the gaps in between again, I'm gonna use RAM I built the system so my system is going to be to RAM for gaps going horizontal For mobile is going to be for RAM because I want more spacing on Going mobile, but this is all up to whatever you choose When you do build your when you do build your system Images, let me see here. Yeah, I don't want these to be too big. Okay 120 looks kind of good right now Right. The whole goal behind this is Want to add that to the container You know what I'm gonna put that on the margin. I'm gonna push this away. All right All right, I think I'm going to be changing this image too. So I'm not going to trip on the image I know there's a contrast thing going on I do have some ideas for it, but for right now, I just want to get the elements out If I go here to my wireframe, okay, I got the banner right here. I mean the header I got The call to actions and we're going to have two called actions and I could already see I'm not really filling these buttons all too much My call to action. There's one which one is going to be for so there's two different primary services here The first one Is going to be the courses, right? The diving courses Oops, so that would be Courses And what I do right here and the reason why I'm putting this here on the left is because this is the primary Now when I'm talking to a client, I want to know where is their biggest moneymaker where what is going to have the biggest impact For their business Uh, because like this one right here, uh, there's two primary Uh, there's two primary ones. There's the courses and then the dive trips Let me see here and then I would have to talk with a client to see what to actually call these right here I'm going to call this uh Dived uh dived trips I'm sure there's a different name for it Uh And then see one thing too. I see I don't like when I have two buttons and they're different sizes So I got to give this a custom width Oh, it doesn't work like that. Wait, hold up. I haven't really done this with elementary that much You know, I'm gonna circle back to that because I don't want to get hung up on it quite yet All right. Next up now this one Hmm. All right I'm gonna do all this inside the banner. I have an idea right now. Let's drop in another container down here All right, and let me open up my navigator This one is going to be the uh banner reviews Like right off the bat I want whenever somebody comes to this site that they know like dude, this is well established right here I know now we're getting into a lot of containers now I try to keep containers and inner containers and especially inner inner containers minimal as possible And if I have to do it in a situation because I have something to mine now I might pull this out later on But what I'm imagining doing is like I'm going to do a special background graphic right here And I want to use this dark color But I'm going to be using more of like a radial Type of gradient like I want like the ocean to be viewed But then I want it to fade Into the brand color the dark color down here For the reviews So I'll see if I can get that to work if it fits if not, I'll create another one and For me if I do Find myself like having to create a banner where I know there's a lot Of inner containers and inner inner containers I'm going to offset that in the rest of the page layout by trying to keep everything As clean as minimal So if you know like this is just me and my suggestion is if you are using Tons of inner containers or something like that Try to keep it as minimal as possible if it needs to be done on a section go for it But offset it and don't do that throughout the rest of the page because that's when you get a lot of bloat Like I'm trying to be mindful of the amount of dom and divs and all that stuff that I am adding But I could see I could see this as being something super cool. Let me call this review All right, let me drop in the elements for it You see here all right, uh Yeah, I'm not going to I'm gonna keep this one really simple right here Let me put an image In fact, I need to create another graphic This one's gonna go really quickly and easily Make this one 300 So right here All right, that's that's most okay dope. Let me make this mold I am going to turn oops. All right. I'm going to outline the stroke now. It could be an svg uh Let's snap. What are the brand colors right here? You know, I'll go ahead and export this right here SVG and I'm going to call this one a blue quote. I'm going to go here to my svg icons dope, okay And Let me pull up some lorem I didn't get my long. Where did my lorem go? I went to go look at the comments. I just got turned around Where's my lorem at? Uh-oh All right, it's all good. Let's go ahead and give this some color. I'm gonna do this offline. I am going to use the Oh, wow, that didn't change though Hmm. I updated something earlier. Let me see here. I updated the global fonts and titles Oh, I didn't change this right here. Okay. Let me change this. So I've recently updated my system text medium Because I have been using bricks and using more classes lately so Because I do work with other people as well I found that we needed to Fix the way we label things that way. It's all uh unified Okay, cool. Let me uh move this up. So that way we just look at I've updated I'm gonna do another video on that but it just helps us to keep everything unified So we're all keeping everything consistent. All right. Now I should be able to find my text medium Dope, all right and 80 make a big Moving to the left Let's add in some padding right here All right, and then I'm going to duplicate this a couple times And let's set up Our thing right here Again, I'm going to push this down. Let me do I want to get some space. Let me put 60 It goes down here All right, so this is actually what I had in mind. Check it out. I'm going to give it a lot more space But what I'm going to do is I'm going to reduce this down here on the bottom That was my plan Yeah, this is what I was looking to do now I'm probably going to change these colors right here. I'm thinking to put some lines right here as well Let me see here. I could go Probably do this really quick We do a solid Uh right I don't know. Am I doing box shadow not border radius You guys if you only knew how little sleep I've got These last couple days with the puppy You know, I actually okay. I travel to the us tomorrow Way sleep deprived right now in the middle of a project with a Short time frame on it and on my own personal projects plus new content to create. I had like 20 reasons to uh To cancel I had 20 reasons, but I have one very good reason To do this tonight and that is to follow through It's a complete something because It's just something about following through That feels so good reminds me of like What happened here? What am I doing? All right? I'm messing up I could feel the fatigue already kicking in all right not the bottom the right All right, and we could tweak that out later in fact, you know what? I know what I want for that. Did I upload the colors here yet? Yes Let's use this green right here Posts I'm gonna go right back here Something happened there that did not Export right delete that all right dope Copy that about that paste delete Paste and delete All right, cool. So this is just a beginning right here We're gonna definitely tweak this out, but I want to start adding the rest of the stuff to it. So Next up. Let me Let me just catch up really quick on the uh comments Okay, so Larry asked about adding multiple containers and uh, yeah, I totally agree with uh emron on it It's okay to do just you know be mindful of it and not to do it to overdo it definitely It's all just it's all about being mindful and I think that's the thing, you know like uh You know if you're not taught to do it or somebody hasn't pointed out like hey like when we're building Here's the best practice try to minimize it and when you have that in your mind like okay I'm building out the page. I'm going to try to minimize The amount of Inner containers I'm going to use I'm going to try to find a way to do it With minimal well, you're just going to end up with a cleaner website and just you built these good practices All right, so the next section that we got All right away from the chicken scratch to the Better looking chicken scratch. Okay. So these are going to be the call to action. So this one right here Is going to be This section here. We're going to now build out the cars. There's two primary call to actions The courses so I kind of started playing around with it. I got an idea of what I want to do I kind of want to make it look a little bit more of like uh listing style of a card Uh, so let's go ahead and build that out. Yeah here Okay, I got too many things open so I need to start closing some stuff Yeah, let me first set up my always start off with uh I started off with the outer container always set that up first All right, let's drop in our elements Should I do paragraph two? Let's see here. All right. Here's going to be our subheader Let me open this up so I go back and forth quicker Okay, uh, we're going to call this uh diving courses All right, this is like all changed now. This is going to be our h2 Uh, I do got something for it. I got an idea for style. I'm going to Try something out with that Uh And let me set up my gaps Round two. All right, and then here Oh, it's in all caps. Okay. I have to type it out Explore what is it? All right explore scuba diving and puquette. All right This is actually like an h2 too. You know what like No, this is okay. That's all right You know, it changes around depending on the keywords being used And what the strategy is I'm going to go with a large title right here And then here we could do you know for sco purposes. Why am I showing my Emails that's the last thing I should be showing on a live stream. All right, you know, let me make this a little bit longer I'm going to change this to a paragraph right here Open that up and you notice you see how the text gets super small by default when I put it in there This is because I did change the font size like the root font from 100% to the 62.5% but I got a video again. My video is coming out on that. It's going to make sense of it all this week All right, and here I so what I want to do here is I don't want something like this going full width because this is hard to read People don't like your eyes just they get tired traveling across the screen So I set a custom width on it. I'm going to go pixels And I'll probably put it around 600 Yeah, 600 should be fine. I never go no more than 750 usually around 600 Uh, let me just go ahead and set this up. So All right, cool Now the next one in fact, okay opening Or section one text group section And then you know what I am just going to We put a one right here I'm gonna open up a new one. Yeah, let me go ahead and do two Two top I'm going to put one so I got 40 Oh, I know I need two I want 40 pixels gap in between the two All right, and then bottom I'm going to put 100 Now if you guys saw my last video, I defined the design system 20 pixel spacing In between the text from text to element is 40 pixels and that was my uh system that I created From here now I'm going to drop in the inner container right here And we're going to make our text boxes But why? Oh, it's on pixel. That's why Huh, I haven't seen some of the updates. I wonder if Elementor is going to make like a being able to set it by default That would be super dope really helpful to do two 10 two all right And here they want to call this uh Versus section And then core score All right, and if I go back here and look at what I have I'm going to put an image here Uh, I'm going to put a tag right here for beginner because I did notice Like they got a beginner intermediate expert Uh, and because this is like scuba diving people trying, you know, they're all traveling I think that'll help out having a little tag right there We'll put the name of the course. They were going to stick to three highlights I love doing things in threes I always try to do things in threes the human brain processes threes really well And then we're going to do a book now button And then I put a question mark here. I'm going to try it But maybe I'll put the price or like at least the starting price Right off the bat if we go here and we look at the original design Uh Like the call to action I just like I noticed that like having to call the action that's strong like a book now And I feel like this is a lot of opportunity right here That really helped out with the conversions, uh, if we do this one right So let's go ahead and get started now first I am going to duplicate these And let me change my Settings around let me change this right here. So at least I could see it It's going to help me as I am styling up everything All right, let's go ahead and drop in the image I'm just going to go here. Okay. I did Upload images. So let me put something like this again. Do what that one's dope right there There are so many good images for this site Uh Let's see over here For the heights I'll put 250 and then cover I always set up the height I always put it at cover Especially when we work on a row because that's going to make sure everything stays aligned That one of them isn't going to have like a random couple pixels off that's going to make, you know, everything just off All right next up. Let's go ahead and put in some tags now. I want to put in Two tags I want to put in a beginner tag and a day tag now to do this I got to use the inner container right here So I'm going to drop in An inner container and then inside here. I'm just going to use my title widgets If you guys see the way I build sites Uh, you're going to see I use just a few widgets Beginner I'm just going to put that I spell it right of course not All right, and then let me Change this to a span You know, let me put this as a div. Okay. We'll change that to a div I'll duplicate that and then this one is going to be one day All right, I'm going to now control of it and this one. I'm just going to call tags So I could identify as I am building out Let me space them out Space in between Bam and now from here I could go ahead and add in my padding Uh, I think I'm going to do You know, I don't know what I'm going to do yet on it. Let me go ahead and build out my tags I have something to mine. I have something kind of dope in mind. I think it's going to be cool All right, I have Text small that's cool Let me add some padding on this Uh, let me see for my padding. I think I'm going to do just Maybe six on the top So I'll put point six No Unlink it, uh And then right and left I'll put 12 so 1.2 Then 1.2 And let's put a border radius on it Just maybe like four. Let's see how that looks Let's add a background color on it Hmm, you know what we're gonna I have an idea. This is what I want to do. I'm going to take that. I'm going to bring this down I wish it would change numbers This thing has always bugged me right here All right, we're going to do that and then for my text. I'm going to change this to Okay, that's too hard to see darn Okay, I could do it the other way around See here, I don't want to change it if I do let's say if I want to add in a color I have to add it to the color scheme. I can't change it randomly now. You can't see it and that isn't good so I need to You know, I wanted to go with a style like this. So I might have to Maybe add in another Where was I at the background? How is that? Let's see Wait, let's see if that contrast is going to be off by a lot No, that do you know what let's see how that goes. All right, I'm going to see how it goes. I'm going to Change this to four pixels on top Oh weird Okay, you have to do a zero point four. So I tried Doing this a point four, but you have to have a zero. Okay Now I'm just going to copy this and paste it and I just thought it would look cool now. I might change it all the way around Uh, let me go to the background Again, this blue and let's make this super light right here all right And then I could add in a little bit of padding here Let me add in a top Uh, 12 pixels. Let me see 1.2 I don't want to let's see how that looks. Okay All right, I'm going to leave it at that for now. We could come back and rearrange it Now I put extra love Into something like this because once it's created we're going to be able to duplicate this and replicate it across the site like we got a Me scroll out But we got a row right here of the cards and then we're going to have the same row right here And then on the other pages being built the same exact element can be used So I always give more love with something like that All right, I think this is in all caps again Oh, no, okay It's just set to it. Uh Why is that happening? That's really weird to stop it Stop doing that Oh, no all caps again. Hi Have you guys ever got like a client and send you a word doc? Everything is in all caps all the content and then they want you like they expect you to uh To rewrite everything I've had it. That's why I'm laughing and it's late night. So I'm probably going to be a little bit loose With uh, how I am speaking. Uh, let's see here. So I'm going to use Huh, that might be a little bit too big but again check it out. So I let me see here This is where the first one Uh, the first uh One when we put everything things are going to look off a bit like we set the globals right here But after you build like the home page you put everything together. Maybe this is too big Maybe it would look better smaller, but instead of editing right here instead of me going in And say, okay, let's go ahead and move this around I leave it set at the global and when we do make changes It'll beat to the global. So that way globally across the side Things change to fit the design better until it's right and usually it's just the home page that needs all this extra love You know, I'm going to catch up on the comments really quick Uh, let me go ahead and turn off the screen shirt just for a moment Just going to be for like Two minutes for me to take a little Tiny break. Dang. It's already been an hour oi I told myself we're only going to do this for an hour tonight Let's see here All right, the skating choreographer is in the house. What's up, man? What's up? so uh Henning asked would you recommend to make drawings of the site or blog or products before designing? Absolutely Uh, not just drawings like you could do two things. All right, uh One is definitely make a wireframe like what I got here that chicken scratch like just the outline So at least you know The flow you want to take people it's all about the direction and the journey you want to Navigate the user through so that way there's a purpose There's a rhyme and reason to it why we are taking them in that direction The next one though, like you could do mock-ups or you could just find Other websites like part of my process is like I have a bunch of different mock-ups I have a bunch of different designs From other people like other stuff done I gather a bunch of inspirations And I use those to help out with because if I try to draw from the top of my head Or just design the side from the top of my head it's going to take forever It's not going to come out right Uh, I'm going to hit a lot of walls and it's just look it Very few people have that Uh ability like that is you know, it's just not me So by having inspiration websites like say I had like a listing website I could like okay. I like how this is built. Let's build this section like that. So definitely I recommend that Let's see here. I just want to make sure like everything is caught up that you know, I don't miss any questions Uh, charlie, we're going to get it man. All right. So we're going to get it All right dope. I don't see any questions away Fat j. What is this? Uh, are you not using a nice video in the hero header? No videos man. No videos. Uh try not to do nice videos inside the hero header I like fast websites No, I like to be zippy, you know, uh, and then when we got something like this where the client has So many dope images. There is no need. All right. Cool. Let's go ahead and Go back in this. Let me get my little head over here to the side All right, I don't want it to get in the way All right. Cool. Going back in this All right, let's get this card right here because when we get this card, it's going to make things so much easier. Okay So next up we have these three checklist here. So I'm going to add an icon list right here You see icon On my favorite widgets right here. Who else loves the icon list and You know, what do I have? A cool arrow icon. I could just snatch up really quick I don't want to get hung up on it. I do not like the default icons that come in there I never use the default icons. By the way, I just feel I don't know. I feel weird using them All right, let's use this. I don't know how it's going to look but we'll give it a shot here Let me paste that here All right Make a big detach the instance. Where is it at? All right Pull that out delete that and let's give it I'm going to give it this same color Right here Let's go ahead and export this svg All right right circle Arrow yeah, so let's go ahead and do that now I could put in my own svg Let me make sure I put it inside the right file What did I call it? Right circle arrow? Okay, dope. All right. Cool. Cool. Uh, we have a few things right here. Uh, let me see Beginners course No experience needed And the three Dives right there. So No experience needed What's the other one called All right Let me duplicate that for beginners Oh, let's go ahead and style all this up icon I'm gonna take it to I'm gonna take it to 24. I want it to stand it out. We're gonna have some fun here All right, I'm about to get lazy and start doing pixels because I'm tired Uh, well, what's happening here? Ooh, something is weird happening here Huh, I'm gonna put I want this to hug. I do not want too much space And see there's some spacing happening there. I gotta see what it is. I'm not sure what it is This is what we saw before when we were doing it. Uh, the other times There are some things that you know with the code and stuff like that Maybe when I fix the font it'll work. I'm gonna do take small You know what it's working right now as it is All right padding bottom I'm gonna do 12 pixels on the bottom. I kind of want to hug things up right over here Uh, this is dope right here next up What was it, uh the book now button. All right Already have buttons ready here Well, let's try a large one. Let me copy that And paste that here All right, we are going to put some padding on the bottom This time I do want quite a bit of padding What do you guys think? Do you think put the price right here? I do have that I think it would kind of be cool. I do think this button is quite big though I could do two things. You know, I can make this button in full size right here Huh You know what let's do that All right, let's delete Delete duplicate And duplicate You know and all that needs to be changed out Let me see here new images So we want to build that connection with everybody. That was the one thing we wanted to do that human connection Bam, let's make some cool stuff right here. Okay, another thing I wanted to do over here Let's do padding here. I'm gonna put rim and I'm gonna put padding on the left Let me see uh To All right, and I am I want to do something fun right here Because I just had this idea and I want to get it out while it's still fresh on my head to rim again Left was a left Yeah I want to put four pixels. I'm going to put point Doesn't work on 0.4 And let's put the new color right here. All right, that looks kind of dope Right there All right, cool next up And by the way, I do mobile at the end as well inside the final my final step when I'm going through and getting the little details down That is when I'm doing mobile because when I do the details in my detail step I'm looking to make sure consistency is across the board Also, I am Like I go from section to section to section. I make sure each section is dialed in So like right here, I could already see like this doesn't look right, you know, this would be part of You know part of it right here. I think maybe I should duplicate and like double it to like You know 40 pixels or 4m All right, I'm not gonna keep doing that now right here. I want to put A testimonial right here again. I just want to keep driving That uh trust right here. So instead of going from here's the set of cars by this Here's the set of cars. I want to follow it up with a testimonial But I'm going to do a minimal and simple one right here. Let me set this up In fact, you know what I need to speed up everything All right, we're going to use the small container. So I'm going to copy This and I'm going to paste the stop It's a reason why I set these up too so I can start copying and pasting so let's Let's let's go quicker No, that's too bright. I'm not feeling that blue anymore That's all good. That's what we're doing here Do this All right, I'm going to put this here And this here, you know, I want a person's picture here too This one needs to have a picture for sure All right, let me go ahead and do off white. I am going to make this Let's make it a big one for right now. Well, what's a large text that I have All right, that's not too bad. Let me I think I do have this set up. All right, it is Let me Make this 750 pixels Then we got a center everything All right, and right up here, you know what? I would put a big picture right up over here somebody Let me see are there Okay, check this out. I'm going to turn this one. Let me put it on medium right here I'm going to put width pixel. Let me see. I'm going to put 120 8 pixel 120 object fit cover border radius 100 there we go. Now we got Now we got a profile picture real quick. All right, uh, rem let's go ahead put the 20 pixels or two rem on the bottom And huh, I just been looking right to me. You know what? I'm gonna put that on the bottom and up here I'm gonna put the quote Right here. Okay, we need to Undo this undo this and undo that And then we'll Let me make that one smaller. Maybe I'll make it at 48. All right. Let's drop this right here And Hmm What let's go ahead and drop in the inner container right here Throw this in the inner container that way we could put like the name Of the person, you know, we want to build that human connection. Uh Let me see. I'm going to call this. I'm just going to say any name On I'm going to throw in some Inline stuff here. Let's go ahead and throw in the break tack Let's go ahead and throw in a span style equals On size We're going to make this one a point eight or am see how that looks once I finish Again, I'm going to turn this to a div. Let's center it Let me turn that one white. Let's give it the small text Uh-oh, did I mess up on my Oh, I didn't put the Title right. Okay. What do I want to put uh from the location? Uh, I'm going to put from Australia, I don't know probably rethink that Sorry, Australia. It's built it wrong. Uh, let me see here I gotta fix that Uh sizing right there. Okay Yeah, let me put point eight seven five. So it's a little bit smaller, but also let me make this uh text medium And uh, all right, I'm going to have to Change this right here Let's go back over here and make this Center And then rim to Create some padding down here On the bottom rim, we're going to put Ah, no, let's put 20 I still feel like this is kind of big right here. So let's take this down to 80 and 80 All right, we could always tweak it out later. In fact, what I probably would do here as well I would probably even put something dope over here like this You know, I think that would look sick right there No repeat that is super dope Cover all right, and then put like a background overlay See, this is one of those kind of projects I could have so much fun with Man, I could even do something like let me see what would happen if I Added a border So I could have so much fun with this right here. All right, I told you guys I was going to get in this zone We're we're doing this man. We're doing this real quick. Let me check in right here if you guys are still here Okay, so if that's a ask about Way to get the widget from google, you know, to be honest, man, I probably wouldn't do it uh I just you know, I've gone to the point where you know, I focus on performance and Anytime you connect like google they seem to like mess up gdpr and like they mess like it's so ironic, but You know, it's like you connect google stuff to your websites and google penalizes you Uh, so I try not to do it and I I just like to have full control and I know ideally It's cool to have that live widget that updates as things are happening But what happens if like somebody, you know, like a competitor or the business I see this happen where competitors uh They will do a smear campaign you know, so Just something to consider. Let me see here. I'm uh duplicate this You know, I'm going to duplicate this All right, now we could take this down here We take this one down here and then right here this one was going to be for uh diving day trips right here And we got all this content here so we can keep the content. I don't want I wouldn't want somebody to lose Uh diving trips in puke diving Trips in puke and then this one What do we call it? Explore see like right here. I'm probably will put like I could see Like the puke diving day trips Like this would go well right here Because this is good for seo and I put this at an h2 But like to like speak to somebody like I put you know, uh Oops Oh, yeah. Yeah. No, this is right. Uh explore Uh the best The best dive spots in thailand No, I put something like that inside there and it's going to speak to people a lot more And then I'm just going to leave this as it is. I'm not even going to tweak this out. I mean, I will probably Just update some of the videos. I mean some of the Uh images because it's going to help to give better perspective as we're looking at things but as far as the content Uh, I think it's good Oh, no, that's not one No, I want to make sure I use these images that I added here That image is so dope This image is so dope. All right, cool Now what next do we have? Nicholas man, welcome back man. Welcome back. So good to see you here All right, so all right, cool, uh next up We want to build that connection. So if we look at the site like we do have something like with uh Well, I've already talked to charlie whose site this is uh, I don't think he's going to be putting this on there but has something for like the boat and uh, you know building that You know letting people know what they're going to do Let's see here Did I have okay scuba diving in puquette. So okay, we do have another section the scuba diving in puquette And all this text. All right, so let's go ahead and do uh A basic side by side section right here So I'm going to do that. Let's go ahead and set up No, I don't want to do it by hand again Copy and paste out All right, and then in here we're going to drop in two containers And duplicate let's go ahead and fix this up here You know, we'll go ahead and set that up for rim. I'm going to put two All right, again, let me go ahead and copy this Paste that in here copy this Paste I'm going to do the same here Uh here though, I think there's a lot more text. Oops. Don't need to do that All right, we got all this text right here. We could put All right, I'm going to space everything here and then Let's go ahead and drop an image right here Hmm. Do I want to use this? No, I'm going to use Let me see here. I'll use this for right now. Let me see how that goes Let me go full All right, I'm going to make this wise. So one thing I like to do now is when I have like You know an image by the content and there's a lot of content like this right here I want to make sure that the image is definitely Overshadowing the content. I want the image to stand out because the image is what's going to grab people's attention So I control the height and I love that element or it has this right here I'm even going to 600 too much Uh, you know what? Let me go 550 All right, that's cool. I love that this this right here is such a big part of my workflow In doing this. All right, let's center this up All right And let me see let's go ahead and put on so we do have that off white color You know what let's take a look and see what we got now. We put a lot in here All right, so this definitely we're going to be making stand out. I could see that this title needs to be bigger The font needs to be fixed. I could see where this needs to be fixed But I could also see where it's going right now Once we fix this part up and make that part bigger I think it's going to really stand out and look fun I could see this blue up over here like for me. I'm digging the green right here Now I don't want to steer two way around like I don't want to deviate too far from The brand I think blue and green work. Uh, but do you know what it's like? I don't know this dark color. I feel is working really well with it Do like the testimonials flowing in and then going straight into the booking Uh, I want to also try another version where the book now is smaller And I have the pricing here, but I think that people are going to be clicking on here more now I could see here. I need to fix these Uh I need to fix these and make it maybe a little bit smaller The icon is Kind of ratio is a bit big right here and I could also fix up this right here Uh All right, this is looking dope right here. I dig this section right here. I like it Uh, but do you know what? I think I want to try the different font and make this even bigger I think this font but in the lighter weight would look dope here And then we got this and then a very simple clean section right here All right, it's coming along it's coming along. Uh Here's what I'm gonna do though because it's been a while and I do have to fly Halfway around the world tomorrow. I got quite a bit to do to get ready I was planning to spend only one hour one and a half at the latest I know many of you have joined in I appreciate everyone for being here and I hope you guys are getting something out of this Uh, what we're going to do is I'm going to finish up the first stage Which is adding everything and then cleaning it up a bit and I hope that this whole process has helped out to see The thought process behind, you know designing directly in Elementor and building out a page Let's go ahead and keep it rolling. I need to drink something Hmm All right, cool. Oh, yeah, I had this idea right here Tons of images and we want to solve the problems. Remember those three problems We want to solve we want to build that human connection so We are going to put a sort of gallery right here. What I'm going to do is Let me see. Uh, you know what? This might look dope. I'm going to explore with something right now Let me explore with something Let me put an image here. I was planning to do Something but I think I'm going to change that. Let me see what images we got Okay, I know there's a lot more images too. Let me go ahead and set a height to this right here I'm going to put the height Let me put it at 600 Ah 400 I can probably even do 500 put cover All right, let me copy this So I just want to go quicker paste that here All right, and I'm going to drop this down to 250 Then I'm going to copy that and then drop that one down to You know, this would have been better with the uh This would have been a whole lot better with the uh grid. I should have used uh grid I'm really digging grid by the way. I'm glad that it is here I got to start using it more All right, that's dope. Uh-oh Okay, there it goes Hmm. All right, there it goes. All right Cool next up What do we have here? Okay, that is the gallery Okay, why choose Thailand divers? So we could add another section in and You know what I'm going to actually duplicate this Because it's going to save me a lot of time uh Why choose dylan tibers? Why choose Thailand dive. Did I just say that? Oh man. All right. Why Choose Thailand divers All right, and now we're going to do Uh Let me drop in uh, let's see here Rim Let's put two on top two on the side two on the left and And on the bottom so it's It's on the bottom now. Let's drop in our inner containers Let me just relabel this right here Yeah, this is going to be highlight Yeah, I kind of just started I started going a little sloppy usually when I'm doing this I'm in a coffee shop or I'm in my office and I'm not talking by the way I'm just got my music on In the zone and I started labeling everything. I've got ocv and I have to do it I'm really trying hard to go fast here Uh highlight section All right, and then this is Going to be called highlight item All right, and let's go ahead and duplicate And duplicate this way I could see how they are going to look as I'm building them And I'm going to go here and space them out at two rim All right, and what did I have an idea here? Okay. I think I'm just going to do a basic icon box You know what I didn't even need these I uh, you know what? Yeah, let me remove those. I don't need them. I can use the icon box And keep the code cleaner save some days. Let's set this to with custom I'm going to set to 33 0.3333 And then I am going to duplicate and duplicate All right, and now we have that right there. Let me go ahead and add some spacing in it rim and I'm Going to so it's no Four what's Two point. Ah, there's a bug here. There is a bug Okay, when I right now press on the decimal Right here. It goes to the beginning Oh man four Okay, that's a little what's Oh man You guys seeing this? Okay. Do you know what I'm gonna do here? Four points. Okay No, let me see. All right And I don't even know if you have any icons I don't want to get stuck on icons right now because I really just don't have The time for let me see if I could see something here that looks uh decent Let me see here. This might not be the right icon pack for Something like this All right, I'll just take this one out right here We'll use it as like Just a sample one. This is part of my last process anyways for when it comes to uh, the icons and the graphics and things like that All right, so let me go ahead and do this here. Yeah export svg Yeah, I'm just gonna call this icon. All right. No, I'm not there upload Should go to svg icons Okay, we're gonna insert that so Uh, let me see here. Do I have something or Does The site have something here? Oh, yeah, here we go. Uh 2004 so how many years is that that is 10 19 years experience? There we go. I had to do Probably you're making me think tonight made 19 years experience And let me shorten this up. I feel it's too long by default when I do these blocks right here These icon blocks these highlights. I like to call them highlights Uh, I want to keep this because there's not much text The only thing I want to stand out is going to be like this part This is just a very quick follow-up to this. Uh, it should not be a lot of text And uh, let me style everything up html 3 is fine Primary color let's go there Uh Oh, wait, this is for the icon. Okay. I can leave it at 48 spacing Yeah, they put out 15 by default. I don't like that 15 to me doesn't fit any uh system 12 And this is just me maybe this because it's the way that I think Uh, but 12 does 12 Follows a good system. Yeah, I'm gonna have to make that smaller. We'll fix it. I'll show you that come in right up Uh, and then description. Let's go ahead and yeah, we need to set this color And then let me set my text Media see it's even still too much so I'm gonna Pop it down to right here. This is and see if I were to send this to a client I would tell the client this I give them clear instructions Uh, when it comes to right contents and we're just going to put your top three highlights Uh, what's I'm spelling something wrong? We're going to just put your top three highlights and for the description We're going to keep this link make it short don't make it any longer than this Because if they do it messes up the blocks it throws it makes, you know It messes up the symmetry of the design which does impact the way the user is taken in the content All right going back over here Uh, I might do a sense. This is lined up to the left. I'm going to line this up to the left and I am going to put Uh background on this one just a slight one Let's go back over here I want to try something out right now. Let me see here. I'm going to try out this but taking this down to I wish it would show me the the number This frustrates me right here. I wanted to see it say 15 percent. All right or point one five Please l hook me up I want to be able to see it that way I could go ahead and make sure it is consistent across my entire site these Long ass numbers man. Okay Rants over. Let me give it the two pixels. Let's give it the background Uh and the off weight very slight to barely see it. That's what I want Let me go ahead and delete and again. We'll fine tune all this stuff up later Duplicate and duplicate All right And let me show you what I mean. So I see that the small title Is too big like this one is too big So what I would do here if I want to adjust it. I'm going to go right here into my site settings I'm going to adjust it inside here So my title s which is my title small It's at 28. So let me take it down to 24 Or 2.4 pixels and then maybe Maybe bold maybe 2.2 Well, let's go ahead and try that out. Let's update it And then here we could refresh this and we're going to see it change now For all the places that I have my small titles, which are In places like right here like I could see that's much better right there Uh, okay. It looks much better. I do like it the bold And that looks super clean. Okay. I'm digging this right here All right. What's next in the design and you know, we could fix all this stuff up later like, you know Uh I would pick the top three out of here. There's five here But five is is you know, I just think three is going to be more Uh, just something somebody can consume really easy because look at I don't want people getting stuck In here and I don't want people reading too much Uh for a site like this what I want users to do is to click on the book now And it's a book now. This is what we want them to do So we don't want them to get stuck reading or trying to figure too much out We want them to figure stuff out right away as quick as possible Next up over here You know what I was going to add this but I think I'm going to hold off on it Because we already got so much going on Uh, it's kind of long already. So I was thinking of doing Or was it yeah, do you know what this probably would be dope? But this is going to take time for me to build but basically I do we're doing this man We're doing this. Let's do this. All right. Let's duplicate this Let's take this all the way down All right, and then this one let's see here. This was for best diving sites in Phuket, Thailand All let's see. Oh man. Okay. So this is great for google. We're telling google where to rank, but we need to speak to the user Uh, so what I'm going to do here is I'm going to change this uh best Diving Spots in Phuket Oh, that's still so big What I got an idea though Phuket that's going to break And okay one thing that Just part of my little CD that gets me if you ever do see one text one word in a line break Uh, it's called a widow and It's not good design practice to have that one Right there's you don't want that one word. You don't want to have widows Like right here if this was the end of the sentence Like that would be a widow and this is bad design practice right here. It needs to be fixed Uh, the way I fix something like this is to use the custom width set it to pixels. I set this to pixels Uh, that way I got full control and then from here I can see it breaks But let me round it up. So it's not remember no seven pixels, please Uh, we don't want random numbers because when you put random numbers, it just shows randomness was done So I'm going to round this up. Do maybe I can get it to 400 Yep, okay, that's good right there And then here, uh Okay, we know the Best dive spots all right and you know, let me I'm capitalized these because I've been doing that for the other ones sometimes I Put the first ones in caps. Sometimes I don't it depends for this one. I will because Uh, it's for like a more fun vibrant type of brand. Okay. We know the best dive spots Again, we got this widow. There's two things I could do. I could go ahead and use a custom Or I could even add more text. We know the best dive spots in in thailand around Do something like that dope. Okay. Now, let's see here This is what I had in mind. I had a mine a drop down right here What I put In my wireframe, you know what let's not worry about that. We're going to do see here I'm going to delete this right here and then I'm going to put Was it accordion? Toggle, let's put a toggle You know what? No, I'm going to do an accordion. All right, cool. Let's do this right here All right Okay, we got fee fee island You see here Dude, these spots are super dope as well You know what? I need to check in man. I got to make sure we're still live In here and I'm going to put this on pause real quick We only got two more sections to do and that's going to be it right here But let me go ahead and Put this on pause for a second. I need uh, I need to get some water All right Oh nicolas, what what is it? What do you have to plan as add in as a feature? Is it the default setting default to pixel rem percentage? I hope so fingers Oh, okay. All right, cool. Um, I'm so glad we got nicolas here, man. Let's you are the man Man, I'm like I see all the help you do and facebook And inside of the communities and how you're just on top of it and know everything and Dude, I'm like one of those silent people I just go in and check and read and stuff like that to help out where I can But I'm always looking at everything that you're showing and teaching man. I'm super grateful for it All right, cool. I don't see any questions man Okay, let's go ahead and do this. We're going to take this home charlie. If you're still around we're going to take this home, man All right, so let me get this back over here Bam And let's dive back in here Let me make sure okay, you can see it, right? Okay, I gotta check on my phone too. I have to like This is how I'm like Check to make sure we're still there because we've had it before where things didn't go right but uh Did we learn? From those in the past, uh, okay, I'm gonna I'm not talking as much right now. I'm just gonna do all right. What else is here? I've heard of these spots. I know this uh cruiseric spots like really popular Probably next year charlie. I'm uh, I'm gonna hit you up next time. I'm down south All right now what I would do here and this is going to take a bit of You know what I would use the nested elements right here. Okay. It's kind of late right now my my This would take a little bit more time and I would take time on something like this Uh I definitely would take time because I think a section like this could be really helpful Uh, what is it? I guess the option right to Show the icon. Yeah My plans for this Like I would take time on a section like this I would probably use the nested elements because this is a perfect time to use the nested elements If we look at the other website, I think this is a good section that'll help a lot of people Uh, and right here we have links now My thoughts and the way I would go about it is to use the nested elements So that way I could build this and actually put a button down here I can see something is a little bit buggy here. We'll fix that right there Uh, but I would like to have a like somebody open and have a call to action Right inside there and then Uh, do a little bit of javascript or something and be able to have the image change Based on the toggle. So like right here for pp islands Uh, I would like to have an image of pp and then somebody clicks on a kanaracha That it goes there and I apologize my time living in thailand for seven years and My tie is unfortunately not so good I struggle with it All right, let's set this typography Uh, we're gonna go let me try the button You know what? Oh, how's that? I don't know. I don't know how that looks. Let me just go with the regular text You know what? I'm going to go with a button. Let's go ahead and just have some fun with it right now Uh for the content I'm going to You see here keep it minimal or you know what for The title now I do have that updated one That's still kind of big, huh? Mmm. That's still kind of big. Okay. I probably would update that again Huh, okay I'm not going to get hung up on it because I would rebuild this whole section right here Next one right here. This is going to be the final call to action Now the call to action is the way this is going to work These are going to be anchor links right here. They're not going to go to other pages They click on dive course my plan is it to scroll to the dive Course section click on dive trips Then they scroll down to uh the dive trips right over here And then I want a fall back call to action section I'm going to do something like what I did right here And oh, yeah, I wanted to change this Sorry ocd kicking in again No, do you know what? Let's do the Do you know what that's still not right? Okay, still that's okay Uh Yeah, I want to have another section here where it gives another chance for People to book but again, it's going to be anchor links pulling it straight back And then I could always adjust that based on the rest of the page and the rest of the site All right, so from here Uh, okay I definitely am running out of steam Uh I'm going to go I want to go with this, uh Let me go with the medium container on this one Uh-oh What happened there? Let me copy that Paste out All right, I'll do want a background on it. Let me drop in some text first Duplicate oh no not duplicate that duplicate and duplicate All right, uh, let me add in some lorem ipsum I'm just going to snatch up something that I have here Uh, let me drop that in there. Let's go ahead and Oh man book Today Oh man, all right. I'm just putting in whatever right here I know I could probably use the right with ai This is definitely a good timing one that could uh Work. Okay. We're going to change that here. Let's fix up these styles I'm going to put that white. You know, I want this to be I think that's big enough Again, I'm going to make this white You know, I can't even see it, but I know exactly what it is and what it should be I'm going to make this p. I want to make it a paragraph Let's turn it white and let's go ahead and give it the text Medium now. Let me add the background to this Clear that let's give it a dope image Let's see here I know I'm over using this image, but You know, I'll find where it fits best like I know there's a spot where it fits best center center No repeats and cover All right, let's go ahead and Set all this up here. Okay first off this is center of line center of line, let's go ahead and Okay, center everything up. Let me give it a gap Ram Give it 20 Okay, right here. I'm going to shorten this up right here I'm going to go to custom because I want it to be a short block so I'm going to Yeah, 500 actually 450 pixels is good right here. I'm going to do the same. I wanted to break I like to look at it as designing content because I feel like that's what we do We don't just create the elements, but we actually design content as well And then from here, I'm going to snatch up this container with the two called the actions And I'm going to paste it I There we go And here I'm going to add Some more padding on the bottom I'm going to add just 20 more so I got 40 pixels here. You see right here already I put two rims which is 20 pixels But then right here, I already know from setting this up That I have a gap of two rims and 20 pixels and the design system is 20 pixels between the text and 40 pixels between the element and the text And this is a reason why having this consistent system and something that is easy to like To like, you know, like 10s 20s Having a system like that. You could just do quick calculations And I can make sure I got 40 pixels right here Ready to go All right, you know what I feel like Something's wrong There's way too much space down here. Yeah, something's wrong Oh, what's happening here? Oh, okay. I had that margin here. That's pushing it. There we go. All right I saw too much spacing happening So, okay, let's go ahead and go back. We're going to go eight two eight and two No, I'm going to put a six here I'm going to make it my small section. I'll see how that looks Let's put a background overlay and Yeah, having radio would be dope But another option is too. I could just go in here and I could create my own backgrounds as well I could go in and make my own radio Which I know I'm going to do for the homepage. I might do that for this one as well Let's see what we got here. I didn't really do much here. I didn't really style it up And in fact, all right, that's going to bug me as well too. We need an island Because if we're going to be looking at pee pee or something It needs to be a dope island. I know Charlie's got do it here. This is it, right? Is this pee pee? I don't know. It looks like it Or is this it? All right, I'm just going to put this one here All right, cool. Let's see here Man, I love doing this stuff I love it. All right, so I could already see here I'm going to create more spacing around this I want more spacing. I want like this header to be bigger and stand out I'm probably also going to reduce the weight on it. I can see it All right, I could see maybe even doing something right here I might adjust the buttons as well But all right, I dig the flow right here All right, super easy to read. All right, I could see things that need to be fixed already. I could see it Oh, no What happened right there? That wasn't supposed to happen. This is supposed to be full width In fact, do you know what? I want this to be bigger I am going to make this 600 and these 300 because all that's too small All right, do you know what? I feel we're in the right direction for this brand right here Charlie, how do you feel man? You tell me and be honest, dude. Like I love honest feedback, man This is the current site right here Oh, we still need to do an FAQ. Do you know what? I'm out of breath. All right, we'll do another Okay, an FAQ is going to go underneath this. I love FAQs. They're helpful for the user and awesome for SEO Yeah, I could see what I want to do right here I could already see I'm going to fix that up real quick right now because that's going to bother me I need more spacing right here. I'm going to make just a few tweaks guys. All right So first off, let me go here to my side settings To my global fonts All right to my exo. I don't like the bold for some reason. I feel like It's off I don't want to do light Let me try that and let me try Huh, so 1.2 That might be a little bit too big Hey, let's go ahead and try that This is where I would like, okay This is where I take a break and I come back with like a fresh eyes And I just seriously just like geek out on it like I I put what I like to call the jet I touches on it Now that was like what I first started calling it when I first like started, you know, I first started Designing and building sites. All right. I want it to be centered right here. That is dope You know, what would be sick right here too? We need a good title Right with ai. Let's see. Oh, do I need to set up? Okay, uh Right a fun and catchy uh title for the banner of a dive company Uh that is in a dive company's Website, let's see here. I need to upgrade No What? I that's that's the reason why I haven't used it that much Simplify All right, come on. Hey, I I'm gonna write it myself. Oh, see any click on it and it disappears Oh, okay. See this is uh, I'm glad we're doing this live. All right, because This is like real world stuff. All right Well, we're like in the design process. We've gone through something two hours. Your eyes are like already popping out of your head and then Use the tool and you click on it and it disappears. You can see how it affects the workflow All right, uh Let me try one more. I'm just too tired to even think of anything right now. All right. I'm just gonna put it in there Huh, let me see that's too. I'm that experience. Yeah, let me just turn that out. Okay. It's very cheesy charlie wouldn't use it uh Do you know what I was thinking like to gradient would okay? Yeah, I'm kind of like My uh ideas are starting to flow right now back here though Let me see here I think I would Images I would try Some different graphics add this looks dope Uh-oh All right, this I think I would make this one a bit bigger as well No, let me see rim and link that See uh eight two Eight two I'll make this a bit bigger to Have fun with it Big and bold. I like big and bold You know another thing too. I was considering and after this I'm Turning off this screen share and I got to take my I got to rest my eyes But I kind of dig this fun. It's a bit different. I know it's uh subjective some are gonna like it Some aren't it's not like a safe font But it could be more fun and I have other ideas for fonts as well I try to explore a bit more now, but I always uh recommend people new to air with going with something safe Things like pop-ins stuff like that from google fonts Say though, I do want to explore. I did want to see what this looks like with the Body font also like this Uh, let me see here Let's see how that looks really quick All right, first off This still is not looking right to me I know what it is now don't freeze I know what it is Let's make this bigger All right, and let's make We don't want that widow right there, but I want the text to be bigger I probably would end up playing with this for this is reason why I have to stop at this point Because I'll end up playing with it too much. In fact You know what I'm I'm not playing with any more guys Let's take one final look and see what we came up with. All right. This is what we did in two hours right here Uh All right, here we go testimonials I think one round actually I think one round is all that's needed to go through and to fix a few things up on this To tighten this up But I think like I could see like right here. I could see a background Like something just like it's popping in my head right now, you know, like, uh This is the reason why I really like, uh Kits like this, let me go find one of the kits You know, like how they use shapes like this, you know Like I I see opportunities To use some background graphics like that inside the design Maybe just to go ahead and give a little something to that white space I could see something right here. I really dig this right here Dope. All right, that is it guys. That is it charlie Definitely, I'll connect with you later. Man. I really want to hear your thoughts on this man And uh, dude, this is yours, man. You know, uh I'm happy for you to take it and run with it Now the thing is after going through this right here and let me go ahead and turn off the screen share really quick Uh, okay, I'm about to jump to the comments, but I do want to end with this All right, so just part of my process the homepage takes the longest time You know, it takes the most you can see like we spent a lot of time already in the last three live streams like Setting up and like getting ready to do this and then you know, the last last one that we did We set up those brand styles and getting those globals ready and those globals Those get adjusted on the homepage on the homepage is where everything is being dialed in That's where because we're actually able to see it live on the screen Now if I'm doing a mock-up on figma, it's completely different But for designing directly inside elements or here is a way that I find like to go about it to get professional results Uh Once the next like I think it would take me like one or two more sessions I would go through it. I would dial it in If like say I feel like the buttons maybe need to be rounded I would change those and some like globals and some of my brand styles Uh And then once all those are dialed in on the homepage the rest of the pages are pretty much a breeze Because everything is defined for the rest of the site. So charlie, uh on this page I'm going to spend a little more time and I'll hook you up. All right, uh And I really appreciate you putting this out there because it's not easy to put your site Like your own stuff that you've done out there and just let somebody completely break it down As we did here. So I'm very happy to help out after You know, this is the final touches like the touches are done on it like you're you're already like, you know, uh For those of you out there don't know like I know charlie's very adept He's very good at learning like when I looked at the back end of the website I could see he was following a lot of good practices I could see he was learning from some good people like I saw the way he set up a speed Optimization was how emron teaches to do speed optimization. So just by seeing that he did things that way is show me that uh, he knows how to learn follow instructions and And you know, I have a lot of confidence He'll be able to take this page and apply everything to the rest of the pages Going forward. So with that, let me go ahead and see now Skating choreographer. I can't go to Athens I was planning on it. I got my ticket for it. The plans were to go to Athens Uh, but I gotta go see family. Uh Yeah, it's overdue. I gotta go spend some time with family All right. Okay. We got a question. So ruben has a question on the hero section And the main attention to the visitor the image Or the text. Ooh, that's a really good question I believe there is a hierarchy to it. Uh, the most important Attention would be the call to action But what is leading to the call to action? So it all depends sometimes it is the image or the graphic now sometimes When things are done really well and not like look at nike nike does this very well And if you start to look forward and other like big brand designs, you'll see how a graphic Is pointing like it angles and it directs the eye to a call to action So when you're using images and graphics in that way, that is You know, that's top of the hierarchy because that graphic is going to be the first thing people see You know, it's the first thing that you whenever, you know, somebody is Being presented all this stuff. They see that graphic and now that graphic is done right Then it should be directing the eye to a call to action After that, it would be the title the headline forget about the text forget about the subheader all that stuff that stuff just gets scanned over So yeah, that's where I would look at so it all depends on the design like this though Uh It's all going to come down to the type of image and the way the image is directing the eye Versus if it you know versus the headline it could be a super dope headline though, too If you don't have an image or a graphic if you got a headline that really stands out Like as soon as somebody sees it like you can have no graphic But if you have a super dope headline that is going to draw attention It's going to capture in the user and it's going to make them interested. They're going to they're going to dive deeper Dive deeper you get it. See I've been I've been on the diving website too long Hmm Oh, where are you from? Uh, and what's your name skating choreographers really hard to say? Uh And I feel like I know you like somewhere else and I should know Uh Do you have a a shorter Candle uh, but where were you located at though, right? Let me see here. There's any other oops. Let me take this down Hope that helped out ruben Ah, nicolas. Thanks, man. Uh appreciate it for sure when it comes Yeah, I think the ai feature could be super dope and it just you know has a few Uh quirks it just needs to be tweaked and again a lot of these things they come from You know actually getting real live user tests and isn't here really in it Like, you know, uh You know, you could take a car for a ride and it could feel good the very beginning But isn't until you take it on a long road trip that you start to notice like hey, you know Like it doesn't handle hills that good and stuff like that okay, so You're seeing the video on a small window and can't see the white text because of the image Yeah, yeah, I know that's going to have to be fixed my plan for the image on the banner like First I always do An accessibility a contrast check. I always want to make sure The contrast now it's easier for like doing buttons because you got two you go like fine But I use color droppers Like if I'm like questioning could this be seen because I don't really like to put Texts on top of images Unless if I really really shade it out So again, like what I would do on this banner right here once I've selected the graphic the home page I might align everything to the left and I might draw a lot of shade because my plan what I was planning to do with this was Actually align it to the left and put the shade but kind of like curving around And that way too the shade goes down and covers because I wanted the uh, I want the Testimonials on the bottom on the banner. I want those to have a solid background. Why isn't this I'm having a focus issues. Yeah, so my plan was that I know it take a little bit more work I would tweak on it But yeah, I wanted a solid background I saw the dark blue behind the testimonials because I think it would get them to stand out So yeah, I'll probably put a curve and I maybe would use figma And put an overlay on it and then export the uh the png from that Jimmy That's right the raffle Oh, man So sorry for that I will never forget that man that raffle Yeah, I made some uh hard learning lessons, uh about doing live streams and managing software And stuff like that. I feel like I'm starting to get it down. But yeah, I'll never get that night I was so excited for it and I think I overly prepared And just blundered so much. I think everything cut out too. Like the whole software cut out that night It was it was crazy, man All right, cool cool. Yeah, I hope to see you guys over at uh At uh work camp if anybody's gonna work camp asia, man, that's though uh You know, I went to work camp or our work camp europe. That's great. I went to work camp asia. I had the greatest time over there All right Yeah, it's all good. It's all good. All right guys, so uh, I hope this was helpful You know, I'm glad that we're able to bring this to uh a full circle I got some things coming up though. All right, so first I am going to be traveling for the next few weeks Uh, so I'm not going to do a live stream for three weeks not until I come back I want to spend some time with family. I got some family stuff that you know I really want to go and get some quality time with them Soon as I come back though three weeks from now want to be bringing on people So I got I got I actually got a lot of things I want to do so Recently I switched hosting. All right. I moved to run cloud setting this up right now I switched my security stack. I switched my speed optimization stack So I got some Like I want to start sharing this stuff and I want to start walking through some stuff and geeking out on some stuff Also bringing on some other people that are going to be geeking out with me All right, so I'm really looking forward to coming back because I'm really digging and loving doing this right here uh I'm really I'm glad we're bringing us a full circle right here because I'm excited for the next things coming up I really really am and uh With that, I think we want to sign off now. I think it's time to go to bed Oh, wait ruben got a question. All right, I'm going to make sure I want to answer everything because you know, this was this it was for Live so there was a lot to unpack Ruben asked What about the colors you fixed for the design and the images Given by the client how to manage to keep consistent I'm just thinking about this real quick all right, so for the colors Like there's a couple things we need to set All right, so first off whenever working for a client always ask them. Do you have a brand guy? uh that's Bro, that's one of the first things I'm looking at because I want to know the kind of flexibility I have When it comes to the creative side Ask them if they have a brand guy. They say yes You know I ask for and I ask them how flexible are you with it? Am I able to change anything in it? And I find that Most of the time clients are like, yeah, you could update or you could change it just not too much Like they don't want to revamp the whole brand. That's quite overwhelming But a lot of the times also feel like, you know, maybe the brand styles were done years ago Uh wasn't done by like, you know a big branding agency or things like that And they want like that new look and feel so I'm I'm searching to find out and then I follow up when they say like You could update and I ask them like how about the colors Can I change the colors? Are you open to me updating the brand colors? So it's up to it. That's why I want to establish with the client Uh, I find though when I'm working with a bigger brand like a global brand Uh, you know somebody that's well established. They have a set brand guy Uh, because they're they're big. They're running stuff all over the world Uh, and when we get a client like that, we just stick with their brand guy We have to we can't veer off of it because you know, they got branches all over the place things like that Uh in a case like this What I would do is first before going too deep into the project Uh, I would go through the client and see what their feedback is When it comes to the colors, we're going to keep it minimal. Uh, and then There's no more colors being added once we get the approval. We're good like right now Let's say I was working with charlie And I would like here are the colors that I'm proposing gives me the green light. That's it Those are the only colors are being used And I'm also going to make sure that the colors that I choose for a project are in line with the brand In line with their assets like images and also that are going that that is also going to resonate with Their customers with their core audience Hope that answers it I can't believe I'm actually thinking asleep I'm barely Guys my sleep. I got a puppy. Oh, I can't believe I just got a puppy I'll show her soon. She's not allowed in the office yet. I don't want I don't want messes all over the place. This is my sanctuary right now But she's like this big and uh, yeah, we're not getting too much sleep Ah, thanks nicolas, dude, uh I might I probably will do something like this again. I want to keep exploring You know, I'm learning as we're going. So I'm definitely open to it. If anybody has Uh site symbol like reviewed live on here. I mean not saying we're going to do a big old breakdown like For lives on it, but just like a simple like, you know, let's go ahead and take a look at it together And see how we can help. Uh, let me know, you know, hit me up. Definitely open for it all right guys It's been real. So thankful for all of you for sticking through this. This really means a lot. It really really does So I hope this helps out and I'm going to wrap it up now. I'll see you guys later. All right. Cheers