Step It – music sketchpad

2016 – The Step It music sketchpad was developed in four phases, from identifying the problem, to ideation, to developing a limited-functionality prototype, and the final solution.


Identify the Problem: Lack of Space


The problem is creating sophisticated musical ideas on a small screen which is typically done a large screen or with several hardware devices with many tangible controls.

Ideation Focused Around Step Sequencing

Four ideas were incorporated in the final solution.


Step sequencing

Step sequencers have been used often in drum machines and analog synthesizers, such as the Roland TR-808/909, but also in new equipment such as the Korg Volca series. It allows one to input drums or notes in an easy and fast way.

Isomorphic keyboard layout

In order to overcome the lack of space for a regular piano-style keyboard, an isomorphic keyboard can be used where the notes are arranged in a XY-grid manner. This method can be combined with a step sequencer to optimally use the small real estate of the smart phone screen.

Four instrument tracks

The music app is approached like a band that has four members each with their own instrument. The 4 tracks are: drums, a bass synthesizer, synthesizer for creating rhythmic parts, and a lead synth.

Dynamic sound: recording parameter changes

In order to create interesting melodies and drum parts it is important to have a human feeling. This is done by recording changes of sound parameters over time. One can tweak a knob and record this tweaking in real-time to create dynamic and evolving sounds.

Graphical guidelines

The graphical appearance of the music sketchpad should support the intuitve and modern approach to music making. The guidelines are: flat design, colour coded interface where each track has its own primary and secondary colour, circular buttons, minimal amount of text, solid and dashed strokes.

Interactive wireframe demo


The purpose of this interactive prototype was to show how the drum sequencer works. Therefore it has limited functionality and only shows 4 screens. These screens are shown simultaneously, while in the actual app there would be swipe actions / button clicks between them as mentioned in the comments.

Download an interactive wireframe demo of the drum sequencer as standalone Java application (OsX/Win).

Solution: A Portable Music Sketchpad


Four screens of the final outcome: home screen with 4 track mixer, drum sequencing (blue), global parameters screen with tempo, scale and pattern length (light blue), and bass synthesizer (green)

See the full flow diagram here.