Design system · 05
Drawn, not photographed.
The site carries one painting, a handful of line diagrams and no photographs. Pictures here are things that could have been made on the page: a wash of ink, a ruled diagram, a mark printed in one colour.
The wash
The only image on the site: a pale watercolour, bleeding out from the top of each hero. It is atmosphere, never subject — nothing in it is meant to be looked at for itself, and no text depends on it. Its treatment is covered in Paper.
Diagrams
Where another site would put an illustration or a dashboard screenshot, this one puts a diagram: hairlines in ink, drawn the way the thing it describes behaves. A funnel narrows. A curve is plotted. A cycle comes round.
Other people's marks
Client and technology logos are printed in a single tone of ink, like marks pressed onto the sheet. Their own colours would turn a quiet row into a parade of other brands, each competing with the page it is on.
Objects
The nearest thing to illustration is the set of physical objects the site keeps on its desk: the four volumes, the seal and Nabi. They are drawn in code, lit from above and carry the only real colour on the page.
Design
Volume II
System DesignPhotography
There is none, by choice. Stock photographs of people at laptops say nothing a sentence would not say better, and they date a site faster than anything else on it. Work is shown as itself: a link to the live product.
If a photograph is ever needed, it should be of a real thing the studio made or a real person who works here, shot plainly in daylight, and placed on the paper as a print would be — square-cornered, without filters, overlays or rounded masks.
Rules
Do
- Explain with a diagram before reaching for a picture.
- Draw in hairlines of ink, at one consistent weight.
- Print third-party logos in a single tone.
- Let the wash stay behind the content, as atmosphere.
Don’t
- Use stock photography, or generated imagery passed off as real.
- Show a logo in its own colours, or put it in a tile.
- Use a diagram that only makes sense while it is moving.
- Put text over the wash that depends on it for contrast.
