CalArts Graphic Design 2024

An interactive website showcasing CalArts Graphic Design

Students of the CalArts Graphic Design program create a large variety and volume of work every year. This year, we wanted to create a website that would do the best job at presenting the work, the thoughts, and the designers behind the work.

View site

Recognition
CSS Design Awards · Website of the Day
Awwwards · Honorable Mention

Role Creative Director + Lead Designer


Team Design by Yujin Park, Clarence Sim, Ella Rosenblatt, Dariia Zamrii, with the help of the whole team / Coding & Photography by Freeze Shi, Ingrid Yu-ju Tai, Helen Xie / Instructor: Roman Jaster

Typeface Lacrima Type Family by Alexander Colby
Published May 2024 The Creative Concept

The title Thinking through Making through Breaking was inspired from two phrases often quoted in graphic design academia: “Thinking through making,” and “Making and breaking the grid.” These phrases immediately resonated with the team as a great representation of the spirit of the program, which embraces experimentation and rule breaking as part of the design process.

Echoing the idea within the title, a bare-bones modular grid structure (described as wireframe-y) was strategically chosen to house the designers, work, and life pages under the same visual formula. The blue grid is a space that is constantly being “broken” by different elements, acting both as a partition and a unifier for the different types of content featured across the site.
Crafting the User Experience

The team came up with several scenarios for who the user would be—potential employers, alumni, current students, friends and family. We agreed that the website should prioritize featuring the work beautifully and as accurately as possible, first and foremost.

The first step of the UX research process was a critical analysis of previous CAGD end-of-year websites. The main needs identified were: clarity and distinction within the project gallery, mobile optimization, and streamlined experience of the project detail page.

The navigational structure of Designer/Work/Life remained the same as previous versions of the website, as it worked well in guiding the user through different types of content. Building on top of the architecture of previous websites allowed us to code efficiently

The landing page interaction came about as a fun way to introduce the user to the work featured on the site while not making it feel redundant to the work gallery.

Wireframes→
Work Gallery

The work gallery is one of the most crucial components of the website—it must present the work, of vastly different mediums, styles, and formats, within a single page. The goal was to create a functional gallery that would be able to display images and information of the work, and give each piece a proper opportunity to shine.
Designers

The spinning portraits were envisioned as a way to ensure that the portraits are under the same visual language yet to allow individuals to express themselves.
Work Details
We attempted to simplify the work and designer detail page by having both the work and the designer information viewable at once.
Promotion video 
Life page
Credits page
Users interacting with the live site at the 2024 CalArts GD End-of-Year-Show