8 Important Tools Every Web Designer Should Use
WMT Section: Webmaster Tips - WMT Category: Tips for Webmasters


This is a great online tool that lets you compare fonts and see how they will look on your screen. You can select different typefaces, size, alignment, leading, decoration, and more. Fonts are constantly added and updated. It’s a great way to see which ones will look best on your website.


A Firefox Add-on that adds a color picker, eyedropper tool, and page zooming right into your browser. You can use it to pick colors from images and elements on any web page and then paste into a text editor or anywhere else needed. This is great for getting inspiration for your own designs or if you’re trying to match exact colors. You can also zoom into any page and measure the distance between any two points on the page. - Download ColorZilla

If you’re looking for Chrome extensions, you may like colorPicker 0.9 and Eye Dropper .

Web Developer Toolbar

image02webdev.png A Firefox Add-on (and Chrome extension ) that adds various web development tools to your browser. There are various menus and options related to cookies, CSS, forms, images, source code, and much more. You can show, hide, outline, and even replace elements on any web page for testing purposes. This tool is best used in addition to Firebug (mentioned next).


This is a top favorite among most designers; it’s a Firefox Add-on that includes tons of powerful, advanced features. You can inspect HTML, modify CSS styles and layouts, debug JavaScript, analyze network usage and performance, and much more. There is a lite version for Chrome (though not as good as Firefox’s version) and also numerous extensions for Firebug itself that will help extend the functionality.

Browser Shots

An excellent online tool that lets you test the browser compatibility of your website across numerous browsers and operating systems. Just enter the URL of your website (or the site that you want to test) and then check off your desired testing options. You’ll then be able to see screenshots of how your website looks in each selected browser and operating system.


Whether you’re an experienced designer or just starting out, you’ll have to deal with the task of creating or implementing color schemes. ColorSchemer provides a variety of tools for Windows , Mac , and iOS that will help you create color schemes and palettes that can then be used in your designs. It can also “intelligently” suggest color schemes to you, if you need a bit of inspiration.

If you don’t want to download anything, a great online alternative is COLOURlovers . It’s a “creative community where people from around the world create and share colors, palettes and patterns [...].” You can also create your own palettes using the online tools if you prefer.


This is one of the best tools available for quickly sharing and syncing files across devices. It’s available on Windows, Mac, Linux, iOS, Android, and BlackBerry. You’ll get 2GB of free space when you sign up and can upgrade if needed. It acts as a virtual drive on your computer so that you can save files right to it. Files can then be accessed from your mobile device or even when offline. - Dropbox Sign up

If you’re looking for an online alternative that is great for sharing files quickly with clients, colleagues, or on social networks Minus is also another great option.


If you don’t have a photo editing program like Photoshop or just don’t have the time to fire up Photoshop just for a quick edit, Pixlr is very handy. It’s an online photo editor that lets you add effects, filters, and adjustments to images. You can also create layers and use custom brushes much like Photoshop. Just head to the website and you’re able to make your edits, save, and continue working.

You can also download the companion app Pixlr-o-matic for Windows, Mac, Facebook, Chrome, or iOS. This tool is great for adding effects like vintage and retro looks, to photos.

Now it’s your turn. As a web designer, what is your favorite tool? Which tool do you think is the most important? Feel free to share!



#1 DialSandhya 2012-06-22 18:47
Nice Information
Thanks a lot...

Add comment

Security code


Site Map

Write for us!

Do you have any Joomla custom work either on template, component, module or plugin to show off?
Or do you offer free tips and resources for webmasters?

About is a Joomla CMS related portal that publishes authentic Joomla Extensions, tips and resources for webmasters. Follow wmt_joomla on Twitter