I was approached by EMMA to create a few digital interfaces for their new extension housing the archives of Rut Bryk and Tapio Wirkkala. Working on three levels – objects on display, spatially experienced digital content and as accessible online content –the space was conceived as a Visible Storage, home to more than 5000 objects, models, sketches, prototypes and photographs. The exhibition space, and the digital interfaces I created for it, opened on the 17 November 2017 with Still / Life – Tapio Wirkkala Retrospective.
The spatially experienced digital content was where I came in. There were two opportunities here:
- Exhibiting archival and documentary materials including videos, images, texts, sound, etc. for browsing/researching.
- A digital collection that presents the collection in a browsable/searchable format.
For the scope of this project, we’d deal with the first of the these two. Here’s a video of the finished interfaces (1:10m onwards), followed by the process and screenshots from the final apps.
Get a feel for the content
The first order of things would be to get a feel of what content and how much of it would the interface need to accommodate. Unfortunately, there was nothing available since the team was still busy digitising most of the content and tagging it. A few examples were available but I was cautioned that they might all change. Fortunately though, there was some idea of scope which led to the first tangible requirements for the project, and its constraints.
~1700 hi-res images browsable on a touch-based UI on an iPad disconnected from the internet
A few collaborative sketching and designing sessions with the team onwards, it was decided to split the project into three interfaces:
- Press archive with ~1700 hi-res images from the archives of Rut Bryk and Tapio Wirkkala
- Browsable archive of the monumental artworks of Rut Bryk
- Interface to build tile-compositions in the spirit of Rut Bryk
This was followed by exchanges of sketches and prototypes, keeping in mind the graphic style for the exhibition and EMMA’s brand. Starting out with dark on light (easiest to read), the interfaces finally became dark on light. There was to be a projection involved, and light backgrounds would bleed too much light into the space.
Touch controls needed to be replicated as buttons to cater to the diverse demography exploring the museum
The design of the final interface was minimal on purpose. The idea was to immerse the visitor in the content being served while providing all the necessary controls for navigation and zoom.
Alongwith the design for the front-end, I’d started building the back-end for the interfaces. The iPads were going to be just the front, there would be a Node.js local server serving up the application in the space over an isolated WLAN. The application on the iPad would basically be a highly-optimised HTML5 page saved to the home-screen.
Of course, the compositional interface also progressed well in parallel. The design didn’t change much from the initial sketches.
A couple of months into the project everything was going swimmingly, and I was beginning to get suspicious. It simply couldn’t be this straightforward. As if on cue, I hit a major roadblock that threatened to derail the project entirely – no matter what I did or what resolution images I served, the images on Safari were blurry when zoomed in.
iPad optimises images for Safari so that their resolution stays constrained to 1 megapixel. I needed Safari to display 8 megapixel images – ~1700 of them.
I realised that I’d need to revisit how I’d implemented the UI. I would need to build something that worked along the lines of popular map services online: tiled composites at different levels of zoom with tiles not exceeding 1 megapixel. Fearing that I would need to implement something like that from scratch, I went scouting around for open-source technologies that would get the job done. After evaluating a few possible contenders, I settled on OpenSeadragon.
With OpenSeadragon, I put together a working example in an hour or so and tested it on the iPad — flawless victory! Now all I needed to do was process the thousands of other images and cut them up into tiles of various sizes for the OpenSeadragon viewer to handle. I wrote a custom node mini-app for that, and also one to resize and optimise thumbnails (async reads and writes FTW!). In the final installation, this app was hooked up to a projector that showed the zoomed in image projected large onto the wall; allowing the visitor to examine tiny details of each artwork.
The same solution worked for the press archive, but I needed to limit the number of thumbnails visible at a time. The obvious solution, and the one I finally went with, was to have only a decade’s worth of thumbnails visible at a time.
Two interfaces sorted, I set about finalising the compositional interface. After evaluating and prototyping with a few libraries, I finally settled on fabric.js. A bit of wrangling and I got that to behave exactly how I wanted.
All that was left now were a few final touches (like a screensaver video for Rut Bryk’s monumental artworks) and tweaks (opening decade for the pressarchive); and we were ready to install.
Installation went pretty smooth. A Mac-mini served as a local server and was configured to launch the server at boot-up. With that the project was complete and now lives on at EMMA.
It was a pleasure working with EMMA and its staff, and since I’ve heard only positively from them, I assume it was a pleasurable experience for them too.
Rut Bryk’s Monumental Artworks
The Press Archive
The Compositional UI