Experiment · Designing with artificial intelligence (AI)
How this portfolio was designed
I designed this site with Claude, one decision at a time. Claude made working options in HTML, I reviewed each round in a browser, and I chose or combined what worked. These are the real studies, kept as they were made.
- Five first directions
- Four more, then Darkroom and Pinboard merged
- Five font pairings
- Five gallery layouts
- A storyboard built with the same rules
Built in rounds, not in one go
Every round is a working version I can open and judge. I say what I like, what I do not like, and why. Claude makes the next round from that. Making new options takes little time. The real work is making sure that something I turned down does not come back three rounds later.
One decision at a time
Each round answers one question: the direction, the fonts, the gallery, the menu. I review it in a browser, then keep it, change it, or drop it.
Memory carries the decisions
An extended memory folder holds my rules, my ways of working, and a dated log of every decision. Claude reads it before each piece of work and adds to it after each round. A new session starts from what I have already decided.
Safeguards check every build
Before a round reaches me, the pages are tested for accessibility and layout at desktop and phone widths. My CV text is checked against my Content Design System writing rules.
The rules so far
Each rule started as feedback on one round. Now every round is checked against all of them.
Do
- Follow my Content Design System writing rules.
- Keep the italic word at the end of headings. It is a style choice, and the site stays accessible.
- Open courses, reports, and experiments in their own window, with the same display settings.
- Use only verified facts on a CV, and rewrite the keyword line for every application.
- Test every page for accessibility at desktop and phone widths before it ships.
Do not
- Shorten my name.
- Bring back labels I removed, such as Visitor pass and No. 2026.
- Start motion or sound without a way to stop it.
From my Content Design System
Every word on this site follows the same writing rules as my help content, and every round is checked against them too.
Do
- Write in plain British English.
- Keep sentences to 25 words or fewer.
- Use the Oxford comma in lists.
- Spell out numbers from one to nine.
- Expand every acronym the first time it appears.
- Write link text that makes sense on its own.
- Use one word for one thing.
Do not
- Judge difficulty for the reader, with words such as “easy”, “simple”, “just”, or “quick”.
- Use contractions, em dashes, semicolons, or exclamation marks.
- Write “click” or “see”. Use “select” and “read”.
- Use e.g., i.e., etc., or an ampersand.
- Use metaphors.
The design studies
Five directions
The first five directions for the site: Plugin Terminal, Editorial, Swiss Systems, Live Dashboard, and Soft Studio. Each one shows a hero, a portfolio card with a video player, and a matching strip of the CV.
None of the five was right on its own, so I asked for four more.
Four more directions
Darkroom, Blueprint, Pinboard, and Phosphor. Each one shows the password landing page and the gallery with the media viewer open.
I chose Darkroom, then asked for it to be merged with Pinboard. Darkroom became the dark theme, with a safelight red accent. Pinboard became the light theme, with cobalt pins.
Five font pairings
Five pairings for the merged Darkroom and Pinboard design. Each one sets a heading font, an italic accent, a body font, and a label font.
I chose Bricolage Grotesque for headings, Instrument Serif for italic accents, Figtree for body text, and JetBrains Mono for labels. Atkinson Hyperlegible Next became the low-vision font option.
Five gallery layouts
Five alternatives to the first photo-card gallery. Every option keeps the title and description as real text, works with a keyboard, and needs no hover to read.
I chose clean tiles: a flat image, then type, category, title, and one line of description.
Romans in London
A storyboard for a five-minute animated history of Roman London: 14 scenes, a full script, a cast in period costume, and real photographs with credits. Claude researched the facts first, then drew every frame in code.
I asked for a script, animated characters, period-appropriate people and costumes, and real photos. The rules folder kept it to my writing rules, with captions and a calm version of the fire scene.
Each study is a live page in a frame. It keeps the colours it was designed with, so the theme and contrast settings change this frame only. Text size, the low-vision font, underlined links, and reduce motion also apply inside each study.