Add to Collection


Prolific documentary and long-form content director Michael John Warren needed a dynamic website that not only represented his unique style, but … Read More
Prolific documentary and long-form content director Michael John Warren needed a dynamic website that not only represented his unique style, but would also enable him to showcase his work at any time on any device. The brief was simple: build the next generation of a director's portfolio site. After looking at reference sites across the web, from Errol Morris to Michael Bay, Morning Fingers partnered with developer Rockledge Technology to build a modern director's website. Visit the site at for the full experience, or scroll below for information on the project. Creative direction and design by Morning Fingers LLC. Coding and hosting by Rockledge Technology LLC. Read Less
The landing page featured a gorgeous image of Michael working on set (a throwback to his old site), and his name in large, thick outline type. We wanted there to be no mistake what this site was!
Before building anything else, we worked to create a strong, modern logo for Michael. We decided on a tightly-kerned, all caps typeset of his name in Din Bold, with a simple "Films By" header above, meant to be reminiscent of film titles. 
Below Michael's name on the homepage we built a rotating project ticker that displayed a loop of selected work and enabled users to dive into a project with a single click.
The vast array of different types of projects made for an ecclectic collection of logos, which we embraced in the design of the "featured work page." Each project thumbnail pulled a key frame from a project, and was paired with its corresponding logo. We built unique hover images that popped the logo out from the background of the thumbnail, and paired it with a complimentary color from the film.
Each of Michael's projects had a different tone and subject matter, and it was important to let the character of each film shine through on the project pages. Initially we explored building completely different pages for each project, but ultimately settled on a more structured approach to increase useability. The project pages featured a bold key image in the background, with negative space that made room for a large title and video window. The background of the pages made use of a subtle gradient and film grain texture that added a touch of depth and character.
The site was built to showcase video, so we knew we would need to allow it prominent placement on the page. We nestled the video inside the negative space of the key background image, just below the project logo. The video window allowed for full-screen viewing with a single click, and video thumbs below the first video offered additional clips that could be loaded on-demand.
The stories behind the films were almost always as interesting as the films themselves, so we built a place for Michael to discuss his projects at length. We also included room for credits and social media engament on each page.
It was important that the experience of the site be optimized for mobile and tablet users who might want to check out Michael's work on the go, so Rockledge bult a responsive design that featured swipe navigation on iDevices, and also offered full-screen HD mobile video.
An early sketch detailing the prominent video placement and page-slide navigation.