For this project, the goal was to create a scrolling webpage that told a story from two perspectives: from someone who was a stranger and from someone who was my a friend. I interviewed two people to talk about something that they loved. The aim was to create a cohesive and visual narrative that could communicate stories in a compelling way.
I was inspired by New York Times Style Magazine Screen Tests. But instead of using video, I utilized photography to evoke a similar interview-esque element to the design. After experimenting with the layout of images, I began to form a visual template. I chose to strip the webpage of any functionality, to maintain the focus on the words and imagery in hopes to evoke an element of intimacy.
With this project, I really focused on depicting various gestures and expressions people use in telling their stories. As the interview progresses, the reader is shown more and more of the individual and what they look like. By the time you scroll to the end, you finally see the person in completion. This design was aimed to parallel the process of getting to know someone as they tell their story.
For the interview with my friend, I spoke with Gabriel Shaglow-Rubenstein who spoke about his passion for violin. He discusses how he first developed an interest in violin but goes on to unveil the challenges he has faced with his passion as he has gotten older. Dylan Johnson, a stranger at the time, spoke about his passion for Sneakerology. He communicates in detail the history behind his sneaker collection, unveiling how he learned to make profits from sneaker deals and sales online as well as tricks he learned along the way to invest his profits in order to expand his collection.
To start, I really needed to understand the content and the narrative I had gathered. I wanted to highlight key phrases I discovered that I could accentuate using typography. I also hosted a photoshoot with my interviewees where I encouraged them to re-tell their stories to try and capture their natural gesturing while communicating. Once I had the content and the images, I aimed to design a template that was dynamic, softening certain sections while making other portions more dramatic with the use of larger text and zoomed in images. Cropping and scaling images was purposefully done to try and emulate the movement of a camera zooming in and out. Here you can see my notes on how I recognized key moments in the narrative.
I worked on a column-esque grid. I wanted the columns to be consistent but also shiftable so that I could align the images in various ways. I cropped and enlarged images in such a way to create a zoom in and zoom out motion similar to that of a video camera. The grid helped me create those dramatic shifts while still maintaining consistency.
I also chose to use a separate grid for the text. I started by placing the images first while simultaneously referencing the text so that the sequence of images mapped with the general narrative of the interview. Then I added the text atop the images. I was explicit in the placement of the text to ensure that it complemented the images. For example, when my friend, the violinist talked about the the calluses on his fingers caused by the instrument's strings, I made a point to align that image with that moment in the text.
Dedicated to my friend Gabe. For his undying love and support, and for always always listening to my stories.