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
- Collect UI - https://collectui.com & https://dribbble.com
Handpicked UI inspiration for your web design projects. Organised into categories for easy viewing. - Milanote - https://milanote.com
Perfect tool to help you organise your thoughts on a visual board to keep things organised. - Adobe XD - https://www.adobe.com/au/products/xd.html
The best tool to design & prototype anything. And It’s FREE!
Colour & Fonts
- Whatfont
A chrome extension to “spy” on what fonts other websites are using - Myfonts - https://www.myfonts.com
Where you can download fonts that you see on the internet and use for your website. Free & Paid. - 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. - Adobe Colour - https://color.adobe.com/create
Best tool to create color palettes for your websites or design.
Assets - Images/Icons/Illustrations
- Unsplash & Pexels - https://unsplash.com & https://www.pexels.com
Amazing resources of images for personal or commercial use without attribution - 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! - Flaticon - https://www.flaticon.com
The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats. - Undraw - https://undraw.co
Open-source illustrations for any idea you can imagine and create. SVG & PNG. - Convert SVG file to PNG - https://svgtopng.com
Download the SVG file from undraw.co then convert to PNG file before uploading to website. - 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
- Fotor - https://www.fotor.com
Super simple photo editor. Perfect for resizing and cropping images before uploading to website. - Clipping Magic - https://clippingmagic.com
Automatically remove image backgrounds in seconds online. Great for profile pictures and product photos. - 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. - Pixlr - https://pixlr.com/e/
A lite version of Photoshop. Web based and Free.
Optimization
- Pingdom Website Speed Test - https://tools.pingdom.com
Test your websites loading times with different locations around the world. - Compressor io - https://compressor.io
Reduce your image size without much quality loss. - Responsinator - https://www.responsinator.com
Test your WordPress websites mobile responsiveness on all devices.
Other Useful Tools
- 0to255 - https://www.0to255.com
Perfect for hover states and keeping on colour scheme. - Freepik - https://www.freepik.com
Another amazing graphic resource - Lorem ipsum - https://www.lipsum.com
Generate placeholder text for your designs. - Gradient UI - https://uigradients.com
Generate beautiful gradients. - 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!
#wordpress
1.10 GEEK