I am hoping it becomes a fun reference to browse, or something just enjoyable to play with. I made the interface feel very differently on desktop and mobile, and I hope both are fun. (There’s also a simple list if not.)
I wish, just like with a regular bookshelf, you could open any book and check it out – but that’s tricky for many reasons. (I did at least scan some of the covers that weren’t available on the web.)
One of the small things I added to Medium in early 2016 was a change to the favicon:
It came from an observation about the writing process. When writing on Medium, you are likely to have a bunch of Medium tabs open with other posts, yours or otherwise, for reference… but you usually only have one tab you’re writing in. Why not make it extra visible so that you can easily come back to it?
But there was a second, more emotional reason. Writing is hard. Many people never touch the “New story” button, on Medium or otherwise. I wanted the writers to feel extra amazing, with the interface itself giving them a nod of recognition. (Visually, the hollow draft icon was also meant to be a “scaffolding” of the published story icon.)
I’d love to hear more about websites or web apps that are using favicons in a particularly useful or delightful fashion. If you have examples, I would appreciate a note!
I am generally not a fan of typewritten art, because at some point it all starts to feel a bit same’y, and the gimmick of using a typewriter as a paintbrush wears off pretty quickly.
But these drawings by German artist Arno Beck caught my attention, because it feels like they playfully remix three eras:
overtyping keyboard art (early 1900s),
the sort of photorealistic smooth shading I most associate with ASCII/ANSI art (1990s),
big pixels from early home videogames (1980s).
In case this interests you, in 2018 I gave a 46-minute talk called “The abridged history of having fun with keyboards” that’s a (hopefully fun) walkthrough of this whole space:
Speaking of computers that used to stop running if you looked at them funny, a few years ago I wrote about the Monkey app that was there on the original Mac. Many software engineers will recognize the premise – Monkey was just a chaos script randomly pressing mouse buttons and keys during the night hours, and if the computer crashed because of Monkey’s random actions, the team would be able to reproduce it and try to fix it.
I was also inspired to try a Monkey-like approach for something creative. In hindsight, it’s a very Unsung post, so you might enjoy it!
Also, in the post, I showed this boring version of Monkey:
Since then, I discovered a different version with its own icon, perhaps designed by Susan Kare:
(If creative use of randomness rings a bell, here’s also an earlier Unsung post about a different take.)
Joanna Stern explains why this emoji is correct today: 📅. (This one too: 📆)
I thought the two different calendars was some trickery, but the answer is simpler than that. I did not realize that, inexplicably, there are two distinct calendar emoji: one for calendar, and one for a tear-off calendar.
The way I learned about it was to use a tool I made a few years ago called text.makeup:
I thought this would be a nice opportunity to share it with you. If you’re debugging a string you don’t understand, or are just interested in learning about various Unicode or encoding secrets through playing (see the left sidebar!), it might be a fun thing to use.
When I was at Medium, over a decade ago, I really enjoyed going deep on typography.
People seemed to generally enjoy what we did. Writers really loved automatic em dashes and range dashes, discovered the beauty of hanging punctuation, and as funny as it might sound today, the smart quotes were a huge hit, too. I was proud of the tight drop caps, the underlines brought me some notoriety, and we even supported ligatures at a time when not only this wasn’t the default, but it also had some mildly scary performance consequences.
But for every two things that worked well, there was also something that in retrospect proved to be me trying too hard, and had to be quickly undone.
I was really excited about resurrecting pilcrows, but many users saw them as rendering or escaping errors.
I briefly added vulgar fractions to all the places where Medium rounded numbers, but that made those numbers confusing and weird in practice.
It was an interesting calibration process. And somewhere in between successes and failures was one thing that I have never mentioned before, and one nobody ever brought up.
I recently shared the story of 2015’s typographical redesign of Medium. As we were exploring the candidate typefaces, we fell in love with one in particular: Charter, a font designed by the industry legend Matthew Carter – and no, this is not a bug, Google Search switches to using Carter’s own Verdana to honor him.
Charter had this perfect balance of “casual” and “refined” we wanted for Medium at the time. Unsurprisingly, it also came with a bunch of typographical niceties – among them lowercase (old-style) digits, which I really wanted:
But there was a problem. Those lowercase numerals came with a “medieval 1,” a particular style of a lowercase digit 1 that resembled an uppercase I. People hated it and were confused by it, thinking indeed that a bug caused a letter I to make its way to the numbers.
No amount of pleading would get us to push that digit through. The backup plan was going with uppercase numerals, but I hated the idea; those digits felt so ugly and pedestrian to me – they were not just uppercase, but also monospace! It was a frustrating situation, being so close and yet separated from a warm Charter embrace by one glyph that it didn’t happen to have.
And so… I drew one.
I, someone who has never ever designed a typeface, decided to vandalize Matthew “The Most Widely Read Man In The World” Carter’s typeface and plop in a new digit 1 of my own creation.
The internal complaints stopped. Weeks later, we launched the new fonts, Charter front and center, my fresh non-medieval 1 attached. I don’t remember the exact details, but we found a way to do this that was compatible with the font’s licensing – and yet I never talked about it because… well, I think you can understand why.
I believe my rogue 1 lasted until a subsequent redesign in 2022, long after I left the company. A decade in, I still don’t know how to feel about it. Did I save Charter as a candidate for Medium by mutilating it a bit, am I writing this post just to launder my own ego, or is this the equivalent of a perp coming back to the scene of the crime? Was I ambitious (laudatory) or ambitious (derogatory)? Maybe you can tell me. But I hope either way it makes for a fun story.
The theme: What does it take to build interfaces that truly allow for fast operation – and why that matters.
If you like the interactive details posts here on Unsung, the essay is kind of a concentrated dose of all that. You can technically read it on the phone, but it’s so much better on a computer (or a big tablet). It has ~40 interactive playgrounds, and sounds, and a glossary, and all sorts of fun stuff I’m doing for the first time.
I wanted to share some things I learned over the years, and nod toward mostly anonymous creators of UX inventions I’ve long admired. I also thought it could be interesting to make interfaces appear as machinery – you’ll see what I mean.
Some of the technical details inside are obsolete, but the story might still be fun. (Plus, it seems like at every job I have, I eventually stumble upon a bug that brings back something from the annals of history. Here’s one from 2019.)
Do we need yet another person crashing out about Apple’s design decisions? Am I doing it only because it’s fashionable to be on Apple Design Hate Train these days? I’ll be honest: I don’t know.
But I have been bothered by Apple’s approach to this aspect of its keyboard design for a while, because it starts breaking what I think is really important in using a computer well: keyboard shortcuts.
I hope it’s also a fun visual history of the most tricky of modern modifier keys.
(And if you like it, I linked to a few of my other keyboard essays in the footer.)