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.

Arrive. Search, maps, answer engines and referrals put someone on the page.
Engage. The widest loss sits here — the page answers a different question than the one they came with.
Enquire. Forms, phone numbers and booking steps. Friction here is cheap to fix and rarely looked at.
Convert. What the business counts. Every stage above is measured against this one.
Funnel
Curve
Step 1 of 4. Measure. The same numbers, read the same way, every month.
Step 2 of 4. Diagnose. Find the one thing most responsible for the gap.
Step 3 of 4. Improve. Change it — copy, speed, structure, the offer itself.
Step 4 of 4. Validate. Confirm it moved, then start again from the new floor.
Cadence

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.

One tone, a little over half-strength ink. No tiles, boxes or dividers around each mark: they sit directly on the paper.

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 Design

Photography

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.