Three screens, drawn live
Separation
Each graphic is halftoned in canvas at its own screen angle (15°, 75° and 45°), the way a separator would cut it. Rendered once, then only moved, so the animation costs three draws a frame.
Overprint
A site for a fictional screen-printed apparel label that prints in three spot colours, one screen at a time. The site is made the way the shirts are: no photography anywhere, every mark on it drawn in the browser.
Open the live build ↗Back to the start: 3-Sixty
- Role
- Design + build
- Type
- Apparel · graphic
- Stack
- Canvas · Halftone · Responsive
Print the gap, not the finished shirt.
Every apparel site opens with a photograph of somebody wearing the shirt. Overprint has no photography at all: the graphics are separated into three screens and drawn live, dot by dot, in the browser.
That is not a trick for its own sake. Screen printing lays one colour at a time, and the whole craft sits in what happens between pulls: how far the press wanders, and how the art was prepared to survive it. So the site is built around the misregistration rather than the finished print. You arrive to three screens sitting apart, and scrolling walks them into register.
The hero holds you there until the print is whole. You cannot scroll past a half-registered mark, which is exactly the deal a printer makes with a press.
Nothing about it is a photograph of a claim. The halftone is a real dot screen at three angles, the inks are three named spot colours, and the page is a single static HTML file with no framework and no build step.
What went into it
The scroll is the press
Registration
The emblem arrives out of register and the hero stays pinned until it is whole. The one interaction on the page is the one thing the label is about.
Spot colour, not process
Ink
Three named inks: Red 032 U, Reflex Blue U and black, with a stated ±0.25mm tolerance and a half-millimetre trap. The blue never appears in the site's own chrome, only inside the print.
No photography, no framework
Weight
One static file, no build step, no image requests. A label this small cannot afford a photoshoot, and the site is honest about being drawn instead of shot.
The live build
Overprint · a concept build, running in the frame above · Open it full screen ↗
