As the final project for the course “Art of the Printed Word,” we were tasked with printing and binding our own book. Seeing that it was near the end of a decade, I wanted to document the music that I found impactful and defined the past 10 years. Using the Jonathan Edwards printing press and Yale Printing & Publishing Services, I produced 10 disc-shaped leaflets bound in a jewel case, each telling the story of one album.

Problem

But, afterall, it was printed in an edition of five, with one sent to the Special Collections at Yale. How would I bring permanence and lasting impact to the project?

Solution

Build a React app to showcase the 10 albums and let the book live on the internet, forever.

Original Design

The front and back covers with tracklist, as well as the side piece are meant to give the illusion of an actual album packaging. Inside the jewel case, the circular printed cards extend the contrast between paper and compact discs as different means of distributing media, drawing from the technological advancements of recent decades as well as comparing the relative transience of printed ephemera versus the durability of plastic CDs.

Web Design

The web implementation takes into consideration adding additional information to the physical version, while maintaining consistency of aesthetics. As such, the serif type is kept constant with Garamond and Moret. Overall, each full-height page is meant to feel like one page in a book, whereas clicking on either the left or right side of the page simulates the flipping of book pages.

Process

• To reduce the project’s bulk, built components with React hooks that make calls to the Last.fm API to retrieve album information, such as artist, year, title, and cover art of album.
• To create background gradient, used React Palette to extract the dominant colors from the album art.
• To build a responsive experience, set font size with vw, cursor highlight with CSS hover rule, and header and footer as fixed on mobile devices.

Results

• Evolution of media: from paper to compact disc to the world wide web, each step in the project represents a stage in technological progress and the means of information consumption. The ephemeral and fragile gave way to the permanent which then gave way to the omnipresent, shareable, unforgiving.
• Experiment with React and API: learned React by doing, used components to simplify and condense code, made API calls to unlock more possibilities.