Resamplr Animate



Create simple effects or sophisticated sounds with Animate: a flexible and intuitive audio filter automation program.

Project Type


2 weeks


If you haven't taken a look at Resamplr yet, I highly recommend doing so before checking out this post! It'll help put everything in context.

You've probably used "bass boost" or "equalizer" effects while playing a song. These effects are called "filters" in the audio realm. A filter is an audio effect that ducks or gains certain frequencies. For instance, a bass boost filter adds gain to lower (more bass-y) frequencies.


There are currently no applications that allow for creative filter design. Furthermore, those applications are difficult to animate or change over time.


Layout Sketch

I began sketching the idea for the filter application. I kept in mind goals and features when adding (or omitting) certain functionality.


Each logical section is segmented for easy identification and modification. The top left panel is a visual representation of the waveform. The top right panel allows the user to modify a filter. The bottom panel allows users to animate between filters.

Invisible Tutorials

Audio plugins are challenging because they require a design that leads the user with little explanation (as nobody wants to read 3 hours of documentation).


I keep a limited, indicative color palette that has great contrast. I have different shades and highlights of yellow as markers animation. Because color sometimes doesn't convey enough information, shape contrast is used. For instance, the "diamond" shape indicates a keyframe is present on the current frame. This is similar to programs such as After Effects and may be an affordance to some users.


Here, several colors are used to help users immediately identify UI components. A filled yellow indicates a control, and translucent purple displays a waveform of some sort.

Even though the elements are physically separated due to layout constraints, color coding allows the user to easily understand what parameter affects which node.