Lawrence Wang

10 Albums of the 2010s

See It in Action ↗︎

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.
I started building things some time ago. Exploring the intersection between design and code makes me feel powerful, and implementing design to create meaningful and useful products has been more fulfilling than my past dabbling in fine arts. The liberal arts™ education at Yale has afforded me the opportunity to discover economics and political science as immensely interesting, although what I will do with them remains to be seen.
In my free time, I enjoy watching Chinese TV, collecting song lyrics, and making Spotify playlists. I am fascinated by architecture and interior design and collect cool floor plans on a blog. One of my life ambitions is becoming Yelp Elite one day, but I figure my love for food trumps my critical insights nearly 100% of the time, so we will see about that.
Instagram ↗︎LinkedIn ↗︎Thoughts ↗︎In My Defense ↗︎
Songs I've Been Listening To:
Don't you know there's a part of me that longs to go.
5:59:04 AM