Experiments
Sketches, type specimens and things I was trying out. This page reads the folder directly, so every experiment is listed whether or not it was ever registered.
- 143 total
- 143 working
- 76 undescribed
In the config but not on disk: 27-hoefler, 29-ns, 34-cardo, 35-ns, 36-ns, 37-elements, 43-crop, 44-crop, 51-bookmarks, 57-three-col, 79-crimson — no folder, so not listed below.
Anna Atkins' cyanotype book of seaweeds, 1843–53, as three volumes you can turn the pages of: all 424 pages of the Natural History Museum copy, with each plate enlarged from the museum's own scans
Talbot's 1844 book of photographs as a book you can turn the pages of: all 24 plates from the Met's scans, the full text set at the original page breaks, and the woodcut initials from the first edition
Recent web design work pulled from the CV into a standalone site under the old Noble Savage name, with a woodcut green man on field green
After a vintage Aeroflot label: fly the plane through the stars to ring them, switch on the city's lights and take the sun down behind the hills
Fourteen verbs, each set so the word does what it means, covering the common ways to animate text. Type your own word to see how it behaves
A low-fi mockup generator. Type an outline, get clickable wireframe screens, adjust them by hand, then export a prototype that works with no JavaScript
A bad concert poster corrected by six lessons from Swiss design as you scroll, then a studio on Gerstner's 58-unit grid for making your own and downloading it
A guide to Glasgow from saved bookmarks, arranged as stops on the Subway circle: places, history, architecture, art, food and pubs, and a directory of design and web studios
Twenty years of Pinboard bookmarks as a survey of subjects and sites, with the bookmarks behind any year, tag or site one selection away
A working tool for cleaning up Pinboard tags: review suggested merges by keyboard, add renames, and download a script that applies them
Pick a date and see what Neil bookmarked on it in past years, with links to the Internet Archive in case a page has gone
A working list of Pinboard bookmarks whose link didn't reach the saved page on one check, with a way to try an older copy at the Internet Archive
The Cognitive Bias Codex as a roulette wheel. Spin it, land on a bias and read Wikipedia's introduction, with 85 biases the codex was missing
A history of photography to scroll through and play with — where light sits on the electromagnetic spectrum, why the camera image is upside down, what light does to silver, and the earliest surviving photographs
An old layout sketch built in HTML — a yellow PS logo and pale repeating type over grey blocks
A 2010 mockup built in HTML — a quiet reference page with an eye logo and a blue updated band
A mockup built in HTML — about, work and blog side by side in teal, white and sand with a black name rail
An old mockup built in HTML — one big portfolio photograph with previous and next blocks under a small header
An old mockup built in HTML — a pixelated portrait with bright coloured circles for navigation
A 2018 mockup built in HTML — five full-height ruled columns for article, portfolio, reading, listening, links and photos
A 2020 mockup built in HTML — a coral Syne headline and a flat pink illustrated face
An old mockup built in HTML — a cut-paper collage of a bonobo, a stag and sunburst stripes with a tilted article over it
An old mockup of an article built in HTML — a giant face and huge headline on navy, with a Who The badge
An old mockup built in HTML — practical ideas to save the world, with the Earth, coloured people and cloud-shaped photos
An old mockup of a links page built in HTML — a giant colour wheel logo and LINKS over three columns of months
An old mockup of a home page built in HTML — big Futura headings in dark and yellow blocks on a grey field of triangles
An old mockup of a home page built in HTML — a big serif headline, a folded-corner bio card and a sidebar of projects
An old mockup of an article built in HTML — a fat Bodoni italic headline, a colour wheel logo and an orange email button
An old mockup of a portfolio page built in HTML — a site screenshot with a dark rainbow-topped panel floating over it
An old mockup built in HTML — twenty past projects as circles on dark, brightening on hover
An old mockup of a portfolio page built in HTML — a site screenshot on white, a see-also circle and a pale footer
An old mockup of a lifestream post built in HTML — one white column on dark with faint icons down the margin
An old mockup built in HTML — notes, bookmarks and photos on dark, each with its own icon, under a rainbow bar
An old mockup built in HTML — a white article pointing at my name on dark, between rainbow bars
Two old mockups of the same home page built as one — theory, practice, links and projects above a dark testimonials footer
An old mockup built in HTML — an experiment in living mindfully on a rainbow of pixels drawn fresh with every load
Two old versions of the F91W agency page built as one — a heavy logo, highlighter yellow and pale cream
Two old mockups of Neilism built as one page — white post cards with a round date stamp, Garamond italic titles and a coloured nav
Two old mockups of Neilism built as one page — a single column of big photos and essays with a tall tight wordmark
An old mockup of Neilism built in HTML — a two-column living magazine in grey with an icon for every kind of post
An old mockup built in HTML — heavy rules, a script strapline, and journal, portfolio, photos and contact in a tight grid
Two old mockups of the same blog built in HTML — a grey swirl, my name running up the page, and a sidebar of Flickr and bookmarks
An old mockup built in HTML — wobbling puffy letters, a pink starburst and black posts on graph paper
A 2007 mockup built in HTML — heavy black rules, a stepped NEIL logo, and a grey band for portfolio, linklog and reading
The Design Notebook layout with real posts from 2006 — a stepped NEIL and a thought bubble on black, above reading lists
An old mockup built in HTML — a black masthead in slab serif, two grey columns and a Banksy photo on graph paper
An old mockup of an article page on my site built in HTML — a Geigy poster and a circle on a ruled white sheet between rainbow bars
An old mockup of my home page built in HTML — a colour wheel logo and colour-coded corner flags on each section
My old CV as a web page — two columns of Inconsolata with Jaapokki headings — rebuilt as one file
A slideshow for photographers — uncropped pictures on black, and a black-and-white contact print marked up in red chinagraph
An old mockup built in HTML — a stack of paper with index tabs down the side, a stepped NEIL logo with a thought bubble, a big S and a red circle
A landing page mockup for Culture Republic's digital hub — five full-height colour panels of illustration and big narrow type — rebuilt as one file
The Why Make Sense? era Hot Chip site from 2015 — crossed stripes at a random angle on a random colour with every load, plus the news archive — rebuilt as one file
- 100Zeitgeist
The history of the spirit of the age, from Herder and the French Revolution to Hegel and now, told over a Republican calendar year and using every axis and OpenType feature in Geist Sans, Mono, Pixel and Serif
- 100Logos
A big alphabetical grid of SVG logos for different organisations — copy the code or download the file
- 99Library
The homepage reshelved as a spacious library catalogue — colour bands, filter chips, card grids and the Crop feed by year, coloured from Itten's colour cross and set in Bricolage Grotesque
The good-css techniques put to work on a sample magazine — an issue of The Crop with a cover, an interview, a photo carousel and back issues
All 47 techniques from Vojta Holik's good-css on one standalone page — each with its code, its reasons and a live, resizable specimen
A photocopied fanzine discography for David Devant & His Spirit Wife — every release in order, with playable tracks and taped-in photos
Every cult-ui component rebuilt from scratch in plain HTML, CSS and JS — no React, Tailwind or Motion
Confucius in James Legge's translation, set with ink, rice paper, cinnabar seals and bamboo-slip contents
Specimen for a variable titling face built from a single static master — weight and width axes, kerning, and how it was derived
Pick a heading and body face from the font library — each face is only downloaded once it's selected
No description yet
Native browser UI — dialog, popover, :has, container queries — plus variable modes on a data attribute per axis
No description yet
No description yet
- 87DM
No description yet
- 86DM Sans
No description yet
No description yet
No description yet
No description yet
- 83GSAMFA
No description yet
- 82Woodcut
No description yet
No description yet
No description yet
No description yet
No description yet
- 76Type
No description yet
- 75NS
No description yet
- 74Euclid
No description yet
- 73Outlined
No description yet
- 72Rotate
No description yet
- 71Blaze
No description yet
- 70Garamond
No description yet
- 69Sticky
No description yet
No description yet
- 67NS
No description yet
No description yet
No description yet
No description yet
No description yet
No description yet
No description yet
No description yet
No description yet
No description yet
- 56Crop
No description yet
No description yet
- 54Stack
No description yet
- 53Retire
No description yet
- 52Sutras
No description yet
- 50Outlined
No description yet
- 48Playfair
No description yet
- 47Linktree
No description yet
No description yet
- 45QR
No description yet
No description yet
No description yet
- 40Garamond
No description yet
- 39FAQ
No description yet
- 38Fraunces
No description yet
- 33Garamond
No description yet
- 32Sabon
No description yet
No description yet
- 30Neilism
No description yet
No description yet
No description yet
- 25Garamond
No description yet
- 24NS 2020
No description yet
Give the baker a beard — whiskers, bushy or fine, in four colours, with undo, trim and save. Works with mouse, pen or finger
- 22GSAP
No description yet
No description yet
No description yet
- 19On
No description yet
No description yet
- 17Iframe
No description yet
No description yet
No description yet
- 14Curtains
No description yet
No description yet
- 12Tao
No description yet
No description yet
- 10Glasgow
No description yet
- 09Drag
No description yet
No description yet
No description yet
No description yet
No description yet
No description yet
No description yet
Ensure images fit
Testing layout animations