Visually narrating the story of a life-changing experience
Awwwards Honorable Mention The Pudding Cup 2022 Honorable Mention
Visual Design UX and UI Design Creative Writing Interactive Storytelling Webflow Development
Visual Design UX and UI Design Creative Writing Interactive Storytelling Webflow Development
Have you ever wished that the online articles you read could come to life before your eyes? As a medium for conveying information, the web has the potential to be just as immersive as books and movies. That's why I set out to answer the question of whether it was possible to create a more interactive and engaging reading experience on the web.
The result of my efforts is The Haircut, a personal visual essay presented in the form of a website. Through the use of scroll animations and symbolic imagery, The Haircut tells a story about change and carries a message that I hope will inspire others.
In "The Haircut," I carefully crafted the story to build suspense by intentionally withholding certain information until later in the piece. I wanted readers to keep guessing and feel drawn into the story, just like they might with a mystery novel.
To do this, I left a few clues along the way. One of these clues was a grid of images with partially concealed and rotated scribbles, which I included to spark curiosity about their relevance in the context of an essay about a haircut.
These same scribbled words appeared again later in the essay, this time in a larger size, continuing to tease readers with their significance.
To balance out the text-heavy nature of the essay, I incorporated imagery into the design of "The Haircut.”
Since there weren't many photos to work with, I used text as imagery instead, altering words like "snip" and "buzz" to visually convey the idea of falling hair and a vibrating phone. This made the essay more visually compelling.
Another challenge was getting people to care about the mundane act of getting a haircut.
To overcome this, I focused on universal feelings and used design elements like scroll animations and hover interactions to convey emotions like hearing a therapist's voice on repeat or mentally rejecting clothing choices.
I also used videos to express bliss and distress and incorporated memes to connect with my target audience of millennials and Gen Z.
In designing the website for "The Haircut," I wanted to incorporate symbolism that reflected the symbolic nature of the haircut itself. One way I did this was through the use of partially concealed scribbles, which represented my fragmented understanding of the haircut at the beginning. These scribbles, which represented the six key phrases, were only fully revealed at the end of the essay, symbolizing the moment when I fully understood the significance of the haircut.
I also used color to convey meaning in the design of the website. The use of dull colors in the first part of the essay represented my dull hair, while the introduction of bright colors later on symbolized my changed outlook on life.
Additionally, I made sure to choose key phrases for the concealed scribbles in the background that aligned with the main ideas of each section, such as using the phrase "be flexible" as a background image in the part where I returned to the hair salon.
Have you ever wished that the online articles you read could come to life before your eyes? As a medium for conveying information, the web has the potential to be just as immersive as books and movies. That's why I set out to answer the question of whether it was possible to create a more interactive and engaging reading experience on the web.
The result of my efforts is The Haircut, a personal visual essay presented in the form of a website. Through the use of scroll animations and symbolic imagery, The Haircut tells a story about change and carries a message that I hope will inspire others.
In "The Haircut," I carefully crafted the story to build suspense by intentionally withholding certain information until later in the piece. I wanted readers to keep guessing and feel drawn into the story, just like they might with a mystery novel.
To do this, I left a few clues along the way. One of these clues was a grid of images with partially concealed and rotated scribbles, which I included to spark curiosity about their relevance in the context of an essay about a haircut.
These same scribbled words appeared again later in the essay, this time in a larger size, continuing to tease readers with their significance.
To balance out the text-heavy nature of the essay, I incorporated imagery into the design of "The Haircut.”
Since there weren't many photos to work with, I used text as imagery instead, altering words like "snip" and "buzz" to visually convey the idea of falling hair and a vibrating phone. This made the essay more visually compelling.
Another challenge was getting people to care about the mundane act of getting a haircut.
To overcome this, I focused on universal feelings and used design elements like scroll animations and hover interactions to convey emotions like hearing a therapist's voice on repeat or mentally rejecting clothing choices.
I also used videos to express bliss and distress and incorporated memes to connect with my target audience of millennials and Gen Z.
In designing the website for "The Haircut," I wanted to incorporate symbolism that reflected the symbolic nature of the haircut itself. One way I did this was through the use of partially concealed scribbles, which represented my fragmented understanding of the haircut at the beginning. These scribbles, which represented the six key phrases, were only fully revealed at the end of the essay, symbolizing the moment when I fully understood the significance of the haircut.
I also used color to convey meaning in the design of the website. The use of dull colors in the first part of the essay represented my dull hair, while the introduction of bright colors later on symbolized my changed outlook on life.
Additionally, I made sure to choose key phrases for the concealed scribbles in the background that aligned with the main ideas of each section, such as using the phrase "be flexible" as a background image in the part where I returned to the hair salon.
