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



In this video, I’ll show you all the tools and resources I use to create my WordPress website. I’ll also show you how I use it too, so you can implement it to design and build a better website.
➤ Resources mentioned below (Click “SHOW MORE”)

Design

1. Collect UI – &
Handpicked UI inspiration for your web design projects. Organised into categories for easy viewing.
2. Milanote –
Perfect tool to help you organise your thoughts on a visual board to keep things organised.
3. Adobe XD –
The best tool to design & prototype anything. And It’s FREE!

Colour & Fonts

4. Whatfont
A chrome extension to “spy” on what fonts other websites are using
5. Myfonts –
Where you can download fonts that you see on the internet and use for your website. Free & Paid.
6. Google Fonts –
Most WordPress Themes will feature the Google fonts – you can use this resource to find what’s most popular & also see what the fonts look like.
7. Adobe Colour –
Best tool to create color palettes for your websites or design.

Assets – Images/Icons/Illustrations

8. Unsplash & Pexels – &
Amazing resources of images for personal or commercial use without attribution
9. Adobe Stock & Shutterstock – &
Best paid resources of images you can use for your web design projects. Much more selection!
10. Flaticon –
The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
11. Undraw –
Open-source illustrations for any idea you can imagine and create. SVG & PNG.
12. Convert SVG file to PNG –
Download the SVG file from undraw.co then convert to PNG file before uploading to website.
13. Fiverr – (Use HOGANCHUA for 10% Off)
Best place to hire freelancers starting from just $5. Get icons, logos, product renderings, product photography and so much more!

Image Editors

14. Fotor –
Super simple photo editor. Perfect for resizing and cropping images before uploading to website.
15. Clipping Magic –
Automatically remove image backgrounds in seconds online. Great for profile pictures and product photos.
16. Canva –
Best tool to create amazing designs for anything for free. From Blog post featured images, to thumbnails, to ebook covers and so much more.
17. Pixlr –
A lite version of Photoshop. Web based and Free.

Optimization

18. Pingdom Website Speed Test –
Test your websites loading times with different locations around the world.
19. Compressor io –
Reduce your image size without much quality loss.
20. Responsinator –
Test your WordPress websites mobile responsiveness on all devices.

Other Useful Tools

21. 0to255 –
Perfect for hover states and keeping on colour scheme.
22. Freepik –
Another amazing graphic resource
23. Lorem ipsum –
Generate placeholder text for your designs.
24. Gradient UI –
Generate beautiful gradients.
25. Placeit –
Create mockups, logos, videos & designs in seconds!

My Basic Web Design Guide –
My Recording Equipment:

Enjoy!

42 comments

  1. Hi Hogan, first of all congratulation for this video. It is really nice to discover useful tools free in order to help us to build our website. I am quite a beginner in web development and I tried to do a website for a town hall. They don't have really a clue about how to organize each page, so adobe should be a good solution to make a prototype. My main concerned is after that, how I will create it in wordpress, have you done another video ? Many thanks for your help. Quentin

  2. woooow Man you deserve more than 1M subscribers and millions and millions of views keep it up~ it was an amazing tutorial

  3. I feel like God has sent you to revive others who are in need for real guidance on making extra money to survive.
    I like you man, you're one of the most honest men I have ever seen in my life. God bless you

  4. Will these special designed websites much slower than just the simple wordpress theme?I only have very basic shared host plan and really worry about it. And are they still looks good at different resolutions such as mobile devices? Thanks a lot!

  5. Hogan, I absolutely love all your tutorials, they are so easy to follow and understand. I requested a long time ago to do a tutorial on using the Divi Theme. I hope you are able to do that at some point. Great video man. Thank You

  6. So amazing Hogan. I deed not spent much time on your video before i comment. You have made a perfect helping hand for me. Thanks man. I really appreciate you.

  7. Thank you Hogan for sharing such resourceful website development with us. It is so useful especially for a newbie like me.

  8. This was one of the best tutorials I have ever watched on youtube, you were clear, organized and easy to understand. Not to mention you listed everything wIth links in your description. Thank you for that! Keep it up!! You ROCK!!

Leave a Reply to Wei Wang Cancel reply

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