# 10 · Art direction

Near-black grounds, high contrast and a single hard warm light: that is the register, read off the work that exists. Five categories, each opening with what it is best for, plus two decisions nobody has made yet.

*Updated 2026-08-09. Source: https://brand.haux.studio/art-direction*

## One register, and crop does most of the work

Before any category, the constants. Every image in the existing library shares four properties, and the fourth one is the one people get wrong.

Near-black ground, one hard warm light, contrast pushed.

### The four constants

Grounds are near-black rather than grey or white. The subject is lit out of the dark, so the frame has depth before anything is composed in it.

Contrast runs high, with the black point genuinely black. A flat, evenly exposed photograph belongs to a different brand no matter what is in it.

One hard light source, on the warm side. Two sources cancel the shadow that gives the subject its edge, and a soft box removes the edge entirely.

Surfaces are matte and technical: woven fabric, anodised metal, coated plastic. Gloss reads as product photography, and product photography is not what a studio sells.

### Crop is a brand decision, not a taste one

The same photograph cropped tight to the fabric belongs to this system. With air around it, it belongs to a stock library.

Crop is the cheapest control available and the one most often left at the default. Decide it explicitly, on every image, before anything else is adjusted.

When no category on this page fits, a raw screen usually beats a mockup. A screenshot is honest about what shipped; a mockup adds furniture the client did not buy.

## Five categories, each with what it is best for

Read the first line of each tab and pick. The rules underneath only matter once the category is chosen.

#### Case study

Best for almost everything. For a studio, the imagery is the work.

This is the core category and the default answer. Every other category on this page exists to support a page whose main images are the screens that shipped.

Show real screens with real content. Placeholder data, lorem text and invented metrics all announce that the work is being described rather than shown.

Crop to the decision the screen is making. A full screenshot shows a page; a crop shows the thing that changed, which is the argument the case study is making.

##### Before and after

Where a before exists, show it at the same crop and the same size as the after. Different crops make the comparison unreadable and look like an attempt to win it.

#### Device mockups

Best for the one case where the screen makes no sense without knowing where it lives.

Reach for a mockup only when context is doing real work: a screen held in one hand, a kiosk at standing height, a watch face at true scale. Everywhere else it adds a device and subtracts a screen.

One device per frame, on a near-black ground, with the same single hard warm light as everything else. A mockup lit differently to the rest of the page reads as borrowed.

No floating perspective grids and no three-device fans. Both are stock presentation conventions and neither survives being seen next to the raw screen.

*Gap: no approved mockup assets exist. Every mockup so far has come from a different source, which is why they are lit inconsistently.*

#### People

Best for scale and credibility on a page that has neither.

People are useful where a page needs a sense of scale or a face to attach trust to. On a page already carrying the work, they usually take space the work should have.

The register still applies: near-black ground, one hard warm light, high contrast. That produces a portrait with a defined edge and a shadow side, which is the opposite of a corporate headshot.

Hands at work photograph better than posed portraits here, because the subject of the picture stays the work.

*Gap: there is no produced people photography. Everything in this tab is proposed, derived from the register, and untested against a real shoot.*

#### Cut-out over a field

Best for a single object that has to carry a whole frame on its own.

A subject cut from its background and placed on a flat field is the most controllable image in the system. It also has the least depth, so the field has to do the work the ground normally does.

Use a tone-on-tone field, two values of one hue, as set out in graphic elements. A neutral field turns the composition into a catalogue photograph.

Keep the original lighting on the cut-out. A subject lit from a different direction to the shadow it is given reads as a collage, and the eye catches it immediately.

#### Gradient-mapped

Best for making a photograph you did not art direct belong to the system.

##### The specification

An orange gradient is carried over the photograph at 80% alpha, leaving enough of the original luminance for the subject to stay readable.

It is then either masked into the container shape, which is the framed use, or applied full bleed as a duotone, which is the surface use. Those are the only two placements.

##### What it cannot fix

A gradient map is a treatment, not a rescue. Applied to a photograph with no structure, it produces an orange photograph with no structure.

It counts against the accent budget in the colour section. One gradient-mapped image per view, and it is the accent for that view.

## Four decisions that get made by default

Each pair below is what happens when an image is chosen quickly rather than badly. Speed is the actual failure mode here.

**Crop to the decision, not to the artefact.**

- Do: The checkout cropped to the card field, at the size the change is visible.
- Don't: The full page with browser chrome, a scrollbar and a desktop wallpaper behind it.

**One hard light source, on the warm side.**

- Do: A single key from one side, with a real shadow and a defined edge on the subject.
- Don't: Even fill from both sides. Nothing is wrong with it and nothing in it belongs to the brand.

**A raw screen beats a mockup with nothing to add.**

- Do: The screen itself, full bleed, cropped to what shipped.
- Don't: Three floating devices at an angle, showing less of the work than one screen would.

**The gradient map is a treatment, not a repair.**

- Do: Applied to a photograph that already has contrast and a clear subject.
- Don't: Applied to a weak photograph in the hope that the orange carries it.

## Two decisions nobody has made

Both of these will be decided under deadline by whoever needs an image first, unless they are settled deliberately now.

### Whether the studio uses illustration at all

Not decided. There is no illustration anywhere in the existing work, nothing has been commissioned, and no style has been agreed.

The honest options are two: rule it out, and lean harder on photography and the graphic devices, or commission a small set and treat it as a real part of the system. Both are defensible and drifting between them is not.

Decide before the first deck needs a diagram, because that is the moment the answer gets improvised and then copied.

### The stock policy

Not decided either. The register is specific enough that most stock will miss it, which is an argument for commissioning or shooting, and that argument has never been costed.

A workable middle position exists: stock permitted only as raw material for the gradient-map treatment, never as a finished image. That is a proposal on this page, not a rule.

*Two further gaps: there is no produced people photography, and no approved device mockup assets. Both tabs above are written from the register rather than from work that exists.*

*Everything on this page that is untested is labelled. Anything unlabelled is read off images that have shipped.*