We set out to create a nuanced user experience that revealed the personality, the passion and the influence behind the work. Music, your biggest inspiration outside of dance, was to be the undercurrent on which to lay our choreographed presentation. We asked, how can we represent music visually to bring to the forefront the most defining characteristics of your choreography?
How to translate sound into movement, the subtle integration of queer empowerment themes and the inspirations, joys and down-to-earth challenges of making three music videos are just some of the questions (and answers) explored in this new roundtable discussion video.
We set out to create a nuanced user experience that revealed the personality, the passion and the influence behind the work. Music, your biggest inspiration outside of dance, was to be the undercurrent on which to lay our choreographed presentation. We asked, how can we represent music visually to bring to the forefront the most defining characteristics of your choreography?
An element that most struck us in your sequences was the folding and layering of the human body, in poses that drew in and exploded out. We wanted to use music in the same manner you use the physical body; we wanted to find music that layered and weaved dynamically. One song in particular, Herbie Hancock’s jazz standard Maiden Voyage, felt immediately appropriate. We tuned into the complexity of its unusually-colored chord progression that gives the composition its effortless and infinitely-weaving directionality. We first played the music in our office, and then we sat down at our piano to engage physically with the individual components. Sounding out each note of Herbie Hancock’s esoteric minor13th chord, we felt that something quite special lay in the subtle proportional distances between those sounds. They would become the scaffolding for our creation.
To bring these sonic proportions into visual existence, we positioned ourselves squarely before Robert Bringhurst’s The Elements of Typographic Style. In his seminal work, Bringhurst develops a system of proportions derived from the chromatic scale, where each note corresponds to the root note by way of a proportional ratio. We used this scale in conjunction with our own proprietary grid system to create a musical division of space in order to provide a modular structure for the content areas of the website that would be fully-responsive to different screen sizes.
Following Bringhurst’s scale of proportions, we established square (1:1) content spaces as the root note and arranged them in a vertical pattern to found the structural backbone of a scrolling, vertical home page. We ‘placed’ each remaining note of the chord in the form of a shape proportional to its position to the root note, layering them sequentially into each content block. We then duplicated the shapes of each subsequent note, rotated them 90 degrees and layered them on top of the two existing shapes in each section. We in effect created a melodic series of musical divisions.
We incorporated the gestural human element to complete the performance by taking inspiration from the body’s form in motion. We folded the corners of the middle forms by dropping one upper corner down to the intersection of the top form and reversing the bottom corners in order to create intersecting vertices. Just as a human body would have hands and legs that fold into and across itself, the distilled shapes took on this same movement and expression. The final musical interaction between form, space and image provides a choreographed experience that illuminates the content in a manner that is distinctively relevant to Wynn’s body of work.
We couldn’t be happier with the results of our collaboration with Wynn and wish her the very best with the “maiden voyage” of her new website.
