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

Web Design Resources for Your WordPress 

20+ Must Have  Web Design Resources for Your WordPress Website 2021. They are used 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 gonna 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 gonna 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 the 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 skip straight onto WordPress and maybe you've imported a template or you're following a tutorial I mean normally doing two things at the same time and sometimes that can be quite challenging So what I recommend Is to design first and a 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 signup and you can save it as inspiration, right so you can click into it So what I use this with is another tool called Milanote 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 alright so you can sign up for free and login and once you've done that you also want to download the milliner 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 Milanote and you can save it to your board alright 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 check out over here as well. Click into it Right. You can also navigate to the dribble page as well But I'm just gonna save it to Milanote just like that save it to board Alright, and maybe I like this one over here as well. Click into that and Save that Milanote. Ok. So once you've saved it, it's automatically going to sync right to your board and Let's do min 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 clients so they can drag in different things they like and 








I think Even for other projects it's really helpful as well. Ok, so make sure you get Mianote 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 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 it 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 it 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 gonna ensure that it's gonna align on your WordPress website, right? So that's gonna 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 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 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 Links to your different pages as well so for example I've linked the about write to the about page link the services to the services page Right so I can also click on let's say if I'm gonna link the logo Ok back to the home page just like that and I want to link this one Okay, I can't click it because I lost it. Anyways, don't worry about it so we can click on the play button over here All right, so I'm gonna 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 gonna link to your about page, right? So it's really really awesome and Once we click on logo It's gonna 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 Alright, so instead of building and designing on WordPress. You can do the design up 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 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 Alright, so the next category or resources and tools is the fonts and also our colors So we're gonna 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 gonna 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 gonna blend in really nicely Ok, 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 go back to milanote 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 Just paste that in and then click on enter and that's gonna 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 the free 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, right? 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 gonna 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 For example, let's say like muted or like bright. Alright, 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 I can 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 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 gonna 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 gonna copy 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 gonna 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 All right, and then we can find the image. So for example, just want to be here click on open Alright, and that's gonna find the colors. So I'm going to 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's Okay, so you don't want something like this? Probably it's gonna be ugly 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 on enter Oops, I forgot to select linear gradient Alright, so I meant to put that in first okay, and then the next bit is going 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 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 That separation right instead of just being like a grey 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 a little bit. I don't know why it's like so big always so we scroll down over here Let's go 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 do want to go over it again right So there's basically two main type faces 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 with 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, right? 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. All right So first of all, you should understand that and then you should choose your font accordingly, right? So when you're choosing your font, let's say Tiffany & 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 right 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 see if you like what you see on Tiffany & Co like their font Then you can download a Chrome extension called whatfont alright? So install that onto your browser and you can hover over the text and it's gonna tell you what font they're using So you can write that down on a piece of paper and then you can google it Most of the time you can find that font on myfonts.com So let's just say for example the santral and get and click on enter so here you can download the santral font and use it onto your WordPress website, okay, 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 category 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 and then 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 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 like the style of the image is not suitable 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 Yeah, probably not right so you do want to check out these ones the paid options because it's gonna save you a lot of time and Your you're able to just upload the image and maybe just like add like a gradient overlay over and use it as a hero image Instantly you don't have to sort of manipulate it and things like that and it's gonna 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 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 a 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 honors 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 are downloaded 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 gonna 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. All 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 him 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 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.comp 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 and 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 on to 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 will 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 SVGtoPNG.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 Renders you can use it for your website 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. Ok, 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 fotor.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 Let's say like a hero image. So we just drop in one from my desktop here So for a hero image, I 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 You know, 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 that sometimes the hero image doesn't need to be that's that tall right so you can go to crop here and here we can just select it to like and Put in 900. Ok, 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 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 an image for your blog post featured image I'll probably go half the size. So probably let's say you're doing 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 on to WordPress 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 soo super cool So this is a lot easier to use than Photoshop because it uses like 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 a 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 Like Facebook covers anything that you need?









 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 Pixlr com right so you can go and click on advanced pixel II okay, so for example if you want to edit the SVG file and click into it and you can edit the colors of it But you can't really edit the layers of the sort of 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 alright, so I think that is pretty much it when it comes to image editing and then I'm gonna 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 is 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 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 gonna 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 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. Alright, so Some of the factors that's also affected is where your website is hosted So most of the times your website might be hosted in United States and if your main audiences let's say in Australia Then it's gonna load a little bit slower because it takes longer for the data to travel there 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 gonna store your information At a location which is closer to your audience, right? So it's gonna deliver the data quicker to the audience That's one of the ways that you can do it. 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 and for we can just click on try it and Then I'm gonna 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 help save a lot of the Page size. Okay, so that's gonna 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 let's say we can just right-click it and then we can click on inspect and Then we can select 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 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 0to255 so what I use this for is sometimes I need 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 Exact I don't know what it is. But like let's just say for example You got a dark grey here Alright, so that's the original color. Alright, so that's the original color of your button Then you can either hold for 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. Alright 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 dark up So maybe something like this or even lighter so people know that's a button all right, so that's why I use this for and sometimes I also use it for let's say we're building a website and for example 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 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 In terms of the color scheme, you're not introducing like a completely new color So for example say something like this We could just paste that in and it 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.