UI Sound Design: The Layer Most Product Designers Skip

UI sound design is the practice of designing the short sounds an interface makes when you tap, drag, complete or fail something, so the product feels responsive and alive without adding noise. In my own work it has become a normal part of the job: I take AI experiments from idea to design to code, and sound effects are one of the layers I design myself, next to motion and interaction. Several of my builds have sound at their core, from a keyboard landing page where every key plays a note to a bank card whose ice cracks in stages as you tap it. This post covers the three ways I make UI sounds (generated, synthesized, recorded), the rules I follow so sound helps instead of annoys, and why I think product designers should own this layer instead of leaving it to the end.

Why UI sound design gets skipped

Most product teams treat sound as optional polish. It rarely appears in a design file, there is no Figma frame for it, and by the time anyone thinks about it the sprint is over. So the default is silence, or a stock "ding" someone adds in the last week.

I understand why. Sound is easy to get wrong. A banking app that plays a sound on every tap is tiring, and an autoplaying sound on a website is a fast way to lose a visitor. But silence is also a design decision, and often a lazy one. The best moments in a product (a payment going through, a level unlocked, a card shattering) feel unfinished without it.

My view, which I have held for a long time: interfaces should be fun and alive, with physics, motion, sound and surprise. AI tools did not create that belief. They removed the excuse. Today one designer can make the sound, wire it into the build and ship it.

Three ways I make UI sounds, compared

Across my interactive AI experiments, the sound comes from three sources. Each fits a different job.

Approach	How it works	Where I used it	Best for	Watch out for
Generated sound effects	Describe the sound in words, generate it with an AI sound model, export short files	LevelUp celebration screen	Rich one-off moments: a badge, a reward, a character	File weight, and every play sounds identical
Synthesized in code	The browser builds the sound at runtime with the Web Audio API (oscillators, noise, filters)	stdo. keyboard, Haribo Pick & Mix	Repeated sounds that need variation, music you can play	Takes sound knowledge to make it pleasant, not beepy
Recorded sounds	Real recordings trimmed and triggered by the interface	Special Latte coffee app	Physical, familiar actions like pouring	Needs clean recordings and careful trimming

There is no winner. I pick based on how often the sound plays. Something that happens once (a level up) can be a rich generated file. Something that happens fifty times in a session (a tap, a bear landing in a bag) should be short, quiet and slightly different each time, which is where synthesis shines.

Generated: describe the sound, then edit it like a designer

For LevelUp, a native iOS level-up screen, the badge animation, the confetti you can throw and the sound were all part of one moment. The experiment lists ElevenLabs sound effects among its tools. Text-to-sound changes who can do this work: you write what the moment should sound like, generate options and choose, the same way you would pick between motion curves.

The design skill is not the generation. It is the choice: length, how bright or soft it is, whether it matches the speed of the animation.

Synthesized: sound as code

stdo., a keyboard landing page, is built entirely around Web Audio synthesis: every key plays a sound and a step sequencer lets you record a loop. The page is the instrument.

The Haribo Pick & Mix store goes further on variation. In the shipped build, every sound inside the bag is generated at runtime with the Web Audio API, with no audio files. The crinkle is a bank of filtered noise bursts, the plop of a bear landing is a noise burst plus a low sine thump with ten random variants, and a synthetic reverb runs at low gain so the sounds sit in a space. I broke the whole build down in how to make a 3D configurator.

Ten variants is the detail I would steal. Hearing the exact same sample fifty times is what makes UI sound feel cheap.

Recorded: when the real thing is the point

The Special Latte coffee app pours coffee into a cup that moves when you tilt your phone, and its tools list real recorded sounds. When the interaction copies something people know from real life, a real recording does more than any synthesis can.

Sound that follows the interface: panning and position

Another technique I use is placing sound in space. In Payno, the bank card you freeze and then tap three times to shatter, the crack sounds come in left, center and right variants and the code uses a stereo panner, so a crack on the left of the card sounds like it is on the left. I wrote about the full interaction in micro interactions examples.

NOVA, a hearing aid app concept, uses the same idea as the core of the product: its tools list Web Audio panning, and the sound follows the ear you pick. For a hearing product, sound is not decoration. It is the interface.

With headphones on, panning makes a UI feel physical in a way visuals alone cannot. It is also cheap to build once you think of it.

My UI sound design rules

These come straight from what the builds do in code, not from theory:

• Always optional. Payno has a sound toggle in the corner, and Haribo saves the sound setting in local storage so people only choose once.
• Never autoplay. Browsers block audio until the user interacts anyway. Haribo unlocks its audio context on the first tap, which also means the first sound is one the user caused.
• Vary what repeats. Random variants, slight pitch or timing differences. Same sound, never the same sample twice in a row.
• Match the motion. A sound that is longer than its animation feels laggy. Design the sound and the animation as one moment.
• Quiet by default. UI sound should sit under whatever the user is listening to, not on top of it.
• Save the big sounds for big moments. Rewards, completions, errors that matter. Not every button.

On native apps, Apple's guidance on playing audio in apps is worth reading before you ship, especially on respecting the silent switch and what else is playing.

Where UI sound design does not belong

I would not add sound to dense productivity tools, dashboards people stare at all day, or anything used in shared spaces like offices and hospitals without a very clear reason. When I designed data products for finance enterprises, the job was clarity, and sound would have been noise.

The test I use: would the moment feel broken without it? A shatter without a crack does. A settings toggle does not.

What this means for product designers

A few years ago, sound in a product meant a separate specialist, a handoff and a long wait. Now I take experiments from idea to design to development to the App Store, including sound effects and motion. That used to take a designer, a front-end developer, an iOS developer, a motion designer and a sound designer. I described the full chain in my AI design workflow.

I expect sound, haptics and motion to become normal parts of a designer's spec. Not every designer needs to synthesize audio in code. But you should be able to say what a moment sounds like, generate or find it, and hand over something better than "add a ding here". I wrote more about where the role is heading in the future of UI UX design with AI.

I am curious where you stand. Have you ever shipped a sound in a product you designed, or does your team still treat it as someone else's job? I would like to hear how it went.

FAQ about UI sound design

What is UI sound design?

It is designing the short sounds an interface plays in response to actions and events, like taps, confirmations, errors and rewards. Good UI sounds are brief, quiet, optional and tied to the motion they accompany.

How do you design UI sounds without being a sound designer?

Start with generated sound effects: describe the sound in words with a text-to-sound tool, generate a few options and pick the one that matches your animation's length and energy. Then learn basic Web Audio synthesis for sounds that repeat, so you can add small variations.

Should every app have sound effects?

No. Sound fits moments that feel unfinished without it, like rewards, completions and physical interactions. Dense work tools and apps used in shared spaces are usually better silent, and sound should always be easy to turn off.

What tools are used for UI sound design?

In my builds: ElevenLabs for generated sound effects, the Web Audio API for synthesized and panned sound in the browser, and real recordings where the action copies something physical. Most design tools treat sound as an afterthought, so in my builds the work happens in code.

Try it on one moment this week

Pick the single most satisfying moment in a product you are designing. Write one sentence about what it should sound like, generate three options, and test them with the animation on a real device, with headphones and without. If the moment feels more finished, keep it and add a toggle. If not, silence was the right call.

If you want a product designer who designs the motion and the sound along with the screens, and ships the code, you can work with me as your product designer. Or browse my product design work first.