Launch Site

“One of the best websites I’ve seen in years! What an incredible forum to showcase the best work of CalArts students. I sent this site to a ton of designer friends!” —Sarah DiLeo

“Enjoyed the fresh, noncorporate look of the entire site and the way the students visualized the 35-week program similar to data visualization. And I love the style of the gallery of designers—it’s very memorable, looks great and will spark the audience’s curiosity.” —Nell Lundy

Overview: Designed and programmed by a team of seven students at CalArts in Santa Clarita, California, the CalArts Graphic Design 2024 website showcases the work and lives of 65 CalArts graphic design students. Spanning 175 projects, the site functions as a dynamic yearbook celebrating the creative output and daily experiences of students over a transformative 35-week academic year. Visitors can paint the homepage grid with randomized project thumbnails by moving their mouse. Each student is represented with an interactive, stop-motion-animated 360-degree portrait. And to document extracurricular happenings, the Life page offers snapshots of life at CalArts in a calendar format.

• The CalArts Graphic Design 2024 site utilizes the WordPress CMS, and its front end was built with Vue.js and SASS. The team used Github to manage the code repository.
• Cloudinary provides the image content delivery network, serving properly compressed images that can be resized as needed.
• From concept to completion, the website took the student team and instructor Roman Jaster four months.

Comments by Roman Jaster and Ingrid Yu-Ju Tai: 

Describe any special interactive features the CalArts Graphic Design 2024 site has. “On the homepage, visitors can ‘paint’ grid cells with thumbnails derived from the students’ work by moving their mouse across it,” says Ingrid Yu-Ju Tai. “The grid continually evolves as the code randomly selects images from the submitted pieces every second. To indicate the grid’s interactivity, we incorporated a subtle animation that plays whenever the page loads. The Designers page includes a 360-degree stop-frame animation of every student in the program. The animation of each student can be paused by hovering over it.”

Did you meet with any obstacles during development? “The biggest challenge was to collaborate on the code with team members that had varying levels of experience,” says Roman Jaster. “Using Vue was a nice choice for our project since it enabled us to concentrate on front-end technologies like CSS, HTML and JavaScript while minimizing the need to handle complex back-end code like PHP. WordPress’s role was limited to sending JSON data to our site, which Vue then used to dynamically construct the entire interface. We adopted a lightweight approach to using Vue such as Nuxt, skipping the build process and server-side rendering. To ensure search engine optimization, we supplemented this setup with a small amount of PHP to generate unique HTML for specific landing pages.”

Did you use any applications you hadn’t used before? “Using Cloudinary, Github, SASS, Vue and WordPress were all new to students who were part of the coding team,” says Jaster. “It was rewarding to work with the students on a real-world website and focus on real-world concerns, such as solid responsiveness and cross-platform compatibility, accessibility and SEO.”