I linked to palette cycling before, and I was just reminded of palette cycling art by Mark Ferrari, who back in the 1990s made 30+ landscapes that looked like this:

They have been collected on this webpage some 15 years ago, and I’m linking to it in part because it’s also a great explainer of how palette cycling works – you can see the colors move around, you can point to one to see it frozen, and you can see multiple cycles running in parallel, compare palette ranges between different environmental conditions, and turn on a “blended” technique that feels clever and I didn’t realize existed.

The page was made by Joe Huckaby, who wrote a little intro:

Mark J. Ferrari […] invented his own unique ways of using color cycling for envrironmental effects that you really have to see to believe. These include rain, snow, ocean waves, moving fog, clouds, smoke, waterfalls, streams, lakes, and more. And all these effects are achieved without any layers or alpha channels – just one single flat image with one 256 color palette.

The launch was also accompanied by an interview with Ferrari, which is an interesting read – in part because it shows the work was even more elaborate than all of the above:

These versions of the scene are all the same piece of art ‘shifted’ to different palettes, and, in some cases, using additional ‘baked in’ overlays, (such as rain or the lighted windows at night). But those overlays are all ‘baked in’ to the same layer of the same piece of art that appears in any other ‘day-time’ or clear weather iterations, and are all deriving their color and motion from the same palette as the rest of the picture in that state.

While [the page above] finally allows us all to watch these images color cycle online, many of the scenes posted were actually ‘built’ to do much more than merely animate. By fading the one piece of art through whole sets of palettes, sometimes also using a very sparse set of ‘baked in’ overlays, a number of these scenes can go seamlessly through the 24 hour light cycle, and even change weather conditions ‘naturally’ and seamlessly in real time as you watch. I am not just talking about changing the brightness or color scheme of these pictures either. In the images built for it, over the course of ‘sunrise and morning,’ ‘morning to afternoon’ or ‘evening and sunset,’ light and shadow will actually gradually change angle, climb down the sides of things, move across lawns, up cliffs or building walls, as changing light does in life – all just by fading through palette series designed to make those things happen without altering or adding anything at all to the single layer of 8-bit pixel art.

Ferrari also suggests an interesting analog to palette cycling, which I quoted in the title.

Bonus: Ferrari’s animated landscapes were made for a new-age’y personal organizer app called Seize The Day, and on top of the above preservation effort, there is also this independent, extremely retro page from a fan of the app who loved it so much she decided to keep the app itself alive, too.

Speaking of cut in File Explorer, Will McGugan, creator of the writing editor Ishmael, proposes doing the same thing for text editing – that is, leaving ghost text behind:

I call it “Ghost Cut”, and it works like this: pressing Ctrl+X fades the selected text and makes it inert—you can’t click on the cut text and the cursor just kind of leaps over it, but it is still present in the document. Nothing is placed in the clipboard at this point and there is nothing to undo. If you decide you don’t want to paste then hitting Escape will restore the text to its active editable state.

I do not think this is a good idea. It seems like McGugan proposes somewhat arbitrary reasons that cut and paste are “broken,” and to me the proposal fails even within his own framework: for example, it still doesn’t avoid the reflow, but moves it to the other side, making paste feel unstable (the included JavaScript playground feels disorienting to use). I think it also is at odds with the editor’s own about page, which talks about distraction and simplicity – and yet, what’s introduced here is a host of complex new things: a new visual state for cut text (that looks like AI autocomplete), some new logic to avoid moving into the cut text (which will also prevent easy selection adjustments), likely new confusion around undo, and a necessary new Esc gesture to get rid of a cut you decided not to pursue.

But! There is something interesting in seeing this ghost text, and specific critique aside, it is fun to see experiments like these, with interactive explainers, poking at long-established interactions. Just yesterday, a second one appeared: an interesting new way to extend selection upwards – similar to double and triple clicking on text, but via the keyboard. This is the power of prototyping: sometimes seeing an idea you disagree with is the only thing that can unlock a different solution in your head.

Let’s go back to cut and paste, though. You will notice that what’s listed as a precedent is not File Explorer, but Excel. It also doesn’t immediately remove selected cells on cut, but leave them in a temporary “possibly getting moved or removed” state first, only to have them disappear after paste:

Why is that? I believe out of a similar principle, but a distinct reason that File Explorer too opts to leave a cut ghost behind. The stakes are higher in a different sense: cells refer to other cells. Were the removed cells to disappear immediately, you might witness the rest of the spreadsheet error out or show zeroes, as its formulas start pointing to emptiness.

And it’s a good principle to generally avoid frightening your users.

Here’s an example from Numbers, which doesn’t do ghosting, making cut a bad choice to do a simple move, as it doesn’t even recover after paste:

