Close

06 / 08

Foam Amsterdam

Webby Nominee 2023, Awwwards Site of the Day, Awwwards Developer Award

Foam Amsterdam · at Build in Amsterdam · 2022 · Development

Live project https://www.foam.org/

The Foam platform home page: photographs from the collection scattered across a white page around a red navigation bar with the foam wordmark and a view full collection button
The Foam platform home page.

Foam is a photography museum on the Keizersgracht in Amsterdam, and also a quarterly magazine, a print gallery, a library, a podcast and a programme for emerging photographers. The platform holds all of it without flattening it into one kind of thing. I developed it at Build in Amsterdam and gave creative input during prototyping; the UI design is by Margot Gabel and Manvydas Kugis.

The About page: photographs scattered around the foam wordmark and the headline We are all about photography, under a red navigation bar with what we do, spaces, organisation and support
The About page.

Exhibitions, magazine features, podcast episodes and video share one system. The distinction it keeps is between a work and what is written about it: photographs get the full width of the window and no crop, and text arranges itself around them.

Curators build their own online exhibitions in the CMS, with chapters, layouts and a background colour per show, without a developer.

The exhibition page for Richard Mosse’s The Enclave: the title in large italic type beside a photograph, with an explore connections button under the navigation and an audio guide bar at the foot
An exhibition page: Richard Mosse, The Enclave.

Connections is a D3 graph of the themes stories share, used as navigation rather than as a chart. An exhibition, a podcast episode and a magazine feature can share a subject and nothing else, so neither date nor category is a good way in. The graph lets a reader move sideways through the archive by theme.

The Connections graph filtered by the tags exhibition and Environment: a portrait at the centre, podcast episodes as outlined circles, and the works that share the selected theme joined by red lines
The Connections graph, filtered by theme.
The Connections graph: photographs, a book and a podcast episode laid out on black as nodes, joined by thin lines to a central photograph they share a theme with
The Connections graph.

D3 runs the simulation, with the tick handler writing positions straight to attributes so the physics never passes through component state. The nodes are real DOM inside foreignObject, so they inherit the graph’s transforms instead of being kept in sync on top of it. Packaged separately as react-d3-force-distance.

The platform stayed open while the museum building closed for renovation.

Next, The Neon Hieroglyph: Point Cloud Environment