20+ Must Have Web Design Resources for Your WordPress Website Projects for 2021!

If you want to design a better website save money and save time you have to watch this video My name is Hogan and in this video I want to share with you all my web design resources that I use for my wordpress website projects So I have to be very honest You know I've created a lot of videos on my channel on my tutorials On how to create a wordpress website and a lot of people follow them and the end result of the the website Doesn't look very good. It's very very ugly and I don't know what it is. It might be because of Not knowing what to use and how to use it So in this video, I just wanted to share with you guys everything that I use and how I use it across my websites So hopefully you guys can implement it for your own websites and yeah save you some time and save you some money So we're going to get straight into it. Please give the video a big thumbs up really helps me out. Thank you Okay, so what i've done is basically categorized all the tools and resources into five different categories So the first category is your design resources and tools and the second one is colors and fonts third is going to be your assets fourth is image editing and Fifth is optimization. Okay, so i'll also show you some bonus ones that you might find useful at the end of the video as well So we're going to start off with the design resources, right? So before building a website on wordpress or any other platform what I recommend is designing a website first Okay, so imagine your website sort of like a house and if you're building it your dream house You don't sort of just design and build at the same time Normally you have your architect and they design their house and then they pass the designs to the builder and they just follow the designs Okay, so the reason why you're probably not going to design a good website On your first go is because you haven't designed it, right? You've skipped straight onto wordpress and maybe you've imported a template or you're following a tutorial You're normally doing two things at the same time and sometimes that can be quite challenging So what I recommend is to design first and to design first you want to look at Inspiration. Okay. So even if you're a professional You do want your clients or whatever to send you websites that they like and also their competitors websites So that you can create a website that they like. Okay, another good resource is collectui.com Right, so you can check out all the designs from like dribble and behance and it's essentially put into One area where you can navigate to the different things that you want to create So for example, if you want to create like a sign up page Then you can click on sign up and you can save it as inspiration, right so you can click into it So what I use this with is another tool called miller note and essentially I use it to just organize my thoughts and that helps me sort of stay organized and Not procrastinate because if you have so many things on your mind, then it's very easy to just get overwhelmed All right So you can sign up for free and log in and once you've done that you also want to download the miller note chrome extension And that's going to help you sort of save these designs that you find on the internet So once you've downloaded the chrome extension, you can right click and save to miller note and you can save it to your board All right So we can look through the designs and let's say maybe let's click on checkout over here And let's say you like this checkout over here as well click into it Right, you can also navigate to the dribble page as well But i'm just going to save it to miller note just like that Save it to your board All right, and maybe I like this one over here as well Click into that And save that to miller note. Okay. So once you've saved it, it's automatically going to sync right to your board And let's zoom in a little bit. So let's drag it onto our board just like that Drag it over here And then we can also expand it a little bit like that And then you can also add in your notes, right? So you might have notes about it and you might have some client notes about it as well You can also add in a to-do list which is really helpful And you can also add arrows different colors and different things like that, right? It's super easy to use and you can also invite your team or share it with your client so they can drag in different things they like and I think Even for other projects. It's really helpful as well. Okay, so make sure you get Miller note and after once you've done that then you want to design your website So to design your website you want to use adobe xd, right in my opinion It's like the most simplest sort of design software out there and it's completely free and it's by adobe But don't be like scared because you know photoshop sometimes even for a beginner can be quite hard This is a lot easier than photoshop, right so you can download it for free And once you have actually installed it, it looks something like this, right? So I don't have a tutorial on it yet But if you do want to see a video then maybe leave it in the description below But there are some really good tutorials on adobe xd on youtube at the moment So make sure to watch it and they'll also talk about some sort of design techniques and principles as well Which is really going to help you with your design But what I really like about it best is the ability to have the snap graphics, right? So it snaps into place and helps you align everything Because I think one of the biggest mistakes that most beginners make when they're building a wordpress website Is that things aren't aligned and also the spacing in between the elements. They're not even, right? Sometimes it's like too close. Sometimes it's too far With this you can actually see the distance for example 40 pixels and 40 pixels and then it looks very good, right? And then it's aligned as well Okay, so once you've designed your website and you're copying the design onto your wordpress website then you're naturally going to Ensure that it's going to align on your wordpress website, right? So that's going to help a lot And also it's just super super simple to use everything's drag and drop And you can also just drag in the pictures as well. Like let's say for example, I'll drag in the profile picture just like that Um, so it's really really simple. You don't have to crop your images. You can double click and arrange it just like that As you can see it's like so easy to use Um, so I highly highly recommend it and after once you finish the design then you can click on prototype And you can also link the um links to your different pages as well So for example, i've linked the about right to the about page link the services to The services page right so I can also click on let's say if I want to link the logo Okay back to the home page just like that and I want to link this one Okay, I can't click it because I locked it. Anyways, don't worry about it. So we can click on the play button over here All right, so i'm going to minimize it a little bit Okay, so here you have the whole design Just like that And then let's say we click on about it's going to link to your about page, right? So it's really really awesome. And once we click on logo, it's going to link back And once you've done the prototyping for all your links and stuff like that You can click on share and then you can generate a link and share it with your client Right. So instead of building and designing on wordpress, you can do the design over here share it with your client See what they like and don't like and then you can adjust it really really easily and simply here Um, the best thing about it is just super quick. There's like no loading time and everything is just really really easy So you want to make sure you use those three resources to design your website first and then i'll move on to the next category All right. So the next category of resources and tools is the fonts and also our colors So we're going to talk about choosing colors right now and the tools that I use So choosing colors is really important before you start building because your colors are going to help your brand differentiate yourself from competitors It's also going to attract a certain demographic and also it might evoke a certain emotion Right that you want to portray for your brand so What you want to do is you want to look at? Color psychology and you can use it as a guide to choose your colors and then you can go to a website Called color.adobe.com So it's another adobe product right and you can use the color harmony rules over here and you can use this and drag it And it's going to help you select a really nice color palette. So all the colors here Are going to blend in really nicely Okay, so it's really really awesome. For example, you can click on monochromatic And here it's going to change the colors like that and then you can use it for your color palette So what you can do is you can copy over the color code So for example this color code over here And you can go back to milano, right and you can add in your color codes So you don't have to save it on adobe. You can save it here and use it for your projects So drop in a note and just paste that in and then click on enter and that's going to generate your color palette Right. So for example, if you want this one over here copy it And then add in another one Paste it in And then over here and just arrange it like that Right. So when you're building a website, then you can take the color code and use it for your website And also for like your marketing materials, like let's say if you're creating like a youtube Channel page or whatever it is, then you can use the same color right and that helps your whole entire brand Be very very cohesive Now the next thing I really like about the adobe color is you can click on extract theme Right and you can drag and drop in an image that you like So for example, I like this image over here Then it's going to take the colors and pull that in from that image and you can use that for your website Right, so you can also select the different moods as well Uh, for example, let's say like muted or like bright, right? I like colorful So here you can go back to the color wheel and then you can copy over the color codes like that Right, so If we go to this website over here Then as you can see i've applied it over here for the button And then over here you can drag down. Okay, scroll down over here I've also applied it for the title here as well as the icons, right? So I applied it like that now everything looks very good So that's what you want to do. Um in terms of adding color to your website. It doesn't have to be like Like a lot of the color, but you can just add it into subtle places Okay, so you can also go back over here to The website right and you can also click on extract gradient Right, and that's going to take the colors here and develop a gradient that you can put onto your wordpress website so let's just say for example, so What I want to do is I want to add something like this to separate my content on this page over here right, so what I can do is i'm gonna Select this and just move it down Move it down over here or something like that And then i'm just going to copy. Um this one here. Just select it ctrl c And just paste it into here just like that Right, but I want to add a gradient So what i'm going to do is I want to choose a gradient that matches well with this image over here So you can go back over here and we can replace the image Right, and then we can find the image. So for example This one over here click on open All right, and that's gonna find the colors. So i'm gonna change it to two like that And then you know, that's a pretty good color. Um So maybe I might do something like that Okay, so you don't want something like this probably it's gonna be ugly. Um, maybe something like that's pretty nice Okay, then we can take the color here Go back over here adobe And we can click on the fill Paste the color code hit and enter Oops, I forgot to select linear gradient All right, so i'm meant to Put that in first Okay And then the next bit is go back over here copy that color code come back here And then let's select this one the last dot Paste it in just like that Okay, so what i'm gonna do is I might drop the opacity down a little bit as well Make it a little bit lighter And then also here. Let's drop the opacity down a tad as well Okay. So as you can see now it adds some sort of more depth to that Um that separation right instead of just being like gray It's taken some of the colors from up here and we've implemented for the gradient So now if we click on the play icon here I'm just gonna resize it a little bit. I don't know why it's like so big all the ways So we scroll down over here scroll down and as you can see, it's very nice and subtle Right and everything blends in really nicely. Okay, so that's how you can use the adobe color for your website So choosing the right font for your website is also really important because each font has a different personality Right, so i've mentioned Basically the two different typefaces in my older videos But I know a lot of people who are following you might have not watched those So I do want to go over it again So there's basically two main typefaces one is the sans serif and one is the serif The sans serif as you can see the edges is plain and the strokes are even width So this is going to appear a lot more simple clean and modern And it's going to be showing on most of the websites that you visit So even on the interface of your computer, it's mostly going to be sans serif But then you've got the serif typeface and that's got the curves and the thick and thin strokes So this one looks a lot more traditional elegant and it's got a handcrafted look So first of all, you should understand that and then you should choose your font accordingly So when you're choosing a font, let's say tiffany and co so as you can see they want to appear elegant, but also modern they've got the Serif typeface for the title and also the sans serif for the body text If I think they use the serif typeface for the body, then I think it's just a little bit too much They also want to maintain sort of this simple vibe as well And let's say if you like what you see on tiffany and co like their font Then you can download a chrome extension called what font So install that onto your browser and you can hover over the text and it's going to tell you what font they're using So you can write that down on a piece of paper and then you can google it Now most of the time you can find that font on my fonts.com. So let's just say for example the sand trail And click on enter so here you can download the sand trail font and use it onto Your wordpress website. So here they have different styles. So as you can see, it's quite expensive But there are also these free options here, which you can just download If you just have an account with them, but generally what you want is probably like a regular Style and as well as a probably like a bold style for your headings, right if you just want to use one font Okay, so if you want to use like a completely free font, which most of the wordpress builders and themes have They use the google fonts, right and with the google fonts what you can do is you can select the categories, right? So here we can deselect these ones here. Generally, we're gonna use these two for our website sometimes you can use display and handwriting and other typefaces for Your website, but generally that's probably like for like the banner For maybe specific parts of your website. Maybe it might be like a sale thing or whatever it is Okay, so generally you'll stick to these ones for like the body and the title Okay, so you can select these and then you can select the most popular ones And as you can see, these are the most popular ones so you can choose any of these and these will be good, right? These are good because mainly because they have different styles So if you click into it, then they've got the thin style as well as the regular as well as bold style So you can just use one font family for your website like you can use the bold font family for the the title and then for your subheading you can use the regular one and if you want like a very specific sort of Things you can use the thin version, right? And you can just stick to one font a lot of people just use like too many fonts, which I don't really recommend Probably the maximum i'd use is two so maybe like a different Title and then maybe a different body right or just stick to one. Okay So that is pretty much it for your fonts So when it comes to the assets of your website in particular the images this is a really really important thing that you need to get right because If people come to your website and your image is low quality, it's not relevant Then you're just going to leave your website So obviously the first option that I recommend is if you have access to a photographer or you're good at taking photos Then I would use my own photos, right? So the next best option is I would start with unsplash.com So this is a free resource, which is really really good But if you're building like a more specific type of business You may need to look at some paid options, right? So this is another free one as well pexels.com So if you can't find sort of more specific images, for example, if you're building like a local website like a mechanic Then you'll find some better images and more selection over here that you can use for like a hero image For example this one on the right here or maybe something like this, which is good But if you're doing like a mechanic and you're searching over here, you might not find the right one right because This one just um, like the style of the image is not suitable Uh for maybe like a local mechanic website, right? So you might be able to use these images for maybe social media but for your website um Yeah, probably not right? So you do want to check out these ones the paid options because it's going to save you a lot of time And you're you're able to just upload the image and maybe just like add like a gradient overlay over it And use it as a hero image instantly. You don't have to sort of manipulate it and things like that And it's going to save you a ton of time So recently what I realized was I took a photo like a few years ago of a teacup And I got my sister to edit it to upload it onto unsplash I think she was just learning like how to edit stuff and she uploaded it And I think it got over like a million views and thousands and thousands of downloads So what I realized is like if you're an e-commerce company, then you can actually create an account here and For example this company over here They've uploaded their products as images, right? So people can download these images and use it on their website So this is going to build brand for the honest company, right? So if you click on info here, you'll see how many views it's Gotten over the lifetime as well as the downloads so 22,000, you know, that's really really good because think about it, right if If 22,000 people have downloaded it and let's just say, you know, 10,000 used it on their website And on the website right thousands of people might visit those websites, right? So that's going to build really good brand for your business So if you're an e-commerce company, so this is something that you might want to Think about to sort of build up your brand instead of just like uploading to Instagram and social media. This is also a really great way to to do it. Okay so the next thing that I want to talk about is the icons as well as the illustrations for your website because Sometimes you need those things to sort of support your text right without adding too many images on your website So icons and illustrations are also a really important part of your website For example, if you have like a featured section like to describe all your benefits You need icons to sort of support your text, right? But by default a lot of wordpress themes and builders have their own sort of icons and you can use that But in my opinion, it's a little bit overused because everyone's using the same icons, right? So it's a little bit generic. So what I do recommend is getting custom icons done for your website So for example, if you look at uber they have their own icons and it's very very consistent and nice As well as using their own illustrations, right? So that sort of enhances the design of their website and makes it more professional as well So the places where you can get icons from is flaticon.com. So here they've got like icon packs And essentially if you click into it, you'll have all the icons which are similar style and similar colors And it'll go really well with your website So if you're like an accountant or maybe you can type in like business Then there are different packs as well like business packs and things like that So a lot of these ones you might have to pay for them Otherwise, you'll need to credit the author on the website so you can get your icons from flaticon.com Alternatively, you can go to fiverr.com and get custom icons done So you can hire people to design like your logos your icons anything that you really want for anything on fiverr.com So starting from five dollars, I recently got my icons redone on my website So I did my website like six years ago, and I haven't updated the icons until now So I personally think it just adds, you know enhances the design a little bit and makes it look more professional and consistent So that's really good. And you can also use a website called undraw.co So depending on the style of your website, like if it's like a minimal type of website, you can use these illustrations So go to undraw.co and then click on browse now And here you've got you know thousands of different sort of illustrations which you can use All right, so it's really really cool And the best thing about it is that you can change the color scheme to match your color palette color so for example, if you know if I want this orange over here, then I can just Copy the code Okay, click over here on the top and then paste that code in and that changes the color for all my illustrations So it's going to be ready to upload onto your website directly and it's just really good Right. So if you want to download it and use it on your website What you'll need to do is you'll need to click on it And download the svg file onto your computer, right? So download that onto your computer Then you'll need to go to a website called svg to png.com Right to convert it into a png file, which is like a transparent file so that when you upload it onto your website It is a transparent file and doesn't have like this Sort of white background which you don't want, right? So just upload it here And it'll convert it and then you can download it and then you can easily upload it onto your wordpress website Okay, so another tip is that On fiverr you can also hire people to you know, do your product photography product renderings as well. So you could do like Product renderings right and search for that and product renderings is like a render which is done on the computer And essentially what you can use it for is like instead of getting product photography done. You can get renders done, right and then um renders you can use it for Your website, uh, for example, if you have like a product page, you can use the renders You can also use the renders for like all sorts of things, right? So you can just change the background and put them in sort of different environments and things like that So I think that's really really useful as well. Okay, so you can also order like product demonstrations And a lot of stuff on fiverr so i'll leave all the links and stuff down below so you can check those out So when it comes to editing images and photos or even icons and things like that If you have access to like photoshop and illustrator, you probably don't need to know this section here But if you don't then these are the tools that I highly recommend and that I use as well So I use photo.com to just crop images because sometimes if you download your images from unsplash or adobe They might be too big to upload onto your wordpress website Right, and if it's too big then it's gonna load really slowly for your website. So generally for um, Let's say like a hero image. So we just drop in one from My desktop here So for a hero image i'd probably go for anywhere around I think 1600 times about 900 pixels in height Up to like 1900 times about 1200 pixels in height, right? So let's just say we want to crop it then what we could do just click on resize here And yeah, make sure the lock is selected Set it to let's say 1600 And click on apply Right. So as you can see the height is still 1000 so you can keep it like that if you want But sometimes the hero image doesn't need to be that's uh that tall right so you can go to crop here And here we can just select it to like And put in 900 Okay, something like that and you can drag it to where you see fit Click on apply and you can also make some adjustments as well. Like for example You can click on the basic here and you can adjust the brightness saturation You can also add some um blur effects to the background as well As well as adding text if you need to right so generally I don't add Text on it though for like a hero image You might want to if you're adding it for like a general sort of Image on your website. Okay. So if you're uploading like image for your blog post featured image I'll probably go half this size So probably let's say you're doing um maybe 800 Okay, something like that if it was like a blog post featured image and you want to make sure that you know They're all consistent size like the same size. So that way when you upload it, you know, there's no issue in terms of like the resizing of the image like it all is high quality and The height is all the same because sometimes when you upload onto wordpress Um, the height is a little bit different and then that just makes your website ugly Okay, so you can also use another tool called clipping magic So if you have like a profile picture and you want to remove the background then this is like the perfect tool for it Okay, so here you can also use it for like product photography as well, which is super super cool So this is a lot easier to use than photoshop because it uses like Um ai to help you sort of crop it out. Okay So I think this one with the pro version. I think it does have the magic clipper Built-in as well, but I don't use the pro version here. I just use it for this one over here Okay, and the same thing for canva So canva is a really great resource if you want to design anything for your website for like for example like the blog post featured image or even like youtube thumbnails, um, like facebook covers anything that you need Um for your website like you can use canva, right? So it's an amazing amazing resource and I recently just created my youtube thumbnails using canva as well It's just super super easy to use. So I highly recommend it and If you want something closer to like photoshop, then I would go with pixel.com, right? So you can go and click on advanced pixel e okay, so for example if you want to edit the Um svg file you can click into it and you can edit the colors Of it, but you can't really edit the um the layers of the sort of the the drawing Okay, so you only can do that in like illustrator. I think there's some other tool Online as well, which can sort of help you edit the layers within that as well All right. So I think that is pretty much it when it comes to image editing and then i'm going to move on to Optimization so I just want to share with you some of the resources that I use For example checking the website speed as well as optimizing and tools to make sure that the website's mobile friendly, right? So what I do recommend is checking the speed of your website because you want to make sure your website loads quickly For your main audience so you can go to a website called tools.pingdom.com or you can just google Pingdom speed test. All right, so you can plug in your url here and then set it to the location which you want to test it so for example you want to test it at the location where your main audience is from right because Um, you don't want your website to load slow for your main audience, right? So test it. Okay, and then what I do recommend is trying to keep the page size lower So you want to make sure that your images on your website is optimized. It's not too big That's why we cropped it before but i'm going to show you another tool to ensure that The size of the image is smaller as well And for the load time I would stay between I think two to three seconds is pretty good Um for your load times now, you want to try and keep it below that if it's too high then people click off your website all right, so Some of the factors that also affect it is where your website's hosted So most of the times your website might be hosted in the united states And if your main audience is let's say in australia, then it's going to load a little bit slower Because it takes longer for for the data to travel there Um, if that's the case then either you can get like a cdn like a content delivery network So you can set that up for your website and basically what that means is the cdn Network is going to store your information at a location which is closer to your audience, right? So it's going to deliver the data quicker to your audience That's one of the ways that you can do it. Um, you can also download like a caching plugin for wordpress And also you probably want to make sure that like your plugins and also your themes are optimized And probably delete like the plugins that you're not using and things like that. Okay to speed it up And that is pretty much it. So to actually optimize your images, you can use a tool called compressor.io Okay, so for example the image that we've cropped before we can just click on try it And then i'm going to drop that in Okay, so as you can see, it's about 327 kilobytes now. It's about 200. That's 39 percent Reduction. Okay. So if you have a lot more images on your website, then it's gonna um help save a lot of the Page size. Okay, so that's going to help you load a lot quicker And then you also want to use responsinator to ensure that your website's responsive for All devices. Okay. So here it will show you sort of the the different sizes Of people's mobile devices and also tablets. So you want to ensure that your website's good for all devices Okay, so you can use this tool. You can also use the chrome tools if you're using chrome. So for example Um, let's say we can just right click it and then we can click on inspect And then we can select uh this thing over here Okay, so click on that and then here we can select the device and things like that to see what it sort of looks like All right. So So now I want to show you some other tools, which I think you might find useful as well So some other tools that I do want to mention is 0 to 255 So what I use this for is sometimes I need a button hover color And generally when you hover over buttons, like you'll notice that either goes lighter or darker and you can randomly choose it I guess but sometimes I just like to Put in the color code and then just get something that's very very. Um exact. I don't know what it is But like let's just say for example, uh, you got a dark gray here Right, so that's the original color All right, so that's the original color of your button then you can either hover it, you know Two shades lighter or two shades darker that way people know it's a button, right? So sometimes you might have like a different color. So let's just say for example, we take this color over here right And you've got a orange button somewhere on your website. So we just paste that in Right click on next So you do want to change that to maybe something a little bit darker So maybe something like this or even lighter so people know that's a button, right? so that's why I use this for and sometimes I also use it for let's say, uh, we're building a website and For example, um this section over here. I want to change this color to let's say the orange color Right, but then somewhere down here. I might not want to use this same orange. Um, But I still want to stick to the sort of color palette, right? So what you can do is you can take the color code right and then you can go back to the website over here And then you can use a shade of that original color, right? So that way it still keeps things consistent. Um in terms of the color scheme, you're not introducing like a completely new color Um, so for example, let's say something like this We can just paste that in and it's still sort of like the color scheme Like if you use like the same color then, you know, it just doesn't look as good, right? So that's what you can use it for. Okay So now the next tool that I like is also this one over here I don't use it too much, but you might find it useful. So for example, you've probably seen some websites where Um, you've got a image inside a laptop and essentially what you need to do is just upload the screenshot of it And then it will place it in here for you and then you can download it, right? I think for a few dollars then you can download it on and onto your computer and then you can use it Right. So another tool that I like is also free pick, right? So it's got a range of different sort of graphics as well as photos and icons which you can use as well All right. So this is another great resource And you probably need to pay for the premium membership. Otherwise, you'll need to credit the authors again Okay, so I think that is pretty much it for this video of the website resources that I use for my wordpress website So if you're using like other resources that you think other viewers might find useful Then drop it in the comment section down below and i'll try and add it into the youtube description So everyone can go and check it out Now that is pretty much it. So thank you guys for watching. Please subscribe for more videos and like this video. Thank you