6 browser extensions designers love

Diancheng Hu
4 min readJul 18, 2018

I’d like to share 6 wonderful extensions I can’t live without as a designer. Not 99, only 6 that I’m using every day. They make our work more efficient and help us learn more. As utility tools, they are also great examples of product designing. Plus, they are free!

  1. Wappalyzer — What technologies the site are using?

Working in the IT industry, even we don’t code, we can be familiar with the trendy technologies. This extension uncovers all kinds of technologies used on websites from content management systems, platforms, web frameworks, server software to analytics tools. Examples:

Other Stories
ZARA

2. Full Page Screen Capture — Get the whole page with one click

When working on layout and competitors analysis, I often put the whole web page in a row to compare:

In order to do this, the extension can help get the whole webpage with one click. Below is the screen when the capture is done. You can download the pdf or PNG file.

One issue you might face when using it is the floating elements might be repeated in the image. The way to solve it is to inspect element and delete that element in HTML, then capture the page.

3. Fontface Ninja — What is this font?

With this tool, you don’t need to inspect elements to get the typeface, font size, and text color information anymore. With the Ninja’s help, you just need to put your mouse on the text, then you know everything. Plus, you can download or buy the typeface you are looking at with one click on the popup.

4. Grammarly — Write your best with Grammarly.

English is a language easy to learn but difficult to master. As a designer, No spelling and grammar mistake is basic manners. Grammarly can give you peace of mind — no grammar or typo for your design and writing.

When you have Grammarly installed, all your text input area will have a small green oval on the corner. When you have typo or grammar mistakes, it will mark them with numbers, and when you hover on the redline, it provides writing suggestions. So you not only avoid mistakes but also learned the right grammar for better writing.

Example using Grammarly in Gmail

The limitation is that the extension can’t work in some certain sites. For example, Medium. I have to copy and paste all text to somewhere else for Grammarly to review.

5. CSS peeper

Another tool to make inspect simple, well-organized and enjoyable.

Example using CSS Peeper in InVision Blog

Note: you can export images does not mean that you can use them for your own design.

6. Muzli — Get inspirations every day

This might be the most well-known one in this sharing. Muzli is like a magic window you never know what surprise will be out there.

Enjoy!

--

--