Many of us seek tips and tricks to simplify our work — designers included. Some tasks can be very simple but take a lot of time — for example, trying to figure out the exact colors in a competitor's color palette. Other tasks could require help from someone else — for example,  proofreading your CV or portfolio.

We asked around the Uxcel team and made a list of browser extensions that both designers and non-designers like using. These 10 tools can save your time, money, and effort, inspire you, and boost your productivity and creativity.

  1. WhatFont for Chrome & Safari
  2. Grammarly for Chrome & Safari
  3. ColorZilla for Chrome
  4. Page Ruler Redux for Chrome
  5. FireShot for Chrome
  6. Dark Reader for Safari & Chrome
  7. HoverSee for Safari
  8. Muzli 2 for Chrome & Safari
  9. Evernote Web Clipper for Chrome & Safari
  10. Stay Focusd for Chrome

1. WhatFont for Chrome & Safari

WhatFont browser extension

The WhatFont extension provides a simple and elegant way of identifying fonts on a web page. Forget hunting through the code and looking for a typeface that has caught your eye. Hover the mouse on the text — and voilà! WhatFont tells you what typeface it is. You can see even more details on click: font style, weight, size, line height, and color. WhatFont has 2 significant advantages: the extension exists for both Chrome and Safari, and it can identify typefaces in any language.

Try WhatFont for Chrome

Try WhatFont for Safari

If you’re intrigued by the world of fonts, explore our Typography course, at the end of which you’ll be able to create both aesthetic and readable designs.

{Resource}

2. Grammarly for Chrome & Safari

Grammarly browser extension

Smaller teams often don't have full-time copywriters or UX-writers. In cases like this, the copy can become the designers' responsibility. You might need to write UX microcopy and social media posts, not to mention emails to your team. Also, the ability to write solid copy is a massive addition to your professional skill set. With Grammarly, you can stop worrying about spelling errors or weird sentence structure. This extension acts like your personal writing assistant. It underlines pieces that need improvement and provides immediate and specific suggestions.

Try Grammarly for Chrome

Try Grammarly for Safari

That said, AI tools cannot replace a strong foundational knowledge in UX writing — check out our UX Writing course to build yours.

{Resource}

3. ColorZilla for Chrome

ColorZilla for Chrome

A sustainable, thoughtful color palette is the foundation of any design. ColorZilla is an extension with a range of features that are helpful when working with color. The most used function is "Pick Color From Page." It automatically determines the hex value of the color you choose and copies it to the clipboard, allowing you to paste it right away in the drawing tool. ColorZilla keeps a history of all the colors you've picked, so you won't lose track of your top selections. Moreover, the extension can generate website palettes and create gradients that you can download in CSS format.

ColorZilla doesn't work for Safari, but you can use its alternative — Color Picker. It speeds up the process of picking colors and copies their value in any format you need: NSColor, UIColor, HEX, RGB, etc.

Try ColorZilla for Chrome

Try Color Picke‪r for Safari

Our Color Psychology course is a great place to start if you’re curious about how to use colors effectively in your designs.

{Resource}

4. Page Ruler Redux for Chrome

Page Ruler browser extension

Page Ruler Redux is a go-to tool for designers and web developers when they need precise element measurements. All you have to do is drag the mouse along the selected area to measure the distance between elements. The tool will also give you accurate height and width in pixels.

For Safari users, there's the Ruler extension with similar functionality. Ruler can also display rulers, guides, and frames over website content, allowing you to save and load guides for future reviews.

Try Page Ruler Redux for Chrome

Try Ruler for Safari

5. FireShot for Chrome

FireShot for Chrome

The FireShot extension has over 2 million users, which speaks volumes to its excellent functionality. It's a Chrome extension that allows you to:

  • Capture visible parts of web pages
  • Select and capture specific areas
  • Take screenshots of entire web pages
  • Edit and print screenshots
  • Save screenshots in various image formats, like PDF, JPEG, GIF, or PNG
  • Email a screenshot right away or copy it to the clipboard

