That’s how you use sound in modern web design

Musical background sound in web design is totally out, you might think. We actually believed web designers and developers to have left behind this anachronistic way of “attracting attention” since the early days of standard-compliant web design. But far from it.

For sound, in the form of effects or musical underlining of the individual sections of a website, is slowly becoming fashionable again. Reason enough for us to feel this trend once on the tooth.

Sound effects in modern web design – just totally annoying?

Who does not know that? You do not go to a website without a foreboding and it attracts attention with a well-rehearsed background sound. In addition, the control element is usually missing in order to be able to quickly switch off the sound system.

display

The reaction of most visitors is very clear: with a short click the relevant tab of the browser is closed. It simply dispenses with visiting the website, but it may contain just the information you were looking for. And all because the concept of the website was wrong.

Maybe the web developer was too much talked into by the customer when creating the website and could not prevail. However, the result remains the same. Potential visitors, maybe even customers, disappear from the website because they are totally annoyed by the musical accompaniment.

Often one gets the impression that the music is not used as background – as support – of the visual area of the website, but rather as an end in itself technology-loving nerds is considered. Understandably, this will not reward a visitor. Therefore, the question arises whether it is not otherwise.

Multimedia web design – the challenge for the future

The trend is clearly in the direction of multimedia web design. It all began with the so-called hero images, which fill the full view area of the browser. For many developers, however, this was too static and also old school, because with full-surface wallpapers worked for quite a long time. The only difference to the Hero images was just filling the entire screen instead of the visible area (viewport).

The latest trend is therefore the use of background video instead of the hero images. For well-made websites with background videos need much less text to transport their message to the user. So it is only logical that there are now not only services for free photos to use, but also those for background videos.

Sound effects and background music as the perfect support for multimedia web design

Good and economical sound effects and even background music could be a perfect support for modern web design. Working with supporting background videos would be just the first step. More and more developers will want to integrate more multimedia elements into their websites.

The integration of sound effects – a logical evolution

Here you can enjoy interesting and sparingly used sound effects. The user of a website can be made aware by a sound effect that an interaction with the website has worked. The click on a call-to-action button or the submission of a form can thus acoustically convey a success or failure.

Of course, new ground will not be entered by these acoustic underpaintings. Computer operating systems and games have been using these effects for a long time and successfully. What about emptying the Recycle Bin on Windows and OS X without the famous and appropriate sound for this activity? What would games like the famous Moorhuhn be without sound effects?

Much we can learn developers from the creators of the operating systems and games. You can definitely orientate yourself and build on that. The websites designed by you can only win.

Do not exaggerate. Sound effects are not an end in themselves

Especially websites that need to earn money, such as online shops, can benefit. But even corporate websites with clear call-to-action areas would be a good place to integrate sound effects. Despite all the coolness of new functions, it should always be noted that they should be used sparingly.

Sound in web design can be very inspiring

Using a background music is no easy task. Of course, the implementation is pretty quick and easy. But does not always fit the musical background. Therefore, one should think carefully on which websites – or on what kind of websites – a background music can enrich.

There are quite a few good examples of where it would be perfectly appropriate. The website of the city of New York, for example, could play Frank Sinatra’s “New York, New York” quietly – which of course is a matter of taste and would require the clarification of the licenses.

The website of HSV would be predestined for Lotto King Karl’s “Hamburg, my pearl”. In this way, there are certainly many example websites for which background music could be an asset.

Music must be a statement and can be switched off quickly

A background music should always be a statement or emphasize such. Then, most likely, it will no longer be perceived as annoying, but as an inspirational enrichment. Because then it serves a specific purpose. Of course, not every visitor to the website will want to see and hear that purpose.

In order to avoid losing any visitors, a sound control button must be placed in an immediately visible and conspicuous section of the website, with which the visitor can mute the website.


The controls for the sound of the website
The clearly visible integrated control element for the sound.

For quite a few visitors would rather want to watch the website in silence and without sound, or, depending on the location of the visitor, they also have to. Supportive sound effects when clicking on a button or a similar situation, however, should then be preserved, because they can certainly serve an increased user-friendliness.

The following websites may serve as good examples of successful media integration. Have fun discovering!

Eight examples of good websites with sound

Google Jigsaw


Amy Movie


John Iacoviello


Hashima Island


The Build Movie


Brightley preflight nerves


Black Negative by Ralph Lauren


Dubfire


(Post Image:FOTEROSPexels)