Interactive Quote Book

The original typography project used quotes from the video game The Last of Us combined with digital and analog type to create a booklet. I wanted to update this project as it felt boring to me and I knew that I could improve it by taking the idea and adding interaction.

Goal

To use the original quote book as a base to create an animated interactive video book.

Original Booklet

The original quote booklet was designed with the goal of combining analog and digital type in an interesting way.

Some pages from the original quote book project.
A page from the original quote book project.

Ideation

The quotes from the video game are powerful and evocative which would work well as kinetic type. The project redo concept is to take the quote booklet and transform the pages into animated kinetic type videos. These videos would then be connected with interactivity that allows the user to progress through the video as if they were flipping to the next page in the booklet.

Sketches of one of the animations from the interactive quote book.

Styleframes

Style frame for the front cover of the interactive quote book.Style frame for the back cover of the interactive quote book.Style frame for page 1 of the interactive quote book.Style frame for page 3 of the interactive quote book.Style frame for page 10 of the interactive quote book.Style frame for page 9 of the interactive quote book.

Final Interactive Quote Book

The final interactive quote book uses a simplistic type heavy design to express the emotions within The Last of Us as users navigate through the story. A monochromatic colour scheme is used throughout to reflect on the harsh melancholic reality of the world that players explore within the game. A simplistic user interface is included within the project that connects with the overall design and provides interaction options for the user.

Interaction is used within the project to provide users with a way of navigating through the book and interacting with the various video options. A table of contents is included on the left side of the screen so users have an easy way of navigating to different pages of the book. If the user prefers a more linear experience the arrow button is used to navigate through the pages in sequential order.

This user-friendly interactive quote book engages with the audience and provides a creative and innovative way for them to experience the story without having to play the game. The animation combined with the interaction creates a unique experience that will users will remember.

Interactive Quote Book
Final image of the interactive quote book.