Designing a music player you can use in the dark

Most music apps are designed in a bright office and used in a dark room. At two in the morning, with one hand on a keyboard and the other somewhere near a mug, nobody wants to squint at a thin grey icon to find the pause button. So I set myself a small brief: a player that works by feel.

This is how it went, what I kept, and the three ideas I threw out on the first night.

Start with the thumb, not the grid

Before drawing a single screen I held my phone in the dark and noted where my thumb landed without looking. Those spots became the controls. Everything else, including the album art, had to fit around them.

• Controls sit in the lower third, at least 56px apart.
• Every button is raised, so the shadow alone tells you it can be pressed.
• The pressed state sinks in. No colour change needed to know it worked.

One glow, one meaning

Soft interfaces go foggy fast. My fix was strict: the gradient glow only ever means this is live. The track that is playing, the slider you are dragging, the timer that is running. Nothing decorative is allowed to glow.

If everything glows, nothing is playing. Give the light one job and the whole screen becomes easier to read.

That single rule fixed more than any amount of contrast tweaking. It also made the light mode version almost free: swap the two shadow colours, keep the glow, done.

What I threw out

A spinning vinyl animation (lovely, distracting), a lyrics panel (no one reads lyrics at 2 a.m.) and a swipe-to-skip gesture that fired every time I reached for my tea. The final player has three buttons, one dial and a waveform. It is the calmest thing on my phone.