UI Sound Design

Why is sound important?

Your sound can be sculpted in your own signature sound so people can recognize your app without even seeing it, giving your app its own “hook”. When the sound gives the right impression, you win a lot with a small amount of effort. In this chapter we’ll be teaching you how to find and create great UI sounds and when to use them for maximum effectiveness.

Positive Actions

Anything that requires a bit of effort, but that is rewarding or beneficial to the user. Some examples are liking, sharing something or creating a task. A fun animation and whimsical sound should be played for those cases.

Realistic Actions

Use realistic sounds when you need the user to feel like they are actually using a real version of its digital counterpart. For instance, the shutter sound for when you take a photograph on your phone.

Destructive Actions

In a similar fashion, the destructive actions give confirmation that something was removed. In some circumstances, people take pleasure in deleting things as it makes them feel in control.

Apple famously spent a lot of time creating a paper shredding animation when you delete an item in Passbook. Those were the good old days.

Material Design

The Material design system explains many type of sounds. These include sound as feedback, as decoration, hero sounds, notifications and much more.

Design Files

Design Files has a neat library of UI sounds. Here, you can find different type of sounds such as click, pop, tadah, woosh as well as error sounds.

Appsounds

Appsounds is a great-quality sound library that you can use for games and all kinds of digital products. It is well divided for easy search and preview of sounds. You can just pick your sound and paste it into your project.

Facebook Soundki

An excellent and free package from the designers at Facebook.

Freesound

Freesound has an overwhelming number of sounds. It requires a free account and needs quite a bit of searching, but you will be rewarded by little gems that you won’t find anywhere else. Don’t forget to use the Advanced Search feature with a duration of 0 and 1 second.

How to add to a UI sound to your animation

Let's open our Figma file and import the assets to Principle.

Now, we are ready to import the assets from Figma to Principle. To do so, let's go to Principle and head over to the tab bar. In import, select Import from Figma.

Go to the toolbar and click on Create a new component. Make sure to call this new component Bell. This first animation will be inside a bigger animation and it will respond to a different time.

Inside the first component, let's add our first trigger. Select the main folder and click on the action icon.

Now, select the component and then, select the option Touch Begins.

Next, point the interaction to the same asset.

This action will generate a duplicated asset and it will be named Bell 2.

In Bell 2, select the bell asset and change its angle to -10.

Now, repeat the same process for Bell 2. Click on the action button in Bell 2, select Auto and point the interaction to the same asset.

This will generate a third version of the asset. On that new version, change the angle of the Bell to 10.

Now, let's repeat the last step. This creates a forth version of the bell and we can give it an angle of -10.

For Bell 4, let's add a new action. Select Auto and point the action to Bell 1 so we can close the animation cycle.

You will notice that at the bottom of the UI there is a timeline which is directly related to the arrows that are on top the assets. This interface on the bottom will help us to work on the animation in more detail.

Next, go to the bottom of the UI and squeeze the time layer to half. So, we can adjust the time of each of the interaction to 0.50 (half a second) for all the interactions. Make sure to select the button Back to Parent.

In the main animation, select the component. You will notice that next to the asset there are some small gears, rename it to Group. Select the action button and choose the Tap option over the same asset, so it can generate a duplicate.

In the new frame, select Ellipse 2 and rotate it to 360 degrees.

Now, let's add the sound file to the interaction. You only need to drag and drop the sound file to the canvas.

Principle will represent the audio file as a gray square, we need to hide that square. To hide that square, put the opacity to 0 and put it at the bottom of the layer list.

Let's create a new action. Select Auto and point to the first art board. Like that we can close the loop.

Now that the cycle is closed, open the timeline and extend the time of the asset to two seconds so it can match the time of the UI sound.

You will see that the cycle will go back to 0. Like that it will close the loop.

Conclusion

It's important to remember that the sound that you choose will play a big part in how your app is recognized. It will be the voice that represents your product, so take advantage of that and create the best UI sound for your app.