Music Player UI - Light & Dark Mode

Open Full Project

Understanding the Context

Music streaming is a long-session behavior, often used during evening hours, commuting, or in low-light environments. Prolonged exposure to bright interfaces in these situations can lead to visual fatigue and discomfort.

To address this challenge, I designed a dual-theme interface (Light & Dark Mode) that prioritizes both accessibility and visual comfort.

Goal: The goal was to allow users to transition seamlessly between daytime browsing and low-strain nighttime listening without compromising readability or brand identity.

Design Approach

To maintain consistency and scalability, I followed a Bottom-Up Design Methodology.

Instead of starting with full screens, I began by defining the foundational design elements:

• Design System

• Iconography style

• Button components

• Color Palette

• Spacing system

Once these smaller components were established, I used them to build the larger interface structures such as the Home screen, Music Library, and Settings.

This approach ensured that every screen feels cohesive and system driven, whether the user is browsing playlists on the Home screen or adjusting preferences in Settings.

Key Focus Areas

1. Visual Hierarchy

Clear hierarchy was essential to guide users through content-heavy music interfaces.

I used size, weight, and spacing to direct the user's attention.

For example:

• The greeting “Hi, Tayyaba” is visually prominent to create a personal connection.

• The supporting text “Find your vibe today!” appears lighter and smaller, establishing a secondary level of information.

This hierarchy allows users to scan the interface quickly without cognitive overload.

2. Touch Targets

Mobile usability was prioritized by ensuring all interactive elements maintain a minimum touch target of 48 × 48 dp, following Material Design accessibility guidelines.

This improves usability for:

• One-handed interaction

• Users with motor impairments

• Faster navigation without precision tapping

Placement of the Theme Toggle

The theme switch is located in the Settings → Appearance section.

This placement aligns with the mental models users already have from modern operating systems (iOS and Android), where appearance settings are grouped under system preferences.

By following this established pattern, the feature becomes intuitive and easy to discover.

Dark Mode Design Strategy

Designing for dark mode is not simply about inverting the light interface. It requires careful adjustments to maintain depth, readability, and visual comfort.

1. Avoiding Pure Black

Instead of using pure black (#000000), I selected deep neutral tones for background layers.

Pure black often creates harsh contrast with bright text and vibrant accents, which can lead to eye strain during long sessions.

Using slightly lighter dark tones allows for:

• Softer contrast transitions

• Better separation between interface layers

• More comfortable long-term viewing

2. Controlled Accent Colors

In light mode, accent colors can be vibrant. However, in dark environments overly saturated colors may create “color vibration”, where bright hues visually compete against dark backgrounds.

To address this, I slightly desaturated the accent tones in dark mode while maintaining their recognizability.This keeps the interface visually balanced and reduces eye fatigue.

3. Depth and immersion

To enhance the emotional quality of music playback, I introduced subtle glow effects around album artwork in dark mode.

This creates an ambient lighting effect similar to “Ambilight”, making the music feel more immersive while subtly reinforcing the active content.

Accessibility Considerations

Accessibility was treated as a core design principle, not an afterthought.

1. WCAG 2.1 Compliance

All primary text-to-background combinations were tested to meet or exceed the WCAG 2.1 recommended contrast ratio of 4.5:1 for body text.

This ensures readability for a wide range of users, including those with visual impairments.

2. Non-Color Indicators

Color alone was not used to communicate interaction states.

For example:

• The Home icon in the navigation bar uses a filled icon state combined with a lime-green highlight to indicate selection.

This provides additional clarity for users with color vision deficiencies.

3. Typography Legibility

A modern sans-serif typeface was used to maintain clarity across different screen sizes.

Additional attention was given to:

• Adequate letter spacing

• Clear line height

• Balanced font weights

These adjustments ensure text remains legible even in dark mode where letters can sometimes visually blend into the background.

Final Design

The final interface delivers a balanced dual-theme music experience that supports both aesthetics and usability.

The design system ensures:

• Smooth theme transitions

• Accessible contrast levels

• Comfortable long-session usage

• Strong visual hierarchy

• Consistent component behavior across screens

By combining thoughtful color strategy, accessibility standards, and system-driven design, the interface creates a modern and immersive music listening experience.