Songblocks

2022
client: HfG Schwäbisch Gmünd
type: Application
technology: Figma, After Effects
collaborator: Paul Schänzlin
Bachelor Thesis
Overview

SongBlocks is an audio plugin designed to work inside of a DAW (Digital Audio Workstation). Users can create small compositions & loops inside of the plugin, which can be exported and arranged further inside the DAW.

As part of our bachelor's thesis, we asked ourselves how we could improve, simplify and speed up the digital music composition process.

As two enthusiastic amateur musicians, it was one of the most exciting projects we have ever pursued. The exploration of the issues, and the deep exploration of microinteractions were two aspects that made this Bachelor project special for us.

Question Zero

How can we help composers, songwriters and producers to create musical ideas and sketches a lot quicker?

Creating Chords

The plugin simplifies the process by treating chords as “blocks” that can be arranged via drag-and-drop. The boxes at the bottom contain triad-chords for the selected key, that can be dragged into the composition.

The chord-length can be adjusted by dragging the edges, while the middle handle of the chord is used to set the inversion & position of the chord. When selected, notes can be added or deleted from the chord. The system highlights notes that might fit (chord extensions).

Chords can be easily replaced by dragging other chords over them. The new chord automatically takes on the length and position of the old one.

Key Select

Selecting a new key affects the composition:

1. The available chords in the chord area change according to which key is selected.
2. The composition is transposed to fit the selected key.
3. The tonic note of the selected key is shown in the piano roll on the left.

Melody

Melody notes can be drawn in by using the mouse and double-clicking inside of a grid field, or by using the pen tool (single click).

The interval of the note in relation to the chord below is shown inside the note.

Technologies & Software

Figma - for wireframing, screendesign, basic prototyping & animations

ProtoPie - for prototyping

After Effects - complex animations