5 Chrome Extensions for Web Designers

If you are involved with web development or web design, you might be surprised at how browser extensions or add-ons can increase your productivity. As a web designer, I have found many of these extensions have helped me in my everyday work and think they can help you, too.

Chrome Extension 1: MeasureIt!

This is an Chrome extension by carvalhoweb.com that is an interesting tool. This tool allows you to draw a ruler over any item on a webpage and measure the length and height of any part of a page in pixels. Size and measurement is a very important aspect of web design and pixels are the most common medium for digital measurement. Things can go drastically wrong if your design ends up being the wrong size. To me, web design feels like piecing a puzzle together. If suddenly one piece no longer fits because of measurement issues, you must account for that and rearrange content until it makes the most sense to the viewer.

Chrome Extension 2: WhatFont?

Have you ever had trouble identifying a font on a particular webpage? Sure, you could always inspect the HTML and read through things, but what if you could just click a button instead? “WhatFont?”, an extension by chengyinliu.com. This extension allows you to see names of fonts, font-family, the size, and line height on a particular webpage with the click of one button.

Chrome Extension 3: ColorPick Eyedropper

Another great extension is “ColorPick Eyedropper” by vidsbee.com. This is a very simple tool and allows you to select color values from anywhere on the webpage. Color accuracy is very important in web design and development, this tool takes out the guessing game for you.

Chrome Extension 4: Web Developer

One of the most in-depth extensions I’ve seen is “Web Developer” by chrispederick.com. This tool includes a tool bar that has numerous options to tweak/view different aspects of any webpage. If you could think of a website as a skeleton, this extension can help you inspect/view each piece that makes up the all the bones of a website in great detail.

Chrome Extension 5: Awesome Screenshot

My most used extension would have to be “Awesome Screenshot” by diigo.com. Despite the quirky name, this extension is a professional tool and I cannot even begin to tell you the number of times I use it in a day. Awesome Screenshot allows you to capture or clip a selected area of a webpage or it can select a whole page (meaning it will scroll down and capture the entire web page as an image). After this, you can annotate it rectangles, circles, arrows, lines, and text. Once you are happy with the result, you can either save it as an image file or copy it to your clipboard (I usually copy it to my clipboard so I can paste it into Photoshop and begin working from there on).

I tend to think of these extensions as Batman does his utility belt. With these tools combined, they can save your life in the most desperate of situations, especially when time is not on your side.