Top 10 Useful Chrome Extensions for Web Designers

You are here: the Graphic Assembly » Blog

If you are one of the new breed of web designers, who design directly in the browser, then having genuinely useful Chrome Extensions close at hand is an absolute must.

The ten extensions on this page are Chrome extensions the Graphic Assembly uses on an almost daily basis when designing websites. Not a Chrome user? Fear not the majority of these extensions are also available on the Mozilla Firefox Browser.

Web Developer

Offered by: Chris Pederick

The main reason there are only ten extensions featured on this list is that the Web Developer extension contains most of the tools you will ever need as a busy web designer.

The Web Developer Extension has been around for quite a while, starting life as a Mozilla Firefox plugin. Which only goes to show that the features and usefulness of this extension are hard to beat and with over a million installs, as well as countless five-star reviews, I am not alone in finding this Chrome Extension indispensable.

Some of the highlights include:

the ability to view image information
display and disable cookies
view and edit CSS code
enable guides and rulers on any web page
colour picker

And so much more, if you only install one extension from this list, make sure it’s this one.

CSS Peeper

Offered by: CSS Peeper

CSS Peeper is a superb little browser add on that allows you to inspect styles in a very visual way on whatever website you are visiting. Get information on fonts being used for headings and body text including font size, weight, line height and even tracking.

Clicking on the colour tab will show you all of the colours being used on any specific web page allowing you to copy the hexadecimal value of any colour that you like the look of.

On the third tab of this amazing little chrome extension is the asset viewer which shows all the images and other visual assets available on the page, allowing you to download them individually or all at once as a handy zip file.

An indispensable free tool that every web designer should have in his or her toolbox.

Aesop Ipsum

Offered by: Jake Mason

Lorem Ipsum is an industry-standard text that originated in the print trade to fill empty areas of copy with a visual representation of how the text would look on the page until the real text became available.

Lorem Ipsum has now been adopted by web designers and serves the same purpose it did for print. However, while the standard Latin Lorem Ipsum does its job admirably well, at the Graphic Assembly we just adore Aesop Ipsum.

Instead of paragraphs full of Latin which we can’t even begin to understand, our place holder text now has excerpts from the adorable and popular Aesop’s Fables, bringing our pre-published pages to life. Be warned though, it can cause you to spend too much time reading and not enough designing, on the plus side you will learn some essential life skills.

WhatFont

Offered by: Chengyin Liu

Ever visited a website and thought to yourself, that font is really nice, I wonder what it is?

Well wonder no more my font obsessed designer friend, WhatFont is just what you need, simply click on the extension, point your cursor over the font and WhatFont tells you the name of the font, clicking again brings up a box that tells you the font family, font size, line height and even gives you the colour hex code, brilliant.

BuiltWith - Technology Profiler

Offered by: BuiltWith

Visiting and admiring web sites is a great source of inspiration to any web designer but sometimes we need to dig a little deeper and try to figure out how it was built.

BuiltWith is a technology profiler plugin that reveals the tech behind the site. For example, the extension can tell you the platform the site is using ie WordPress, Joomla etc … and also the plugins that are in use.

An extremely useful Chrome extension that deserves to be on your toolbar.

Nimbus Screenshot & Screen Video Recorder

Offered by: Nimbus Web

The major problem with taking a screenshot of a website using the print screen button is that you only get the visible portion of the site and as we all know websites generally scroll down beyond the visible viewport revealing more of the screen as we scroll.

So how do we capture the full page, for research purposes or to show to a client?

Simple we install The Nimbus Screenshot extension for Google Chrome. The extension allows you to capture the visible part of the screen, like print screen but it also gives you the options of capturing a fragment of the screen, a selected area and of course the entire screen.

Once captured Nimbus Screenshot brings up an editing screen, where you can resize or crop your image, add annotations, blur sensitive information, add a watermark and all sorts of other useful stuff.

If that wasn’t enough Nimbus Screenshot also allows for screen recording in HD, Full HD and 4K, incredible.

Grammarly for Chrome

Offered by: Grammarly

Grammarly is an indispensable tool to have in your web arsenal, not only does it highlight spelling mistakes but also gives suggestions on how to improve your grammar. Once added to Chrome it works everywhere you need to type, in your favourite email app, WordPress, Twitter, Linkedin, everywhere.

A must-have plugin to make your writing look more professional.

Google Keep Chrome Extension

Offered by: Google

I use Google Keep on an almost daily basis, ever since this amazing little tool became a part of Google Mail.

Yes you can now read and edit notes directly from Google mail, take a note either in your browser or in Google Mail and it will show up on all of your devices PC, Mobile Phone and Tablet.

Take simple notes as you work, such as pick up chocolate biscuits on the way home, or simply click on the Keep icon to save a web page you intend to read later, take picture notes of images you come across, the possibilities are endless.

A simple extension that does everything you need it too, oh did I mention it also integrates seamlessly with Google Drive Tools? Take a note and open it directly in Google Docs or vice versa, too cool.

MozBar

Offered by: Moz

Mozbar is a nifty little tool that lets you check how difficult or easy it would be to rank for a keyword in Googles Search Engine Results Page (SERPS).

Once signed up it will display vital information about competing web sites, directly in the SERPS, such as Page Authority, Domain Authority and the number of backlinks a domain has.

When used mainly as a guide for assessing the competitiveness of a keyword, Mozbar is worth its weight in gold.

Keywords Everywhere - Keyword Tool

Offered by: Keywords Everywhere

Keywords Everywhere is another handy tool that can be extremely helpful when doing keyword research, once installed this free keyword tool will display monthly searches just about everywhere there is a search box, for example when searching Google, Amazon, YouTube etc …

Very handy if you need to know how popular a keyword is on different platforms.

Well, I hope you enjoyed this round-up of my favourite Chrome Extensions for Web Designers and hope you tried some that you think you might find useful. All of the extensions on this page I use almost daily and have never had any issues with any of them, unlike some extensions I could mention such as Page Ruler, which hijacked my Google Results Page and filled it full of adverts, not good, just use the ruler in Web Tools Toolbar it is much better anyway.

Yes, unfortunately, installing Google Extensions can be a bit of a minefield, let’s just hope that Google gets its act together soon and removes any malicious extensions from the Chrome Store.