Tone
A Color-Driven Music Discovery Interface
01
Design concept:
This project explores a minimal interactive system where users discover music through color rather than traditional text-based categories.
Instead of navigating through genres, playlists, or algorithms, users interact with a simplified color interface, where different colors represent emotional tones and sonic qualities. Through this process, music discovery becomes more intuitive, sensory, and experience-driven.
The design uses minimal visual elements to reduce complexity and highlight perceptual relationships. By focusing on color as the primary interaction language, the interface encourages users to explore music through feeling rather than classification.
This project positions minimalism not only as a visual style, but as a method for creating clearer, more user-friendly, and perceptual interactions.
02
Who It’s For
Tone is designed for users who want a more intuitive and emotional way to explore music beyond traditional categories.
It is for people who:
-
discover music through mood rather than genre or search
-
prefer simple and minimal interfaces
-
enjoy connecting music with personal feelings and daily experiences
-
want to reflect on their listening habits over time
03
Core Features
Color-Based Music Discovery
Users explore music through a color spectrum, where each color represents a different emotional tone or sonic quality.
Mood Selection Interface
A minimal color slider allows users to intuitively select how they feel, without relying on text or predefined categories.
Listening Journal
Users can record their daily mood in color and track the playlists they listened to over time, creating a personal emotional archive.
Playlist Sharing
Users can easily share their color-based playlists, turning personal mood selections into social experiences.
Light & Dark Mode
The interface adapts between light and dark environments, maintaining clarity and atmosphere.
Multi-Language Support
Supports both English and Chinese, making the experience accessible to a wider audience.
.png)
.png)
_%E5%89%AF%E6%9C%AC.png)
.png)
_%E5%89%AF%E6%9C%AC.png)
_%E5%89%AF%E6%9C%AC.png)
.png)
Prototype