10 Chorme Extensions for Designers Featured Image

We all know how hard web design can get some times, so I decided that it was about time for me to share with you these 10 Chrome extensions that will make your work as a designer way easier.

With these tools, you will save a lot of time, specially if you need to gather information about an existing website, or if you need to test the design once your website is online.

1.- WhatFont

WhatFont allows you to know all the attributes of any font on a website with only one click.

Whatfont Chrome Extension Preview

2.- Full Page Screen Capture

So far, the best screen capture for websites that I have tried. It allows you to print the full screen and export it as image or pdf file.

Full Page Screen Capture Chrome Extension Preview

3.- ColorZilla

ColorZilla allows you to pick any color on a website with one click, copying the HEX code to your clipboard. But the features of this amazing tool do not stop here. It has a color history, shows you the RGB and HSL codes, and also includes a CSS gradient generator that can come up handy.

ColorZilla Chrome Extension Preview

4.- Stylebot

I would need more than one blog post to explain how many times Stylebot turned out to save me a lot of time. It will allow you to change any CSS style of an element on a webpage, without having to type any code, and by only clicking on the element. I use it a lot as a preview of changes when I do not have the source file of the original design or when a lot of changes were done directly on the code.

It also has an interesting feature: Once you do the modifications you want, you can copy paste the code. How amazing is that?!

Stylebot Chrome Extension Preview

5.- CSSViewer

Much simpler than Stylebot, you only need to hover on an element to get all the information about the CSS. It does not allow to make changes, but it can be useful when you cannot find something in the code or you need to know which CSS class is applied to something.

CSS Viewer Chrome Extension Preview

6.- WEb developer checklist

Any website designer knows how important is to keep the best practices when designing a website. WEb developer checklist analyzes any website and gives you information about broken links, spelling and grammar, analytics, SEO, usability, accessibility, performance and much more.

Web Developer Checklist Chrome Extension Preview

7.- Page Ruler Redux

With page ruler you can find out the size and position of an element inside a website. Just click the icon and draw a square in the element you want to measure. Simple as that: all the information will appear on the top of the page.

Page Ruler Relux Chrome Extension Preview

8.- Dimensions

A bit simpler than Page Ruler, but also interesting. When clicking on the icon of Dimensions, your cursor will transform into a cross that will measure the dimensions from your mouse pointer up/down and left/right until it hits a border. It is perfect to measure distances between elements on a website.

Dimensions Chrome Extension Preview

9.- Color tab

Color tab is not exactly a tool, but it will show you a different color palette every time that you open a new tab in your browser. Ideal for inspiration! Also, you can copy the HEX code of any of its colors with one

Color Tab Chrome Extension Preview

10.- Grammarly

This is not a design tool either, but we all know how important is to make a good impression when it comes to written communication. Grammarly checks your grammar and spelling, integrates perfectly with the browser, and its free version is enough to check emails and Drive documents (and even Facebook posts).

Grammarly Chrome Extension Preview

And that is is, these are the 10 Chrome extensions I cannot live without. I hope they will be useful for you as well, and if you know any other interesting extension, share in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *