[null]:frame
project
2025
year
animated webcomic
category
portfolio
designed for
first concepts
Before the final animated format was conceived, the journey of [null]:frame began as a simple ambition: to create a visually striking cyberpunk comic. Initial concepts ranged from fantasy stories and surreal animated snippets to various hacker scenarios. Ultimately, the high-stakes "simulation break-in" was chosen for its self-contained narrative and its potential for a powerful, unexpected twist.
These early sketches served as the project's foundational storyboard. They meticulously mapped out the full narrative from beginning to end, a structure that would remain virtually unchanged throughout development. While a dynamic, animated experience was only a preliminary thought at this stage, these first panels were the blueprint that paved the way for a more ambitious final project.
exploring the characters
The project's central conflict is defined by its characters, created to be a stark contrast. The protagonist's rebellious aesthetic, marked by a damaged hoodie, stands against the formidable Ghost Watch, an elite security force clad in high-tech armored suits. These early studies also defined the project's visual identity, experimenting with outlines, high contrast, and the vibrant, neon-lit palette that would bring the characters and their world to life.
setting the final style
The final aesthetic for [null]:frame was meticulously crafted to immerse the reader in a high-contrast, neon-infused cyberpunk world. The visual language is defined by a primary color palette dominated by purples, blues, and reds. Each panel section is characterized by a single main hue, creating a controlled, deliberate flow that mirrors the hacker's methodical approach. This organized palette gives way to a chaotic spectrum of glitches and mixed colors as the simulation begins to fail, visually signaling the narrative's unraveling.
To further enhance the experience, the project blends the art of comics with interactive design. The horizontal, scroll-based layout was developed to create a seamless, cinematic flow. Initially, panels are aligned at a consistent height, establishing a sense of order. This structure breaks down as the narrative progresses, with panel placements becoming increasingly chaotic—a powerful visual metaphor for the loss of control. Story progression is also tied to user interaction, with the reader clicking on prompts to advance. This concept culminates in the final glitch panel, where the reader's scroll speed directly affects the outcome, linking their pace to the protagonist's fate and triggering the fourth-wall-breaking error messages.
adding the details
To facilitate the interactive narrative, a custom user interface was required. I designed a set of icons to guide the reader, each crafted to serve as a distinct visual cue for action. The core design concept combines a central touch-finger symbol with a graphic representation of the specific task—from entering a room to hacking a terminal.
These icons are more than just interface elements; they are an extension of the comic's high-contrast, cyberpunk aesthetic. Designed with a sharp, geometric visual language, they are seamlessly integrated into the story, prompting the reader to advance the narrative and further blurring the line between a traditional comic and a dynamic, digital experience.
behind the name
The title [null]:frame is more than just a name; it’s a piece of the narrative itself, crafted from programming syntax to serve as a meta-commentary on the story’s core themes. The use of square brackets ( [ ] ), a syntax for an array, represents the series of test simulations the hacker performs, positioning the webcomic as just one entry in a long sequence of trial runs. The term "null" signifies a deliberate absence of value or result, which perfectly describes the outcome of the simulation. The colon ( : ) is used as a symbol for type declaration, classifying the very nature of the frame itself—it labels the tragic end as a predetermined, meaningless outcome. Finally, "frame" grounds the title in the medium, confirming that the events are confined to the digital, visual space of an animated webcomic.
![Overview of the project's logo development. The final, dynamic [null]:frame logo is shown at the top, overlaid on comic panels. Below, various text designs with different fonts and glitch effects illustrate the design process.](https://framerusercontent.com/images/6Wd5Oe3DenLE7YRylJ7DMrzvc.webp?scale-down-to=2048)
breaking the simulation
The final act of [null]:frame shatters the digital illusion, revealing the true nature of the story. This transition is marked by a deliberate stylistic shift: the final panel is rendered with a subtle realism, abandoning the bold outlines and high-contrast visuals of the simulation for a more detailed, textured look. This visual contrast serves as a powerful narrative device, distinguishing the simulation from the high-stakes reality.
The comic resolves on a single, evocative image: a frustrated hacker, isolated in a dimly lit room, framed by the red glow of his screens. His defeated posture and a single, frustrated action—slamming his fist on the table—reveal the emotional core of the narrative. Yet, the story's true purpose is revealed behind him, where the city skyline and the very building from the opening panel are visible. This final frame is not an ending, but a declaration that the practice isn't over yet, but the real mission is about to begin soon.
