A visual direction, one piece at a time

Between 10 October and 1 November, this site got its visual identity: square cells, a small avatar for a logo, illustrations drawn by a tool, a mascot, three typefaces and a file that writes it all down. The logbook told it one day at a time. Here I step back and tell the whole arc, and above all how I worked, more than what came out.

I did most of it with Claude, in Claude Design, on one shared canvas. What I want to keep from those three weeks is less the result than the order of the steps, and where my own judgment came in.

Collecting before making

It started long before 10 October. Over time I had kept around forty-five references, images and videos: screenshots, photos, screen recordings, anything that caught my eye.

Gathering them before starting turned out to be essential. Every round afterwards went back to them, and each time they gave the conversation something concrete to stand on.

As a whole, they pulled in a few directions at once. Paper and screens. Print and pixels. Organic shapes and digital grids. Mostly greys, with rare, loud colours. Quiet interfaces next to tools that show their machinery. No single reference held the answer: the tensions between them were the brief.

An aim before any image

On the first day, I didn’t ask for anything to be made. I asked for the references to be analysed and sorted first, for a description of the direction they pointed to and what it could feel like, and for one to three directions to weigh only at the end. “Take your time on this initial task, deep work.”

I added four intentions, the closest thing I had to a vision:

• the clash, or the meeting, of organic and printed things with pixels and screens;
• mostly shades of grey, with a few vivid colours kept for accents and images;
• home-made tools, built along the way, to generate icons, textures, patterns and dithered or pixelated visuals;
• a symbol to represent me, able to grow into a whole family.

Most of what the site looks like today traces back to one of those lines: cells where paper meets pixels, greys with a single main accent, an illustration tool built along the way, and a 2×2 avatar that comes in endless variations.

Sorting on a shared canvas

I chose Claude Design on purpose: I wanted a canvas that Claude and I would both work on. Each round became a row of boards, and the rows piled up into one large map of the whole exploration, from the first reading to the last corrections.

The first board sorted the references into six families: translated images, organic and scientific print, print and screen collage, instrument interfaces, tools as the work, and symbols and characters. Each family came with a few keywords and a short line on what I could take from it.

That’s something I liked in working with AI: its ability to cross and consolidate ideas, and to put words on visuals I had collected without always knowing why. It brought out things I hadn’t been fully aware of. I had picked those images one by one, over time. Seen together and named, they started to make a direction.

Words for what I had collected

The reading came back with one idea: paper and light, joined by a dot. A stipple dot, a halftone dot, a pixel and an LED are the same unit at different resolutions. It was shown as one sphere drawn in five materials, from stipple to pixel.

Around that idea came a small vocabulary: images always translated before being shown, grey that talks and colour that signals, visible machinery, things ordered like a catalogue, characters that get their personality from two eyes, surfaces with matter. Discussing those words was part of the work, as much as looking at the boards. They became the shared language for every round that followed, and a way to say “yes, that” or “not that” without drawing anything.

The vocabulary also pulled a thread from my handle. elchdl is a short version of my full name, and Elch is German for elk. Antlers branch like several things in the references, so the elk became the seed of the symbol. It stayed for a week, left, and came back later as one object among others. The cup took its place as the main image.

Three directions came out of that first day, side by side on the canvas: “Field Notes”, a naturalist’s notebook read on an e-ink screen; “Instrument”, a quiet lab bench where every piece of work has its readout; “Familiar”, a bare studio with a pixel pet. I didn’t choose that day.

Too many leads

On 16 October I answered. I liked the structure of one direction, the character of another, and the textures of the third, so I asked for them merged. The merge came back as “an instrument with a familiar inside”, and I kept iterating that same night: more of a typeface I had forgotten to share, a green in the palette, pixel icons, an elk less generic, a compact mascot.

By the evening I could feel it: we had fused too many leads together. Every round added something and nothing left. So I asked to start over, with a direction that combines fewer things. Two ideas had to stay, an animated symbol and a pattern engine. For the rest, I didn’t describe anything. I went back over the canvas and left comments on what still caught my eye, pinned to precise elements of earlier boards.

That was the turn in the method. A comment on a precise element replaced a long description: pointing at a grain, a type pairing or a way of labelling things says more than a paragraph about them. What I didn’t point at was parked, not thrown away. It mattered later: the typeface I had set aside that night came back a week afterwards, in the lead.

