About the author

Fred is a supplier of soft skills and professional development at Smashing Magazine (lift him!) and The Guardian Software Engineer. His interests are…
Learn more about Frederick ↬

Design often revolves around graphics, but other senses also deserve love. In this article, we’ll tune into the audio features that make sites sing.

It’s easy to focus on how things look online. There is a lot to see. You are watching this right now! However, in the age of touch screens and home helpers, it is safe to say that sight is not the only common sense worth caring about.

George Lucas once said half of the magic of a movie comes from its sounds. The same can be said for certain online experiences. In the second part of this series, we’ve put together some favorite examples of using audio online. Most of us have had an unfortunate crossing bad examples (automatic video playback is a particularly outrageous example) but sound can add a whole new dimension to your online experience when used well.

Here are some amazing sounds from the internet. We hope these bright ideas help you think about your own projects a little differently.

Part: Web design is done well

New Yorker audio articles

The word ‘article’ usually brings to mind the words on a page, and waves space from whether that page is paper or on screen. The assumption that passes each year becomes more restrictive and simplistic. Words can be heard and read. This is something that more and more websites are using New Yorker is a particularly good example. Much of their writing – fiction and non-fiction – an audio version is included, often the authors themselves read.

New Yorker website
On New Yorker, the audio version of the articles is quite handy for listening on the road or making long chapters a little easier.

Most websites don’t have the luxury of saving people like Margaret Atwood, however text-to-speech software improvement, we love to see sites that incorporate it into design and functionality. Nieman reports made a fantastic article on the subject last year, and yes, there is an audio version.

Tune in to the radio garden world radios

We do not forget that websites can be other than grids. Radio Garden takes you instantly to radio stations around the world. It’s like Google Earth, but with music. Rotate the globe, launch, tune, drop. A deceptively simple idea implemented with playful elegance.

Radio Garden's website
Originally built in 2016 Radio Garden received the first transformation of mobile devices last year.

A lot of songs are needed to make this possible CesiumJS to the earth, Esri for satellite imagery and Free GeoIP location to the API. Great idea beautifully executed. (An honorable mention must also be given Radiooooo, a kind of time travel equivalence.)

Botany and Symphonies in the Garden of Penderecki

We doubt if you have ever seen a memorial garden just like Krzysztof Penderecki. Wander the virtual garden of the legendary Polish composer (and an avid gardener) with their music in the background. It’s a beautiful tribute and a cracking case study in web design for startup. There’s a lot of great stuff out there, but the music seemed appropriate to focus on.

Pendereck Garden website
Pendereck Garden is not as much a website as a virtual madhouse. Captivating, instructive, stylish … Who could have thought during this time that the Internet could still feel so sophisticated?

Acres from the oral history of Margraten in World War II

The possibility of inventing archiving material online in a new and exciting way is almost limitless. Fields of Margraten the oral history project builds its website around audio content, and audio clips are associated with sad music arrangements.

Fields on the Margraten website
the website rips past history textbooks and makes it feel as real and immediate as it deserves to be.

The music is complementary, helping the interviewees create a spirit of time and place. Would the effect be the same without? We are not so sure.

Netflix brings Trailer-like intensity to the Dark Series guide

On the website, playback is automatic. This caution is well deserved. Still a guide to NetflixinDark“-The series shows how powerful it can be done correctly. The deep surrounding shades of the site will draw you into the mood.

Netflix's Dark series
It’s about small things: the sound breaks when you leave the tab, which adds a great touch. (Photo credits: Netflix – Dark)

Imagine a long-form article with the right accompaniment — a horror story that may involve dissonant ambient arrangements, or a look back at Swinging Sixties, with a Jefferson Airplane song playing in the distance. This Dark the guide shows how many shots the arm can have.

The IT Museum brings audio tours online

DataArt IT Museum has a constantly growing collection of Eastern European technical equipment, each product is properly imported into the network. This e-museum is beautiful in every way, but its interview snippets are particularly sharp. Unlike Akkers van Margraten, sound clips close the gap between it and the present.

DataArt IT Museum
Audio clips integrate seamlessly Website of the DataArt-IT Museum.

It feels almost obvious when you see it. Almost everyone has wandered through a museum, gallery, or historic building while listening to an audio guide. Why not have the same option available to you online?

Design ethics

What is the role of the designer? This is a question that was posed to a dozen designers and researchers in Design ethics, as presented by the answers, which only the network could really achieve. Instead of presenting the results in one glossy video, the site separates all the tracks.

Design Ethics Website
On Design ethics, video, subtitles, photos, credits, and audio sit side by side, allowing the user to control how much real estate each piece takes.

Just like anything else, it shows how much you can lose when we confine ourselves to one medium – be it text, sound, videos, photos or graphics. While it’s a bit cheeky at first, maybe you need to think about how each piece fits into a larger puzzle.

SoundCloud’s Sticky Music Player bar

We thought we should close the God-honest feature. That’s why we turn SoundCloudwith a music player that plays independently of any other site. Clicking on a new page does not reset the player, allowing visitors to browse artists and albums without breaking the flow what they listen to. It feels so natural that it’s hard to imagine not being there.

SoundCloud webiste
Sound cloud does a pretty good job of letting the user do things at the same time.

We’re used to this through apps like Spotify, but in the actual network, it still screams untapped potential. Think about how it can be combined with the other ideas presented here. Imagine being on a news site and start listening to the story, a la New Yorker. With such a player, visitors can continue browsing the site while listening to the original story. Sounds like the future.

Wrapping

The sites featured here only scratch the potential surface. The sound can be in countless formats: radio, music players, interviews, storytelling and navigation just to name a few. We are not all far away debate with websites.

If you want to learn more, the articles below provide a good starting point for sound design online:

Technical capabilities have grown exponentially in recent years, and more flexibility is required for the sites used. They are seen, touched and more and more heard. We’re postponing support for edible, pleasantly fragrant websites (for now), but sometimes it’s definitely worth making them noisier.

Smashing Editorial
(vf, yk, he)

LEAVE A REPLY

Please enter your comment!
Please enter your name here