10 Albums of the 2010s

Visit the Site ↗︎

<aside> ⏲️ Time Frame: November 2019 - June 2020

</aside>

<aside> 🛠️ Tools: Figma, React, Photoshop, Printing Press, Last.fm API

</aside>

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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7c04e819-577f-44c4-b20d-4c4640832311/albums_header.png

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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/42c04c4d-8d64-442d-8064-cf936cd49ef4/albumdesign.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e9296f8b-958b-4347-a4c8-5a9e92b80a58/albumdesignslider.png

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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2aa58aaa-9877-4d73-bce9-ec5d17ffb06c/albumweb1.png

Process

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/264a7b85-0f0c-45eb-8c70-e20492220bd9/albumweb2.png