Sketch Missing Font Finder

I’ve opened a few Sketch documents lately that specify fonts I didn’t have installed. Something like the TypeKit integration in Adobe’s Creative Cloud apps could smooth the process of acquiring missing fonts.

Sketch find and install missing fonts dialog mockup

  1. I think it’s helpful to show the document name in the dialog because you can’t actually see the document open in Sketch yet. Maybe you opened a couple documents at once and aren’t sure which one has missing fonts.
  2. The Search Web for Font button would only appear if the specified font cannot be found on Google Fonts. Clicking it would open a search engine query (using the default engine in the user’s default web browser) with a string along the lines of “FontName-Weight+font”.
  3. Alternatively, a menu allowing the user to either search a generic search engine or a font site like FontSquirrel could appear.
  4. The dialog should be wide enough to accomodate most PostScript font names. Extremely lengthy font names should be truncated in the middle so the user can see the first bit of the family name and the weight. The whole name can be displayed on hover.
  5. Some variation of this interface should also appear in the Missing Fonts sheet.

Speech and Gesture Input

I would really like to be able to interact with applications in a simultaneous multi-modal fashion, taking advantage of pointing device, keyboard, voice, and gestures. In some cases, I'd like to direct speech commands to a background app while pointer and keyboard focus remains in the front app. Sometimes you need information from an app, not necessarily to use it.

Say I’m chatting with a friend to schedule dinner next week, but I don’t remember my schedule. Calendar is open and visible in another region of the screen, but it’s showing the current week. Assuming the Mac is always listening for the Siri invocation command, I just say “Hey, Siri, go to next week in Calendar” rather than switching to Calendar, navigating to next week, then switching back to the chat. This scenario is depicted in the video below.

SiriKit for macOS Flowchart
A flowchart for Siri interactions with background apps on macOS.

Speedy interpretation of speech commands is crucial to these interactions feeling fluid and natural. Incorporation of a speech co-processor (as with the iMac Pro) allows Macs to always listen for the “Hey, Siri” prompt rather than having to invoke Siri through the menubar item or keyboard shortcut.

If Apple builds a display (still hoping for a 40-inch 8K) to pair with the forthcoming Mac Pro, they should include the dot field hardware that enables Face Unlock on the iPhone X. Provide that on the Mac, but go further by using it to recognize hand gestures made in the space between the user and the display. It could also potentially be useful for those with motor impairments as a way to use blink patterns to execute commands. Maybe it could even be used as a way to translate sign languages to text, without having to wear a special glove.

Gestures

  1. Hold up a thumbs up or down, or one or more fingers to star rate the playing song
  2. Raise or lower your hand to control audio or video volume
  3. Make a pinch in or out gesture in mid-air to zoom in mapping or graphics apps; not everyone has a trackpad
  4. Make a “holding a camera, pressing the shutter button” gesture to take a screenshot

I wrote years ago about visual gesture interpretation, for which there now seems to be capable hardware. More recent thoughts on gestural interaction from David Rose and IDEO.

Tools and Resources

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?

Notes

  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! Also, I do this professionally. If you know of anyone who needs a designer, please let me know! My email is my first name at thisdomain.

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.

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.

An Incremental Sketch Improvement

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

Sketch-Resize_increment_display

  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.

Hype Pro Released

If you want to design UI transitions and responsive layouts without writing the code yourself, Hype Pro is a great option.

To work out the details for specific UI transitions, I frequently just copy and paste design elements from my Sketch document into Hype and go from there. Keep in mind that it is generally easier to manipulate text and boxes if they are created in Hype itself.

For more involved UI simulations, the addition of symbols (particularly those that persist across scenes) makes such a thing much easier to manage than in older versions of Hype.

New Middlemen

Platforms that promised to bring convenience to a process or intimacy to a relationship now wedge themselves into the transaction as new middlemen. Then, we’re left to trust in the benevolence of those who have the power to mold our dependencies. Citing a lot of the concerns I mentioned earlier, those people are less responsible and compassionate than we had hoped. In pursuit of convenience, we have opened the door to unscrupulous influence.

Frank Chimero: The Web’s Grain

Visual and Interaction Design on the Mac

It’s a hopeful time for design tools on the Mac.

  1. Adobe having killed Fireworks, I’ve moved over to Boheman Coding’s Sketch. The addition of symbols in v3 made it practical to use for larger projects. I still miss shared layers from Fireworks, but not the crashes.
  2. Affinity Designer has great performance, a customizable UI, and a good balance of vector and bitmap tools. It’s not geared toward mocking up numerous screen views, but it seems like a good option for individual illustrations and icons.
  3. Flying Meat’s Acorn is a great alternative to Photoshop if you need bitmap editing capabilities.
  4. Quasado’s Gravit provides a good deal of Fireworks’ functionality in an open source, web technologies-based package. It’s still very much a work in progress (no Boolean ops on vectors, no vector export, bugs, etc.), but it already surpasses Fireworks in some ways. The multiple master pages would have been great in Fireworks.
  5. Not having been released, I have not used it, but there is good reason to believe that Bjango’s Skala will be a quality visual design app.
  6. Relative Wave’s Form looks like a way to build iOS prototypes without all the complexity of Quartz Composer.
  7. Along similar lines, there is Facebook’s Origami.
  8. Framer Studio is another good option for mobile prototyping. There are many examples if you’re new to writing JavaScript.
  9. Tumult’s Hype is a good way to build interactive prototypes without coding. I’ve built fairly extensive prototypes using the combination of Sketch and Hype. Unlike Form and Origami, Hype’s output can run on anything with a decent browser.

Most designers for screens could be well served by some combination of the above. My workflow these days is mostly doing graphics and some layout in Sketch, then prototyping in the browser using jQuery with Velocity.js or Snap.svg for animation.