10 Albums of the 2010s
Context 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.

10 Header

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.

10 Slider 10 Slider

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.

10 Figma1 10 Figma2

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.

10 Result1 10 Result2

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.

Details

Next Project

Other Projects

Spotlist

↑ react app to get information about any spotify playlist

Breathe

↑ minimalist New Tab browser extension for meditation

© 2020 code & design by me 满载星海 from LA

I'm a student at ☉ Yale studying the intersection between computer science and design, along with economics and politics. I like basic things such as watching Chinese TV, making Spotify playlists, collecting song lyrics, and yelping. If you'd like to find out more about the interesting personality I never knew I had, you can check out my basic opinions, my basic art, or go find me ↗︎ while I get lost in space.

4:06:48 PMI hope this summer breeze would last more than a season.