1 | P a g e

MoMa Home Page | ORIGINAL VERION

http://www.moma.org/

2 | P a g e

MoMA | HOME

http://classes.dma.ucla.edu/Winter13/161/index.php/group-projects/project-5/group-4

3 | P a g e

MoMA | HOME DESCRIPTION:

NAVIGATION: I found MoMA’s navigation irregular being fixed to the bottom of the page, because many people are used to reading from top to bottom. Personally I find bottom fixed navigation appropriate for sites that fit completely in the browser window, but MoMA’s site is scrollable. When one scrolls to the bottom of MoMA’s home page it is structurally uncomfortable that the navigation and logo are underneath the footer of the website. Therefore I decide to decide to create the navigation at the top.

LAYOUT: I used the rule of thirds in structuring my design to give it a more balanced architecture. The yellow vertical dividing line is used to separate the page into roughly two-thirds focused on exhibitions/collections and one-third on events. The structure of this layout is intended to mark the distinction for things to see and things to do, although in reality an event can very much be an exhibition or collection. In addition to highlighting a featured exhibition, the design points out other exhibitions and collections. This gives the user a more holistic view of the museum whereas on the original site users must perform additional actions to preview different exhibits. I wanted to capture the essence of New York and the architecture of the MoMA, so I decided to use the east of the MoMA as the background picture and have the elements overlay this image. The picture was selected so that that leading lines would converge at the center of the page where the content is located. There is also some noise on the background picture(repeated 1px blocks) to bring out the content in the front. This layout draws inspiration from tablet layouts, where real estate is very limited and content selection and structure are imperative. SPACING: I used a combination of padding and margins to give each element on the page enough breathing space. Notice that there is a slight gap between each of the blocks so that the background can also come through the page.

TYPOGRAPHY: I preserved the Franklin Gothic logo used by MoMA and decide to accompany this font with other san-serifs. Often times, serifs can also be difficult to read or harder to render on electronic mediums. The font-size was selected to give the user a visual hierarchy of the site starting with the navigation at the biggest size and descending downwards to headers, smaller headers, titles, descriptions, captions, and then the footer. The main structures of the site (navigation, headers, footer) are also capitalized to give them distinction and significance from other portions. I did also use caps for the event type, but I also added italics to this text so that the user would know that the emphasis is actually on the bolded event name.

COLOR: The images in the foreground and the background image offer enough vibrancy that there is not much need for color elsewhere. I use some thin solid colored lines to mark each of the structural components and a light grey to bring out the times/dates.

4 | P a g e

MoMA | VISIT:

DESCRIPTION:

This design is a simple two column page that is structurally similar to Home Page except that the left column is now the narrower column used as a sub navigation. The sub navigation also uses subtle opacity in its regular state and slides to the right and transitions to its full white when a user hovers over a link. These subtle transitions are designed to bring out actionable elements of the page.

5 | P a g e

MoMA | HOURS AND ADMISSIONS:

DESCRIPTION:

Hours and Admissions is a sub page of the Visit section. This active page is marked by the white active link in the sub navigation. The table uses a semi transparent black to distinguish table headers from other components of the table. Following the linear emphasis of the design composition, light white lines are used to outline the table. Because each tabular data carries equal weight their light white borders where selected to provide contrast to the more prominent blue and yellow navigation/column dividers.

6 | P a g e

MoMA | MEDIA:

DESCRIPTION:

The side navigation in the left column is headlined by the title of the main section you are currently in, with the titles of its immediate subsections beneath it. The larger, body section contains snapshots of the content held within each subsection. Taking from the structure of the larger left column on the Home Page, the information uses the concept of highlighting certain content within each section - having a single large image for a representative image and four smaller images for a broader idea of the content in the subsection. Making it scrollable with multiple sections, provides a quick and easy way to get a glimpse of each subsection in Media without having to leave the main page. Furthermore, the menus one depth further into each subsection are shown alongside the large image. Each entry animates to the right slightly, highlights from a grey color to white, and links to each section's individual page. One can therefore jump two depths into the website at once if they're interested in a specific section, enabling quicker navigation.

7 | P a g e

MoMA | PUBLICATIONS:

DESCRIPTION:

In the Media > Publications section, the side navigation brings Publications as its headlining title, with categories within Publications as its subsections. The original MoMA site structured each category into a box container with the title of the category, an image, and a VIEW ALL link. The image had no description, so if they were mixed up the average viewer probably would not even detect the error. Therefore, the images did not provide additional information, and the containers spaced things out, making it more difficult to quickly get an overall view of what is within Publications. In our version of the site, the side navigation uses a list format of the categories to aid the visitor in quickly knowing Publications' contents. A short description of the Publications department is in the main section. The Image and Text Permissions were placed in a box to the right of the blurb because the line length was too long without it. Beneath these two boxes is a box with Ordering Information. Not many people would be as interested in it, so by only being viewable by scrolling down the page, it does not detract attention too much yet remains there for reference.

8 | P a g e

MoMA | EXHIBITION:

DESCRIPTION:

This page is simply designed for people to be easy to navigate through the massive exhibitions that is held in the museum. By using the pictures and having a small introduction appears when hover, viewers could get a sense of what the exhibition is before they actually click the page. We made the whole image be able to click on rather than just the “learn more” text because people tends to click on icons and images instead of text when they navigate a site. This is the only page in the website that has 3 grid system on the right column due to the amount of exhibition in the museum.

9 | P a g e

MoMA | WOLFGANG LAIB:

DESCRIPTION:

This is a page under the EXHIBITON page where it has the information of the exhibition and a video about the exhibition. This page is still in 2 columns grid. But instead of having the sublist on the left, we put the information of the exhibition on the left and extend the left column wider for it to be easier to read. The date of the exhibition is Italic and has a gray background because date in a sense is important information of the exhibition and the Italic words pops out more in to viewers’ eyes which could catch their attention on the page.

BY: ANTHONY SU | LOUISE LEHMAN | JULIA LIN