Chrome Extensions for UX/UI Design

The web is a vast space. It’s not always easy to embark on, especially when you’re looking to pick up key information for designs. However, the process can be made easier through the use of tools. Such tools like Chrome extensions! To hammer it in (pun always intended), I’ve listed out some helpful design extensions.

Chrome Extension Icons

1. ColorZilla and Site Palette

These tools color my world. The ColorZilla eyedropper tool when selected allows you to identify specific colors on the page. While Site Palette gives you a breakdown of all the color patterns on the page. Especially necessary when you feel inspired by a webpage you stumble upon and want to create something similar!

ColorZilla (on the left) and Site Pallete (on the right)

2. Color Contrast Analyzer

The Color Contrast Analyzer is helpful when it comes to making sure the color contrast on a site is compatible with the Web Content Accessibility Guidelines. It lets you choose either a specified section, all the visible area, or the whole page to analyze. It even breaks down what level the selected section is at!

Color Contrast Reading

3. WhatFont?

The identifiers WhatFont provides

The WhatFont extension is a handy dandy tool to pick up on the fonts displayed on the page. It lets you hover over and select various fonts to identify the font’s family, style, weight, size, line height, and color. What the f***!

4. BuiltWith

Here is a preview of how Built With identifies the tools used in the site

BuiltWith is great for the curious. I for one, am always interested to know how things are built and what’s behind the curtain. This extension allows you to see all that was used to develop the site. Wow! Mystery solved!

5. NoCoffee

NoCoffee is a wonderful extension to understand how a person with a visual impairment views your website. Not only great for building that necessary empathy we all need as human beings but also helps in understanding how to build more user-friendly websites.

NoCoffee allows the user to select various kinds and levels of vision impairments to preview how the site appears from that selected perspective

6. Grammarly

Grammarly is fantastic for making sure all the content you write is on point with the grammar gods. I for one (you have surely witnessed by reading this article) am always in need of a grammar check. Grammarly is so kind as to highlight areas of improvement and give constructive feedback. I’ve found myself fixated on the percentage correct feature, as I’m constantly trying to get to 100. Positive use of gamification by Grammarly!

Grammarly breaking down the mistakes and corrections needed in an email draft

These are all the recommendations I have so far. But, if you have better or other extension suggestions, please leave them in the comments below!