Josh Fox has built his name exposing the dark sides of big industry, so it should come as little surprise that he would take on the film distribution industry as well. Following its premier at the Tribeca Film Festival, he chose to release his feature documentary, Awake, a Dream from Standing Rock, exclusively online while letting viewers decide for themselves the value of the film and of the effort underlying it. All proceeds were donated to several funds supporting environmental protections and Native American sovereignty. We needed a single-page website to promote the film, tell the story of the movement behind it and provide a gateway for donations and online viewing. With only grass-roots funding, we had to be especially resourceful and acutely sensitive to the subject matter. We avoided framework templates. This was a clean-sheet, responsive design suited to our specific needs and entirely custom-coded for optimum viewing from a wide array of desktop and mobile devices. As powerful corporate interests such as the Dakota Access Pipeline Company (DAPL) were seeking to portray the movement as reactionary and antagonistic through sophisticated messaging designed to appeal to moderate citizens, I chose to avoid any ‘rebellious’ aesthetic that might support their effort, instead presenting the story with a similar sophistication: clean, well-organized and typographically refined. Calling upon editorial instincts, I sought to present a story of legitimate concern and peaceful protest and the power of online media to empower those who have the strength, courage and determination to make a forceful stand against social inequity and industrial disrespect.
The Inspiration
The Result
The parameters were driven by the distractive nature of the online media environment and the need to capivate an audience within seconds of engagement. Josh provided a teaser video that would autoplay on the home screen and a prominent call-to-action link to the film-viewer API. Once the teaser has played, additional links and information appear along with a scroll link to explore the site.
Intro Teaser Sequence (click to play)
I felt it important to incorporate a core design theme relating the indigenous heart of the protest while remaining clean and abstract. Native American symbolism is essentially geometric and thus the geometric rule became a central part of this theme—intended to express both the solidarity of the protesters and the “black snake” nature of the pipeline. After researching artifacts of the various tribes involved, I also derived a color palette integrating traditional tribal colors with neutral tones to achieve a modern interpretation.
Responsive Storytelling
Design Theme & Colors
To achieve the editorial feel, maintain control over typeset and layout composition and to avoid the awkward scaling aethestic of mobile-first responsive templates, I opted for an adaptive rather purely responsive site. After mapping out the page, wireframes and fully-detailed mock-ups were created for seven breakpoints ranging from 2560px(landscape) to 320px(portrait): desktop to mobile.
Mobile Versions
Below the primary information is a short gallery section of images from the protest and quotes from the various people involved in the film. As they become available, these can be replaced by excerpts from press reviews and the section can be continually extended.
Gallery (scroll within laptop frame)
Selected Views (swipe left to view)