Octava – Visual Design

App Development | Fine Art | Performance | Professional Work

Octava, an app designed to augment live performance and arts events with contextual information in real-time, has been in development for 5 years, as a collaboration between myself, and composer Linda Dusman.The art production design process for Octava posed a unique challenge. Everything we learned from our user testing has shown us that users are highly receptive to supplemental materials, but the chosen delivery method for that information was key in minimizing distraction. If the visual experience of Octava was going to enrich the experience of live performance, the aesthetic of the app needed to match the elegance of the music, environment, and texts being perceived.

The core challenge visually was to provide a visual context for the experience of the live performance that enabled an ease of reception with regard to the annotation texts, all while minimizing distraction. Here is an example annotation from an Octava performance:



As a designer/animator, motion needed play a key role in uniting the musical performance and the app into a single experience, so I designed the UI to accommodate animated frame sequences that would progress in concert with the release of each annotation. A breakdown of the how the Octava app produces the above image reveals the relationship between text, interface elements and animations composited with Octava:


As the orchestra plays, annotations are released to coincide with particular moments in the performance. Simultaneously with the release of each annotation, the visual themes shift as well, providing a sense of progression, especially through longer, more dense compositions.


While ultimately interperative, this design work was not arbitrary, and based on researching musicological, historical, and cultural resources to produce colors and forms that complimented each symphony. I personally created or art directed/edited every animated animated sequence for Octava, acting both as the conceptual and technical director, as well as lead animator.Two methods were developed during production to facilitate varying level of animation.

1) Looping Method: 3-5 frame animated sequences were designed to loop endlessly within specific movements of a symphony. This method allowed for frame by frame deformation, as well as pan and scan methods. The image here showcases this approach as used for accompanying Dvorak’s “New World Symphony.”


Dvorak2) Animation Scroll Method: As an alternative, the scroll method focuses on developing a single image across which a virtual camera will pan. With this method, the illusion of motion is created without the need for frame by frame animation. Below is an image of the animation scroll produced for Mahler’s 5th Symphony.



During the height of production for our Phase I Maryland Innovation Initiative grant, I oversaw a team of 7 interdisciplinary artists working around the country. The result was a series of animated sequences for the 30 most performed works nationwide. Below you will find a .gif sampling of visual materials from some of the symphonies within our catalogue. These changes would occur almost subliminally over time, but have been sped up hear to reveal the motion design within.

CoriglianoCopelandAppSpringStraussRosenShostakovichOP83BartokBeethovenLaMerGershwinRhap Mussorgsky BernsteinShostakovich5HindemithMozart35HolstBrahms2

Technical Expertise

  • Adobe Creative Cloud

    • After Effects
    • Illustrator
    • InDesign
    • Photoshop
  • Animation Software

    • Maya

Skills and Abilities

  • 2D/3D Animation

    • 2D Animation
  • FX & Compositing

    • Motion Graphics
  • Graphic Design

    • Digital Print Production
  • Management, Education and Research

    • Pipeline Development
    • Production Management
    • Technology Research