Making a design exhibition work on the web

Hello Monday used CSS3 extensively in conjunction with JavaScript in order to take advantage of the latest browsers’ capabilities for MoMA

Earlier this year - in happier times for New Yorkers - the city's Museum of Modern Art opened its Century of the Child design exhibition to great reviews. The survey of 20th century design for children is the first large-scale overview of the modernist preoccupation with children and childhood, and how this has influenced modern design. It looks at the design of school architecture, clothing, playgrounds, toys and games, nurseries, furniture, books and more.

Design of the site mirrors that of the exhibition in a number of ways

Design agency Hello Monday was commissioned to produce a companion website for the exhibition with the aim of capturing the essence of the show’s energy and extending that to the online space. It needed to support and promote the exhibition, as well as let those unable to visit the museum itself experience the show digitally and get a sense of its amazing content.

A child walking in a wheel forms the centre of the navigation and from there the viewer can click on different buttons to be taken to different eras of design. The site contains over 500 images and displaying these images was the biggest challenge for the designers.

The team opted for François Rappo’s Theinhardt typeface, using it throughout for its versatility and range of weights on offer

"We had to present a huge number of different assets of varying quality in an aesthetic way," explains Johanne Brunn Rasmussen of Hello Monday. "Our solution was to divide the images into three groups to showcase each one in the best light possible.

"Physical objects were silhouetted and placed to stand on the 'floor' in the foreground, while posters, paintings, books and magazine covers were positioned to lean against or hang on the wall. Along with all this content we also had to present a range of important historical moments. For that we used simple vector-style illustrations."

Watch this! Century of the Child screencast:

The animation on the site was created using tweening engine TweenLite. The JavaScript framework is custom-made and loosely based on the MVC structure.

This showcase was originally published in Computer Arts issue 206.

Now read these!