Role
UI Designer & Front-End QA
Duration
July – Sept 2024
Tools
Figma, Cursor, Webflow
/Overview
TDC is a digital platform designed to showcase and organize a large comic book collection for collectors and enthusiasts. The goal of the project was to create an immersive browsing experience that celebrates comic art while making it easy for users to explore and discover titles within the collection.Rather than presenting the content as a standard database or catalog, the design direction focused on turning the collection into a visual experience, where each comic is treated as a piece of artwork.
Gallery Directory for Fine Prints
/The Problem
Most comic collection websites present books in simple grid layouts that feel more like online stores or archives. While functional, these layouts often fail to capture the artistic value and cultural appeal of comic books.
For collectors and enthusiasts, comics are not just items in a list — they are pieces of visual storytelling and art.
The challenge was to design a platform that:
- Showcases comic books in a way that feels curated and visually engaging
- Maintains easy navigation and discoverability
- Reflects the premium and collectible nature of the collection
- Avoids overwhelming users with dense information layouts
/Role
As the Product Designer, I led the design direction of the platform from concept to visual execution. My role involved defining the user experience, exploring interaction patterns, and creating a design system that would present the comic collection in a visually engaging yet structured way.I focused on translating the client’s vision into a digital experience that felt more like exploring an art gallery than browsing a traditional catalog.
/Research
The core inspiration for the platform came from art galleries and museum exhibition spaces.In galleries, artwork is carefully arranged across large open spaces to allow each piece to stand out and be appreciated individually.
I applied this same philosophy to the website by treating each comic book cover as a displayed artwork.Instead of rigid grids, comics were positioned across the interface in a way that creates a curated visual canvas, giving the experience a more immersive and editorial feel.
/Design Approach
The design approach focused on transforming the comic collection into a visually immersive experience while maintaining clarity and ease of exploration. Rather than presenting the collection as a traditional catalog, the goal was to create an environment that celebrates the artistic value of comic books.
Gallery-Inspired Layout
The core inspiration for the platform came from art galleries and museum exhibition spaces.In galleries, artwork is carefully arranged across large open spaces to allow each piece to stand out and be appreciated individually.
I applied this same philosophy to the website by treating each comic book cover as a displayed artwork. Instead of rigid grids, comics were positioned across the interface in a way that creates a curated visual canvas, giving the experience a more immersive and editorial feel.
Depth, Lighting, and Presentation
Subtle shadows and depth effects were incorporated to create a sense of dimension, giving each comic the appearance of being displayed within a physical exhibition space. These visual treatments simulate gallery lighting, reinforcing the idea that the collection is curated and displayed with care.
Balanced Navigation and Discovery
While the experience is visually driven, the interface was designed to maintain clear navigation and structure. Users can easily browse the collection while still being able to access detailed information about each comic when needed. This balance ensures that the platform remains both exploratory and functional.
/Color Palette
The color palette was designed to reinforce the minimalist gallery-inspired aesthetic while allowing the comic artwork to remain the focal point of the experience.
A dark, neutral foundation was used across the interface to create contrast and replicate the atmosphere of a museum or gallery space where lighting is carefully controlled to highlight artwork.
This darker backdrop allows the vibrant comic book covers to stand out more prominently on the page.Neutral tones were paired with subtle highlights and shadows to enhance depth and give each comic the appearance of being carefully displayed under gallery lighting.
This approach helps create a sense of sophistication while maintaining a clean and minimal interface.By keeping the surrounding UI restrained and balanced, the color system ensures that the visual storytelling of the comic covers remains the central focus of the platform.
#FDD129
#01080D
#EEEEEE
#FFFFFF
