In every field, workers will have their preference for what is the best tool to do any job. Often times the tool is actually the same, but the preference comes down to brand. Designers are no different.
When it comes to working on a site design, newsletter template, or a book cover, the tools can all be different for me. Text editors, graphics tools (Sketch is great), or iBooks Author are all used for varying projects. But I do have one tool that seems to be used regardless of the project. That is xScope by the Iconfactory.
This is one of those tools that can be hard to describe. It's not an application, but more of a utility. But a more useful utility would be hard to find. It consists of a group of 8 tools that would each make a handy utility on their own.
Here's a quick look at my favourite tools in xScope and how I use them (using the lovely Process Type Foundry site for our examples).
Rulers
A fairly obvious feature, the Rulers tool gives you the ability to measure elements on your screen. I use this one when testing where to place breakpoints in a design, for using in media queries.
And as great software goes, xScope adds nice little touches. With the rulers, moving your mouse around will bring up the red position indicators that show you exactly how far along the measurement is (if you have them selected).
Measurements here are in pixels, but you can change a preference to use Window points instead.
Dimensions
This would probably be my most oft used tool in the package. Dimensions brings up a crosshair, two red lines, on the screen. You can use these to measure the distance between any two elements on the screen. Not just web pages, but any aspect of the operating system or specific application.
I use this primarily on websites, but it would be helpful to any type of designer, app designers included. It can be slightly finicky, but a small adjustments, extremely small movements of the mouse, tend to give you the measurement you're looking for.
Loupe
Another handy tool in xScope, the Loupe allows you to magnify what you're looking at in the screen. You can set it to examine what's beneath the small Loupe modal (shown below), or you can have it display what's under the mouse pointer.
What I like to use it for is building a colour palette. You can use the loupe to examine the sites you enjoy, then copy the underlying colour of any elements. Just press control+c and the current colour in view is copied to the clipboard. And you can choose what kind of value you want copied (hex, RGB, HSL, etc.)
And for accessibility, it gives you options to view how things look for people with various type of vision (normal, presbyopia, protanopia, etc.).
Crosshair
Last, I love using the Crosshair when aligning objects in a design. It's probably the simplest tool in the suite, but very handy. It displays two lines on the screen, spanning the entire screen (even multiple displays) and shows the exact pixel placement at the intersection of the two lines.
When I'm lining up elements horizontally, I pop this up to ensure everything is perfect.
If there is one annoyance with xScope in general, is that there is no way to close all the tools in the utility. With the loupe, you can simply hit Escape and it is removed from the screen. The same is true for the rulers, but not for the dimensions and cross hair. I would love the same to be true for each tool.
But this is a small critique and the tool is a joy to use.
You'll notice there are several tools in xScope that I haven't mentioned. My usage of the utility is barely scratching the surface and there is no doubt a lot of ways I can still improve my workflow with what's available. Have some tips? Let me know.
Every act of creation involves friction. Any tool that removes some of the friction from the process endears itself to me. xScope is high on my list of tools that I've grown to love with usage.
