XScope for OS X: universal measure for designers

Any master - carpenter, a tailor, an electrician - always brings in a certain set of instrumentation. This set for the designers of applications - desktop, mobile and online - you can call the program xScope. If you're talking about it has not yet heard of note. Especially recently changed xScope major version number.

Of course, at the stage of creating the layout designer works with the meter built-in image editor or program design. A xScope comes into play when the project has reached the first stage of implementation, and we can, so to speak, to feel alive first compiled version of the application or impose a web page. Well, or to view a static layouts without downloading them to the appropriate editor, which is convenient for the staff responsible for the project.

For a thorough inspection of all sorts of very useful line, frames, rails and other pieces. They see how the implementation of corresponding idea: properly aligned objects, whether those sizes in certain areas, and so on.. In xScope it has it all.

Measuring tools

Everything that the designer used to working on a design in the graphical editor, wide screen space and provides xScope. While guides have long been part of the standard toolkit of any graphics editor tool Guides composed xScope unlike functional. First, the guide, you can create multiple, including automatically - setting the number and spacing. Second, the mutual arrangement of the guides can be fixed and move them as a unit. Third, the new group guides can be saved, so that later you can use them, simply download the appropriate file. A very handy tool for checking the alignment of objects, especially if they are located across the plane of the screen.

Framework Frames It is also useful for checking the layout of different objects, but within a limited area of ​​the window or Web page. Inside each box you can enable the grid with a certain pitch or fixed guides that divide the space frame into equal shares. If you are working with a design for a specific screen for the frame, you can also set the aspect ratio. If necessary, all that is within the scope of, or can be copied to the clipboard as a bitmap, or just take a screenshot that with appropriate markings can be sent to a colleague.

ruler Rulers It is also able to more than its counterparts in any usual graphics editor. It's kind of calipers, crossed with a protractor, which is convenient to measure the size of objects, the distance between them and the angle at which they are located to each other. If you customize the size and position of the lines in retaining key ^ (Ctrl), The tool will stick to the boundaries of the nearest element of the application interface or Web site.

I liked the very tool DimensionsThat allows you to quickly find out the size of any region. Comfortable: have put the mouse cursor on any element or area - and xScope showed two perpendicular with ends, next to which is displayed not only the width and height of said object, but the ratio of its sides. What is particularly cool: you can immediately create a frame or place the guides on the basis of measurements made.

Well, perhaps, the easiest measurement tool in xScope - it's crosshairs Crosshair. It can be used to determine the exact coordinates of any point, not only relative to the left upper or lower corner of the screen - but also with respect to any other point, which can be easily set keys ⌘0.

testing Tools

From tools xScope separately, I would single out a magnifying glass Loupe, Screens simulator Screens and a new feature xScope 4.0 - mechanism Overlays. They are useful not only to work with the finished design, but also during its development.

The operating principle of the magnifying glass is obvious: xScope gives a floating window that shows the area under the mouse cursor magnified. For a point directly under the cursor, you can find the color - save and copy for use in a graphics editor or application to develop. For convenience, the Magnifier window can include pixel grid, cross-hair and the overall measurements, the effect of which resembles in many ways tools Dimensions. Finally, the display of colors in the magnifier can be adjusted in accordance with a type of color blindness that particularly important in the selection of colors that will be able to distinguish between all users, regardless of the color perception.

Simulator screens - another floating window, the size of which allows to simulate the screen of any size and orientation. This tool is useful in that when working on the layout design can be checked immediately, as convenient interface elements and useful information is, for example, on the screen of your smartphone or tablet. The usability of the website on the MacBook Air 11-screen "- is also an important issue, which should take into account at the stage of design development. Useful work is a permanent display of on-screen elements like the menu bar, panel Dock, toolbars and the status of different web browsers. also in Screens there is a simulator of different types of visual impairment and the so-called "deretinizator" that simplifies the viewing of graphic elements in the traditional non-retinovskom resolution.

As to the new instrument Overlays, It is useful to check the correct operation of adaptive interfaces. First of all, it concerns the websites designed to work on different screens. In the window Overlays you specify a different set of columns with gaps and side margins - and check out the design layout with different page width. The beauty of this tool is that it is tied to the Web browser window and, in accordance with its size, and automatically adjusts its size, at the same time changing the parameters of the grid, if the dimension you specify as a percentage, rather than in pixels. However, if you hold only layouts for different screen widths, such "static" can also be checked without having to load it into the editing.

And something else ...

Kind of information desk for fonts and taken separately marks a tool Text. Specify the font of interest and then select a particular character - and its dimension can obtain detailed information: sign dimensions when assembled in the interface, the physical dimensions and parameters for the CSS-analyzer, alternative and similar signs. The selected character can be copied as is, as well as various mnemonic.

Finally, the tool Mirror It allows you to send a specific image on your mobile device, which must be installed utility xScope Mirror. In the box Mirror You can download the contents of the window under the mouse pointer, to display a static image from a file or the clipboard. But most interesting is that xScope can connect to "Photoshop", where real-time Mirror It will be transmitted to the eye-device all the changes you made in the layout design. Developer of mobile interfaces is very useful tool which greatly simplifies the layout preview before they are transferred to the developer. Well AirPlay support provides an opportunity to showcase the designs, for example, on Apple TV.

Usability and customization

Each tool xScope called in one mouse click on the appropriate button in the toolbar floating. However, I liked the ability to display the same set of buttons in the menu bar OS X: so the screen does not hang extra objects that can distract from the work. However, an even more compact solution - a single icon xScope and hot keys that can be assigned to specific tools.

In the program settings is also a lot of interesting things. For example, you can specify a list of fonts to work with the window Text or set of display sizes for the tool Screens. The accuracy of the boundaries of recognition in Dimensions and the format of copied colors in Loupe, lines of color for Guides, Frames and CrosshairAnd switch certain instruments at the transition to a particular application (section SmartTools) - only a small part xScope parameters that can be adjusted flexibly to fit your needs.

Needless to say, a very serious tool for the professional designer, which greatly simplifies the work on the detailed design of interfaces, regardless of whether, under any screen size and resolution are created. Thus xScope eliminates the need to install the entire plug-in bundles for specific programs. If this is your field of activity - highly recommend at least acquainted with demo xScope. Link to buy the Mac App Store is included.