I have been working in the web design / development space for over 10 years now, and in that time I have collected some pretty handy tools that make my life easier. Below are some of the tools that have saved me time, cost and headaches! Better yet, all are either free or have a free tier.
1. Colorzilla
Colorzilla is a Google Chrome extension that allows me to accurately retrieve the hex code of a colour on any given web page. With Colorzilla I just select my extension, choose ‘Pick colour from this page’ and click the colour I want to get. It copies the hex code to my clipboard so I can paste it in my own styling. This is really handy when you are working on a clients website and they don’t know the exact colour hex of their brand. Simply select it from their old site or logo and off you go!
HTML to Design is a Figma plugin / Chrome extension that allows you to copy any web page and import it into an editable Figma frame. This is super handy if a client is looking to make a change to their existing website, but maybe wants to explore design options first. Simply import the page into Figma and you have a ready design for tweaking / copying / version testing, etc.
Loom is easily one of my most used tools day to day. As web design is such a visual area, often a simple email to a client with updates is not enough to bring your ideas across, and a call might take up too much of everyones time for a relatively minor demo. Loom allows easy screen recording and sharing to anyone, meaning I can demo a design change and send that demo to the client, without waiting to schedule a call. They can review in a time that suits them! Loom also allows commenting on timestamped sections, transcript generation, video editing and more. The free version of Loom allows up to 5 minutes of recording at a time too, so plenty for clients to demo bugs and send back without having to buy anything. I also find it handy for recording training for clients looking to manage their own websites.
Fontanello is another dead handy Chrome Extension that allows you to highlight text and see all of the font information applied. I can quickly tell what font is being used, what size, letter spacing and even what hex code is used for the colour of the text. This is so much quicker than hunting through Devtools for the font details across multiple style layers. Big time saver!
Yet another Chrome Extension, Wappalyzer is a tool to gather information on how an existing website is built. Countless times I have been on discovery calls with leads, or am quoting a website rebuild when I need to quickly see what their current website is built on. Wappalyzer can tell you the Framework used, the CMS if there is one, if Analytics is attached, even down to the payment processor the site uses. Very handy for quickly learning what you are dealing with, and clients can be impressed by your quick deduction of their platform too!
So if you are a designer and want to speed up your day, check out some of those tools and let me know what you think. A lot of my tools are discovered via the Web Designer Depots weekly newsletter so be sure to subscribe to them if you want the latest tools out there. https://webdesignerdepot.com/