The UCLA Department of Design Media Arts (DMA) is an experimental and multidisciplinary digital arts program fostering individual exploration and creative thinking. Recruited as the designer for the department's internal web and marketing team, I was tasked with redesigning the department's long outdated website to one with a more modern aesthetic and comprehensive, intuitive navigation. 

Working under the guidance of faculty Chandler McWilliams and with fellow DMA student Yujin Tsuruo, we identified two main areas for improvement within the current DMA site:

          1. Simplification of navigation (currently a redundant amount of tabs, panels and links to the same pages)
          2. Shift from intimidating text-heavy interface to a more visually driven appearance showcasing diversity of work (show not tell)
Below is a site map we created to help better structure and organize all the information needed to be included on the site. 

Style Guide + Grid:
Interviewing various students and faculty on the essence of DMA, I found typography professor Willem Henri Lucas' phrase "a digital playground" most apt in describing DMA. Thus, throughout the design process, I kept returning to this idea of a "digital playground," an organized space for disorganized activity. Though all content is structured within a grid, the grid itself is versatile with six different columns, allowing text and images to vary significantly in width and dimension. While the typography remains fixed within the set columns, images are given the freedom to flow between column gaps and "break" the grid as they overlap with one another. This allows for a contrasting dynamic between strictly set text, left to simply convey formal information, and fluidly moving and clashing images that work to convey DMA's playful, experimental side. 

The font Akkurat was chosen because of its readability, bold minimalism, and popularity in the print world, as though digitally based, the DMA program also dives deep into print and publication design.


One of the main design modifications for the site was reduction of navigation from a fixed header menu to a hidden hamburger menu on the upper left corner. Upcoming events was also simplified on the homepage to a sidebar, allowing for quicker skimming of announcements and news for interested viewers without it dominating the page, as many visitors, such as prospective students or parents would not necessarily be as engaged by events as current students or faculty. The rest of the home page is dominated by four images featuring student work, which switch out automatically to show new work every few seconds. More information regarding the program appears as the visitor scrolls down or dives into other pages via the menu navigation.

Motion Sketch:
Back to Top