Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us…

Follow publication

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.

A picture of my chrome extensions — “What the Font” , “Color Picker”, “Color Palette”, “No Coffee”, “Built With,” “Grammarly”
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!

A screenshot of the Color Contrast Analyzer in action
Color Contrast Reading

3. WhatFont?

A preview of of the identifiers WhatFont uses to pick up on fonts
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

A preview of Built With showcasing what tools are used in the creation of the site
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.

The NoCoffee vision simulator has sliders that allow the user to preview various vision impairments
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 breakdown of an email that consists of identified spelling and grammar errors as well as suggestions and a score
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!

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by McKenzie

UX/UI Designer. RPCV. Latinx. Feminist. Runner.

No responses yet

Write a response