This project is to design the web page and multi-end visual system for NetEase Cloud Music, aiming to jointly build the brand temperament of the platform with the emotional resonance of the music community and the intelligent experience of personalized recommendations.
The design goal is to present the platform's brand characteristics of "the power of music" through systematic visual structure and emotional narrative.
The overall theme is "Late Night Alone, Emotional Refuge Hidden in Headphones", integrating the warmth of music and the resonance of the community, demonstrating the community structure and user value of NetEase Cloud Music as China's most emotionally connected music platform.
design challenge
NetEase Cloud Music is not only a streaming platform for digital music, but also a spiritual community for music fans to communicate emotionally. The design needs to achieve the following balance in the visual language: Emotional sense × Functional sense: It must not only reflect the emotional resonance and spiritual comfort of music, but also convey the convenience and efficiency of the player; Community × Personal sense: It must not only maintain the emotional connection and interactive temperature of the comment area, but also show the accuracy and privacy of personalized recommendations; Immersion × Informational sense: It must not only continue the immersive atmosphere of the dark interface, but also integrate the information level of playlists, lyrics, and comments. The core challenge is - how to combine the emotion of music and the efficiency of the platform in the design, so that NetEase Cloud has both emotional value and user experience.
Strategy and philosophy
The project takes "the emotion of music and the temperature of community" as its core design concept. Visual philosophy: Based on the dual-line logic of "immersion and resonance" as the visual basis, it embodies the power of music and the belonging of the community; Structural logic: adopts the music streaming platform typesetting system to organize the content information in layers to form a multi-dimensional structure of "playlist-song-comments-recommendation"; color system: NetEase Cloud Red + Deep Black + Warm light gradually becomes the main color, supplemented by album covers and lyrics, symbolizing enthusiasm, immersion and emotion; graphic language: integrating song list covers, waveform effects, comment bubbles and user avatars to establish a "visual system under the emotional order"; interactive expression: introducing play all, collection of playlists and wonderful comments, making the platform both efficient and emotionally resonant. The core of the concept: present the music atmosphere through visual immersion, and extend the emotional connection through community interaction.
Design presentation
Home page design: The main color is a deep black background and NetEase cloud red embellishments, reflecting immersion and brand recognition; the left side focuses on the playlist details, creator information, and playlist introduction, and the right side uses the song list (serial number, song title, artist, album, duration) to present the core playback functions; the bottom playback bar uses album cover, song information, and playback controls to deliver an immersive listening experience. Content logic: 1. Playlist details; 2. Song list; 3. Wonderful comments; 4. People who like this playlist will also listen to it; 5. Related recommendations; 6. Private FM.
Multi-terminal design: Responsive structure: The desktop player and mobile APP are seamlessly connected to form a "discovery × immersion" rhythm; Functional design: Present personalized music discovery through four modules: daily recommendations, private FM, playlist square, and ranking list; Image language: Use multiple styles of content presentation including album covers, singer photos, and lyrics posters to convey music and emotions; Comment page: Introduce popular comments, latest comments, and comment likes to express the value of community interaction. Technology and experience: Use intelligent recommendation + lyrics synchronization + comment interaction; multi-end playback record synchronization to ensure seamless connection of listening to songs across devices. The overall style embodies "immersion in music × temperature of community × emotional resonance".
Achievements and Impact
As the official visual system of the platform, this design is widely used in user engagement on web pages, desktop clients and mobile terminals. Through the integration of music logic × community narrative × brand order, the design successfully created the visual image of NetEase Cloud Music that "has both listening experience and emotional value". The project was considered by the platform to be "one of the visual systems with the most emotional resonance and community warmth" and became the core blueprint for the multi-terminal experience design of NetEase Cloud Music.