Four Chrome Design Tools I Can’t Live Without
Perhaps saying that I can’t live without them is a little melodramatic, but I use these four Chrome extensions on a daily basis, and they certainly make my life a hell of a lot easier. Here are the reasons why I use them, and why I’m recommending them to you.
Have others to recommend? Let me know in the comments or @ThatBaldUXGuy.
Dimensions
Dimensions is the best tool for getting pixel perfect dimensions of image and HTML elements on a web page.
Simply activate the extension and place your mouse between the points you want to measure. Dimension will give you the distances between the nearest vertical and horizontal elements.
Dimension is not limited to HTML elements — you can also measure distances between lines within an image. Handy not just for designers, but also for developers when given only an image of design to be developed, without a detailed specification.
ColorZilla
I’ve tried a number of colour pickers for Chrome, but ColorZilla is hands down the best. I won’t go through all the features here, but a glance at the comprehensive menu below and a visit to their website will give you a good idea of what kind of a tool you are dealing with.
What I like about ColorZilla is the simple things. For one, it just works. A couple of other tools I tried (don’t want to shame them) were flaky, extremely frustrating and limited.
The other nice thing about ColorZilla is that it copies the colour hex code to the clipboard when you click on it. Nice.
Font Face Ninja
Probably the coolest sounding of the four, Font Face Ninja lets you quickly analyse some of the basic parameters of any font face on any website. It’s as easy as clicking on the icon and hovering your mouse over any text.
In addition, it allows you mask out all non-typographic elements of your page, leaving you with the bare words. This is a great tool for evaluating the visual hierarchy estalblished by your type and making sure all the headings are set correctly.
It doesn’t stop there — it also allows you to quickly sample a font and see what any word, or sentence would look like using that typeface, in browser. If you like what you see, you can use Font Face Ninja to download the font as well (if available).
PerfectPixel
PerfectPixel allows you to overlay images of designs over finished websites so that you can check whether the output matches the design.
It’s great for designers and developers alike — developers can check whether their work in progress is matching the design, and designers can check whether the final output is pixel perfect.
In my experience, this tool has been a catalyst for some great discussion around compromises that had to be made during development and the rationale behind them.
Know of other great design tools?
Let me know via comments or @ThatBaldUXGuy
