MJWFilms.com Site Design

  • 264
  • 5
  • 0
  • THE HOMEPAGE
    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!
     
     
  • MJW FILMS LOGO
    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. 
     
     
  • PROJECT TICKER
    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.
     
     
  • FEATURED WORK
    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.
     
     
  • PROJECT PAGE
    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.
     
     
  • VIDEO IS KING
    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.
     
     
  • ABOUT THE FILMS
    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.
     
     
  • MULTIPLATFORM
    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.
     
     
  • CONCEPT
    An early sketch detailing the prominent video placement and page-slide navigation.