Web design notebook
Website builds, design decisions, and case studies.
From the first sketch to the finished website.
The brief Design decisions The resultMy old notes had a pipeline that wrote and published WordPress posts on a schedule. What I'd keep from it, what I'd throw out, and how I'd use AI for a client's site copy now.
Building a site for someone · Note 4 ↗The section order I use for a one-page site, which sections are required and which earn their place, rough sizes for each, and why the call to action sits right under the hero.
Building a site for someone · Note 3 ↗Terminal UI Components is my open-source, pure CSS framework for building terminal-style web interfaces, with ten color themes and box-drawing decorations.
The design notebook · Note 6 ↗The seven phases and thirteen milestones I plan a website around, the sign-offs between them, and why I don't put week numbers on any of it until the discovery answers are in.
Building a site for someone · Note 2 ↗Fine Use is my open-source design system for terminal-style interfaces, a React component plan with CSS themes and a Python desktop implementation, and it's honest about being mostly a specification so far.
The design notebook · Note 5 ↗Kaybl 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 ↗The questions I work through before building a site for someone, grouped the way I keep them, with the handful that actually change the build pulled out on their own.
Building a site for someone · Note 1 ↗
