Five Great Web Extensions for Designers & Developers

The five web extensions listed below have saved me countless hours of time and I like to recommend these to all designers and developers that I have worked with. Disclaimer - Please keep in mind that these aren’t formal reviews and I haven’t used every piece of functionality that each extension provides. 

Fontface Ninja

Fontface Ninja is easily one of my favorite web extensions. You can find the name of any font used in a website by clicking the icon and hovering over the desired text. Also provided are the sizing, spacing and color of the font as well as where to purchase it. I highly recommend this extension to any designer or developer. Unless you are a master of recognizing fonts, this will help speed up discovering the name of a font by a good amount of time.

Dropmark

If I were to describe Dropmark, I would describe it as Pinterest for web designers. Dropmark allows you to save sites into visual collections. I currently have quite a few collections but a few of my more commonly used ones include “Button Inspiration, Wizard Inspiration, Form Inspiration and Navigation Inspiration.” If I’m looking for examples of some nicely designed forms, I often hit up my collection first.

Navigating through a collection is painless. You can view the website from dropmark and use the provided actions such as "next/previous/rename" to navigate quickly through the collection.

Dropmark has been a huge time saver for me, especially when trying to figure out various approaches to smaller design elements. 

Eyedropper

Finding out the color on a website can be a hassle, especially if it’s in an image. Thankfully, Eyedropper speeds up this process quite a bit. My favorite feature is the “Pick Color from web page” functionality. It’s basically a clone of the Adobe Creative Suite eye dropper tool and you can use it to discover any color on a web site in both the hex and RGB values.

Fireshot

Once a website has gone from comp to code, making design changes can sometimes require you to get a screenshot of the latest version of the site. In the past, I would take screenshots of the site and stitch them together but now Fireshot does exactly that, saving me tons of time. It can be a little buggy if the web site has a sticky navigation or uses AddThis, but still is a huge time saver. 

Page Ruler

Getting the spacing pixel perfect can be tough. Eyeballing spacing can make it even tougher. Luckily, Page Ruler provides an easy way to measure spacing on the web. This tool can be very useful when reviewing prototypes and Photoshop isn’t available.

Thanks for taking a couple minutes to read over this article. If you have not tried these extensions yet, I hope that you will find them useful.