google-chrome-extensions-feature-large

The best Google Chrome extensions for designers in 2017

Ashley Gainer's Layout avatar

Chrome extensions…they’re better than a bookmark, better than in-browser apps, ridiculously handy, and a fantastic (usually free!) resource for web designers.

You may already be using some extensions, not to mention Chrome’s own DevTools if that’s your style, but don’t stop there! If you’re missing out on any of these must-have Chrome extensions, your workflow might have room for some improvement.

In alphabetical order (because that’s how this particular writer rolls), these are the best Google Chrome extensions for web designers in 2017:

Attachment Icons for Gmail

google-chrome-extension-attachment-icons

If you use Gmail for your web design business and you’re dealing with a lot of attachments, this extension will make your emails infinitely more scannable. Each type of attachment (PDF, JPEG, etc.) has its own icon, and that icon will replace the generic paperclip attachment icon in your email list. Now you just need to look for the PDF icon when you’re scanning for that PDF your client sent you a while back, instead of digging through every single attachment.

Code Cola

google-chrome-extension-code-cola

Look at your site’s source code with Code Cola…and then edit the CSS right there in the source code and see the changes instantly. If CSS is part of your design workflow, this could be your new best friend.

ColorZilla

google-chrome-extension-color-zilla

If you don’t already have a favorite color picker, eyedropper, and gradient generator all in one, check out ColorZilla. It can do all of those things and more. Who doesn’t love a color picker?

CSS-Shack

google-chrome-extension-css-shack

If you prefer building things in a photo editor and then taking it live on the web later, you are going to love CSS-Shack. With this extension, you can build a site in an environment that feels a lot like a photo editor (using all the same tools you’ll see in your favorite photo editor, too). When you’re ready, you can export the design to a CSS file to use on the site. It’s like magic…glorious CSS magic.

DomFlags

google-chrome-extension-domflags

If you work with DevTools, this will be a complete game-changer. DomFlags lets you create your own keyboard shortcuts to DOM elements, which will dramatically increase how quickly you’re able to style the elements in your design. If time is money, and this tool gives you way more time, well…you do the math.

Instant Wireframe

google-chrome-extension-instant-wireframes

Turn any page into a wireframe. When you turn it on, you’ll see the page under some transparent wireframes. Pretty cool!

Page Ruler

google-chrome-extension-page-ruler

There are a few different screen ruler extensions, and this one’s my favorite. Turn it on and you’ll be able to measure any element on the page you’re viewing. Draw rulers to get pixel dimensions, positioning, and anything else your inner measuring tape needs to feel satisfied. Plus, you can operate it with the arrow keys on your keyboard. There’s also a special mode that will measure the elements on the page as you hover over them.

Responsive Web Design Tester

google-chrome-extension-responsive-web-design-tester

This extension lets you view a site the way a whole host of mobile devices would. It’s fantastic for perfecting your responsive design for mobile.

WhatFont and Fontface Ninja

google-chrome-extension-whatfont

Maybe it’s because I love fonts but am not very good at recognizing specific fonts when I see them, but WhatFont is one of my personal favorites. With this Chrome extension turned on, you can hover over any font on a website and see what it is. Inspiration, meet practicality.

google-chrome-extension-fontface-ninja

Take your font-icizing a step further with Fontface Ninja, which will not only show you all the fonts on a website but connect you to the source so you can buy them right there.

Window Resizer

google-chrome-extension-window-resizer

When you’re working on a design and trying to perfect its responsiveness, this tool will really come in handy. It resizes your browser window according to all kinds of popular monitor dimensions, and you can plug in custom dimensions or resolutions, too. Easy, peasy, responsive squeezy.

Yslow

google-chrome-extension-yslow

We all know loading speed is crucial (it’s one of the things that sets Flywheel apart, after all!) but we don’t always know what’s gumming up the works on a slow site. Yslow changes all of that. This extension will tell you how quickly your page is loading and also help you identify the slower bits by comparing the page against 23 of the 34 rubrics Yahoo’s performance team uses. Once you know what the problem is, you can work up a pretty fast solution (see what I did there?).

45to75

google-chrome-extension-45to75

This handy little extension helps you optimize the text portion of your designs for readability across all screen sizes. The ideal range of characters in any line is 45 to 75, hence the name, and when you apply this extension to a page you’re testing, you can see where your text falls with just a right-click.

Which one is your new favorite?

Are you already using these Google Chrome extensions? What’s the absolute best one you’ve found so far? Which ones can you not live without?

Comments ( 4 )

  1. Munzur

    August 31, 2017

    Here another Free Extension, Every Chrome user should use
    https://chrome.google.com/webstore/detail/clipboard-history-2/ajiejmhbejpdgkkigpddefnjmgcbkenk

  2. Ivan Ivanov

    August 26, 2017

    I use 7 Times Faster. It's a ad blocker. It can speed up your internet in 2 times. And it's a much more faster than AdBLock and uBlock

  3. Vishnu Goyal

    July 20, 2017

    Thanks for this list. It's very useful.

    Also include WordPress Theme and Plugins Detector.

  4. Chyno Deluxe

    July 18, 2017

    This is great list of chrome extensions Ashley. I use a few of these myself. I also wanted to share an extension I created with you called Auto Mute.

    It's a chrome extension that prevents multiple tabs from playing audio simultaneously. If you have multiple tabs playing audio, then all non-active, audible, tabs will be automatically muted and only the active audible tab you are viewing will be left un-muted.

    This has boosted my productivity and I'm certain it can boost your and your readers productivity as well. If you do try it, I hope it helps improve your workflow as it's helped mine.

    Auto Mute Inactive Tabs - https://chrome.google.com/webstore/detail/auto-mute-inactive-tabs/apadglapdamclpaedknbefnbcajfebgh

Join the discussion