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!
