Category: Design

Thoughts on Rdio UX

Rdio was known for its clean design and elegant user interface. The attention to detail really made a difference in the product and it was one of my favorite parts of working there. Some years ago, I collected ideas for further improving Rdio's web UX in the following document. Many of the points are obsolete and were addressed […]

Generate Mac App Icons Photoshop Action

Creating App Icons in all the required sizes for a Mac app can get pretty tedious. Here is a Photoshop action to simplify the task: Download Mac App Icon actions for Photoshop CS6+ The first thing it does is to paste the clipboard contents into a square document — so it's designed for workflows where […]

Shuffle Algorithms for Music

Update, March 7, 2014: Improved shuffling has been rolled out on Spotify. More details at the Spotify Labs post, How to Shuffle Songs. Lots of users complain that Spotify's shuffle algorithms aren't really random. This can best be explained by a cognitive bias called the clustering illusion. Users aren't wrong to complain, though. What people […]

Subpixel Letter-Spacing in Webkit

As of sometime in August, Chrome Canary enables subpixel CSS letter-spacing attributes. It's a beautiful thing. https://bugs.webkit.org/show_bug.cgi?id=20606 http://src.chromium.org/viewvc/blink?view=revision&revision=153727

Avoid Faux-Bold with Web Fonts

Only the best web fonts have a full complement of bold, italic, and bold-italic faces. Typekit provides lots of great fonts with a fleet of variants, but if you're on a budget or enjoy the freedom of Google Fonts (as I do), you'll find a lot of great fonts that don't have true bold variants. […]

Converting to Retina

These are my personal recommendations for making the switch to a high-DPI website. 1. Step one: stop working at 72 DPI This one is for the designers: get into the practice of doing everything at high-DPI. If you are working in Photoshop, get to know and love shape layers and the path tool, even for […]

Double-Click-Through

"Click-through" is a term for being able to interact with buttons and controls on a background application without clicking first to activate it. Click-through is normally disabled in OS X. There are some exceptions where the first click is active, like iTunes player buttons, Safari UI, and Chrome UI (but not active webpage content area). […]

Parallax Starfield HTML+CSS Effect

This is a simple parallax depth effect that uses 3 layers of transparent background images. I wrote it in ~2007, but the effect still works pretty well. These days, I'd start out with JQuery and use a scrolling plugin...For best results, middle-click and use smooth scrolling.