top of page

Museum of Modern Art

Web & App Design

Re-design of existing MoMA website and mobile platforms

GOALS

Re-design MoMA's website to be more unified, dynamic, and user friendly.

CONCEPT OVERVIEW

The core of this exercise was to implement the fundamentals of responsive web design to effectively create interfaces that can be viewed on the vast array of today’s devices.

Sitemapv2-01.png

TYPOGRAPHY & IMAGES

MoMA already has a strong use of type, mainly utilizing an original typeface inspired by Franklin Grotesque. I chose to continue using this font for recognizability of the MoMA brand.

​

MoMA has an extensive digital collection of artwork, I pulled from this search engine along with current exhibition images.

PROCESS

Starting with a wireframe, I reconstructed the layout and navigation of the site to be more streamlined. From there, a iterated various design layouts for each web page, keeping in mind a modular format to accommodate users on phones and tablets

DESKTOP HOME PAGE

For the initial landing page I wanted to highlight one key exhibition and artwork on display at MoMA. The triangle patterns were inspired by patterns that were used for the original MoMA brand.

Beneath the featured exhibition, the home page features a scrolling gallery of art on display at MoMA. The hover state of each rectangle reveals the name of the artwork and artist in a block of color. 

Various sections break up the grid system to highlight upcoming events happening at MoMA.

Home Page Desktop-min.png

SECONDARY PAGES

Secondary pages can be navigated to through the use of the top right menu bar. Each page uses a grid system for unified layouts, and red coloring for hierarchy of information.

​

Tickets_Desktopv2.png
SearchArtpage_desktop.png
Exhibitions Desktop.png

MOMA COLORS & PATTERN

The overall color palette relies on bright primary colors. This was to invoke feelings of modernity and boldness. MoMA is a well known, innovative institution. I wanted to convey these feelings with color use throughout the interface.

 

Additionally, MoMA has used various patterns in the past. In order to add a pop a of color and recognizability, I used these patterns at the bottom of the secondary web pages.

​

MOMA-1.gif
MOMA-3.gif
MOMA-2.gif

CHALLENGES & RETROSPECTIVE

Sketch was the primary tool for this project. At first it was a difficult transition from the usual Adobe programs but over time I became very familiar with the tool and really enjoyed created web, tablet and phone screens on Sketch.

​

Another challenge was creating strict guidelines for fonts, sizes, and spacing for copy and images. At the end of the project I created a version of every page with redlines detailing these rules. This was definitely the most challenging yet rewarding part of the process.

​

NEXT PROJECT

bottom of page