This project is a system for containing three personal stories of something a person loves. The goal was to design a system that worked on different viewport sizes, as well as different media (both print and web), and was able to accommodate different content in the stories. Visit the prototype » and try resizing your browser and printing a pdf.
The screen is the perfect medium for skimming—fix your eyes on the middle of the screen and start scrolling. For long-form narratives, however, it’s the details that make the story. In this project focused on enhancing the story-consumption experience, I sought to design a system that deliberately prevented rapid consumption.
The stories came from three different people. I asked them questions and recorded their answers. I then divided their stories into small chunks and visually delivered these chunks to the reader one at a time. By requiring interaction before continuing with the story, the user is encouraged to engage with the content.
The stories are supplemented with color at selected points. Although photos and imagery can add depth, they tend to be too literal. The use of color allows the reader to conjure up imagery independently and sets the mood of the narration.
All three stories use the same system of display, with only colors and triggers changing according to content.
Responsive Design
The system works across different screen sizes and different mediums.
For print, I wanted to maintain the essence of the experience despite the constraints of printing from a web page and the variability of printers. I worked with the space framed by the paper size and adjusted the layout to accomodate, using page breaks to slow down the reading experience. Because many web browsers turn off background colors and set all white text to black or dark grey, I allowed the type to take an even greater role—pages with only a single word that reiterates the main ideas of each story are scattered throughout the flow of the narrative. In addition, confining color to only a select number of pages allows for the user to preserve colored ink when printing, even when they’re looking for the “full” experience. Even when printed without backgrounds, the narratives still communicate with its rich typographic content.
