bing code

September 9, 2013

5 Chrome Extensions for Web Designers

Author: Kristen Bachmeier

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!

MeasureIt-Chrome-ExtensionThis is an Chrome extension by 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?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 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.

Color-Pick-Eye-Dropper-Chrome-ExtensionChrome Extension 3: ColorPick Eyedropper

Another great extension is “ColorPick Eyedropper” by 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 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 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.

Kristen Bachmeier

Kristen Bachmeier is Atilus' Director of Operations and helps to oversee all client accounts and day-to-day operations. Kristen also has a background in digital marketing, and has been working in the digital marketing space since 2012.

Similar Posts

Blog image How to Redesign Your Website Without Negatively Impacting SEO
If you're like most business owners, you're always looking for ways to improve your website and grow your business. But you may not want to invest in a complete website...
Read More How to Redesign Your Website Without Negatively Impacting SEO
Blog image Custom Website vs. WordPress Templates: Part II
Once you’ve decided to move forward with creating a website, it’s time to make the choice between a custom or template site. We previously wrote about the differences between the...
Read More Custom Website vs. WordPress Templates: Part II
Blog image Tips for Vetting & Hiring a Good Florida Web Design Company
2021 is upon us and a new year often brings about the idea that it's time for a fresh start. And given the emphasis that has been placed on virtual...
Read More Tips for Vetting & Hiring a Good Florida Web Design Company