20 Most Important Google Chrome Extensions for Web Designers in 2016

Google Chrome has always been one of the fastest, simplest, and most user-friendly browsers. However, it had been criticized a lot by people who were accustomed to the convenient Firefox add-ons. This imperfection did not allow both users and professionals (web designers, webmasters, web developers, and others) to enjoy Google Chrome fully as a usual working tool.

Luckily, those days are long behind us, and now Google Chrome has a countless number of plug-ins, which contributes to the full use of its functionality and greatly facilitates the webmaster’s routine.

Being a designer and a blogger, I often face the need to use a particular plug-in for different purposes. In the paper, I’ll share with you the top-20 Google plug-ins and extensions that are widely used by the professionals of our platform.

1. Responsive Inspector Reloaded

If you often create adaptive web pages, feel free to use the Inspector to view media query, prescribed for the site. This application was created by Adobe as a side project. Responsive Inspector Reloaded takes queries from applied stylesheets and shows them in an interactive chat. Then you can click on a bar in the chart and see the breakpoint clearly, since the application automatically resizes the browser.

2. Dribbble New Tab

Are you interested in getting everyday best Dribbble images? If yes, then don’t miss installing this extension and reanimate your routine. Dribbble allows getting the most recent/most popular shots published on the service, the shots of the people you follow, and of course your own shots/likes.

3. Project Naptha

Sometimes, the text on the Internet is presented in the form of images, comics, photos, diagrams, scans, etc. As a rule, a user who wants to deal with such type of text has problems and bad experience. That is, the only thing the user can do is to rewrite the text manually. In this regard, Project Naptha allows you to save a lot of time.

Based on OCR technology, this extension eliminates unnecessary movements while working with the mockup, recognizing the text on an image by applying special state-of-the-art computer algorithms. You can not just copy and paste, but also translate the text. Just copy/paste what and where you need.

4. Eye Dropper

Wonder what RGB and harsh code of the color are used on the page? With Eye Dropper, you don’t need to open the code to get to know, since it allows picking the color from any web page (also, you can use an advanced color picker).

5. Font Playground

Both designers and developers will find this extension useful. It allows doing real-time experiments on the visual design of text blocks on the website. If you’re not satisfied with the changes, you can return to the initial version.

This extension contains more than 1000 different fonts. You can preview the webpage with the chosen fonts by clicking on "font playground extension" button at the right upper corner of the screen. The extension is constantly updated.

6. Blipshot

The blipshot extension allows you to create a screenshot of the entire webpage just by clicking on the correspondent icon in the browser. Conveniently, the screenshot name of the page contains the title and the time of creation.

7. Web Developer Checklist

This extension checks the content regarding productivity, tags, titles, SEO, and usability. If there are some problems, the extension instructs you how to eliminate the shortcomings.

8. Pixlr Editor

This image editor allows you to cut, rotate, create, edit, customize and perform many other important operations with images directly in the browser. Pixlr Editor will best suit designers who used to work with Photoshop, PaintShop Pro, and Gimp. Below, you can find several reasons why I definitely should try this extension out:

• You don’t need an account, but can create it to get free storage space in Pixlr Library.
• No need to download.
• A lot of brush controls, filters, layers, and a lasso tool are at your disposal.

9. Perfect Pixel

PerfectPixel is really perfect in case you have to save nerves at the stage of the page layout. This tool eliminates a situation when the final product is not entirely consistent with the artistic conception.

10. Web Developer

It’s an official expansion port for Firefox, including a great number of tools for developers. Sure, coming up with the title, the authors could be more inventive, but the main thing is that this "webmaster" is really valuable!

11. User Agent Switcher

Gone are the days when you needed to install multiple browsers on the same PC to do the work well. Now, you can install User Agent Switcher – a tool that will help you to know how a particular website looks when opened on different devices and in different programs.

12. What Font

What Font is one of the most popular solutions to recognize fonts on the webpage. Although most of the webmasters use Webkit and Firebug – tools that allow detecting the fonts on a webpage – all other users can get the much simpler solution with What Font, which inspects a font when you hover the mouse over it.

13. MeasureIt

This extension will help you find the size of objects on the web page (width, height, and alignment) by drawing the ruler along the page.

14. Chrome Daltonize

Have problems with color vision? Then use the extension to find out the true color on the screen. Chrome Daltonize is designed especially for colorblind people. It has two filters: "Simulate" to show the image in the eyes of a colorblind person, and "Daltonize" to convert the images in such a way that the colorblind person can distinguish colors. There are 3 types of deficiencies supported: Tritanope (blue deficient), Deuteranope (green deficient), and Protanope (red deficient).

15. Evernote Web Clipper

From time to time, you meet beautiful websites and get some ideas that forget soon. Using this extension, you can capture the best design ideas you met on the Internet and even share them with friends.

16. Pin It Button

It allows you to save interesting design options to your board in Pinterest. However, the expansion has no functional for taking notes, so, on Pinterest, it’s more convenient to add some ideas that you can review and discuss later.

17. Google Font Previewer

With the help of this tool, you can select a font from the Google Font API directory and apply it to different parts of the text on a page or a specific CSS-selector. Therefore, you do not need to make changes in every HTML-page to quickly check how this or that font looks on the website.

18. Dimensions

This simple tool allows you to measure the distance between objects on the layout in PNG or JPG format just by opening it in Chrome.

19. Palette for Chrome

Use it to create a whole palette for the picture in a matter of seconds: choose what kind of palette you want to create and get it with RGB and HEX-codes.

20. Design Breakfast

If you’re a regular visitor of Behance and similar platforms, then Design Breakfast – a tool that displays all the new and exciting on the new tab – will be helpful to you.

I hope these add-ons will help you to save time, be more productive, and even find new ideas for your designs. And what extensions do you use? Share with me your advices in a comment section below!

About Brian

Brian Jens is a blogger on DesignContest. He’s also a freelancer and a writer. He enjoys modern trends and tendencies, as well as bright up-to-date stuff and, of course, web design.