The show moves online
The End of Year Show is the Cooper Union School of Art's annual exhibition: every student, every discipline, one show. In 2021 the building was closed due to the pandemic, so the show became a website. I worked on it from March to June 2021, and it opened at endofyearshow2021.cooper.edu with 412 works across ten areas, from painting to sound art.
The dot system
The identity builds from one unit: a colored dot. Ten areas of work, ten colors. Each student's portrait is a cluster of dots, one for each area they work in, so a painter who also makes sound art gets a different composition than a sculptor who prints. These are the "lenses" that each medium creates for each student. The intersections are the portrait. The students page renders the whole school this way: hundreds of clusters, all different, all drawn from the same ten colors.
The logo and colors represent the various "lenses" of making artwork with different mediums, and the ways they intersect are revealed through color.
Browsing together
The site asks you a question before you enter: pick a display name, and decide whether your cursor is visible while you browse. Say yes and you see everyone else who is online, their cursors and names moving over the work. A counter in the corner keeps track of the other visitors.
The tech stack
WordPress ran the backend. Every submission became a WordPress post, and the galleries read them back through the WordPress REST API by way of a Node service on Glitch that cached posts and pulled video from Vimeo. Students signed in with their Cooper Microsoft accounts to submit their work. The front end is a Vue 3 app, open source on GitHub, and a separate Socket.io server carried the cursor layer, relaying every visitor's position and name to everyone else. The identity work happened in Figma and Illustrator.
| Layer | Choice |
|---|---|
| Front end | Vue 3 with Vue CLI, Vuex, and Vue Router — open source on GitHub |
| Hosting | Heroku, deployed by GitHub Actions on every push to main |
| CMS and object storage | WordPress — every submission is a post, every file sits in its media library |
| API | A Node service on Glitch reading the WordPress REST API and caching the posts |
| Realtime | A Socket.io server on Glitch, relaying each visitor's cursor and name |
| Video | Vimeo |
| Auth | Cooper Microsoft accounts, for students submitting their work |
| Type | Space Grotesk |
| Identity | Figma and Illustrator |
After
The show ran through the summer of 2021, and the announcement animation is still up on the school's Instagram. Cooper has since taken the website down; the captures above are recordings I made while it was live.
Credits
I worked with Erin Sparling, my mentor, who now works at Google News, and with Mike Stamm, who helped me make the motion design.