My WordPress Website Recourse List in 5 Different Categories

WordPress-Website-Recourse-List Header Image

This WordPress Website Recourse List is to help you when you want to design a better website, save money, and save time you must read this blog post.

Today I want to share with you some of my WordPress website design resources I use for my WordPress website projects. In today's post, I just wanted to share with you guys everything that I use and how I use it across my WordPress websites. Hopefully, you guys can implement it for your own websites, and save you some time and save you some money. We're going to get straight into it. 

Please share this blog post if you find this useful. It will really help me out. 

Thank you. 👍

Okay, so what I've done is basically categorize all the tools and resources into five different categories.

The first category is your design resources and tools and the second one is color and fonts. The third is going to be your assets, fourth is image editing and the fifth is optimization. I'll also show you some bonus ones that you might find useful at the end of the post.

We're gonna start off with the WordPress design resources.

Before building a website on WordPress or any other platform, it's recommended to design your website first.

Imagine your website sort of like a house and if you're building at your dream house, you don't sort of just design and build at the same time. Normally you have your architect, and they designed the house and then they pass the designs to the builder, and they just follow the designs. The reason why you're probably not going to design a good website on your first go is because you haven't designed it.

To design first, you want to look at inspiration. Even if you're a professional you do want your clients to have a website that they like. You can look at your competitor's websites to get some ideas, so you can create a website with similar features and functions.

Okay, another good resource is collectui.com.

WordPress-Website-Recourse compilation

You can check out all the designs from Dribbble and Behance and it's essentially put into one area where you can navigate to the different things that you want to create.

For example, if you want to create a signup page, then you can click on, sign up and you can save it as inspiration.  You can click into it.

What I use is with is another tool called Milanote and essentially, I use it to just organize my thoughts and that helps me stay organized and not procrastinate because if you have so many things on your mind then it's very easy to just get overwhelmed. You can sign up for free and log in and once you've done that you also want to download the Milanote Chrome extension and that's going to help you save these designs that you find on the internet. Once you download the chrome extension, you can right click and save to Milanote and you can save it to your board. All right. Now, we can look through the designs.

Once you've saved it, it's automatically gonna sink right to your board. And then you can also add in your notes, you might have notes about it, and you might have some client notes about it as well.  You can also add to a to-do list which is helpful. And you can also add arrows and different color. It's super easy to use.

Plus, you can invite your team or share it with your clients so they can drag in different things they like. I think even for other projects it's helpful as well. Make sure you get Milanote and once you've done that then you want to design your website.

To design your website, you want to use Adobe XD

Wordpress-website-recourses-design-softwares

In my opinion, it's the simplest design software out there and it's completely free and it's by Adobe. But don't be scared because Photoshop sometimes even for a beginner can be quite hard. This is a lot easier than Photoshop. There are some good tutorials on Adobe XD on YouTube now.

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. What I really like about it best is the ability to have the snap graphics. It snaps into place, and it helps you align everything. Because I think one of the biggest mistakes most beginners make when they're building a WordPress website is that things aren't aligned and the spacing in between the elements, they're not even.

Sometimes it's too close, sometimes it's too far, with this you can see the distance for example 40 pixels and 40 pixels and then it looks very good, and then it's aligned as well.

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.

It's just super, super simple to use. Everything's “drag and drop”, and you can also just drag in the pictures.

You don't have to crop your images, you can double click and arrange, so easy to use. I highly recommend it and after you finish the design then you can click on prototype, and you can also link to your different pages. For example, link the "About Page" right to the "About Page". Link the services to the services page, and so on, you're still following along!

You can have the whole design just like that.

Then you can generate a link and share it with your client or your team and see what they like and don't like. Instead of building and designing on WordPress, you can do the design over here. Then you once you receive feedback, you can make the adjustments easily, and the best thing about it is just super quick.

There's no loading time and everything is just really, easy.

You want to make sure you use those three resources to design your website first and then move on to the next category.

The next category of resources and tools is the Fonts and Color.

font and color

We're going to talk about choosing color right now and the tools you can use.

Choosing color is important before you start building because your color are going to help your brand differentiate itself from its competitors.

