A Slice of MoMA

Slice of MoMA is an interactive data visualization of Museum of Modern Art’s online collection and an add-on to MoMA’s current website design. It proposes a playful and serendipitous way of displaying artworks by approaching an enormous amount of artworks from a color analysis perspective. It stimulates users to explore and compare artists, reveals the color progression of their artworks, and offers recommendations on artworks of similar styles.

// PROBLEM STATEMENT

// OUR GOAL

// DESIGN STATEGIES

// CASE STUDIES

// PROCESS

// DELIVERABLE

// NEXT STEPS

Problem Statement

MoMA's Current Website MoMA's Current Website: https://www.moma.org/collection// MoMA's Current Website MoMA's Current Website: https://www.moma.org/collection//
We started the project by looking at MoMA’s current webpage of displaying its collection, and identified the following problems:

Based on a survey conducted by MoMA’s digital media department, visitors to MoMA’s website report medium to high art knowledge and are likely to be professionally engaged with our subjects, which contradicts with MoMA’s goal of promoting discovery and reaching a wider audience group.

Our Goal

Design Strategies

<

FOCUS ON COLOR

We want to focus on analyzing and displaying the colors extracted from artworks because color is something that is easy to understand and people can associate with it.
Besides, it also acts as a key function that grabs the attention of users, and is the easiest aspect to remember when it comes to encountering new things for users.

PROGRESSIVE EXPLORATION

We want to break down the exploration into a step-by-step process, which chops the overwhelming amount of information into small pieces and displays them cumulatively guided by the users’ personal interests. We also want to propose a recommendation system that suggests relevant artworks to users based on art styles, which is meant to inspire users to further explore the collection.

OTHER CONSIDERATIONS

Highlight adjacent: putting objects of the same group in adjacent to each other

Visual metaphors: incorporate visual cues to facilitate the interpretation of the numeric data

Flexible user path: focus on visual interfaces that allow for flexible, rather than predetermined navigation, which is suggested to benefit open-ended search strategies

>

Case Studies

<

Bohemian Bookshelf

The Bohemian Bookshelf is a bookshelf visualization that was designed to facilitate open-ended exploration of digital library collections and serendipitous book discoveries.

On Broadway

Inspired by the book Every Building on the Sunset Strip by Edward Ruscha(1996), an artist book which unfolds to 25 feet to show continuous photographic views of Sunset Boulevard, another project named On Broadway folds Google street view maps and Instagram posts of street segments as slices. Users can click to expand the whole images and see more details.

Front Row to Fashion Week

The New York Times created an interesting way of visualizing fashion for 2013 New York Fashion Week. Dazzling collections were selected and presented in carousels (one for each designer). All images are really thin, only showing a glimpse of the main colors of the outfit. The user can see the full look with a mouse hovering on the image

>

Design and Development Process

We started by making hand sketches as well as mockups in Illustrator. Mockup in Illustrator Mockup in Illustrator

Make it less bland

Something we didn’t realize until the actual implementation is that the bar graph that showcases the representative colors of all artists is not as colorful as we have imagined. Originally, we wanted to use the dominant colors which have the highest area ratio on the canvas in artworks. However, the colors turned out to be dark and gray-ish. The saturation for all the colors is remarkably low. It is partially due to the fact that modern art has a prevailing preference for low-saturated colors, but also the thumbnail images we used for color analysis sometimes include paper color margins that color a large area. The resulting graph has a quite limited visual expressiveness.

As a result, instead of using the colors with the highest probability, we have chosen to use the colors with the highest saturation from clustering the major colors in each artworks. “Distinct hues can be used to effectively convey category values, while changes in luminance or saturation can encode ordinal or quantitative differences.”[6] The refined color palette is much easier to read and distinguish, and adds a lot more vitality to the visualization.

Extracted Color of Artists
Extracted Color of Artists

Deliverable

Demo Demo 2 Demo 3 Demo 4

Next Steps

Slice of MoMA only started to explore the large potentials to display artwork datasets in a more exploratory and interactive way. We would love to take a step further to think about how it could become more like an online museum where people can get educated and get inspired. Therefore we want to ask the following questions

Back to Home >>>