xScope: The Designer’s Utility Belt

It’s safe to say that you can never have too many tools. No matter what your trade, you will always be more effective if you have quality tools at your side (as long as your don’t bankrupt yourself in the process). Luckily, if your tools are of the software variety, you don’t even need to find room in the garage to store them.

One example of an incredibly innovative and effective set of tools for designers and web developers on the Mac is xScope. XScope is an app that has a wide array of features, allowing you to layout and measure elements on screen in an incredibly “Mac-Like” way. The seven included tools offer everything from color sampling to pixel spacing, and everything in between.

Overview

After installing xScope, you are greeted with a help screen that includes an explanation of each tool and their use. This is a good overview of the power the app possesses and worth the time to look over. As someone who does not read these help screens (but instead just jumps in headfirst), I would advise taking a look as there is more to this application than meets the eye.

Help Screen

Help Screen

The 7 tools available are:

  • Dimensions
  • Rulers
  • Loupe
  • Guides
  • Frames
  • Crosshair
  • Screens
xScope Menu & Tool

xScope Menu & Tool

There are 3 ways to toggle the tool that you want to use: (1) the icons in your menubar for each item, (2) a floating toolbar window that you can move or close, or (3) you can use keyboard shortcuts. The toolbar is something I used once and then turned off, since it just duplicated what is available in the menubar, relieving one item of desktop clutter (although I can see the use if you are using a large screen and don’t know the keyboard shortcuts).

At any given time, you can have several selected for use concurrently. The only exceptions are “dimensions” and “crosshair”, which makes sense when you see what they do. I can’t imagine a need to have all the tools running at the same time, but the ability to use multiple functions at once is very powerful. It should also be mentioned that running all of them appears to have little impact on the operation of the OS (with all tools running, less than 10% CPU on my 2008 MacBook Pro).

The concept of these tools is simple – give the user exact details, unobtrusively, when trying to layout graphics or images for use on the web. Without going into too much detail, here is a very basic overview of each tool.

Dimensions

This is the newest tool included in xScope, and it’s easily one of the coolest. Simply turn it on, and as you move the mouse around the screen, it will display the dimension between elements (vertically and horizontally) on a webpage, document, even parts of the UI in OS X (for instance, thanks to xScope, I know the bookmark bar on Safari 4 is 23 pixels tall. See, you know you always wanted to know that!).

That may sound almost trivial, but it’s not. In laying out a design, knowing the exact distances between and around elements is crucial and this makes it drop dead simple. I’m sure I’m not the only one who cannot eyeball something on screen and confidently proclaim ‘yessiree, that column is 128 pixels wide with 5 pixels padding!

Dimension Tool

Dimension Tool

Even within an app such as Photoshop, it’s easier to invoke xScope and do a quick measurement for a design you are working on. If you want to focus on one area, ‘shrink mode’ allows you to define an area and then make fine measurements within just that specific location.

Rulers

Rulers

Rulers

The rulers tool is my favorite feature in xScope and probably the most powerful and versatile. Essentially, this puts a set of rulers on your desktop to measure pretty much anything. The opaque ruler can be moved, resized, even rotated to help measure everything on screen. It’s uses are endless and this feature alone is, in my opinion, worth the price of admission. Whether measuring something on a webpage or testing how well something will fit in a document you are working on, being able to accurately measure an object has a tremendous number of uses.

I should mention, that there is a free Adobe AIR app that somewhat resembles this feature of xScope. Calliper places a caliper graphic on screen and allows for opening and rotating for measurement. However, compared to the xScope version, it would be akin to using my 5 year old daughter’s plastic ruler to go build a house.

Loupe

The loupe replicates the Digital Color Meter functionality that comes with OS X, albeit with some added features. One of the neatest is the ‘avoid mouse’ function- the display window that zooms into pick out a specific color will zip away to a different part of the screen if you move your mouse pointer inside the aperture window– this saves you from having to move the results window away if it happens to get in the way.

Loupe

Loupe

With a simple keyboard shortcut you can change the zoom settings of the loupe, lock it’s position, or copy the value captured by the loupe to be used in other applications. So, even though this duplicates some of the OS X tool, the added features and incorporation with the rest of xScope make it a valuable part of the app.

Guides and Frames

These 2 features of xScope beg to work together. Guides do just what the name implies– allows you to add vertical and horizontal guides across your screen, just as you would use in Photoshop, Illustrator, or Pages. At it’s simplest form, it allows a quick guide to use for alignment. Similarly, frames allows you to draw out a specific sized box. Just using these two features, you could do a layout guide for almost anything.

Guides

Guides

Delve a little deeper into these features and the true power is exposed. There are wizards available for both guides and frames that allow you to automate the creation of the horizontal and vertical lines on screen. Whether you need to make a grid to establish even spacing in design elements or you want to create a specific sized element (Say a 16×9 box for a video you want to place in a design), then the app automates this process with remarkable ease.