It's also going to attract a certain demographic and it might evoke certain emotions, you want to portray for your brand.

What you want to do is look at, color psychology and you can use it as a guide to choose your color.

Then you can go to a website called color.adobe.com.

It's another Adobe product, 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 good color palette. All the color here are going to blend in nicely.

Again, it's really, awesome. For example, you can click on monochromatic and here it's going to change the color like that and then you can use it for your color palette. What you can do is you can copy over the color code (Hex Code), and you can go back to Milanote, and add in your color codes.

You don't have to save it on Adobe, you can save it in Milanote and use it for your projects.

Drop-in a note and just paste that in and then click on enter and that's going to generate your color palette. When you're building a website, you can take the hex code and use it for your website and for your marketing materials.

Let's say, if you're creating a YouTube channel page, then you can use the same color, and that helps your brand be cohesive.

It's another Adobe product, 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 good color palette. All the color here are going to blend in nicely.

Again, it's really, awesome. For example, you can click on monochromatic and here it's going to change the color like that and then you can use it for your color palette. What you can do is you can copy over the color code (Hex Code), and you can go back to Milanote, and add in your color codes.

You don't have to save it on Adobe, you can save it in Milanote and use it for your projects.

Drop-in a note and just paste that in and then click on enter and that's going to generate your color palette. When you're building a website, you can take the hex code and use it for your website and for your marketing materials.

Let's say, if you're creating a YouTube channel page, then you can use the same color, and that helps your brand be cohesive.

Another thing I really like about Adobe Color is you can click on "extract theme", and you can drag and drop in an image that you like. Then it's going to take the color and pull them from the image, then you can use that for your website. You can also select the different moods. Let's say muted or bright, I like colourful.

 You can go back to the color wheel, and then you can copy over the hex codes we want to use on our website. That's how you can use Adobe Color for your website.

Choosing Fonts

Now, choosing the right font for your website is also important because each font has a different personality.

There are basically two main typefaces.

One is the Sans Serif, and one is the Serif.

SerifvsSansSerif

With the Sans Serif, the edges are plain, and the strokes are even, so this is going to appear a lot more simple, clean, and modern. It's going to be shown on most of the websites that you visit. Even on the interface of your computer, it's mostly going to be Sans Serif.

Then you've got the Serif typeface and it's got the curves and the thick and thin strokes. This one looks a lot more traditional, elegant and it's got a handcrafted look. First, you should understand that, and then you should choose your font accordingly. 

When you're choosing your font, let's say Tiffany & Co, 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.

Tiffany-&-Co

I think if they use the Serif typeface for the body text, it's gonna be a little bit too much.
They want to maintain a sort of this simple vibe.
If you like what you see on Tiffany & Co, you can download a chrome extension, called WhatFont and install that into your browser and then can hover over the text and it's going to tell you what font they're using.
Write that down on a piece and then Google it. 

Most of the time you can find the font on my fonts.com or dafont.com

Generally, we're gonna use two fonts on our website. So, choose fonts that are still easy to read for people who might not have such good eyesight as you, maybe. Furthermore, you may want to consider what your font will look like when you go to print, as again, you want to keep in mind, brand cohesiveness across all medium of marketing.

A word to the wise, don't use too many different fonts on your website, it's not going to be pleasing to your visitors and could cause people to spend less time on your website once it's live!

Okay, that is pretty much it for fonts.

Next comes the assets of your website, in particular the images, this can make or break the desired out and something you need to get right.

If people come to your website and you settled on low-quality images, or they're not relevant, they're going to leave your website.

Obviously, the first option that I recommend is if you have access to a photographer or if you're good at taking photos, then use your own photos. The next best option is unsplash.com.

This free resource, which is good, but if you're building a specific type of business, you may need to look at some paid options.
Another free one I like is pexels.com. Both resources I just mention will work great for a local business website, where you or the client might be on a tighter budget.

Only this about using images you did not create yourself, is that the image you choose might be downloaded 20,000 and used on someone's website may half of that, so when you post on social media, then many people might recognize the image and know that's not original or directly related to your brand.