On her blog, Lea Verou makes a case that each user-facing website dark-mode toggle should only ever show two options, but in a smart way.

The challenge is that any dark mode toggle needs to actually accommodate three options: dark, light, and the default “whatever the system says” (which can be always dark, always light, or change with the time of day). Many toggles simply pass that complexity onto the user:

I want to get something out of the way: I don’t think Verou’s article as an article is fully successful. I feel like it spends a great amount of words to explain something not entirely as complex, and even the interactive playgrounds felt slightly too rigid and altogether confusing. If you care about (interactive) explainers, it might be an interesting case study in and of itself.

But I am very much much on board with the proposal and the line of thinking it represents. Verou suggests a “smart” dual state toggle, which still allows the website to follow the system, but shoves the complexity of the “whatever the system says” branch into the crevices between visible UI. Here’s how I understand it:

• The smart toggle only has two options: light and dark. Mechanically, clicking or tapping the toggle brings you to the opposite option. Simple.
• If your new option is the opposite of system (e.g. you switch the page to dark mode if your system is in light mode), it will stay in that theme forever, no matter what the system does in the future.
• If your new option is one that currently matches the system, it will then continue following the system in perpetuity (e.g. it’s back to the default behaviour).

This toggle will feel compromised, and you might immediately find some rare use case it doesn’t fully support – maybe attached to an imaginary user, or even an internal user giving you feedback in person. But Verou is absolutely correct in her insistence to fight through that:

Tri-state toggles are implementation-driven UI. One of the most common UX mistakes is designing UI around the underlying data model instead of user goals. Good interfaces abstract away the underlying model and expose a model that aligns with user goals (unless of course these happen to coincide, which is rare).

Now, it’s just a dark mode toggle. It might not seem like a difference between a smart dual state toggle and an explicit tri-state toggle is that much. But:

• “Whatever the system says” is not just one extra option. It’s also one extra weird option. It doesn’t feel like the other two. It’s seemingly repetitive. It’s often unclear what it does before clicking. It’s not obvious where to put it in order. Verou doesn’t mention this in her post, but even just seeing the word System next to Light and Dark feels complicated. (Auto is slightly better.) The cognitive load here might be larger than it seems.
• What is an interface if not a collection of a million challenges, each one seemingly insignificant on its own? Trivial things add up. One compromise here and one cheap decision there, and soon you’re talking real money.
• Thinking deeply about something like this gives one practice for dealing with complexity elsewhere, and facing even more difficult challenges where the stakes are higher and the compromises larger.

A similar example might be that of PC keyboards in the late 1990s, which also exposed system complexity and pestered people with Power/​Sleep/Wake keys:

Computers do not do that anymore, simply having a smarter singular power button, piped to a more sophisticated logic underneath.

Interactive explainers are one of my favourite things about the web: people passionate about things introduce them to others, for free, with care, and often using some interesting interactive or educational approaches in the process.

I picked a few I particularly liked for this post. These aren’t just explaining things useful to know as a designer, but also themselves contain inspiring/​unique interactive moments worth knowing about:

1.

Curves and Surfaces, Bartosz Ciechanowski

• Every example has draggable points, but it also pops up an undo button once you start messing around, so you can feel safe experimenting:

• Specific ideas and definitions are color coded between text and the interactive pieces:

• For complex three-dimensional shapes, you can simply rotate them around to orient yourself better:

• I liked this trick of claiming something is impossible, but leaving a door open to try it anyway – I bet it will get some people more engaged, in the “but I’m sure I can lick my elbow” sense:

2.

ASCII Characters Are Not Pixels, Alex Harri

• I think the traditional “drag a divider to swap between two representations” interaction is actually kind of bad, but this essay subverts it by allowing you to toggle between representation A, representation B, or both side by side:

• A button to copy code to clipboard is always appreciated:

• I don’t know, I liked these minimalistic sliders:

3.

Tab Roving, Niklas Gadermann

• It’s hard to know what to do with complex interactivity, for example a specific sequence of keystrokes… let alone the fact that mobile phones don’t have easily accessible arrow or Tab keys. Here, a brilliant solution: not just on-screen soft keys, but also automatic playback!

Also, kudos to all three creators for their explainers working equally well on phones as they do on desktop computers.

More unexpected Mario content: a 7-minute video speedrunning composite by FlibidyDibidy:

This video combines my first 5,162 attempts to speedrun Super Mario Bros. I recorded 193 hours of attempts (and practice) on an original 1985 Nintendo Entertainment System, then I wrote a custom computer program to process those videos and combine them via machine learning and conventional image processing techniques.

This is not just fun to look at, and – presumably – study as you’re speedrunning yourself. A sign of a good visualization is that it makes you see stuff that you haven’t before and here, at some point (after 1:42), you start noticing strange comb-like patterns in Mario running.

