 All right, everyone I'm gonna give it a couple minutes going to make sure everything is good Shows I'm live. Let me just run some tests Yo, what's up everyone? All right, let me know if you guys can hear me. Okay Go ahead and shout it out inside the chat. Let me open up this chat right here. Close this down All right dope. We're here. We're here. I see it Cool. Thanks, Charlie. Charlie. We're doing this man. We are doing this We're taking it the whole way Pez so good to see you so good to see you always Awesome. Awesome. Okay Let me fix just one thing here to set it up for a screen share. I want to get my Bottom toolbar out of the way. How would we get the full desktop view? alright, though Guys, I think we're getting the hang of this wait wait Where is that coming from? Okay So one of my tabs is playing Okay, it was a Bluetooth on my phone Alright, just as I was saying we get in the hang of it. You see what happens. All right Try to get to cocky and this is what happens. All right. It's all good. It's all good We are doing this. What is up everyone? I'm excited for this. All right. What's going on in the chat? Who's here? Charlie Pez James. What is going on man? So good to see you here James Hmm All right, check it out We're gonna dive straight in today. All right. We're died. We're diving straight in last week we broke down Charlie's website we broke down a website a real life actual website and the whole goal for this mini series right here that we're going to do in this life is For us to use a real-life case of a website something that a lot of us will get whether you know We're going a lot of a lot of times when we get requested for websites a lot of times their rebuilds or improvements Those for me and my experience are the most use cases that I get for project So what we're doing here and the goal is to use a real-life case study to use a real-life website applying The steps and the processes and what we could do to improve websites how we can improve it We're looking at a few things. We're looking at how could we improve the structure? How could we improve the design? How can we make a website more effective? So let me really quick I just want to see okay Everything's good here in Thailand Charlie So all right Let me just get a settle I'm getting in the zone I'm getting excited because this is the kind of stuff I love to do I get to do it live So while we're doing it, you know, you're gonna be able to see the process that goes into it You're gonna see my design process You're gonna see how the design thinking is taking place during the process also This is a very good opportunity to be interactive to be able to engage and ask questions Because the whole point of this is for us to learn us to learn together So at any point during the live and as we're going through it There's something you're unsure of or if you have something that works for you drop it inside the chat I'm gonna be stopping periodically checking the chat just to make sure that we are getting all the questions answered and as I go through it now in the tool I'm using I'm able to start and save Some chats Some some some a message I could save your question that way we could come back to it when we take little pauses Throughout this next step Alright, cool. Whoa. Oh god son all the way from Africa. Man. I love this, you know, I mean All right, I'm just kind of like, you know, just throwing out there one of the many things I love about web creation and doing what we do. I'll back before I was doing this I was stuck in a little bubble. I mean was in LA a big city But still just stuck in it like the world was so small and when we get out of it and we're inside this web creation Man, the world has opened up I've had so many awesome calls but people all over the world people all kinds of different countries Man, and it's just sometimes I just gotta like pinch myself like wow I can't believe I'm meeting cool people in all these different countries and in all these parts of the world We're connecting where we have the same interests the same passions. I mean just one of the 1001 reasons why love doing web creation All right, cool. So I'm checking it out over here I just want to get everything set up because we are gonna dive right in. All right. You guys ready? Cuz check it out. We're only gonna be here for one hour last week We did too, but I'm not as young as I used to be in doing two hours late at night It kind of kills my productivity for the next day So what we're gonna do is we're gonna focus for one hour We want to do this for one hour and then next week We're gonna do the very final one and same thing. We're gonna keep it out of hours So what we're gonna have to do in order to do this is to maximize our time and productivity Dave David is so good to see you here This is super dope. Oh man. I almost Almost broke my element or mug. I got the new mic arm right here. So now Now with this new mic arm here, I could actually work I don't know if you guys notice but before I had a little stand It was like awkward trying to type. So hopefully that helps out, you know, let me make this a bit brighter Yeah, I feel like I'm looking out here. It looks kind of dark. All right, we'll take that to 8% All right guys ready I'm ready. I'm ready to get in the zone. Let me put this over here So just to catch up everywhere. We're going to do a very very quick catch up I'm going to share my screen at any time if audio cuts out or something. You guys can hear me Please let me know. I'm going to keep a very close eye on on this right here to make sure that Make sure that we don't have any downtime. All right now Well, we did last week was we broke down the scuba diving center and real cool. Oh, oh Snap we got a break over here That was not supposed to happen You know what I didn't put one in here It's no worries. Let me just see here the pages. I want to see you know, let me go here to elementary tools. It looks like CSS is there we go Still got a few breaks going on This is it inside. Let me turn off the caching plugins here and real quick. I'm going to jump back over here Let me jump back here and I just want to check in with you guys Can you guys see the screen share? Okay? Are you guys hearing me? Okay and seeing the screen share all that is a working I'm going to wait till I get a thumbs up before I turn the screen share back on Okay, I did disable all those, you know, I did some updates on the plugins All right, so you sure is okay. All right. Cool. Let's go ahead and do this right here. Let me Maximize the screen share. All right, cool. We should be in there right now All right. Looks like a few things broke. I did some updates on it, but uh, do you know what? I know what happened. Okay last week. Okay. All right. All right. I'm caught up now I remember what happened. We had issues with fonts. So What we did last week and this is a tear down buildup first thing we wanted to do is go through this side We wanted to break it down. We wanted to look at any potential issues that the website had like what needs to be addressed We wanted to look at things that are going to hold the website back from reaching its potential I mean we looked at the design, but the first part we looked at was like the positioning the layout and we identified a few key problems Then we also did that in the design Now some of the key problems. Let me carry this over here. All right. Oh All right, some of the key problems were let me actually move that there. There's some stuff in there All right, there are three key problem areas number one was a lack of human and emotional connection So that was the big one. That was the one I felt like really stood out All right. So what we wanted to do is make more of a connection now There's a lot of great pictures. They got fantastic pictures by Phil We could put more people and build more of a human connection The next one was lack of trust if we're looking here. There's no Testimonials, there's no like badges certificate. The lack of trust is not here And I do know from looking at this business. They do have trust like they have a whole lot of reviews They got really good star ratings inside Google reviews They're fully certified so they do have a lot of opportunity to show trust and then the next one is going to be inside the design It was just an inconsistent design. I mean for example, let me open this up right here You can see I'm just using this as a guide right here if we scroll through, you know Nothing is there's a lot of misalignment going on all throughout the website Even things like this, you know It's just a whole lot of Alignment and inconsistencies inside the design now. I Identified those as a three primary problems that need to get solved Whenever I'm doing a tear down or I'm like really looking into a website. What could we do? I don't want to create a huge long list. I don't want to make like 10 15 23 and 20 things we need to do I said I like to focus in threes. I I Operate on threes. I feel three is a number that is that is easy to digest You know three is like one two three a bc This is something that is much more achievable than stacking on a whole lot of things and if we were to go ahead and Hit those three things if we were to be able to let's say let's go to the inconsistent design Which we are going to work on today. We're able to solve the inconsistent design Well, then we're going to have a clean polished professional design by doing that And then if we were to we Fixed up the structure on this and for to add the human connection the emotional connection If we're to do that by also adding trust and trust elements to this landing page by doing just those things This is going to help this business out tremendously It's going to help them out big time because it's going to people who visit are going to be more likely to Reach out. It's going to help conversions I mean now there's a whole bunch of other little things But I don't want to get into it now really quick to catch all you guys up if you did not watch the first one We did find an issue here which took a bit of time and that was in the fonts There's something broken inside the fonts and the way the fonts were uploaded And so what we're going to do today is start over completely from scratch And that's the reason why we're seeing some breaks right here. So we're going to have to change all these fonts There's something I think it was something corrupted inside the font file Just the way it was done. So let's go ahead and get started before I do. I'm going to jump right over one more time Let me hide this and see how is everything going is everything cool. All right, cool. Nicholas. What's up, man? What's up? dope dope David, okay, so I did not do the Elementor update yet I did some updates should have done a backup to but it's all my local We're going to be messing this thing up anyways big time if it was a client site though If this is a client side would have been much more careful Absolutely, you know, we would have ran backups and have backups of backups In fact, I do have the backup file already. So I'm not really concerned with it But for the Elementor update me personally when we get a big update like one from 12 to 13 I like to wait about one or two weeks I like to wait a couple weeks because I just find that quick patches usually come out like there's already 13.01 Which I'm sure is already patched up a few things. That's just me. I like to Let other people test it out, you know, see if it breaks the Elementor fixes it up real quick Just those little tiny bugs, but here's the thing bugs happen all the time We live in a world of bugs the whole thing of development are fixing bugs, you know And I'm not really worried about it, but I'm not going to do that one right now I'll wait till next week to start testing that out. All right, cool. Let's go ahead and dive into this Show this on my screen. All right, we're good And then I'll check back in for questions. All right So we have those three issues the lack of human emotional connection and a lack of trust We're going to tackle that next when we do the wire framing and structure We're going to restructure things up before we do the restructuring though I do want to put together a design system that way we could get some consistency going on over here now I want to show you like right now I'm working on my own personal site the new Lightbox Academy site even as I'm working on my site I'm creating a design system something that I can follow now I mean you could do it the fancy way inside figma if you are a figma user It's a great place to do it, but also look at I start right here inside my notebook I do most my wire framing and most my stuff just inside of a notebook a lot of times That's good enough and I think quicker when I'm drawing it out But for this it does help to have the visual now the way this works And the way that we're going to use it first off things like border radius is okay This one's got sharp corners are sharp. So it's got zero border radius is Which is good. Alright, so that's cool right there, but sometimes we'll see a site. I'll have like sharp corners I'll have two pixels that'll have 10 pixels. You might have some they're super rounded What we want to do is we want to make it consistent. So right now I'm doing max and min This is again a little bit more advanced. This is for variables But usually I just set it up for one I stick with that same border radius throughout the whole site for all the my cards and images like right here This one is going to be 12. This is for my site. We're going to do this for Charlie site as well The next one are going to be the gaps. I want to make sure our gaps are consistent as well We're going to simplify again min and max This is, you know, using more variables clamping and stuff like that But to simplify it, we're just going to set one gap keep that gap consistent throughout the whole site I usually stick with either 20 or 24. Those are my sweet spots and what that gap is going to be It's going to be like right here. This is a perfect example We got this really wide gap here in between these two images But then right here in between the rows we got this very small gap So what we want we want this to be equal right here We want it to be even and then we're going to have the same gaps like right here. They're all big and So one so we're going to keep that consistent. Oh Okay, Spotify's telling me have that on let me check in. Okay. My computer did something weird All right, let me see I want to make sure can you guys hear me before we keep going? All right, let me hide this give me a thumbs up Yeah, you know what I try to put myself in that corner, but for some reason Huh, I'm trying to do it But it wasn't just working out that way today That's all right. You don't need to see me in here. Okay cool as long as you guys can see the screen share and listen It's all good. It's all good. All right. Cool. Let me jump back into this I'm getting the hang of the software right here and navigating. All right dope. All right, cool Next up right here. We're gonna do our buttons as well. Oh, that one's not a line. I have to fix that right there Okay, so our buttons I try to keep my buttons minimal as well. I don't want a bunch of different types of buttons Usually three buttons. Maybe even two will work. I think for Charlie's site two buttons will work now I've been messing around with this. Okay. I still see something easy to fix I'm currently working on this myself right now, but this is what we're going to do We're going to define his buttons we're going to make a few of them and then we could just reuse those buttons across the site the thing is if we have Buttons that are like some squared some rounded and they are all over the place and makes them more confusing for The end user to identify where they should be clicking on and where they should look at by keeping buttons consistent It's going to make it a lot easier on the UI and the UX also Want to do a couple different versions like a primary and secondary we want one to really stand out and I'll show you that probably like when we start implementing this But always we're going to have what I call the peacock button the one that stands out the one is flashy And then a secondary button one that just lets the users know easily like hey, this also does something as well All right, so this one right here. This one is super important This is our containers right here or sections and what we want to do fun We want to keep them consistent. I don't want too many different styles I don't want a whole bunch of different types of spacing. We're going to keep the site spacing the same on everything 20 pixels or 24 pixels those are really the sweet spots and we keep it the same like this Because it's going to be great for mobile. Okay, when it shrinks down, it's going to be less work for you to To do all the mobile and you know doing more changes on it Just do it once on desktop set it at 20 When it goes down to mobile, you're going to have that clean line But by doing this this is going this this simple trick It's really not that complicated by just doing this one thing and following it through the whole website We are going to fix this issue happening here on the sides where it's all choppy We're going to have a clean alignment this left side right here should be a straight clean line all the way down All right next up we're going to have our cards We could identify our cards and then our text right here as well So we're going to do the text and well, we always start off with the text actually Okay, what I have here though is our spacing Sometimes I do 2020 20 sometimes like right here. It's just because of the fonts. I'm using for my personal site I stuck with 24 to add a little bit more and if you look at my numbers You're going to see I do everything by force. All right, you can do things by 10s by 20s The whole point of it is to find a system that works for you and stick with the system I've been doing this over and over and over and over where it just became second nature for me I stick with fours usually it's like 12 16 20 24 and I'm keeping everything there, but a lot of times it's like 12 2024 well, I hope that makes sense right there But if your thing is like 10s and you just want to do everything 10s That's great right there if you want to do everything at 5 5 10 15 20. That's cool But I would try to stick with even numbers I just find it's a lot easier to do the math when you're working with even numbers because every now and then I got to break Out the computer and do math in order to keep this system Working alright, so what I have here is I got my subheader I want to have 20. Okay. This is another thing too and this is all personal preference right here It's going to be fully up to you, but I find that because I do work with other developers That having the set system works better because look it with Elementor we could go Padding top we could go padding bottom we go margin top we could go margin bottom Choose one and stick with it I chose padding bottom and I go padding bottom on everything. It just makes things so much easier So like right here my subheader I'm going to put 24 pixels Padding on the bottom the header is going to be 20 pixels on the bottom If I'm doing paragraph by paragraph, it'll be 20 pixels But if I have a paragraph like right here an element it could be a card It could be another section it could be a call to action button I'm going to put 40 and this is just a system that I created right here If you're following along and want to do the system for yourself find what works best for you and just like Detail it, you know, write it out You can just do it in a notebook as well and just write out your system and then update it as you're going through your process Now there's one other thing. I forgot to put here and That was a width Container width. All right, I stick with just two I picked two container widths now. I work on a 12-column grid a 12-column System and 12 columns and then yeah, well Okay, I did that in the last life. I'm not going to do that right here, but basically my main My main container width that I use is 12 8 pixels now, this is again personal preference right here final works best for you. I like 12 80 1366 is another another one that works really well, especially for larger screens I tried not to go too small though I know like the default elementary was like 1140 or something for me I feel that's just too narrow and it's a lot more Apparent with me because I'm working on the 32 and screen, but this is just what I like to work with it works Well for me. So that's the large Let me go ahead and group that fix that up later and then I do one more and the other one I do is 846 pixels and that is my small one That would be for let me see here. That would be for a section like let's see here. There's going to be some small sections here Maybe the FAQ the FAQ doesn't have to be this big, you know, like you know You got the full with sections of big ones with like, you know With like a paragraph and text we want that to a paragraph an image We want that to be full But then if we were going to have like like smaller paragraph smaller sections Well, I'm going to use a 46 and Let me see I could go ahead and show you the reason why the reason why I do this Just in case if you missed it on the last one right here I always start with a 1440 board. Let me go ahead and add my layout over here I'm going to turn this to columns. I'm going to create 12 columns here I'm going to keep 20 pixels as my gutter because that's what I usually use for my system And I'm going to add margins on the side Because when I'm designing a one spacing here now when I look at this here and I look at the full 12 columns we can see here. It's 1280 When I go down here and I turn this into an eight column grid right here a column section oops We're going to have 846 so that's the reason why I choose these two numbers right here and I stick with them and The main thing is when we are putting together a design system keep it minimal The less the better the more you have the more Chances you have to make things messy to get confusing the more chances it is to confuse the end user The less that you have the easier It is going to be to keep that design consistent and clean and at the end of the day a Consistent and clean website is going to win now over one. That's trying to be overly creative or You know like just trying we don't have to try to go way far to try to make a website for rewards First get down the basics like first make it like nice and clean. All right cool before we jump over to the next step I am going to Take a look and see are there any questions and I need to take a sip of my tea as well. Oh It's kind of quiet in here. What's up, everyone? What happened? Don't tell me it was on you again while I was going through all that All right, just a lot of thumbs up. All right. Are we still here? Is everyone still? Are we still alive? Guys got to let me know if you're live. I need to know case if you don't know like Being in your room talking to yourself alone in front of a camera and watching yourself on the screen They start to question your sanity. So I kind of need you guys All right, thanks Charlie. Okay, cool Mmm Thanks, Pes. I needed that reassurance. Awesome. Awesome Okay, let me close that up. Okay, let's go ahead and keep this rolling. All right. Let me go back over here Okay, now where to begin on the site once we have all this like where to start What I want to do is I want to create a branding page I know we started that last week, but it was a lot. It was late at night in I felt like You know, it was just getting too late for me and I was getting a little spacey on it All right, so we're gonna start all this over right here. I'm going to Move all that right there. All right, cool. So the first thing we want to do is we want to get I always started off with the basics I always want to get our our Text I always want to get our font styles and then I want to get our color styles as well All right, so we got our font styles right here. Let me create something for our text right here for our colors I'm sorry Let me create some spacing See, this is how I follow the system right here. I'm going to be following it gets so consistent and repetitive over and over And then if you do know CSS you could always just create a class and Define these rules and it's going to save you a whole lot more time So, you know, he did something like that with living with pixels and it to me It is the best way instead of going in here over and over You know, if you can't do that. All right, I also want to go over here and give my gaps All right, dope. Let's go ahead and I'm going to drop in a spacer in here Let me give us some space. I'm going to make this to 50 I'm just setting up the stage for everything right now. Let me copy that Paste All right, we're going to get the basics I'm just setting things up right here and you can do this on your client side as well This is a great way to show your clients the thought process that goes behind Their design. All right, so you can see right here the colors that we have first off All right, check it out This is the reason why I'm not adding colors in yet because we're about to delete all of these All right, we're about to start from scratch. Let me first update All right. So for the global fonts We need to fix all this because the font that was added I felt was the file was corrupted People did ask me in the last ring like show like actually adding a font We're going to do that and it's actually kind of quick to add a font So we're going to add a brand new font to all this and delete all of it. I mean All right, cool. I'm just going to leave it right there. Now going back to the colors Oops So for the color palette, it's just that's one of the things I'll wait. Let me see here I need to open up a new tab So we could get a reference All right, let me open this up so I could toggle So one of the things I identified as well inside the design was the colors like up here We had the red we have the what's app green right here We have like this blue, you know different green and stuff like that. Yes Funny things are starting to happen. I Have to get all those We got this orange right over here You know light blue right over here So colors are kind of all over the place and then when we look over here We can see why we have all these different colors going on. I'm just going to trash them I want to start all over because we're going to define our colors. We're going to make it more minimal And look it even for my own website. Look it. This is it for my side right here Like I have this set right here on the left This is the main colors that I'm using and usually for 95% of sites these are all that is needed. I mean we could add shades But if you are still in your early days of design still learning still, you know Haven't gotten to like design theory and like things are starting to fill off with your designs Stick with a color palette. That's minimal like this. I have a second every one, but I also do some more advanced design I know how to use the secondary colors But for anybody else that's in the newer stages, I would not attempt this because I couldn't do this just a few years ago There's no way a few years ago. I wouldn't try to use all these colors I wouldn't have been able to so I didn't understand how to add in other Accents and other highlights. It's it needs to be done so carefully and thoughtfully Alright, let's go here. Let's keep deleting him Like right here. We got the FFF white white, you know, like straight white I try to not use hard whites like FFF or hard black 000 it's just I feel like both of them are just too harsh always want them to be off a little bit All right, we're gonna delete that Now we can't delete these right over here. Okay We're gonna make these our primary ones right over here. So I'm gonna make this our Primary then I'll change the name. I like to change names and things and this one will be our secondary Then I'll give it a new name I don't even like using primary and secondary like check this out These are my font names like this one's blackberry. This one's blueberry. This one's mint berry You know, this one's kiwi berry I like giving weird names to my colors because this is where us as creatives We could get creative and have some fun. And this is where to we find our own styles and Just have fun with it. Okay, cool. So Now we need to find our colors What happened here? Okay, let me update this so there are Resources we could go to for one of the ones I like is let me pull up my Range rock. This is where I store all my tools right over here. You see Humance is one of my favorites right now that I use for finding color palettes. I Used to use like coolers and things like that There's something about humans where we can actually see The website and we could get more of a visualization on how it's used Right. Okay. Here we go. So one thing I did like inside Charlie's website One thing that stood out and also I do have to point this out that Before doing this. I was researching and taking a look at a lot of other Diving websites things that were similar and Trying to get ideas. You see, I really like this color scheme right here. This could work All right, first off, we need to have blue blue needs to be a base. This is This is a diving company on Phuket, which is like super super beautiful beach resort Like post car type of stuff. I think this color palette right here works really well You can see you're like this color palette I don't think I would go with the mouth. Yeah, I mean I could go Just all right. Here's another challenge too. I know we're kind of bouncing around but this I feel is A challenge that a lot of business owners have When they are looking for their websites for they're looking for what direction to go when a lot of times They do what I did right here. They research other diving companies or other related industries We had a client that his industry He built his site himself And he got his inspiration from other people in his industry But the problem was the people in his industry were all homegrown Construction type of guys building their own websites like nobody had a professional designer come in That knew how to do branding that knew how to do positioning knew how to choose colors and do all this stuff Nobody had that that that inspiration was not there. So when you do find yourself Like trying to find inspiration and you're looking inside your clients Market you're looking in the market and you're going through website through website through website and they all look a lot Like really amateur looking like they're just homegrown bill Start to look outside that industry. You could take things like right here. I love this I love this background image right over here. I think this is one I would use I like, you know, they have cards We could use parts of this right here for our inspiration But then we could find a professionally built and designed Website to use as our guide on how to put all of this together So don't feel like you need to be stuck inside your industry now I'm going to take a look at this right in fact, you know what? I'm gonna take a little shortcut right now. I I'm kind of inspired by this right here I could kind of see this working and then one other thing too was I saw that orange working Somewhere else as I was going through this. I'm not red. I don't think red would fit in any way Was this the one? The orange does look kind of dope. Okay. Yeah, like right here I thought the way that they use orange because look at in here The orange matches a lot of the fishes. I thought that that was done really well the fishes the coral I think that color could work. So you know what? Let me start a fresh one right here No, not import. I'm just gonna start something fresh right here Two three Let me do one more. All right All right, cool. Now the main one needs to be blue So we could find a blue then we could start off with there So I think blue, but I also want to do a modern blue. All right, so a good way to tell if it's modern I mean, look at that hat. I want to blue like my hat. I feel like that's modern modern is colorful of pops It stands out something that was about five six ten years ago was more muted more pale It didn't pop out as much next up. And this is a reason why I downloaded that logo because I could use this All right. Okay dope dope dope and then the next one Let's see about some kind of an orange All right, and then what I just three if I was gonna do another one, I do like a background and Let's move this to the blue I'll just move this just a little bit. There we go All right, cool. This would be like our black and let me put a stroke is so we could see it I'll make that's real blue So that way we could kind of get an idea So this is where I would start off with my color scheme right here now for the fonts Let me do one more We're gonna make our text only two different colors I really don't want to make text a bunch of different colors We could do a couple things we could either make it Where did that color come from? Oh, okay, that's theirs right there Which is actually really good. You see that's what they did here. They chose a blue The blue of the black it wasn't too black and that's what you want We don't want black all the way over here. That's too hard But we also don't want it to be light and gray So like we wanted to decide this area, but since we are leaning towards a bluer theme We could always try making like a blue black and using that for the text It's good if we're gonna use blue in the background and we're gonna have Like underwater stuff. We're gonna have ocean and we're gonna have beaches scuba diving. I feel having a Black that is more in the blue spectrum is going to fit the design a whole lot better All right, we're gonna start with this right here And let me I gotta make sure my gaps are all even All right, let me center that okay This is just for inspiration right here. This is a good good starting point. Hmm All right, you know what now what I want to do is I want to test it And a good way to test it. Okay, we don't need that it's over inside here The good way to test it is inside humans. All right, that's the background. Let me put this color as our background Right here because we're gonna make it a bit light All right, let me lock that right there Okay, it looks like That's the font. Okay, let's take this for our font See how that looks. All right Cool. All right. Now. I'm on the 4k color graded Monitor right here like mine is made just for design and I could see there's a big difference right here from this Really dark black to here might be hard. It's one of those things that I've I feel that a lot of times It's going to be something we can't put our finger on but it's just sort of like a subconscious thing really quick though I've been sharing my screen for a while. Let me dip in over here and see if there are any questions All right. Any questions come up fish and corals Charlie, that's it man fish and corals. Let's play with that. That is like So people come out for You know, like a lot I know that a lot of people coming out to Phuket are travelers and a lot of them probably are new they see the beaches they want to go out and You know, they just like I snorkeled out there and it's like snorkeling the side of fish tank. It's so crazy though Pantolo. What's up? All right. All right, cool. Let's keep this rolling. Let me think it's already 42 minutes. All right Okay, let's see here Let's jump back over here All right. Now we're gonna play with our primary color right here and then we could adjust it Okay, I'm going to use that right here. All right. I can see it. So I feel now It's a bit more on the purplish side now that I'm seeing it here Use in this way and Let me see here. What should I do? I think we should lean more towards this. I do like this mint color right here Wow, that looks clean right there. This Kind of looks like My hold on. Where's it at? Okay. It's another design system. All right. Maybe I should get away from the mint I might be biased towards it because that's what I'm designing. All right, cool. Let's go ahead and Let's go ahead and move this More this direction. All right I felt it was a bit on the purple side Right here we go. We're getting a more of a true blue side right here This mints. Hmm What would happen though if we put in the orange? I do that here I did it here first lock this in Hmm. Okay Now look at when it comes to using the colors, we're going to use the uh 60 30 10 rule And with the 60 30 10 rule is 60 percent is going to be the primary. That's going to be this blue right here uh This orange would be a 10 for sure would be a 10. This might even be 60 This might be 30 and this would be 10. All right. This could work I'm going to do here though. This is what you could do on your own You could go ahead and find the colors that you like and start to generate and try to get ideas I just keep generating I could go ahead and Switch what I'm looking for if I'm not getting what I want to get All right, you know what I'm going to do. I'm going to keep these right here I feel very confident to go forward with these. I'm going to update this color All right. Okay. That's more of the deep blue. I feel that's going to be more in line with what charlie already has Uh and nothing else was adjusted. Okay, so let's go ahead and turn this one off Now going back over here to the board. Let's go ahead and give it the colors so First of all, I'm going to do is go to my side settings to my global colors And we're going to give them right here. So this primary. I'm going to make it my blue Let me go over here We're going to call this ocean blue The next one the secondary let's go ahead and give it This deep sea green. I'm going to call it sea green I'm going to call it sea breeze A little creative tonight. All right We'll see if we can make that work if we can't we'll remove it no harm done at all We're going to keep our text and our titles the same color. We don't need to make those different colors All right, and I'm going to call this uh, let me see I'm just going to call this fonts. Let's keep that simple. So if somebody else is on it, they know that this is fonts and then over here We're going to give it this highlight right here. I'm going to call this Clownfish Color of a clownfish and then I'm going to create this Uh off white right here Not that creative. I know I know All right, now let's go ahead and save this And let me create a new container So we got uh, what's happening here? We all right, so we're going to drop that in here. Let me add the style 20 100 and 100 All right, cool. Now we could go ahead and duplicate make five containers Let me go over here and give this a gap You know when we start doing this over and over and we're going to define this all here before the end of the stream Once you do that use this going forward it changes everything the design just Completely changes. Let me throw a spacer in here I'm going to make this let me make this one now 200 and Copy paste All right now going back over here to my background Let's go ahead and drop them in Now I know this is extra work And you can see it's not something that could just be done in 10 or 15 minutes There's a whole thought and planning process behind this But by taking these extra steps This is what is going to make the design just stand out a whole lot more This is what's going to create a professional style design right here with these few extra steps All right, cool. We got our fonts. This this might take some time Hmm, you know what? Let me jump ahead right here. First thing I want to do is I want to Let me create our sections right here because I feel this is Okay See This is super important to do to start off with All right, let's go ahead and drop in the inner container so that way we could see it All right inside this inner container, you know what I'm going to do I'm going to copy this style I'm going to paste it right in here Now we got this extra space inside here. Let me drop in a heading Let me create a background right here so we could actually see it All right now inside this heading. Oh geez. We need to fix these fonts up. All right We'll have to get those coming up next for sure. What I want to do inside here is define it. All right, so Let me see what we do. We're going to define it just like what we did right here We got our large medium and small. I'm just going to call this large Container And then you could go ahead and define it and salad out the way that you like to do, you know So I'm just going to put a 100 pixels by 20 pixels 100 top and bottom 20 side by side and now we can see it and let me Center that and then I could just go ahead and duplicate this a couple times And then right here I'm going to make this the medium And then I would actually fix this as well make sure the styles are matching This is going to be 80 And we get a visual out of it Same thing here 80 and 80 And let's go over here. I'm going to put small small container And 60 by 60 and let's go ahead and fix this one up here Fix up this outer container right here Just so that way We could actually see it but not only that you could use this to copy and paste If you don't want to write like css and create a class To do that you could always keep one window open And drop in a new container copy and paste the style right over there and your setup and gets go It's a tedious little step, but these right here they work. All right, let me go ahead and duplicate this We got just one more step to do now that this is at 1280. We want to make our secondary one which is going to be 846 All right, this is just an extra step This is like really just to detail everything but we could do it super fast right here All right, 846 In the small one All right, now that we have those and you would do the same thing with these All right, I could start off inside my notebook and I could go ahead and create these right here I could go back here and I could you know, the next one I'll do like Parts, you know, I go ahead and let me create another container. I could go here Copy and paste Paste my style to save a lot of time right here. And now I could go ahead and create cards with my other style. So let me do four duplicate And duplicate and now with this we could go ahead and define our card style right over here And so on so I'm not going to do this one right here because we are running out of time What I'm going to do is because we are going to be picking this up in next week's live stream I'm going to go ahead and You know complete all this on my own on the outside Uh, all I'm going to do is create my cards. I'm going to define them. You know what? Let me do something. Let me let me give it a shot I think we could do this kind of quickly All right, let's go ahead and do this one really quickly. I think we can I think we can All right. The first thing I want to do is let me add in some elements just to fill things up I'm going to drop in that and let me drop in a button All right. Oh, I wish I had elementor ai right now on this. I could just go ahead and click on Add me some lorem if some By the way, who is using elementor ai who is already finding a good use to use it I mean right now I could see a good use I would have just saved me 30 seconds right there. All right. Let me drop this down to a p all right Now right here you could define everything inside here like I could go in And I could define my system remember 20 pixels on the bottom Like this system right here that I have When we don't have a subheader so don't worry about that, but I got a header I got a paragraph and I got an element a button. So right here what I would do is I could go here at the same go On the bottom 20 oh, no, I mean 40. I'm sorry 40 and then have my system right there Now I know you could also go in here and do the gap in between you could also just do 20 So let's say your system is 20 20 20 you want it even I like to have extra space around my buttons Because I feel it's easier for somebody to use But if you don't you could always do it a lot easier by just using the gap in between All right, so we got that now to define my card. I would go in and Let me see. Let's create our padding on it. I'm going to put 20 pixels, you know, I'm going to do 24 I'm going to do 40 on top and bottom All right, and this is totally preference right here. It's totally up to you your preference Let me put a background on it so we could see what we are doing I'm just going to put the off white. Should I do off white? All right, I'm just going to do the sea breeze so that way we could see it now this right here We still got to fix up our font styles, but I feel that's going to be a bit of a bigger job Coming up. Yeah, we're not even getting to the fonts or buttons yet, but you see how we could do it Let's just go back to the card and focus on it now. We're defining the padding inside the card This is something we want to keep consistent The next thing we want to define is going to be the border radius What do we want for border radius? Do we want it sharp or rounded? You can leave around it right now though We're going to leave it sharp because that's what charlie already has I might change it later on when we go into the design right now We're starting off the next thing we want to define is going to be the box shadow. Are we going to use it? And if we are going to use it again, we need to keep it consistent Uh, I feel like I want to use a box shadow for this one. I want to use a very light subtle one And here is A common one that I use right here. Let me move it two more Keep it in my fours Yeah, you can leave it on black. It's all good, but I am going to make it light I usually use leave it at about maybe point two might be fine now from here you could go ahead and Boy, we got to fix that font up It's all good. Once that is fixed up. It's sweet. It's good to go. Okay. We could put in The card styles All right, uh border radius Is going to be zero pixels uh padding it's going to be 40 pixels by 24 pixels and then uh, what was the next one the box shadow box shadow This is going to be 12. It's going to be zero hold on zero 12 40 minus four and Point two All right, you can go ahead and fix all that up the way that you want to that makes sense to you The thing is make this yours. You got to make it yours That is the whole point of this you make it yours. Let's get out of here. Let's see. Does that Yeah, something is weird happening with these fonts will we Yeah, there's something broken. I'm going to fix that though. Uh, oh my gosh, we're out of time right now Okay, but what we got over here. Yeah, see we have this default padding here on the bottom There are a few things we need to fix and when we do inherit this I want to see it I wish we could zoom in can we zoom in? Yeah, let me zoom in here. Let me close this and try to zoom in You know what we're looking for and what we want to avoid Or when we have something like this see we just defined The padding right here. We made the padding nice and consistent in line Excuse me Let me get some water We made it in line with our styles like I do mine in force. You're going to have your own system But when we see something like this And we see like the pink box you can see that we're have more spacing going on There's something happening And this is the reason why we need to take this step because especially if we're working and fixing up a website Because we need to identify it and fix it because right now I could set up my system I could define this card But as long as I have elements in here that are not working right that have this has spacing on the top and bottom You know as long as I leave it there the system is not going to work It's going to be broken the systems are mathematical. They're very detailed Let me get this back to 100 They are very very detailed. They're down to a pixel. This is the pixel perfection type of design work we want to do but this is what's going to separate A site that looks professional polish even if it's simple and minimal But it's still going to look professional just by having this kind of system In place. We got to be really detailed. This takes ocd. It takes a whole lot of Extra care, but this also let me screen. Let me stop the screenshot really quick Let me put this right here But this right here When we start doing stuff like this and taking our designs and our work to the next level Where we are implementing design systems like this into the design This is where our value increases a whole lot and for increasing our value We should be increasing our prices because we're offering a lot more with Elementor It's sure we could go ahead and build a website in a day in a couple of hours But when I hear a site has been built in a few hours or even a few days I feel that there's no way we can get it to a professional level That quick it takes some time and care doesn't have to take you months So in fact, here's the thing when you start doing what I'm showing you right here with this kind of system You get faster and faster with it. I use the same system over and over That's the key as well I don't change it and build a new system for every website because websites are very very similar. They're all Same blocks and structures. We're just arranging them differently styling them differently Doing our own creative twist on but the the details the gaps the spacing the containers The border radius is the box shadows those type of things when we use the same Systems or similar system over and over it becomes second nature like right now really I don't need to build A brand page anymore because I do the same thing over and over I know right away when I started a project every gap is going to be 20 pixels All the spacing is going to be this all my containers are going to be this Everything is going to have a 20 pixel padding bottom Except for the ones that have an element underneath and it's going to be over and over and over consistent And then you get a whole lot faster all right Whoa, we did that right here. I like I want to do more. All right. I wanted to do more It's all that says is see my ocd kicking in. Hey, I got it And uh, it's a it's a fine line between ocd and perfection All right, perfectionism not good. We want to stay out of it Something that helps me with that is something I heard Seth Godin say Seth Godin talks a lot about perfectionism with creatives And he says something that turned into a mantra of mine, which is it doesn't have to be perfect It just has to be good enough So whenever I get stuck in it, but at the same time my ocd you saw my figure I couldn't leave my gaps without being 20. Like I use a 20 pixel system so much That it just becomes it just it has to be aligned like that over and over and over Uh, look at another thing is too Like once you get it down and you put these practices in place it evolves and we always find ways to improve in fact Looking at the system that I showed you right now I've already found ways to improve and I've been improving my system One of the things I started doing recently that I'm starting to apply And it's like the next sites that I'm building is Setting my roots to 62.5 percent with a 10 pixel tech space and going more into using rem and m Using that system right there So like I'm even updating my systems and looking to improve the main thing is don't keep changing quickly I like that's just for me my my suggestion is Not to make everything different every single time you do it Try to keep it where it becomes systematic Where it becomes a flow and then when it does look for ways to improve it And then this is how we learn and just get better Where are we at with this? Who else gots ocd? All right, nico's gots ocd. Awesome. Awesome Yeah, I said do more Ah, should we should we do the fonts right now? Do you guys want to stay we could do the fonts real quick? Those fonts are driving me insane right They say yeah consistency spacing It's the little things it makes such a huge difference Erica awesome Let me see Okay, yeah, so many people think let me pull this up So many people think that web design development is just like pushing a button That's something that just happens by itself To create great websites Require a lot of expertise Knowledge and passion well said. Yeah, well said it takes expertise knowledge and passion and it takes obsession You got to be obsessed. You got to have some sort of Obsession to stay up and to make all these little details and to keep taking it this far Okay, you know what we're going to go ahead and do the fonts, but after that I gotta wrap it up because I will Yeah, my my productivity Like just shoots way down if I don't get proper sleep. It's weird. I can't even sleep in 5 a.m. 6 a.m. I'm wide awake Yeah, pez. All right. So pez says, you know the little things that go into this and you know That's the reason why we're doing this live stream right here because I want to give a chance to show those little things So I feel like the little things aren't really being shown a lot my first years building websites Becoming a designer Uh, I didn't I didn't see that now when I'm going through tutorials. I'm learning I'm trying to build it on my own and it wasn't until I got my uh, I got a design Like just a straight up design ninja to be my uh mentor and help teach me and what she taught me Set me on my path to design to be able to look for those these things You know, like I couldn't even see them If you sent me a website like like, uh, charlie's website here the diving website I would not been able to see those things. I couldn't I'm not artistic You know, this isn't like something I was just nationally born with it took a lot of work and training and learning how to see that stuff So I'm hoping this helps out Oh melissa, it's all good. It's all good. It's all been recorded. So it'll be on for sure So good to see you here. All right. Let me see nicos. It's more difficult to explain To a client who has no clue about web design that you have to spend so much time before everything starts You know what this the beginning part? This is like the most important step of the process if we skip this step If we skip the step of the strategy of the research and then putting together a system and a process That's the foundation. We're skipping the foundation if we skip the foundation You know, it's just like We're just going random You know, this is not random You know what we're doing. Nothing here is random. It's all methodically thought out every step of the way And erica erica asked do I mentor anyone? I do I do in fact You gotta check out the light box pro academy We do this on a larger scale every single week. We're having calls as groups We're always going through all this together. In fact, I see a mentee inside right now Here which you know to me this makes me excited because You know, I didn't get here alone if I didn't have the right people coming to my path when they did I might still be scrambling around trying to figure things out You know, it wasn't it wasn't until I was I had to learn from people and we have to do this together and I definitely like to mentor and work with others and connect with others Uh, I just want to be able to give back as well. It's exciting to see other people progress I've seen some people just go from like like what I was doing like if you want to see my first sites Oh my god, charlie your site is so much better than my first sites in my first probably two years All right, cool. So check it out. We're going to go ahead and do these fonts really quick Then after that I want to jump back into the chat and then bounce out. So Let's go ahead and do this. Let's do this. All right Okay All right, so back over here. We got these fonts and let me go back here. Let me close this tab out And check it out just to give you guys a preview of next week next week We're going to be going into structure We're going to be going into something more now. This is something from a workshop that I ran before Uh, but we're basically going to be working on the structure as we Basically redo this whole thing right here. We're going to redo all of it next week. All right We want to do back over here is I want to get new fonts because something something's wrong I'll figure out what that is off of here Uh, I'm going to go over here to the custom fonts and I am going to You can tell this is a very uk site bin Toss it in the bin. All right I'm going to delete this one permanently. Let's clean it out get it out of there One other thing I want to do as well. Let me go to media. All right Maybe here All right, I just want to make sure We don't have any All right, shouldn't be in there. It should be let's see. Okay. Yeah sometimes when we delete the fonts I just found this recently When we delete the font inside like element or custom fonts and it's not just element or I was working on bricks earlier today Deleting fonts and uploading some new optimized fonts the font files still stay inside there So I just want to be really thorough and get rid of everything Another thing that's been helping me out is happy files pro Oh man, such an amazing plugin guys. You guys got to really get that one It's been helping me organize everything keep all my images and everything Super super clean I've got to do a video on that because I've seen it but until I actually used it. I didn't realize how dope it was. All right next up I need water. Let's go to google fonts and get our fonts All right, so we could you know, I'm going to leave this to charlie charlie Do you want to keep the same font or do you want me to choose a new font for you? We could do monster rat, which is the one that you had Let me download that all right, or I was thinking to use poppins. I like poppins. It's very versatile I'll jump into this. Uh, actually charlie. Give me a heads up Let me see here Ben who's calling his name? Oh, I forgot. I still got you there David happy files is dope, right? That's right. All right. Okay, charlie said I choose dope. Let's do this I got it No, no, no All right Let me jump back in here Okay, so first thing we're going to do is we got to optimize these fonts over here All right, so I'm not even going to touch monster rat. We're going to go to poppins It's versatile easy to use and I'm going to remove all the ones that we aren't going to use All right, we'll use bold. We're not going to use any italics. We're not going to use an extra bold I'm not going to use that we're not going to use extra light because extra light is too light italics I rather use css and let the browser do that. You can just select on italic and really does not look that much different bold light, okay Let me see it moved to trash Medium, okay, we could keep medium maybe regular semi bold No, semi bold italic and no thin that is just too thin and not accessible So we're going to stick with these five. We're going to have light regular medium semi bold and bold We're going to have five fonts, but check it out these five fonts 765 kb, which is ridiculous. So we are not going to upload Those you know, we're not going to upload all of that because that's just crazy. All right, I want to go here to font squirrel And we're going to use a generator right here I'm going to Optimize these and if you guys want to know how to do this, I did just put out a video like a couple weeks ago on it uh And I do this over and over and over all the time. So again, just become second nature. Let's upload these We're going to do wolf and wolf too. It's going to take a second for them to generate Let me just make sure I got my settings right. All right. Everything looks good It's going to pop up any second now. Come on Yeah, these are all good to use. Yeah, when you upload them for some reason It doesn't look like anything is happening, but it is Well, that's uploading here. Let me go ahead and set things up here so we could multitask All right, I'm going to go over here to custom fonts. Let me set it up. We're going to add poppins And we're going to add a font variation. The first one we're going to do is 300 We're going to add a 400. That's going to be our regular. We're going to add a 500 It's going to be for our medium I'm going to add a six which is going to be for our Semi bold and then bold I might even I'm probably going to remove one of them. I usually like to only use four Five is a lot. We'll see as we build our font styles. All right Here we go. Okay. So everything is good here. Now. Let's go ahead and download these Usually it's pretty quick All right. Cool. Let's go. Whoops Let's go back over here to the downloads open it up And I'm going to remove all these files. I don't need just to clean it up They add in these html files Again, this is the ocd right here that I got. I can't I can't just leave clutter. It has to be Clean and then clutter now. It's going to be a whole lot easier. That's why I keep doing that. All right Let's go back here and add it. So I'm going to go here to my wolf To downloads right over here All right, and that's going to be a light 300 is light and check it out. It's 11 kb All right, just to give you like look at this is actually double that was like only ttf. This is wolf and wolf 2 But the whole file is only 100 kb. So we went from like 700 to like 100 All right, let me go back here and add the wolf 2 And these are all that I add. I'm not going to worry about anything else. I'm not going to worry about these right here All right, let's go to the 400 And regular and again regular for the wolf 2 All right, we're going to go to medium And then medium wolf 2 All right, let's go to the semi-bold Yeah, I'm probably going to remove one of these I feel like have a medium semi-bold and bold is Repetitive I feel like not all of them are going to be needed when we style them up right now I'll see like maybe it'll feel too bold. I'll just go by How is starting to fill with the fonts? Good thing. We do have everything set up already So the next step is going to go a lot faster All right, cool. Let's go ahead and publish this dope. We are there Now let's go over here. I'm going to let me update this and refresh it And let's get these font styles going All right now. Let's see, you know, I'm curious How is the front end looking now? I know it's looking kind of broken. I might have to go in and That still is huh. I'll figure that out All right, cool. So I already got everything laid out and I usually do this extra large title and check it out I do this on purpose. I don't use the word header Sorry my throat I don't use the word header and the reason why I use title is because I don't want this to be associated to header I don't want the title The titles to be thought of like This needs to be for h3. This needs to be for h1 or h2 That's more of the sco process Instead, I want this to be a title and not a header because if we go over here Oops, if we go on stop sliding out if we go back here to the site settings We're going to have the typography where you can change everything based on that. Yeah, look at that I could already okay. So this is where we have Yeah, we ran across this issue last week. We're unable to Change all of it huh You know what I'm going to do this will help out. I'm just going to And for some reason we're not able to delete it like Theoretically when we click on clear should clear. Okay. I don't want to get stuck on that right now We're going to come back to that But what I want to do is I don't want to associate my titles With this when it comes to the sizing instead I want to make these titles over here in my global fonts And you see I just want to focus on the actual title. What kind of a title is it? Because if we go to like the homepage banner, I want the x so large title on the banner The bigger titles medium and smaller so on. Okay, cool So with that, let's see. I've styled all these up already. So we're good with them You can go quickly then. All right. We're just going to connect the custom font to each one of these And I don't remember did we do We didn't do mobile We did mobile last week as well. Okay, super dope. Okay Oh, this is a breeze right here. See we already did all the tedious work So now this part is reason right here All right, just connect all these Poppins All right, let's take a look at it now though because I want to see is this going to look right? You know, like this is where we start to get into it and like Make the changes like I'm going to make the changes in here The one thing I'm not going to do is I'm not going to go out here All right, first off the reason why all these look the way they do last week. We've already connected them So the typography this is already connected to our extra bowl Now if I'm going to go in and I'm going to change my banner text the extra large text I'm not going to create a banner like this. I'm not going to make a banner And I'm not going to come in here and give this a style Let's just go ahead and give it the colors I'm not going to do this. I'm like, you know what? This is too bold I don't want this to be bold. I'm not going to come in here and Let me see. I'm not going to come in here and start to make changes in it What I'm going to do is let's go back here connect it If this is looking too bold like do you want this is not fitting the design? I feel this is too bold This is where we come back to our site settings and we make all the adjustments here This is why we need to take time in this process Because once this part is dialed in right here once you feel 100 confident like, you know, okay I'm not really feeling this this heart bold. I feel this is too bold right here I do like the semi-bold you go with that You dial it in and you dial it in on all the other ones you start building buttons Maybe this button is not bold enough. Maybe you need a little bit of letter spacing But you dial it in all right here once that part is done Then you can move forward and every bit of text on the website Is following only what is inside here. This is how to keep a design system I feel like we're good here. I'm going to remove this bold as well You see here. I did have it at 800. I wonder why it fell off Okay, I'm good with the font sizes Okay, I'm good with that one, you know the small title I'm going to make that one bold. Let's make that one bold right there the large body text. Let me see Is it a little too light? Huh, I was stick with normal the button text. I am going to make You know what the semi-bold was pretty good for the button text. I like my text to be a little bold All right body text This is good right here. I do like the bigger font size on it It's a clean font easy to read All right, and you know what the subheader I don't know if I'm feeling this this capitalization style I might not even well. No, I do want to use a subheader Huh, you know what? I'm thinking to remove that subheader and use a small title Well, what we're going to do in the next step. All right, let me go ahead and save this right here And let's go ahead and end the screen share So what we're going to do inside the next step next week now now that we got our font set up We have the colors we have our spacing Now we're going to go in and we're going to quickly draft up Wireframe we're going to get a flow. We're going to make sure we include Uh, the things that give the human emotional connection We include trust that we're guiding the users the right way and we're going to Create a very clean layout and flow and as we're doing that and dialing it in We're going to jump back to that brand page if we need to adjust some text We're going to adjust that there. We're going to make sure the global for everything Say we want to have a border radius. Maybe it's too sharp. Maybe the corners just are too sharp Maybe, you know, like when we're applying the colors we're applying ocean like colors Maybe we wanted a bit softer. We'll go back to our brand guide page We'll adjust it there and that is how we keep it consistent Whoo, okay. All right, we did an hour and a half on that one I said I told my girlfriend, okay, we're sticking to an hour. I promise but uh I love doing this. I have fun with it. I hope you guys all have fun too as well. I hope you all learn Okay, let me go to the questions. All right, cool. So we do have Questions in here. Let me kind of scroll back up The skating choreographer. What's up, man? How are you doing? How are you doing? Okay? I'm going back up All right pez likes poppins as well cool, cool, cool I see some questions Charlie be yeah font squirrel. I just put out a video. I want to definitely check that out that one Has been just a complete game changer on optimizing my fonts. I've been getting font files down to crazy small sizes Pez definitely. Okay. You guys got listening to pez hit the like button. All right. Cool. Cool. Uh What kind Patel is asking what kind of a desktop widget? Am I using uh, what do you mean my desktop widget? Uh What was I doing? Do you mean the browser? If you use if you meant the browser i'm using arc Which is like a newer browser uses chrome, but it organizes things a whole lot differently Okay, uh, tarly Asked a really good question. Why upload both wolf and wolf too. Well, theoretically you don't need both of them Like wolf is probably the best option because you're going to have the most compatibility And it's highly optimized already It's going to be compatible for like even older Android phones and you know newer and a bit, you know It's not going to be compatible for old old stuff, but old old stuff to me Uh, they're not going to know the difference between the fonts anyways because they're seeing everything On an old old device and outdated browser Uh, but if we put wolf 2 It's going to be for the newer stuff and it's even a bit more optimized And if the computer whatever somebody's on the browser Can't you know read wolf 2 it will default back to wolf So that way it just helps with the compatibility I don't add ttf in there. I just you know, it depends. I would add ttf only if The project needed it it would be on the Case by case situation, you know, if it's like a big brand say like a global brand I probably would add a ttf in there because they need to Have more of that brand consistency and make sure that everybody's seeing it Especially since usually big brands have their own personal fonts Not using like google fonts All right, let me see Oh, okay, uh pes. Okay. Yeah, like stage manager. So this is arc. It's a arc browser Uh, you can check it out. Just put arc browser and you can look it up It's one of those things that you got to get an invite to Do All right, I hope you guys have fun Oh, Tiffany. Good morning It's all good. The recording is coming up All right. Hey, just really quick too. All right. I haven't really plugged my stuff. All right I'm I'm I'm creative. I'm a designer. I started off as a developer So when it comes to like marketing and sales, I'm not really out there Plugging stuff like a marketer like really good people that marketing and sales are going to be plugging their stuff all the time For me, I want to do this to help out and to Give value and I have fun with it too. Like I had a blast today But I am going to plug something right now because let me actually do a screen share because uh Okay, that's there Because this right here, I don't know if you guys seen it yet I have the design with elementor course right here. It's actually two courses in one It's a web design course with elementor everything done inside containers This was a four month project and I've already been seeing crazy results with it Oh, excuse me I've already been seeing crazy results with this right here. I've been seeing just like I'm seeing the work which is really cool now originally I priced it really low because I wanted it to be affordable for everybody everywhere I wanted it to be Accessible and I know that a lot of us are in different parts of the world where our economies are different So what I did was I priced it low because I wanted it to be reached out there But here's the thing this course is not something that should be priced low because there's a whole lot into it It's not just a bunch of lessons. I mean, there's there's a whole lot. There's a whole lot. You can check it out but Where I'm going out with this is the price is going up on it. I'm putting it up But what I do have I did open up For support for people in certain parts of the world where the economy is much much different So with the support force Some countries out there is going to be more affordable. But then I'm raising this up next week that way That way is price where should be because this should be a whole lot more especially what's in it Uh, just want to throw that out there in case if you haven't checked it out yet Uh, uh Let me see. I'm not good at plugging this kind of stuff. I don't I'm not a sales guy I like being creative and having fun But you know what this is something that A lot of love and care went into is already getting awesome results And I gotta do better at getting it out there to everybody. So just want to throw it out there Uh Tiffany cool. Thanks. I appreciate it. Definitely. All right Don't let me just make sure I didn't miss any questions before we bounce off. All right Any questions any questions before we bounce off? Pez was that hit from a tequila bottle? Okay. I think that is the best question of the night If it is man, it's a pretty big bottle Uh, I think it would be getting a whole lot more interesting probably All right, any other let me see. Uh Hey everybody, thank you so much. I appreciate you all watching We're going to be back next week and we're going to take this to the finish line We're going to wrap it up. I'm going to show you inside the next live stream next week How we're going to take this design system that we got I'm going to fix out this layout and we're going to make this look really dope I'm going to show you the whole process along the way. I appreciate you all for watching You guys make this possible And uh, yeah, all right. See you guys. Peace