Google Chrome extensions for web designers

When Google launched Chrome long ago in 2008, one of its obvious drawbacks was that it had almost no extensions — very inconvenient if you got used to plethora of those offered by Firefox. But nowadays browser from the search giant has a variety of Google Chrome extensions for web designers.

Here we are going to tell you about the useful Google Chrome extensions for designers. Although most of them are devoted to performing a single task (like determining color or font) and won’t excite anyone but designers, there’re a several universal helpers among them.

For images and notes

Let’s make a screenshot!

Blipshot extension allows you to create a screenshot of the whole page (and not just the visible part of it) by simply clicking its icon in the browser:

To save the screenshot in PNG, simply drag-and-drop it into the folder. It’s also pretty convient that file name includes the name of the page, as well as creation time. Thanks to it you can easily identify the screenshot you are looking for without viewing the actual file.

Everything you need at your fingertips

Using Evernote Web Clipper you can save design ideas you come across on the Internet and share them with your team:

You can include in the screenshot only the part you are interested in. Then you can change your screenshot using tools provided by the extension: add annotation, highlight certain parts, show what changes should be made or even pixelate some areas.

You can share screenshot via email providing viewing and/or editing rights.

Pin It Button allows to save design samples too — this time on your Pinterest board:

But Pinterest extension doesn’t allow you to create annotations, that’s why it’s more suitable for simply collecting ideas for further discussions.

Edit images right from the browser

Pixlr Editor allows to perform all main image editing tasks without leaving Chrome:

1. Cut and turn images.
2. Select certain areas with Lasso or Magic Wand.
3. Create and edit layers.
4. Detect colors using eyedropper, use Dodge and Burn.
5. Apply basic filters.
6. Change brightness, contrast and levels.

For fonts

What font is it?

If you have ever desperately needed to know what font is used on a particular page, install WhatFont. This extensions detects font and its parameters applied to a ceratin text:

Let’s try another one, shall we?

Google Font Previewer for Chrome allows you to choose font from Google Font API and apply it to different parts of the text or certain CSS selector:

Thanks to it you don’t need to change your HTML code to quickly check whether some font would look good on your page or not.

For detecting sizes and colors

MeasureIt! is a virtual ruler you can use to measure objects on the page:

And using Dimensions you can measure distances between objects on a PNG or JPG page layout you’ve opened in Chrome:

Eye Dropper is a simple yet useful extension for identifying RGB and hex-code of the color used on the page without viewing its source. Just like an eye-dropper from Photoshop:

But what if we need to create a color palette from an image? Then Palette for Chrome is exactly what we need. Does it in no time. We simply choose what palette to create (customized or with a preset number of colors):

Then extension generates a palette with RGB and HEX-codes of colors used on the image:

For checking layout and adaptivity

If you create adaptive designs, you definetly need to install Responsive Inspector Reloaded (a new version of Responsive Inspector). It allows you to check media queries used on the web-site:

Using PerfectPixel by WellDoneCode you can cover page with a semitransparent image and check whether its layout is pixel-perfect or not.

And to check how your page will look like on different screens without closing Chrome use Window Resizer:

But not all Google Chrome extensions for web-designers are made for performing routine tasks. Install Dribbble New Tab and when opening a new tab you’ll see top Dribble images of the day:

If you frequently visit Behance, Techcrunch, Mashable and Awwwards Winners, Design Breakfast will show all hot updates from these sites on a new tab:

We hope that these best Chrome extensions for web designers will make your life easier and help to find new sources of inspiration.

Need MVP development, iOS and Android apps or prototyping? Check out our portfolio and make an order today!