Interface-Sounds geben Nutzern eine hörbare Rückmeldung, kosten in der Praxis aber oft Lizenzgebühren oder viel Sucherei. Das quelloffene Projekt UI SFX stellt dafür 936 fertige Töne unter freier Lizenz bereit. Für Agenturen und Freelancer entfällt damit ein bislang mühsamer Schritt.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
UI-Sounds für digitale Oberflächen holten sich Gestalter bisher meist einzeln von Stock-Plattformen, jeder Klang mit eigener Lizenz und eigenem Charakter. Der Entwickler Romain Simon bündelt mit UI SFX nun 936 solcher Töne in einem Paket, das sich frei nutzen lässt.
Das Wichtigste in Kürze
- 936 Töne, 78 semantische Signale und 12 klangliche Stile stecken in einem Paket.
- Der Code läuft unter MIT-Lizenz, alle Klänge unter CC0, also gemeinfrei und ohne Namensnennung.
- Die Installation läuft per npm oder als Kopie der Audiodateien ins Projekt.
- Ton wirkt als zweiter Rückmeldungskanal, muss aber abschaltbar bleiben.
Was steckt hinter UI SFX?
UI SFX ist eine quelloffene Bibliothek mit 936 fertigen Interface-Klängen, die der Entwickler Romain Simon am 12. Juli 2026 veröffentlicht hat.
Hinter den Tönen steckt ein semantisches System: 78 benannte Signale wie Klick, Erfolg oder Fehler liegen in 12 klanglichen Stilen vor, von Minimal über Glass bis Arcade.[1] Jeder Stil klingt in sich stimmig, sodass Bestätigung und Warnung zusammenpassen.
Technisch kommt das Set ohne Ballast aus. Die Klänge wiegen als winzige MP3- und Ogg-Dateien wenig, das npm-Paket bringt keine Abhängigkeiten mit und liefert TypeScript-Typen. Wahlweise synthetisiert UI SFX die Töne live im Browser, oder Sie kopieren die Dateien direkt ins Projekt.[2]
Warum sind Interface-Sounds mehr als Deko?
Töne sind ein zweiter Rückmeldungskanal: Ein kurzer Klang bestätigt die Aktion, ohne dass der Blick ihn sucht, und erreicht auch Menschen, die den Bildschirm schlecht sehen.
In der Fachsprache heißen solche kurzen, bedeutungstragenden Klänge Earcons. Ein konsistentes Set trainiert das Ohr, weil der immer gleiche Erfolgston zur gelernten Bestätigung wird und ein abweichender Klang sofort ein Problem meldet. Solche gelernten Signale ergänzen visuelle Spielereien wie die weiche Soft-Body-Physik von Jelly UI in Formularfeldern.
Für die Barrierefreiheit zählt Ton als ergänzende, nie als alleinige Rückmeldung. Die europäische Norm EN 301 549 und die deutsche BITV 2.0 verlangen, dass sich Audiosignale abschalten lassen und keine Information nur am Klang hängt. Sitzt der Ton fest verdrahtet, sperrt das Setup einen Teil des Publikums aus.
Der eigentliche Vorteil liegt in der Lizenz. Bei Musik und Stock-Sounds müssen Teams sonst Rechte und Namensnennungen prüfen, wie unser Überblick über lizenzfreie Musik zeigt. Die CC0-Freigabe von UI SFX räumt diesen Aufwand ab: Die Klänge sind gemeinfrei und lassen sich kommerziell ohne Credit einsetzen.[1]
Ein freier Klangbaukasten wie UI SFX macht guten Ton zur Grundausstattung statt zum Budgetposten. Nur als abschaltbares Zusatzsignal spielt der Klang seine Stärke aus.
— Markus Seyfferth, Chefredakteur Dr. Web
Für wen lohnt sich der Einsatz?
Am meisten profitieren Freelancer und kleine Agenturen, die schnell ein stimmiges Klangbild brauchen, ohne ein Budget für Sounddesign einzuplanen.
Der Einstieg dauert Minuten. Nach dem Einbinden des npm-Pakets wählen Sie einen Stil und hängen die Töne an Aktionen wie Klick, Absenden oder Fehler. Für ein einzelnes Icon-Feedback reicht auch eine einzelne heruntergeladene Datei. In den 25 Werkzeugen für den Webdesign-Alltag tauchte Audio bisher nicht auf, dabei rundet ein sparsam gesetzter Ton die Bedienung ab.
Als Alternative greifen viele Teams zu Gratis-Beständen wie Pixabay, wo einzelne UI-Clips ohne Lizenzkosten bereitliegen. Solche Fundstücke passen klanglich aber selten zueinander, während UI SFX ein abgestimmtes Set aus einer Hand liefert.
Für den Praxistest reicht ein kleiner Schritt: Probieren Sie die Stile auf uisfx.com aus, wählen Sie einen einzigen und setzen Sie zunächst nur zwei Signale, für Erfolg und Fehler. Halten Sie den Ton dabei standardmäßig leise oder abschaltbar, dann bleibt die Rückmeldung ein Gewinn und wird nicht zur Zumutung.
Quellen
[1] UI SFX: „UI Sound Design: 936 Interface Sound Effects“ ↩
[2] UI SFX auf GitHub: romainsimon/uisfx ↩
Mehr Newshunger?
- Jelly UI: Soft-Body-Physik für HTML-Formularelemente
- CSS-Bildeffekte: Fotos wie aus Photoshop
- htmx statt React: Warum ein Forum sein Frontend zurückbaut
- Bento: Eine ganze Präsentation steckt in einer einzigen HTML-Datei
- 98 % Browser-Support sind keine 98 %
- Galaxy Z Fold 8 wird breiter: Was faltbare Smartphones fürs Webdesign bedeuten