Narrowing down

The next turn came past midnight, and it came from paper. In my notebook I had sketched rectangles that could hold symbols, with two pieces only: a square and a vertical bar. I asked to drop the elk and work from that sketch.

The first result spelled my initials and had a mascot made of a letter lying on its side. Seeing it, I narrowed again, in one message. Forget the initials. Leave the mascot aside for now. Focus on interface elements and animated illustrations. Drop two of the shapes. Use real glyphs from a monospaced typeface instead of drawn ones. And let the pattern tool draw real objects, from coloured shapes and glyphs, a principle several ASCII pieces among the references share.

What came back is the direction I’m still in: a family of square cells, solid, checkered, hatched, outlined or holding a mono glyph; a small tool that draws objects with them and brings them to life; and first interface pieces made of the same cells. Most of what had been tried before was gone. When I came back to it a few days later, I was very much a fan.

One piece at a time

Once the cells were there, I stopped exploring the whole and worked on one piece of the system at a time. Each piece got its own board and its own rounds of comments.

• The logo. It didn’t need to be the site’s name: the small 2×2 avatars made of cells, already used on cards, could do the job (22 October).
• The illustrations. Objects drawn in cells by a tool, from a seed, that can build themselves up or stay alive with steam and leaves moving. The elk came back here, as an object. Over photos, the cells stay in a few corners and spread organically, without covering the picture.
• The type. A round of its own, comparing shortlists in context, until a trio: Handjet for titles, Figtree for interface and text, DM Mono for data and for the glyphs inside the cells. Handjet, set aside a week earlier, was back in the lead.
• The mascot. A rotating die first, too realistic, then sober, then set aside for a simpler idea: four cells in a square. A whole morning went into its motion on 23 October: the state told by where the cells are, one cell hiding behind a neighbour, one movement at a time, still at rest so it doesn’t distract.

Each board held one question at a time, so each round of comments could stay on it.

Writing it down

On 30 October, after two last corrections on the canvas, I wanted the direction written down: a DESIGN.md file, one document to feed as the work goes on. The most advanced format I found for this kind of file is still an alpha: tokens at the top, then prose saying when and why to use them.

From there the exploration moved to the site’s repository, foundations first. The design tokens are generated from DESIGN.md. The cells and the mascot became reusable components. The illustration tool came along, kept private. The canvas stays where I explore; the file is what the code follows.

The landing page took one more day of review before going live on 1 November. The cup became the main image, alive, building itself as the page loads, with cells big enough to tell apart. The cell size settled at 16 pixels, a good balance for the eye, and became the default everywhere.

Back to the organic side

A week after launch, I came back to the colours. The four secondary accents picked on the canvas were barely used, and the open question on palette tracks was still in DESIGN.md. This time I brought new inspiration, colours from print inks, to lean closer to the organic side of the site: nature, more than digital.

The method was the same, on a smaller scale: references first, then the new colours matched with what already existed, side by side on paper and on ink, with the grain. Cobalt stayed the main accent and the only deep one. The others became light print-ink tones, named after a pigment, two flowers, a seed and a fruit: Vermillon, Lavande, Pivoine, Anis and Citron. Each got a deeper shade for text, so it stays readable in both themes.

What I take from it

References gathered upfront were the foundation. They gave every round something to come back to, and when I reworked the colours after launch, I started with references again.

AI was good at crossing ideas, consolidating them, and naming what I had collected. For me, the words it produced were worth discussing on their own: they turned a pile of images into a vocabulary I could steer with.

The canvas made the method possible. Every proposal and its iterations sat side by side; I could add, arrange or draw something to feed the thinking; and feedback went in a comment on a precise element instead of a long description.

And there’s an idea I had noted in my knowledge base before starting: taste as judgment built through correction. It proved true more than once. It took a lot of initial material, and many leads on the table, to set aside the ones that weren’t relevant and dig into the ones with potential. Starting over on 16 October wasn’t a failure of the process. It was the process.

Since 2 November the direction grows through use, on the site itself, more than on the canvas. What I haven’t settled yet is how much of this method carries over once the direction lives in code, and the next correction happens in a pull request rather than in a comment on a board.