Global Health Conference
Marks & Symbols
Eco Products
Branding
Rebranding exercise for sustainable food packaging
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.
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.
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.
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.
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.