Web design notebook
Website builds, design decisions, and case studies.
From the first sketch to the finished website.
The brief Design decisions The resultKaybl turns a Plex or Jellyfin library into something that feels like flipping channels. The hard part isn't the channels. It's drawing one guide that works on a TV, a phone and a desktop.
The design notebook · Note 4 ↗Six colors sampled from a screenshot of a dark RSS reader, the rules that keep amber from turning into a Halloween theme, and what the contrast math actually says.
The design notebook · Note 3 ↗Massimo Vignelli spent sixty years proving you need a grid, a handful of typefaces and a lot of discipline. What that looks like when the page is a browser window.
The design notebook · Note 2 ↗How this site borrows the warmth of early-'90s Apple ads (editorial type, cream paper, slate ink) and why the fake menu bars and little beige Mac didn't make the cut.
The design notebook · Note 1 ↗Hitting print on a recipe blog usually gets you five pages of sidebar. Here's how the recipes on this site print just the card, and why visibility:hidden was the wrong first try.
Building this notebook · Note 6 ↗A summary box, an "In this note" list, labelled callouts and a "Linked from" section, all built with a handful of Eleventy filters and some honest string matching.
Building this notebook · Note 5 ↗101 old posts, three versions of a design, and one very specific idea about what a personal website should feel like.
Building this notebook · Note 1 ↗The site looked perfect on my machine and wrong everywhere else. The sneaky reason, and how to self-host web fonts properly.
Building this notebook · Note 3 ↗