DEV Community

Cover image for Daily UI - Day 9: Music Player Design
Johnny Santamaria
Johnny Santamaria

Posted on

Daily UI - Day 9: Music Player Design

From:
Daily UI

--

Prompt for day 9: Music Player

Design a music player. It could be browser-based or an app (i.e. Pandora, Spotify, SoundCloud, etc.) or in a standalone product like a car dashboard, jukebox, etc.

Consider the controls, placements, and imagery, such as the artist or album cover. Also, consider the device type playing the music: a dashboard in a tour bus, a smartwatch, or a web browser. Each device type will have different requirements, features, and restrictions.

--

The design:

Daily UI Day 9 design

Font Choice:

  • Inter - known for its clean and modern appearance, making text easy to read across different devices.

Colors Used:

  • 009C77 - Used for accent elements and call-to-action buttons
  • Black - Provides a sleek, modern backdrop
  • White - Ensures clarity and readability

Key Design Considerations:

Most Used Buttons & Controls

  • The interface prioritizes the most frequently used controls, including:

  • Play/Pause Button: Centered for quick access

  • Skip Forward/Backward Buttons – Positioned on either side of the play button for intuitive navigation

  • Volume Control: A simple slider for easy volume adjustments

  • Progress Bar: Allows users to see track progress and scrub through songs

  • Timestamp: Users can now type in the time they want instead of using a wind back button, which is barely used

Album Art & Song Information

  • The design features a large album cover to enhance visual appeal

  • The song title and artist name are displayed clearly below the album art

Playback Device Consideration

  • The design is optimized for a mobile app, ensuring that all controls are easily accessible with one hand.

  • Could be adapted for a car dashboard by enlarging key buttons for touch interaction

User Interaction & Accessibility

  • High contrast between text and background improves readability

  • Large touch-friendly buttons ensure ease of use, especially for mobile users

Minimalist Aesthetic

  • The interface avoids unnecessary clutter, focusing on essential elements to create a seamless user experience

Conclusion

This music player design balances aesthetics and functionality, providing a visually appealing and user-friendly experience. By prioritizing the most used controls, optimizing for different devices, and keeping the layout clean, it ensures users can enjoy their music effortlessly. Whether in a mobile app or a car dashboard, this design adapts well to different environments while maintaining a modern look.

Top comments (0)