Designing an interface that feels like an operating system
Example entry. A long post, to test reading comfort, headings, quotes, lists and code.
Example entry: replace or delete src/content/posts/example-long-read.md.
Most personal sites are documents. I wanted mine to feel like a place: something you operate rather than scroll. This post walks through the decisions behind that, from the ring of orbs to the timing of every transition.
Start from one memorable thing
Every screen has one element that carries it. Here, that’s the ring. Everything else (the banner, the guide lines, the status bar) stays quiet so the ring can be loud.
Spend your boldness in one place, and keep everything around it disciplined.
Motion should answer the user
Animation that plays on its own quickly feels like decoration. Animation that answers a click, a swipe or a key press feels like the interface listening. A few rules I kept:
- Animate only position and opacity, so the browser never has to redraw layout mid-motion
- Make the interface usable the moment the main element lands, not when the last flourish finishes
- Give every animation a calmer version for people who prefer reduced motion
Timing
The section opens in about a second, but it’s ready to use as soon as the orb lands. The text keeps revealing for a few hundred milliseconds after that, and nobody waits for it.
/* The only things that ever move. */
.orb { will-change: transform, opacity; }Accessibility isn’t a layer on top
Keyboard focus, screen-reader landmarks and contrast were in the spec from the first draft, and they shaped the design rather than being bolted on. A focus ring in the orb’s own colour, loud enough to see, turned out better than a generic white outline.
What I’d do differently
- Write the content model earlier. Lists of projects and posts changed the architecture more than any animation did.
- Test in Safari from day one. Every engine has its own surprises.
Thanks for reading.