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:

Oct_Anatomy

Method

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:

OctavaMedia_Anatomy

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.

Production

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.”

image19

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.

Mahler5_Final

Mahler5

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

Symphony Interactive

App Development | Performance | Professional Work

This project has been a collaboration with Linda Dusman and Michael Richards (of the Department of Music) and the Imaging Research Center. The goal of the Symphony Interactive project is to leverage the ubiquity of portable wifi enabled smart devices to contextualize and further enrich the experience of live orchestral concerts.

Traditional arts institutions such as symphony orchestras are at a crossroads. With attendance down, such organizations are developing new models of sustainable growth that will resonate with contemporary audiences, who increasingly expect multi-faceted, interactive, and user-defined experiences. This is reflected in the myriad of mobile “smart” devices, saturating everyday experience. Such devices provide an opportunity to enhance the experience of attending orchestra concerts by creating multiple streams of information and media through which a performance may be experienced and contextualized. By utilizing these technologies, such institutions can reengage the wider public through contemporary forms.

The research will develop software for mobile platforms that will allow users to view scrolling musical scores in realtime, synchronized with a live orchestra by a human time keeper sending pulses via wifi. Utilizing and iPad, users will be able to view portions of the score yet to be played or revisit prior moments of particular interest, as well as access detailed annotations with compositional, historical, and aesthetic information. The Symphony Interactive prototype will provide a unique permutation of the traditional concert experience, leveraging mobile technologies in a way that heightens engagement through active participation.

Personal Contribution

– Creative Direction
– Interactive Design
– Graphics Production
– Evaluation Design

Technical Expertise

  • Adobe Creative Cloud

    • Illustrator
    • Photoshop
  • App Publishing

    • iOS

Skills and Abilities

  • 2D/3D Animation

    • 2D Animation
  • FX & Compositing

    • Motion Graphics
  • Management, Education and Research

    • Documentation/Technical Writing
    • Pipeline Development
    • Production Management
    • Technology Research
  • UX/UI

    • App Development
    • Protyping/Wireframes
    • User Testing