Turns out this is actually a thing called a “frame rule,” a quirk of game’s timing code where it only checks for a completion of the level every 21 frames, or one third of a second. That means that for every level after the first one, your start will be rounded up to the nearest 21st frame:

The analogy often given is to think of a bus that leaves every 21 frames, and levels can only end by getting on that bus, and so other than in the last level (which has no new level to load at the end of it), improvements in Super Mario Bros. can only happen in 21 frame increments. If you save a frame or two in a level, but it’s not enough to make the previous frame rule, it’s not enough to take the previous bus, you’ll just end up waiting for it to happen anyway.

Stay tuned to the end of the video for some fun stats, and click through in the description below to see the same tech applied live during an in-person speedrunning event.

I enjoy little lists like these, and the presentation here is also delightful. From a design engineer Jakub Krehel, Details that make interfaces feel better. A few of these stood out to me:

Make your animations interruptible. […] Users often change their intent mid-interaction. For example, a user may open a dropdown menu and decide they want to do something else before the animation finishes.

Yes. Never make the user wait for your animation to finish, unless the animation itself is meant to cause friction and slow the user down (which is very rare).

Make exit animations subtle. Exit animations usually work better when they’re more subtle than enter animations.

I love asymmetric transitions. My go-to analogy for this is “in real life, you don’t open the door the same way you close it.”

Add outline to images. A visual tweak I use a lot is adding a 1px black or white (depending on the mode) outline with 10% opacity to images.

This is very nice and (both literally and figuratively) sharp. In some contexts, I bet you could even try to go for 0.5px.

(If you liked this page, it’s worth checking out Krehel’s other explainers, for example about gradients or drag gestures.)

A week ago I asked on Mastodon and Bluesky:

What are you favourite well-made apps or sites? Phones and computers alike.

Doesn’t have to be “pretty,” but well-made according to whatever definition works for you.

I specifically made it kind of vague, and these are the answers I got. I grouped them into categories and added links. I am excited to dig into these and study them, but wanted to share a raw list as well in case this inspires some of you, too.

Thank you to everyone who participated! (Numbers in circles like ② or ③ mean more than one person nominated a given site or app.)

Info sites:

• Ian’s Shoelace Site ② “A «does one thing well» site. Great breadth and depth. Information architecture designed to help you discover/​find information, not sell you something. Loads fast. Still maintained after decades.”
• SCELBI Computer Museum. “Useful, tightly curated, organized, loads fast, no BS. A basic bootstrap thing, but there’s something magical about it. Small enough to be digestible in an hour, well set up for either research or just cool vibes . Partly bc subject itself is «small» but seems not only that.”
• Hyperion Records. “All the liner notes and song texts!”
• www.gov.uk
• plaintextsports.com

Interactive explainers:

• Bartosz Ciechanowski ③
• It’s Nicky Case!
• Neal.fun
• Making Software by Dan Hollick
• Alex Harri

Personal sites:

• “I’m in love with Maggie Appleton’s site. The general design and the illustrations, the content (from quick notes to polished essays), the way it creates a visual and conceptual taxonomy with the #digitalgarden concept.”
• Kottke
• Robin Sloan
• Robin Rendle
• Rasmus Andersson
• Ariel Salminen

Work and tasks:

• Mimestream ③ “It basically stays out of my way? Which is about as good as it gets these days. Also, it has just enough customization options to handle my sometimes complex number of gmail accounts (personal/​work, for various clients, etc.)”
• Things ② “The fanciest, most attention-to-detail software I know of.”
• Sup “Pretty niche. I’m thinking specialist interfaces for specialists here. Tools that become an extension of their users’ bodies and disappear in te use”
• CalendarBridge “<3 <3 <3”
• MyLifeOrganized
• Voice memos (iPhone)

Art/​Games:

• “rekall for a simple, occasional, cyberpunk-ish retro mood board injection.”
• Good Sudoku
• Floor796
• Threes

Creative:

• Monodraw ② “for ASCII art”
• “Zerocam is the perfect no-fuzz-just-snap camera app”
• “I like Keynote. But am not completely objective about that.”
• Vectoraster “for halftones”
• Spectrolite “for colour separations”
• Darkroom
• Rayon (desktop)
• MagicaVoxel
• Fusion 360

Podcasts:

• Pocket Casts
• “Castro is still my favourite podcasting app…
• …although visually I like Queue more”

Social:

• “Telegram is the best messaging app in terms of UI design”
• “Locket is my fav «novel UX» app and its widget is always on my home screen”
• Phanpy (the Mastodon client)
• Reeder
• BarnOwl

Commerce:

