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 – https://collectui.com & https://dribbble.com
Handpicked UI inspiration for your web design projects. Organised into categories for easy viewing.
2. Milanote – https://milanote.com
Perfect tool to help you organise your thoughts on a visual board to keep things organised.
3. Adobe XD – https://www.adobe.com/au/products/xd.html
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 – https://www.myfonts.com
Where you can download fonts that you see on the internet and use for your website. Free & Paid.
6. Google Fonts – https://fonts.google.com
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 – https://color.adobe.com/create
Best tool to create color palettes for your websites or design.
—
Assets – Images/Icons/Illustrations
8. Unsplash & Pexels – https://unsplash.com & https://www.pexels.com
Amazing resources of images for personal or commercial use without attribution
9. Adobe Stock & Shutterstock –https://stock.adobe.com & https://www.shutterstock.com
Best paid resources of images you can use for your web design projects. Much more selection!
10. Flaticon – https://www.flaticon.com
The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
11. Undraw – https://undraw.co
Open-source illustrations for any idea you can imagine and create. SVG & PNG.
12. Convert SVG file to PNG – https://svgtopng.com
Download the SVG file from undraw.co then convert to PNG file before uploading to website.
13. Fiverr – http://hoganchua.com/get/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 – https://www.fotor.com
Super simple photo editor. Perfect for resizing and cropping images before uploading to website.
15. Clipping Magic – https://clippingmagic.com
Automatically remove image backgrounds in seconds online. Great for profile pictures and product photos.
16. Canva – https://www.canva.com
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 – https://pixlr.com/e/
A lite version of Photoshop. Web based and Free.
—
Optimization
18. Pingdom Website Speed Test – https://tools.pingdom.com
Test your websites loading times with different locations around the world.
19. Compressor io – https://compressor.io
Reduce your image size without much quality loss.
20. Responsinator – https://www.responsinator.com
Test your WordPress websites mobile responsiveness on all devices.
—
Other Useful Tools
21. 0to255 – https://www.0to255.com
Perfect for hover states and keeping on colour scheme.
22. Freepik – https://www.freepik.com
Another amazing graphic resource
23. Lorem ipsum – https://www.lipsum.com
Generate placeholder text for your designs.
24. Gradient UI – https://uigradients.com
Generate beautiful gradients.
25. Placeit – https://placeit.net
Create mockups, logos, videos & designs in seconds!
My Basic Web Design Guide – https://hoganchua.com/website-design-guide/
My Recording Equipment: https://www.amazon.com/shop/hoganchua
Enjoy!
source
👍👍👍
Total Recall “Doug Quaid”
thanks Hogan learnt ALOTTT
Hi Thank you. When you create the design how do you transpose to themify?
Do the same please
your amazing thank you very much !!!!
Can I create a page with readymag and then use it on WordPress?
How to create multiple vendor if having different restaurants under same company? Kindly advise.
good
Your channel is so lit I have no words I am going to quit my degree!
Adobe xe isn't free
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
You're really a very nice kind-hearted person! Thanks a lot God bless you!
Always learning with you! Cheers from Brazil!!
you are great. I love your videos and your Aussie accent. thank you!
You are a wonderful and amazing man. Learned lots of things from you, God bless you
That adobe colour wheel site is an excellent resource, thank you!
woooow Man you deserve more than 1M subscribers and millions and millions of views keep it up~ it was an amazing tutorial
Thank you so much!
Blimey! Truly an helpful video.
awesome
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
hi hogan i was study with you in udemy.com and that was very help to me ……. but but i'm so confused
really helpful
YOU ARE JUST AMAZING. THANK YOU!!
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!
Great content. You make it so simple that beginners like me can easily grasp the idea. Thank you so much!
Thank you for the information but how can I add the theme which I've created in adobe xd to wordpress
Hey, Hogan great video. Why don't you make a video on designing website in adobe xd
Thank you! How do we link xd to WordPress afterwards?
great , man
Amazing tutorial. Cheers from Brazil.
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
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.
Thank you Hogan for sharing such resourceful website development with us. It is so useful especially for a newbie like me.
Please do the XD Tutorial.
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!!
Amazingly helpful and useful video, well done!
Thanks you did a good job I been following your videos and watch so many times to apply on my website
thanks !!!!!!!!! obrigado!
Great class many thanks but you can consider 'tinypng' for resizing images
I'm glad I found your channel, thanks once again
I am also staying in Melbourne I would like to meet you could you share your contact information.
Great tools
Try this one for the colors.
https://coolors.co/
I like your videos.it's really easy to understand.i hope I will learn more from you
Thank you! You have made me better! Keep up the great video tutorials! You are the MAN! 💯🙏🏽
adobe xd is not free available
Your videos have sound artifacts that sound like loud cracks or short crackling noices. Sorry, don't know how to describe them but they're really annoying. It might be your video editors exporter?
But otherwise GREAT video. Thank you so much! :'D
Whoooa! I love all the website tools, thanks
yes, please make a video on Adobe XD:)