You don’t need to be using an elaborate app to benefit from these layout options. You can open Pages, put up your guides and frames, and then put some graphics and text boxes up to quickly eyeball what may or may not work in your design.

Frames

Frames

Crosshairs

I have to admit that with all the power of the rest of this app, crosshairs left me scratching my head wondering what it was for, since the other portions of the program did this plus a whole lot more.

Basically, when you invoke this option, you have a crosshair that follows your mouse giving your precise location via x and y pixel coordinates. As sexy as that sounds, the use of this little feature alluded me until I read the help file (you’ll recall I mentioned how important this is when I started).

Crosshair

Crosshair

I found out you can establish where the starting point is for the crosshair. In other words, you can hit Command 0 and the x and y coordinates zero out– now you can move the pointer left and right to determine how many pixels you’ve moved away from that origin.

Screens

The last feature I want to cover is something that sounds so simple, you have to wonder why there aren’t 20 apps that do the same thing. I know of no other ones, and I’d bet they didn’t do it so well as this app.

Screens is a web designers friend. It creates an opaque window with guides to overlay over an image or web page to demonstrate spacing on different browsers set to different resolutions. Setup xScope with the screen resolution and different browsers you can tell how your layout or design will look vertically and horizontally on screen. Simple yet very useful!

Screens

Screens

Conclusions

xScope is all about precision – whether you are working on your own original design or looking at another design to get ideas. This app manages to get the advanced features right, while maintaining the ease of use and classy design elements that make a really good Mac applications.

It’s impossible in one review to cover all that xScope can do, so I’d advise downloading the free trial from the Iconfactory website. Even if you don’t feel the need for various advanced features at first, I think you’ll find yourself using it more and more as time goes on. You may even find yourself wondering how you managed without it!


  • Gianmarco Simone

    Oh God, that’s Wondertool :|

  • http://blendedreality.net Blended Reality

    If only that 4G iPhone were real……

  • http://www.novolume.co.uk/blogged/ Dave Ellis

    It’s one of those tools that at first glance looks like I’d never use it, but as time passes I can imagine it becoming essential

  • http://twitter.com/jakeprzespo Jake

    This tool looks like an amazing app for designers. Will check it out for sure.

  • Barry Wiseman

    I thought it would be fun to actually make a quick mockup and couldn’t resist having some fun with the iphone and Apple’s home page :)

  • Andy Couch

    This is an app I use (and love) every day. Great work on such a thorough review!

  • http://www.moosedesign.com MooseDesign

    Looks like a very nice, polished tool. However, folks should check their App folder for “Art Director’s Toolkit” that is included, free with OS X. Or at least it was on my Mac Pro (special bundle, maybe?). Its not perfect and it looks like xScope has improved on it in many respects, but its free and does most of the functions described above as well as integrate a number of layout and color tools… Just FYI.

  • http://www.afulki.com Gary Thom

    Looks cool, I could have used this the other night! Downloading the trial later, I suspect another purchase on the way.

  • http://marcelocx.wordpress.com Marcelo

    I have been using xScope for about six month and i love it. It is an excellent app.

  • Pingback: Topics about Web-design | xScope: The Designer’s Utility Belt

  • http://mediumjones.com Mediumjones

    way cool

  • http://www.markoprljic.iz.hr Marko

    This one is really great!

  • baggy sottom

    Fix the feed please guys!

  • http://frankyaguilar.com Franky

    Hmmmmm. Interesting

  • http://www.jpweightlossblog.com How I Lost Thirty Pounds in Thirty Days

    Hi, nice post. I have been pondering this topic,so thanks for writing. I’ll definitely be subscribing to your site.

  • Fernando

    Where can I get the wallpaper you guys using there? Could you share it? Thanks!

  • http://lumixmedia.net Marcos Cerutti

    This tol is just wonderful! mainly when you have this positioning issue with IE6. it help to save lot of time

  • http://www.cybertime-solutions.co.uk/html/cheap_web_design_leeds___cheap.html Cheap Web Design Leeds

    This Looks like a handy little piece of kit, can you do anything on this software that can’t do on Photoshop or Print Artist?

  • http://www.realizeinc.com/ Rapid Prototyping

    You are absolutely right about the need to get more apps. Quality tools is what that counts in the world of apps and one such app that covers many of the desiring and arduous tasks of developers is the XScope. Personally, I have been having a great time with it. The best thing about the app is that the user interface is exactly like that when we use our mac which makes it all the way easy to grasp!

  • http://designsonnenbrillen.com sonnenbrillen team

    Nice, we are currently in the process of redesigning of our site and found xScope to be a very useful designer tool for this. Thanks

  • Pingback: xScope 3: Big Improvements to the Designer’s Best Friend | Design City

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow