Sketch Align and Add Guides

The persistent alignment controls in Sketch could double as a way to add guides around canvas selections. The basic idea is that depressing a modifier key would switch the toolbar into a guide placement quasi-mode, with the icons and tooltips updating to reflect the change. Ideally, the icons in the toolbar would reflect the guide color set in Sketch’s preferences (red being the default).

Sketch: Add guides around a canvas selection

Built using the recently released Tumult Hype 2.

Sketch Guides

A few ideas to improve the alignment guides in Bohemian Coding’s Sketch, which I’ve been using more and more since Adobe announced that they pulled the plug on Fireworks — just like Obama will do to your sweet old granny.

In the current version (2.3.1), guide positions are hard to read and you can’t easily space them from each other and the edge of the artboard.

Guide positioning and spacing
Guide positioning and spacing

There is also currently no way to position them by numeric input, a feature I found very useful in Fireworks.

Numeric position input
Numeric position input

Say you’ve decided to change the height (or width) of an element in your design, a change that must propagate. It would be great to be able to move all of the guides on one axis in one pass.

Y axis ruler contextual menu
Y axis ruler contextual menu
Batch guide positioning adjustment
Batch guide positioning adjustment

The input boxes for individual and batch position adjustment would of course let you increment their values using the arrow keys and change them using mathematical operations, two features I’ve found really useful in Sketch.

The Alan Gilbert Setting

The incident last year in which Alan Gilbert stopped the New York Philharmonic toward the end of Mahler’s Symphony No. 9 to demand an end to an iPhone’s marimba play-along and my own irritation with patrons at Carnegie Hall who do not heed the projected request to turn your devices off reminded me of an idea I posted for integrating phone ringer settings and calendar events. Here is the phone side of that idea, with the addition of location-based smarts to prevent the setting taking effect if you decide not to attend the event.

Sound and vibrate settings for a smartphone during a calendar event.
Device settings during an event.

The device should learn which setting is used for a given location and use that as the default once it can do so confidently — after maybe 2 or 3 uses of the same setting for the same location.

Chain of Commands

I’d like to see the app switcher’s ability to quit and hide applications extended to allow other commands to be sent to applications without having to exit the app switcher quasi-mode. This could be handy with browsers, writing tools, and media players.

HUD Commander

This would work best if the selected application’s windows were presented when using the switcher so you can see what you are acting on. If not, it may be best to limit the additional commands to those that appear in the application’s Dock menu (usually, create a new document or window) and have a keyboard shortcut.


Working with a laptop and large external display reminded me of an interface irritation particular to multi-monitor setups in which the displays are of different sizes. For instance, a stacked arrangement with the menu bar on the large display on top and the Dock on the small one below. You can easily move the cursor to the large display anywhere along the top of the smaller screen. The inverse is not true; there are portions of the large display that will not allow the cursor to move to the smaller display.

Gateways animation (use a respectable browser)

Graphics created in Fireworks, animated in Hype.

Design Notes

  1. I believe an indicator showing just the passthrough zone is the best design, but there are alternatives:
    1. Show indicators for the portions of the display that do not allow the cursor through
    2. Show indicators for both
    3. Keep the existing “mouse around until you find it” implementation
  2. The color of the indicator could be calculated based on the desktop background to ensure sufficient contrast.
  3. Some smarts about determining cursor movement direction (like that used to keep sub-menus open when the cursor is moved diagonally) would prevent the indicator from appearing when the cursor is moved toward a hot corner to activate Mission Control or an Exposé mode.
  4. The indicator is obviously not needed when moving between displays of the same size.

Red Light, Green Light

One nice feature of some Android phones is the ability for apps to choose from a few different colors for status light notifications. Facebook flashes the LED in blue and Evernote flashes green to notify you a note has been synced — subtle touches that convey useful information about app activity.

Along these lines, it would be nice if the Google Talk app used a red light when you receive a message while your status is set to Away and green when Available. I feel comfortable waiting to respond to messages when my status is set to Away. You would have to turn your screen on to see which app triggered the light if you have several that use the same color, but it’s no different from every app using the default LED color.