Design Interaction Interface Pro Bono Portfolio

Merging the Mergers in Affinity Photo

Say you drag a few images into one of Affinity Photo’s merging tools, only to realize you opened the wrong one. The commands are grouped in the menu, two have keyboard shortcuts right next to one another, and the tools have similar layouts, making this a fairly easy mistake to make.

Rather than having to hit Cancel, open the intended merge tool, then relocate the images you want to merge, what if you could just switch to it, with the images you added still in place?


  1. The functionality of the Batch tool seems different enough to warrant it remaining separate.
  2. To keep the various merging options visible to the user, it might be best to keep their individual items in the File menu. Each would just open the unified interface to the appropriate tool.
  3. It would be great to be able to drag-and-drop directly to the Images pane rather than having to open the file picker, then drop to it, then click OK.
  4. The visual styling of the window widgets is a bit confusing; the brighter widgets are disabled. This is contrary to most GUI conventions, including how the OK button is disabled in the tools themselves.
  5. If the Panorama tool isn’t resizable because the panorama previews would have to be re-rendered (a processor-intensive task), just fix the width of the preview pane while allowing the Images pane to expand.
  6. There is some ambiguity in the Panorama tool when you have stitched multiple panoramas together. If you don't explicitly select all of them in the preview pane before you hit OK, only the last selected one will build. A different button label or counter tallying how many panoramas will be rendered (Render 2 Panoramas) might be sufficient.
  7. NTH: a way to tell which images constitute which panorama after the panorama preview is generated. This could look something like the mockup below. Ideally, the number displays next to the panorama preview would handle discontiguous stitches nicely, so if you used three of 4 images out of sequence, something like “1 – 2, 4” would appear next to the thumbnail.
  8. NTH: the “Who you gonna call? Ghostbusters!” portion of the movie theme should play when you check the “Automatically remove ghosts” option in the HDR merge tool.

I'm looking forward to Affinity Publisher!

Apple Interaction Interface macOS New York Pro Bono Portfolio

Subway Status

Once you’ve lived in New York for a while, you don’t necessarily need a specific route to get between two points. You know roughly which subway lines will you get from point A to point B. The important thing becomes knowing which trains are operating normally and which are delayed or rerouted (which seems pretty common these days). To that end, the MTA site provides a status widget providing an overview, but I’d like it to be a single click (or two-finger swipe) away in the Today view of the Notifications Center. A similar display would also be useful on phones.

Subway status widget prototype screenshot

Interactive subway widget prototype (requires a browser that supports CSS Grid)

The brief SVG morph from the 7 local circle to express diamond is done using anime.js.

Apple Browsers CSS Design Interaction Interface macOS Pro Bono Portfolio

Safari Responsive Design Mode Polish

Here's the UI as seen in Safari Technical Preview 41, released October 4, 2017.

Safari Technical Preview 41 Responsive Design Mode

Revised Responsive Design Mode

Revised Safari Responsive Design Mode
Safari Responsive Design Mode - device icon hover showing rotate icon
  • Add a bandwidth throttling menu:
    1. Default Network
    2. High-Speed Cellular
    3. Low-Speed Cellular
    4. Offline
  • Improve the contrast of the selected viewport setting in a style consistent with the Web Inspector
  • Show a rotate icon when hovering on a device icon
  • Align label baselines
  • Add a screen mode menu for iPads that would allow selection from:
    1. Full Screen
    2. Primary
    3. Secondary
    4. Split View

    This provides an explicit UI for using the iPad multi-tasking modes and would allow users to switch between portrait and landscape orientations of different iPad models while staying in a multi-tasking view. In STP 41, you can skip cycling through the iPad multi-tasking modes by Option-clicking the iPad icon.

Design Photography Pro Bono Portfolio

OM-D E-M1mk2 Icon

Olympus OM-D E-M1mk2
My current camera of choice.

Drawn entirely using vectors in Sketch.

Design Interaction Interface macOS Pro Bono Portfolio

An Incremental Sketch Improvement

When resizing objects in Sketch, I’d like to see the increment (or decrement) value along with the dimensions.


  1. The change value is always relative to the dimensions before the drag began, so if you increased the width of the example above by 10, then decreased that by 5 without releasing the drag handle, the counter would read +5.
  2. If they prove distracting, maybe a “Show dimension change counts” checkbox in the Layers section of Preferences.
  3. Ideally, these would display when resizing using the keyboard as well.
  4. Throw typography nerds a bone by using a proper multiplication symbol rather than an x for the width/height separator. I assume you can add it from the Characters palette to the appropriate place in Xcode.

I’m really happy with how the new (nestable!) symbols are shaping up in the Sketch 3.7 betas — great work by the team at Bohemian Coding.

Apple Design Pro Bono Portfolio

30 Years of Macs

I used the icon font Apple released as part of the 30th anniversary of the Mac to create a couple 2560 × 1600 desktop backgrounds. I stuck to particularly notable Macs and the models I or my family have owned.

30 Years of Macs (Light)_thumbnail

30 Years of Macs (Dark)_thumbnail

Download 30 Years of Macs

30 Years (Light)_thumbnail

30 Years (Dark)_thumbnail

Download 30 Years

Interface Meta-data Music Pro Bono Portfolio

Credit Where Credit is Due

In the move to digital 1, and particularly with streaming, the musicians who play on recordings are rarely given credit outside of AllMusic or Wikipedia. A PDF of the liner notes might mention personnel, but I don’t know of any download or streaming service that embeds such information in tracks. For MP3, there is a standard in place for such metadata — ID3 has the TMCL and TIPL for tagging files with personnel credits. There are Apple namespaced equivalents for MP4 (AAC) files. I’ve long used the Comments field for this purpose, but it suffers from limited character length and lack of structure. The only software I’ve found that supports TMCL and TIPL with an interface designed for their input is a Windows application called ID3TagIt. Not wanting to fire up a virtual machine to use an app which has not been updated since 2006, it would be great to see support in Metadatics2. Currently, it handles musician credits only as raw text:


I’d like to see a UI for inputting credits:

Metadatics People tab

The menu button at the right of the name field would give you access to commands to remove the person, the instrument or role, or add another person with the same instrument or role.

Providing a field for the Lyricist would also be nice:

Metadatics Lyrics tab

Of course, this is pointless if playback software doesn’t provide some way to use this metadata. I want to be able to start a stream of songs with lyrics by Stevie Wonder, or create a Smart Playlist with all recordings of Pino Palladino on bass. Unfortunately, Apple seems to have lost interest in expanding iTunes’ metadata support and Spotify and Rdio have only the most basic track metadata.

For more social- and personal experience-oriented ideas for music metadata 3, read Khoi Vinh’s What Streaming Music Can Be.


  1. Note that I am not a retro-tech nostalgist. Not every LP sounds amazing, they wear out, and they are not the least bit portable.
  2. Licensed! It’s only $10.00.
  3. Some of which are similar to
Design Interaction Interface macOS Pro Bono Portfolio

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.

Design Interaction Interface macOS Pro Bono Portfolio

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.

Design Interaction Interface macOS Pro Bono Portfolio

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.