Next, we're going to talk about "icons" as well as the illustrations for your website because sometimes you need them to support your text.

Another reason would be not to use too many images on your website. Icons and illustrations are an important part of your website because if you have a featured section to describe all your benefits you need icons to support your text.

By default, a lot of WordPress themes and builders have their own selection of icons, and you can use that. In my opinion, it's a little bit overused because everyone is using the same icons. It's could look a little generic. What I recommend you do is get custom icons done for your website.

If you look at Uber, they have their own icons and it's consistent and nice as well as using their own illustrations.
This enhances the design of their website and makes it more professional. One place where you can get icons is flaticon.com.

My WordPress Website Recourse List in 5 Different Categories 1

They've got icon packs, and essentially if you click into it you'll have all the icons which are similar in style and similar color and it will go really well with your website. You can also use the search bar, and type keywords that might match your niche to find icons closely related to the industry you're working in.

Some of these ones you might have to pay for otherwise you need to credit the author on the website.

Alternatively, you can go to Fiverr.com and get custom icons done. On Fiverr, you will hire a freelancer to design your logos, your icons, and anything you want. Gigs start at $5, and you can see the seller's reputation, read reviews from previous clients and even contact him/her before you place your order.

You can also use a website called unDraw.co, depending on the style of your website, for instance, if it's a minimal type of website, you can use these illustrations. When clicking on "browse now" you'll find thousands of different sorts of illustrations that you can use. The best thing about it is, you can change the color scheme to match your color palette.

It’s going to be ready to upload onto your website directly and ready for use.

If you want to download it and use it on your website, you'll need to download the SVG file onto your computer. Then go to a website called SVGtoPNG.com to convert it into a PNG file which is a transparent file so that when you upload it onto your website, it is a transparent file and doesn't have any sort of background, which you don't want.

When it comes to editing images and photos or even icons if you have access to Photoshop and illustrator, you probably don't need to know this section.

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, they might be too big to upload onto your WordPress website. If it's too big then it's going to load slowly for your website. 

hero-image-website

For your hero image you probably go for anywhere around I think 1600 times about 900 pixels in height, up to like 1900 x 1200 pixels. Canva is another great resource if you want to design anything for your website, blog post featured image, YouTube thumbnails, Facebook covers to name just a few. Anything graphic you need for your website you can use Canva.

All right, so I think that is pretty much it when it comes to image editing. 

Moving to optimization

I want to share with you some of the resources that I use, for checking website speed as well as optimizing and tools to make sure that the website is mobile-friendly.

I recommend checking the speed of your website because you want to make sure your website loads quickly for your audience.

Go to a website called tools.pingdom.com or you can just Google "Pingdom Speed Test"

Plug in your URL the is box labelled URL, and then set it to the location which you want to test it.

Example, you want to test it at the location where your main audience is from because you don't want your website to load slowly for your main audience.

Test it, and I do recommend is trying to keep the page size lower, so you want to make sure that your images on your website are optimized, it's not too big, that's why we cropped it before.

I'm going to show you another tool to ensure that the size of the image is smaller and for the low time I'll stay between, I think 2-3 seconds is pretty good.

If it's too high, then people click away from your website. Some of the factors that also affect your website is hosting, most of the time your website might be hosted in the United States and if your main audience is in Australia, then it's going to 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 a CDN (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 that is closer to your audience.

This will help to deliver the data quickly to your audience.

That's one of the ways that you can do it. You can also download like caching plugin for WordPress, and you probably want to make sure your plugins and themes are optimized and delete the plugins you're not using to help speed it up.

Optimize your Images

To optimize your images, you can use a tool called compressor.io to help shrink the image file we've cropped before.

And then you also want to use responsinator.com to ensure that your websites are responsive for all devices.

It will show you all sorts of the different sizes of people's mobile devices and tablets. So, you want to ensure that your website is good for all devices.

That is pretty much it for this post on WordPress website resources, you can use for your WordPress website. If you're using any other resources, you think other readers might find useful, then drop it in the comment section down below.

Thank you for taking the time to read this post. Please share it on your social media if you think it can help other people as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.