Once an experiential outpost of the New York avant garde theatre scene, the International WOW company has evolved into an Oscar-nominated film and theatre production company with works shown via HBO, Netflix and alternative cinema screenings. Unfortunately, their online presence had not evolved at all. They asked me to build them a modern site that would both illuminate their colorful history and provide a platform for cataloging and promoting current productions and events. From their spectacular, social-awakening experiments of the mid-1990’s to their current mix of activism and feature-length documentary, the site charts a history involving dozens of productions, a diverse, international cast of performers, vividly choreographed plays and revelatory, outspoken film-making. The inherent personality of the site had to project the urgency and candor of civil activism yet still feel institutional to a prospective industry audience. This involved a balance between bold statements and clean catalog formatting.
Intro Sequence
There is a fifteen-second intro sequence setting the energy while allowing the media-rich site to lazy-load. The first part of the intro plays off the worldwide aspect, with longitudinally spinning globes and randomly generated airport destination codes. As their brand is definitely not frivolous, I avoided more playful UI animations. The entire intro sequence is a css keyframe animation rather than video, so it is relatively light to load.
The second part of the sequence is a quick, energized montage of performance imagery referencing the often-disorienting nature of their signature stage production and choreography, followed by some critical acclaim from highly respected institutions.
The final part of the intro sequence is an SVG (SMIL) logo animation, abstractly suggestive of a curtain being parted, followed by a carousel sequence of curated performance imagery. A prompt to scroll down appears at the beginning of the carousel sequence.
Design Theme
International WOW had been employing an animated graphic of an airplane taking off as their opening credit sequence to emphasize the scope and energy of the company. Founded in both North America and Asia, with collaborative productions on both sides of the globe, this emphasis was important to retain. Rather than taking such a literal metaphor, I chose instead to evoke some of the aesthetic of the international travel experience. Drawn from moodboards of airport codes, vintage baggage tags and schedule flip-boards, I created an overall design theme.
Moodboard Inspiration
Design Elements
Color Palette
Scrolling down, the flipboard theme is introduced, as are the multitude of actors who have provided the heart and excitement of International Wow. All of this is achieved with CSS and Jquery. The flipboard typeface was custom-drawn to be semi‑monospaced.
Timelines
To illustrate their historical development, the works are cataloged via a set of two timelines, one for theatre and one for films. The timelines function as animated menus, opening modal drawers for the selected production. Each modals contain an image gallery, a brief synopsis, credits and a prominent quote, blurb or statement related to the film or play.
On smaller tablet and mobile views, the timeline menus are viewed by swiping left and right, perpendicular to the page scroll.
