12 best Chrome extensions for designers in 2019

From extensions to help ensure your web page is accessible to ones that will help you take the perfect screenshot, these are the 12 best Chrome extensions for designers in 2019.
  • Increase your productivity by powering up Chrome with these 12 extensions for designers.
  • Identify fonts, colour palettes and images quicker.
  • Easily check if a web page is responsive and accessible.
  • Measure elements of a page accurately.
  • Take, annotate and record video screenshots without leaving your browser.

The best web browser extensions are those that make things you do multiple times a day a little bit easier. For designers, taking screenshots, identifying fonts and colours and measuring things are things we do often and probably take longer than they should. This list of Chrome extensions will change this. From extensions to help ensure your web page is accessible to ones that will help you take the perfect screenshot, these are the 12 best Chrome extensions for designers in 2019. 

WhatFont

WhatFont allows you to hover over copy in a web page and identify the font in use.

How many times have you stumbled across a web page using a cool font and had to crawl the internet to try and find out what it is? Well, identifying fonts in use is easier than ever with this extension. WhatFont allows you to simply hover over any font in use and detect what the font is and where you can get it. It also provides the weight, size, line-height and even the hex code for the colour in use. Plus, it gives you a direct link to go get it.

Spectrum

See a web page through the eyes of someone with a colour deficiency with Spectrum.

As the design industry continues to emphasise the importance of accessibility, tools that can help us see the world through the eyes and ears of someone with a disability are imperative. Spectrum allows you to see how a web page looks through the eyes of someone who is colourblind. You can toggle through different colour deficiencies to help ensure whatever you’re creating is clear to your users. 

ColorPick Eyedropper

ColorPick Eyedropper allows you to hover over an element and get its colour codes.

In the past, I, like many designers, have taken screenshots of web pages I’ve liked the colours of, opened them in a program like Photoshop and used the colour picker tool to identify the codes of the colours they were using. This is obviously laborious and thankfully no longer necessary thanks to extensions like this. ColorPick Eyedropper provides a simple way to hover your mouse over an element on a web page and get the colour codes straight away. It turns a once fiddly experience into something seamless. 

Site Palette

Site Palette detects and compiles the main colour codes from a website.

Designers are constantly on the hunt for great colour palettes and visiting other websites is one of the most common ways to gain inspiration. Site Palette is a Chrome extension that detects and compiles the main colour codes from a website to layout its colour palette and hierarchy. 

Sizzy

Sizzy allows you to preview your web page in multiple screen sizes.

Ensuring your website is responsive and fit for multiple sizes of screen is extremely important. But dragging the size of your browser window in and out is a ridiculous proposition. Thankfully that’s not necessary. Sizzy is a responsive web design tester that allows you to preview your design on multiple sizes of screen as you work. You just click the icon in your Chrome toolbar and punch in the URL you want to preview, then preview by device size. It’s simple, useful and convenient.

Corporate Ipsum

Corporate Ipsum is basically Lorem Ipsum, but exclusively uses corporate buzzwords.

As designers, I think we can all agree we’ve overused Lorem Ipsum to the point that it’s invisible to us. It’s always the same, which means the shapes of the paragraphs we’re often previous is the same too. Corporate Ipsum is a plugin that provides jumbles of corporate buzzwords that are apparently English but make no sense when combined indiscriminately. It will mix things up and allow you to view the text placeholders within your designs with fresh eyes.

Dark Reader

Dark Reader allows you to enable dark mode on every website.

“Dark modes” are evidently having a moment. While the feature is mostly a trend, it can help some devices save battery and make software less harsh on your eyes at night. Dark Reader is a handy plugin for those who want an easy way to enable this feature on every site. It allows you to adjust settings like brightness and contrast. It’s beautifully seamless and on trend. 

CSS Peeper

CSS Peeper provides colour, typography and size information about elements on a web page.

Ever seen a cool element of a webpage and wanted to inspect its style? Well now you can do it without digging around in the site’s code. CSS Peeper provides a beautifully simple interface that gives you all the information about an object you want to know. Whether it’s colour, typography or button size, you’ll be able to easily identify it with this plugin. 

Ruul. Designers ruler

Ruul. is an on screen ruler to help you measure anything on the web.

Sometimes you just need an old fashioned ruler. Ruul. provides just that. Its on screen rulers can measure anything on the web and ensure that your sizing is pixel perfect. These can be as big as objects and as small as stroke widths. Easily move ruul around with the arrow keys, one pixel at a time. Multiple types of rulers – steel and wooden – are included. 

Shift Click Image Extractor

Shift Click allows you to easily get a link to the image you’re looking at.

Stop right-click + inspecting pages to find out which awesome images web pages are using. Shift Click makes it really easy to find a link to download an image you’ve seen. Just hold ‘shift’ and click the image you want to get a shareable link, its resolution, colour palette and its file type. It’s also way more convenient than inspecting to find background images. 

OneTab

OneTab compiles your open tabs into a neat list.

You either are this person or you know this person. So many of us have way too many tabs open in Chrome. So many that it’s basically impossible to tell them apart. OneTab is an extension that can save you up to 95% of memory by reducing your zillions of tabs into a tidy list. Switch between apps much easier by clicking on the OneTab icon in the toolbar and sifting through your vertical list which shows each website icon and page title. 

Awesome Screenshot: Screen Video Recorder

Awesome Screenshot allows you to capture, annotate, selectively blur and record static or video screenshots.

There are a bunch of screenshot extensions available for Chrome, but Awesome Screenshot is the highest rated and offers a lot for the lovely price of nothing. As you’d expect, it can easily take a screenshot of a webpage. But you can fully control how much of the page it captures, annotate it, blur sensitive information and share it with just a click. On top of this, you can also record the screen as a video to capture its full effect which is super handy in this day of animated and interactive web pages.

Speed up your workflow

As designers, we never really have the luxury of time. So anything that can help us do things quicker is of value. Each one of these extensions takes something that would usually take multiple steps and makes it effortless. So download anything in this list that can speed up a task you already regularly do and see if it speeds up your workflow.

Leave a Reply

%d bloggers like this: