I've got 50 web design tips, tricks and hacks coming at you in the next 15 minutes. No filler. Just rapid fire ideas to instantly level up your skills no matter what stage you're at. Are you ready? Let's go. You can basically break everything up that you need to know about web design into four categories, mindset design, user experience, and technical skills. Let's kick it off with mindset, because if you get this part wrong, none of the other stuff will matter. First, the best way to learn web design is by doing. Stop waiting to feel ready. Nobody does. You don't need another course. Just start. Building. One of the fastest ways to grow your skills is by getting really curious about other people's websites. So go looking for 'em. Make it a part of your routine to find, study, and analyze great design. And when you find something great, you gotta save it. Don't trust your brain to remember it later. What I do is take screenshots of maybe an interesting section or a full on website, and then I make an apple note and I link back to the site. And also include the fonts that they use. So it's like I'm building my own personal swipe file that I can revisit anytime I need it. While you're at it, you should also start building a personal font library. I also just create some Apple notes. I put them in folders and I sort them by style. So I've got a folder for crif, san Script display and and so on. And then I also make notes on which ones are free and ones that I would have to. Pay for it. But here's the key. You can't wait until you have a project to start collecting this inspiration. You gotta make it a part of your daily routine. The more you do it, the sharper your eye becomes. But if all you ever do is look for inspiration, your skills still aren't going to grow. You have to practice, and here's how I'd encourage you to do it at different stages of where you might be. At first, it's okay just to copy. Ideas, right? You find somebody that you like, you find a website that you like, and then you try to do that same thing. Eventually, you're gonna start putting your own spin or your own style on things. And after you've done that for a while, you'll notice that you've got your own unique way of doing things, and that can become your own signature. But don't wait for inspiration to strike. Do a little bit of designing every single day. Even just 10 or 15 minutes is gonna help you to really stand out over time. But be sure to schedule it in. Don't wait for those free moments because they never come. Let's talk about putting it all together with design, and this is gonna be our biggest section for tips. So buckle in the four building blocks of every great website are layout, color, typography, and images. If you get these four things right, then everything else just kind of clicks into place for layout. Most websites use a 12 column grid system and that helps to keep things. Organize, easy to read and even responsive on all sorts of screen sizes, but even though there are 12 different columns to kind of put things on, you hardly ever see it go much bigger than one, two, or three columns on a given section. And eventually you're gonna start to notice a few layout patterns that just kind of show up. Everywhere. So for instance, here's a real popular one. You'll have image on the left and then text on the right. And if you really wanna make things spicy, then you'll put the image on the right and the text on the left. Don't be afraid to use these patterns, but also look for small ways. To tweak them so that your site doesn't end up feeling overdone and don't skimp on white space. In fact, you probably need to use more white space than you think you do. Okay? You gotta let your designs breathe and mix up the style of your sections a add some different backgrounds, maybe lay out variations. This keeps people visually engaged with your website and kind of helps them to keep scrolling, which in turn makes it more likely that they're gonna say yes to whatever you're offering them. Also, use visual hierarchy to guide the eye. Make it easy to scan so people can find important information. Without a lot of effort. I like to think of visual hierarchy in terms of three levels of importance. You've got your biggest or the most important and, and you wanna make sure that this level is really easy to recognize and scan. And then you got your medium level or that second tier underneath. And this should still be fairly easy to spot, but, but don't let it compete with what is most important. And then finally, you've got the, the smallest of the details. And this is for folks that. Want to get into the weeds. There's always folks that will want to know every single detail about what you're trying to communicate, but you don't really need to make this something that is standing out, keep it less conspicuous. For typography, it's important to get familiar with some major font families, and a few of the big ones are things like Crif or San Crif script or even. Displays. Each one sets a really different tone, so you gotta use them on purpose. And what I like to do is think of what's the role of this text for the overall user journey. So I try to use display fonts for, for big texts that is trying to grab attention. And then for this stuff that I'm really hoping that they read and kind of dive into, I make it legible. And so that's for the smaller text. So my rule of thumb is anything longer than like seven or 10 words should probably prioritize legibility. Also, you've gotta get good at pairing fonts that work together. And something I like to do is lay out ideas onto a big Figma frame, side by side, just to see how things feel. If I can tell that a font is clashing with another font, then I just keep looking. I keep trying different alternatives. You might hear some people talk about something called the golden ratio, which says that you, you wanna scale up font sizes by 1.618. So you take whatever your base font is, multiply that by 1.618 to get the next size up. So for example, if our base font size was 16 pixels, then the next step up from that would be 26 pixels. And hey, like, listen, this can help, but here's the rule that I go by if it looks good. It is good. Okay. Don't let formulas keep you from just trying new things for color. You're gonna wanna learn the basics of color theory. There's something called analogous colors that are colors directly next to each other on the color wheel. And then there's complimentary colors, which are colors that are across from each other. On the color wheel. And then finally there's something called tdic colors, which are equally spaced apart from one another. Use these to build color palettes that that actually work together harmoniously, but don't feel like you've gotta have a lot of colors on a website. Oftentimes, less is more. A good rule of thumb when it comes to colors is called the 60 30 10 rule. So the idea is that. You use about 60% of your space with your dominant colors, things like black and white, and then 30% goes to brand colors, maybe to add a little bit of variation. And then that final 10% is just an accent. And for that 10%, I actually. Like to reserve that for my call to action, I pick one color and I stick to only that for my buttons. That way if a user sees that color, they'll almost intrinsically know that it's meant for action. For images, you wanna make sure that the color of the images match the overall color palette of the website. Now, this isn't a hard and fast rule, but when I'm building a website, I try to make sure that the color of the images. At least in the ballpark of the color palette of everything else around it because you don't want 'em to stick out, right? A neon pinkie on a sleek black and white site will make your site look maybe just a little less than professional. I always like to use images where the people are looking towards. Key content. So you can see that in this image here. You've got folks that are looking straight at this header. Our brains almost intrinsically follow the eyes of people that we're looking at. So you use that to your advantage by having people's eyes focus on where we want the user. To look, when I'm picking images, I always try to start with brand photos from my client, but if they don't have a lot or maybe they don't have any, that's when I go to stock photos. Now it's, it's kind of tough to find good stock photos. It takes. Bit of getting used to, but here's a few things that I've found really separate. Good stock photo from bad. One is good lighting, and the next is just a natural expression, and this is what makes the biggest difference between a photo that looks staged and one that looks like it was taken as a candid image. There are plenty of great places to find good royalty free stock photos, but one that I really like is is called Pexels. And rather than just like hunting and pecking for the right image that I'm kind of looking for, what I do is I go and I find artists that I like and then I follow them. And that way when I'm ready to go find images for project, I've got a few folks that I know take really quality photos. Another thing is that you want to save your images as web P files when possible, they load faster without killing the quality. And a rule of thumb that I like to use is I try to keep my images to about 300 kilobytes in size because big images are the number one thing that slow sights down the most. Also be intentional with your cropping. Use the rule of thirds to focus on the subject, and that might be a face or maybe a product or a key detail. You can see how I've kind of given you an example of that. In this photo, we've got this subject who is aligned to the far right third and the far left third. So this is just kind of the natural place that the human eye looks for whenever we're looking at images. So you're helping your user out. If you put your subject in those spots, speaking of cropping, don't leave cropping to your web builder alone. Once you know the exact size that your image needs to be, you'll wanna resize and export it using something like Photoshop or Canva. That way your image loads faster and it checks an SEO box that Google's gonna look for. Let's move on to user experience number 32. Always, always. Always designed for the user first, not your portfolio, and not for the latest trend. And remember, most people only skim websites. They're not reading it from top to bottom. So you gotta use that visual hierarchy that we talked about to help users understand, even if they just give a section a quick glance, only about 20% of people make it past the top fold of the website. That's that very first section that. People see when the site loads. So think about that when you're building that section. You want it to be crystal clear and super motivating. Once you're done designing a page, something I like to do is actually scroll backward from the bottom to the top. This is gonna give you a fresh perspective and you'll be able to spot issues that maybe you missed after steering at it for hours and hours. Make sure to test your websites on real. Isis, not just previews or emulators. What looks great on maybe Chrome dev tools might be a hot mess on an actual iPhone. This might have gotten me in trouble quite a few times, so make sure that you check and be sure to stick with one website builder until you truly outgrow it. Jumping between tools only slows you down and keeps you from mastering your skills. Also, websites have competing priorities. You've gotta consider things like. Brand or maybe SEO performance, accessibility, or even conversion, and they all can't take priority at the same time. So what do you do? You budget, right? You think about what matters most for each project or even. Every single section, make sure that your button text is clear and action oriented, and it tells people exactly what's gonna happen when they click. You want to do things like see pricing or download the guide instead of things like, let's do this, or, heck yes, right? If people don't know what's gonna happen when they click, they're actually much less likely to do so, and this also helps with accessibility. Let's wrap this up with the technical best. Practices. There are basically three main categories of technical skills that you need to work on development, SEO, and accessibility for development. You need to learn a little bit of coding knowledge, but you don't necessarily have to be a full fledged developer. Get familiar with tools like H-T-M-L-C-S-S and JavaScript. Then use resources like chat, GBT, or Claude to fill in the gaps. Be careful with third party tools and plugins. They often add extra code that you probably don't need and that slows your site down. Only use what's absolutely I. Necessary. Get familiar with tools like Chrome Dev tools or even Google Lighthouse. I use Chrome dev tools whenever I'm adding CSS to a website and Google Lighthouse to figure out what's slowing down a website. You don't have to be a developer to use these things. Just poke around and, and start to learn. It can be really, really helpful for SEO. Use proper HTML tags to structure your, each page should have just one H one tag, and this is gonna give a summary of. The entire page. Then you use H two tags to divide the page up into sections. P tags are for those big chunks of text and then also allies for list. And don't forget your nav and footer tags as well. Google reads structure. Before it reads all of the words on a page, when you're changing any URLs, make sure that you set up 3 0 1 redirects so you don't lose traffic or SEO value and fix broken links as soon as you spot them. Make sure to write descriptive alt text for every single images. Use keywords whenever it makes sense, but don't keyword stuff just to boost SEO. This isn't just an SEO tool. It's also important for accessibility. Speaking of accessibility, make sure that your color contrast is strong enough for people with vision challenges. To read comfortably test your keyboard navigation as well. Users should be able to tab through links and buttons without having to use a mouse, and then only don't rely on color alone to communicate. Meaning if you're using color to show things like success or error statuses, you also wanna use icons or labels or even patterns because not everyone sees color the same way. So adding a second cue makes your site more. Inclusive. Whew. And that is it. You have now got 50 tips to build faster, smarter, better websites. I know that was rapid fire, so thank you for hanging with me. Hopefully this really helps you to level up your skills and go on to build websites that you're super proud of. Hey, if you enjoyed this video, make sure that you like and subscribe. And don't forget, if you don't quit, you win.