Home / Gadgets / 7 Must-Have Web Design Tools

7 Must-Have Web Design Tools

A web designer or small business owner who does a bit of design needs all the productivity apps available to save time in the web design process. Saving time in a few areas means more time to focus on the design. Here are seven must have web design tools.

Instant Eyedropper

A lightweight desktop app, instant eyedropper would provide the hex colour for any element shown on the screen. You’ll need to click on the task bar icon to activate the eyedropper tool. It saves time and makes it easy to grab colours on the go.

Resolution Plugins

Once your design is completed, you’ll need to test it to see how it renders on various screen resolutions. Some readymade add-ons for Firefox and Chrome can be used to view the sites under various resolutions.

Resolution Test, an extension for Chrome incudes 13 different screen resolutions across which you can test your website. Firefox’s version of this extension is the Yet Another Window Resizer add-on that is context based.


Use MeasureIt!, to measure specific elements on your screen. It is a Chrome extension that will provide height and width values with a single click. Once you click the icon the screen will fade out so that you can select an area that you want measured. This is quite useful for getting the alignment of elements on your screen.


If you frequently experiment with codes to get website elements just the way you want them, Ditto is a time saver tools that you must have. Ditto is a clipboard application that backup your code when you make changes. How does it work? Whenever you want to store code simply use the control + c option and ditto will go to work and save your code.

Colorzilla CSS Gradient generator

Gradients and textures are both parts of great design. Colorzilla CSS Gradient Generator makes it possible to generate a CSS3 gradient without having to use a background image.

With it you won’t have to resort to image backgrounds and so reduces page load times. Simply enter the hex codes for the start and end of your gradient and the tool will generate a CSS code for your gradient which will be compatible on most browsers.

Image Optimizer

Image Optimizer will resize your images while maintaining the quality of the image. Ther”s no need to open your editor every time you want to resize your image. It is an online tool, but you can also download the app for desktop use as well.

Choose the optimization that you want for your image, click, and within seconds you’ll have a completely resized and optimized image. Image Optimizer is a definite time saver for web designers.

IE Tester

IE can be troublesome, so much so that many designers don’t even bother to test the compatibility of their sites in this browser. I don’t blame them, but sometimes clients request that their websites be IE compatible. IE Tester can be used to quickly inspect the site’s code in this browser. You’ll be able to spot troublesome areas and repair in no time.

What are some other must have tools that are a must have from a design perspective?

About the Writer

Max is the lead internet marketer at Toronto based web design firm 9th sphere. He loves great gadgets and has a passion for helping businesses succeed.

Related Post

About Dan

Check Also

7 Best Gadget and Accessories for Your Smartphone

Smartphone technology is evolving rapidly, bringing about thrilling new options and possibilities. People are empowered …

Leave a Reply