Safari users can have a look at Awesome Screenshot, which is a similar extension. It provides decent functionality and allows you to capture, edit, and share screenshots anywhere you want.

Try FireShot for Chrome

Try Awesome Screenshot for Safari

6. Dark Reader for Safari & Chrome

Dark Reader browser extension

If you have never worked late into the night, you're in the minority of designers. Isn't dark mode the best option for the darkest time of day? There's conflicting scientific evidence, but many people believe that dark mode reduces the negative impact of blue light. The blue light emitted by electronic devices is believed to cause eye strain, dry eyes, and severe migraines. The Dark Reader extension is a pet project of software engineer and accessibility activist Alexander Shutov who often works late and wanted to create a tool to ease eye tension in the dark.

With the Dark Reader extension, you can join the "dark side" regardless of the time of day. The tool allows users to adjust brightness, contrast, and font settings to make pages more readable. Plus, dark-themed websites look astonishingly elegant. The extension is available for both Safari and Chrome users.

Try Dark Reader for Chrome

Try Dark Reader for Safari

7. HoverSee for Safari

HoverSee browser extension

HoverSee's functionality is right in its name — when users hover the mouse over images and links, they see them larger and more clearly. The extension also provides previews of videos and websites alongside available descriptions. And, of course, it's a lifesaver for users with visual impairments.

HoverSee works great for websites with extensive image galleries and direct image links — for example, Facebook and Twitter. On Youtube, the extension automatically plays a video in its expanded mode. The tool is very easy to customize. You can adjust video delay, min and max zoom, whitelist or blacklist certain websites, autoplay or mute videos, and more.

HoverSee is available for Safari users only, but Chrome has an alternative tool — Hover Zoom+.

Try Hover Zoom+ for Chrome

Try HoverSee for Safari

If building accessible and inclusive products like HoverSee intrigues you, consider exploring our Design Accessibility course.

8. Muzli 2 for Chrome & Safari

Muzli 2 browser extension

You are probably familiar with creativity blocks. Sometimes you spend hours trying to produce something to no avail. As designers, we often look for sources of inspiration. For example, we read books, visit exhibitions, take different routes to the office or grocery store, try new hobbies, and stay up to date with the freshest design trends and news. With Muzli 2, you won't miss a thing in the design world and can always stay inspired. Once installed, it replaces your default home page. Every time you open the browser, Muzli 2 offers you a daily dose of beautiful designs, articles with helpful tips, exciting interviews, and freebies.

The Muzli 2 extension is made by the InVision app team — the creators of one of the best digital platforms for smooth team collaboration when designing products.

Try Muzli 2 for Chrome

Try Muzli for Safari

9. Evernote Web Clipper for Chrome & Safari

Evernote Web Clipper browser extension

The Evernote extension is a fantastic tool for those who like things to be neatly organized and sorted. If you often come across interesting articles or captivating headlines that you are too busy to read right away, Evernote has you covered. The creators of Evernote strive to reduce the number of open browser tabs, so the tool has been design to allow you to store all the interesting things that you find on the web in one place. You can also take screenshots, comment, highlight meaningful points, and share notes with your friends or colleagues.

Try Evernote for Chrome

Try Evernote for Safari

10. Stay Focusd for Chrome

StayFocusd browser extension

The secret to getting things done is not working 12 hours a day without shifting your eyes from the computer. It's about having regular and, most importantly, refreshing breaks. Procrastinating on Facebook or any other social media website won't do any good. The Stay Focusd extension has all the power to help you to, well, stay focused! For example, you can set limits for time-consuming websites. Once you reach a limit, the extension blocks access to that content for the rest of the day. It's similar to turning parental control on for yourself. The good news is that you can fully customize it yourself, too.

This extension isn't available for Safari users, but Waste No Time is a great alternative. It has the same functionality as Stay Focusd to help users stay on track and get things done.

Try Stay Focusd for Chrome

Try Waste No Time for Chrome & Safari

Other productivity hacks include creating task lists, getting enough sleep, taking breaks, and enjoying a hobby that takes your mind off work.