• McMaster-Carr ④ “The best online catalog.” “Impossibly fast. Still in awe after all these years.” “It supports your cognition, including with contextual material, to find the thing you are looking for (or the thing you didn’t know you were looking for until you started looking). It helps you find the right part because of what they show, the right filters, and especially the contextual information (I think about the little scale they had to explain the different hardnesses of rubber, for example).”
• Cars&Bids. “Fast, functional, and easy to use. Not stunning, just utilitarian.”
• DigiKey

Writing and note-taking:

• iA Writer ② “Simple and effective, using it I always wish to write more but I forget it again.” “Has been consistently great for years.”
• “I’ve been using Bear ② by Shinyfrog for my notes for well over a decade now. Dependable, works great, no junk ware, and a reasonable price. Pretty to boot. The fact that in the 10+ years I’ve been using it, there’s only been a single major overhaul update is a feature, not a bug to me.”
• “Notability! Haven’t found anything else that matches the flexibility for handling imported files & photographs, typed notes, hand-drawn diagrams and mark-ups completely seamlessly within a single document. Unbeatable for handling both notes in class (uni) and on site (trade).”
• “Been using OmniOutliner daily for decades. Simple, focussed and matches the way I think. Lots of ways to make lists and outlines but this one works for me.”
• WriterDuet

Music:

• “The radio station WFMU streams online, and also has a website where you can log in to chat with other listeners and interact with the playlist. The degree to which it does what you want it to do is stunning. It doesn’t get in your way or make you learn a new paradigm; it just makes it easy to do what you want to do. It’s a lesson in design for any UI/UX people.”
• Ishkur’s Guide To Electronic Music. “This website maps out all the sub-sub-sub-genres of electronic music, with descriptions and samples. I think that the fine-grained classifications are comical, but they do an excellent job of what they’re doing.”
• “Easy Metronome is a simple elegant loud phone metronome that is super easy to use even for weird time signatures.”
• “Pro Metronome is also excellent. I’ve used it for over 10 years and it stubbornly refuses to abandon its skeuomorphic leather and big clicky scroll wheel”
• “I really appreciate the Apple Music Classical app (even though it exists in this odd liminal space beside Apple Music) having spent many years frustrated about how traditional music streaming services handle classical recordings.”

Travel:

• Flighty ②
• “I‘m travelling with Deutsche Bahn quite frequently, and while their own App (DB-Navigator) is quite good compared internationally, I prefer to track trains on Bahn Experte for its bare, technical and valid information and performance.”
• “The Man in Seat 61 is a goldmine for train travellers. At least in Europe, the information is really up to date and if you want to find pictures of the sleeper cars of the Romanian railway or the seat map of Prague - Berlin trains, it’s all there.”
• Transit
• Waymo’s app

Food and health:

• “The kiosks in Costco’s food court aren’t the prettiest to look at but they are S tier for responsiveness. You literally just press a button and immediately the item is added to your cart. You can order a hot dog and soda in under 5 seconds.”
• Paprika. “Love my recipe management.”
• Fitness Stats. “Simple, effective, and good looking.”
• Mela
• MacroFactor
• HealthFit
• The Way

Text editors:

• “I use Panic’s Nova an awful lot and it just has a really nice feel so I keep paying for it.”
• Sublime Text
• vim

Data transfer:

• “WebWormhole for functionality, encrypted data transfer between your devices or to your friends without installing anything. (There’s also a similar magic wormhole CLI tool.)”
• PairDrop. “Drop-dead easy file sharing on the local network.”
• “LocalSend is well made, because until sofar it aleay works, even when AirDrop doesn’t. And it also works on non-Apple environments.”

Other nerdy tools:

• RegExr. “A web-based tool to create or explain regular expressions.”
• “The Sway compositor. A keyboard-driven tiling window manager with dynamic tiling layout. I can’t even imagine trying to use a computer with floating, overlapping windows anymore; everything lines up perfectly and adjusting layout is a matter of a few extremely quick keyboard shortcuts. They take a concept—laying out multiple windows on a display without gaps or overlaps—and build a fast, coherent interface around that concept, and it works fantastically.”
• “The original HP 42S calculator packed a lot of power into a convenient and ergonomic enclosure, and Free42 is a very tasteful recreation and expansion of that device for modern platforms.”
• Beyond Compare (Linux version)
• Alfred
• Genius Scan

I didn’t know where to put these:

• “The Kanji Study dictionary on Android has a wild amount of polish, I’m consistently impressed by how much effort has been put into it, especially because it’s sold for a (admittedly high) one-time fee.”
• Sim Daltonism
• Homey

Meta:

• “I happen to maintain a list of my favourite apps. (And being well-made is sort of a pre-req.)”
• Web app directory and Mac app directory