THE ART OF VINYL
An interactive archive that frames vinyl as artifacts, guided by bold imagery and a curated taxonomy shaped by collecting behavior.
Project Overview
The Art of Vinyl is a solo UX/UI project born from my deep love of design, vinyl culture, and the art of archiving. The project transforms my personal record collection into an interactive, visual-first database that combines the tactile pleasure of crate digging with the convenience of a searchable interface. From research to prototype, it celebrates not only the physical artistry of vinyl records but also the pleasures of categorization, taxonomy, and the preservation of cultural artifacts through design.
The Challenge
Many vinyl cataloging tools, such as Discogs, CDPedia, or the antiquated spreadsheet, reduce collections to bare lists and metadata, stripping away the tactile, visual, and cultural richness that makes record collecting unique and special. Without design-forward browsing, nuanced filters, or context, these platforms turn a highly sensory experience into a flat database.
The vinyl collection spreadsheet I created and then utilized to define The Art of Vinyl's filtering system.
Research & Insights
To understand how collectors search, sort, and connect with their records, I analyzed a varied selection of my own vinyl catalog, choosing albums with differences in artwork, genre, vinyl color, release year, label, and so forth. I then created a very detailed spreadsheet with many categories. Mapping these metadata fields showed that browsing is driven as much by genre hierarchy, pressing details, and visual memory as by mood, context, and intuition. This confirmed the need for an interface that supports both structured filtering and visually driven exploration.
Taxonomy-driven filters that align with how collectors organize, recall, and search through their records. This example displays results organized by artist.
Filtering System
Based on the metadata patterns identified in the aforementioned research phase, the browsing system was structured around the criteria collectors use most when navigating their records. Artist, genre, subgenre, pressing year, release year, vinyl color, gatefold status, and record label became the core taxonomic filters, allowing for both precise searching and intuitive discovery.
Taxonomy-driven filters that align with how collectors organize, recall, and search through their records. This example displays results organized by subgenre.
The Solution
The Art of Vinyl transforms my record collection into a visual archive where album art, vinyl color, typography, and metadata guide discovery and appreciation for details. The interface feels like crate digging through imagery rather than scanning lists. Filters are built from my own taxonomy while the photography and layout highlight vinyl as an object of desire, memory, and design.
FEATURED PAGES AND INTERFACE HIGHLIGHTS
Exploring how each page shapes the way users browse and experience the collection:
Homepage List View
A vertical scroll layout showcasing featured albums at large scale, with primary filters anchored at the top for immediate browsing. Album artwork and vinyl overlap the frame to create a tactile, immersive presentation. Selecting an album opens the Album Detail View for expanded metadata and imagery.
Screens from the vertical browsing layout showing the full collection with no filters applied.
Homepage List View: Color Filter Applied
A color filter applied to the vertical browsing layout, narrowing the selection to albums with blue vinyl.
Homepage Grid View
A compact multi-column layout that displays albums side by side for quicker scanning and visual comparison. Album covers become a rhythmic field rather than individual showcases, allowing users to take in more of the archive at once while still accessing core filter controls. Selecting an album opens the Album Detail View for deeper information and imagery.
Screens from the grid browsing layout showing the full collection with no filters applied.
Homepage Grid View: Color Filter Applied
A color filter applied to the grid browsing layout, narrowing the selection to albums with green vinyl.
Homepage Grid View: Genre Filter and Info
A taxonomy-driven subgenre menu highlighting Art Pop within the broader filtering system.
Album Detail View
A focused viewing mode that immerses the user in a single record. The vinyl spins, the lead single can be played or paused, and the sleeve can be tucked behind or brought forward through hover interaction. Full metadata sits beside the imagery, including release year, genre, subgenres, pressing year, vinyl color, record count, label, and packaging notes. Each piece of data links to the greater database. Users can explore front and back covers, side A and B, inserts, posters, and lyric sheets, with the option to enlarge artwork for close reading. This view celebrates the record as a physical object and a designed artifact, offering a level of detail that traditional cataloging platforms cannot provide.
Screens from the album detail view.
DESIGN APPROACH
Typography
The display type for the logo uses Paranoid Starting, selected for its warped and sculptural forms that echo the physical qualities of vinyl. Adding 3D effects in Illustrator brought in highlights and depth that mimic the way grooves catch light. The result is tactile, playful, and slightly surreal, with a retro edge that still feels contemporary.
Poppins handles all interface text to balance the expressive logo. Its geometric structure keeps everything readable across filters, labels, and metadata. The pairing creates a clear contrast. One carries mood and materiality, and the other supports hierarchy and usability.
Color Palette
Lavender (HEX #D6B9F5) became the foundation of the interface because it feels creative, calm, and quietly bold. It offers softness without losing personality and pushes against the neutral-heavy look of most vinyl sites. The color creates a more expressive and personal browsing experience instead of a technical one.
The choice was inspired in part by Record Safari’s pastel pink.
Layout
The layout is designed to reflect the physical scale of vinyl. Album art is given generous space, creating a sense of presence similar to handling a real record. A modular grid keeps alignment consistent while allowing compositions to feel open and breathable.
Spacing is intentionally wide to avoid the look of a compressed database. It helps users scan quickly in grid view and slow down in detail view. Overlapping images and record-peeking motifs introduce movement and connect the interface to the tactile ritual of pulling a record from its sleeve.
THE MAKING OF THE ART OF VINYL
Project Details
Project type:
Interactive UX/UI archive and visual taxonomy system for a personal vinyl collection
Role:
Art direction, UX/UI design, collection curation, and content development. Built the full taxonomy, created the database, designed the interface, photographed the records, and shaped the visual identity and interaction patterns across the system.
Programs used:
Figma, Adobe Illustrator, Adobe Photoshop, Adobe Lightroom, Adobe Express, Google Sheets, and physical sketchbook
Deliverables:
High-fidelity interface screens, interactive prototype, visual identity system, metadata taxonomy, album photography, and layout system documentation.
