JOHN DUSTIN PATTERSON

PROJECTOR WEBSITE
PROJECT SCOPE
  • Front End Development
  • Responsive Website Design
  • Branding/Identity
WHAT IS PROJECTOR?
Projector is a responsive website for movie lovers. It features in-depth reviews, insightful articles, trailers and interviews. It was built from scratch in WordPress.

CHALLENGE

The task was to create a multi-page, responsive website that caters to movie culture. The site must have an immediately identifiable brand, loads of content, and a user-friendly interface.

SOLUTION

I positioned the brand as thoughtful and professional. The lettermark logo is Bodoni, which suggests refinement and taste. The website goes in-depth with movie culture, offering reviews, interviews, and articles. Using PHP as a content management system allows Projector to be easily updated with the latest news.

THIS IS PROJECTOR

Projector is a responsive website for movie lovers. It features in-depth reviews, insightful articles, trailers and interviews. It was built from scratch in WordPress. Visit the site at: www.johndustinpatterson.com/projector

USER PERSONA

  • NAME:  Jeff Arnett
  • AGE:  19
  • JOB:  College Student
  • INCOME:  $40,000 A Year (with trust fund and college grants/loans)

Jeff is a college student, a single young man with disposible income. He and his friends love seeing and talking movies. Jeff would use Projector to keep up on the latest movie reviews, news, and rumors. Advertisers could target Jeff with great deals on the latest Blu Rays and books about movies.

MOOD BOARD

I created a Pinterest mood board to visualize the tone and presentation of Projector. The Talks and Tusk set the template: large images, sophisticated font choices and a lot of white space. Rogerebert.com was the inspiration for content architecture: the way the reviews, archives and interviews were accessibly organized.

STYLE GUIDE

Projector was conceived to look sophisticated and modern, with open negative space, beautiful film stills, and bright pop colors. Thin lines separate the content.

 

SITE MAP

This site map shows how the Projector website is organized and where interaction will lead a user. The frontpage teases the latest from news, reviews, and interviews. Community is highly encouraged in the comments sections, the forum, and thru social media links.

WIREFRAME

I started with a sketch of how the website should look: open white space and widescreen, vivid images.  A simple Illustrator wireframe was my blueprint for content is placement and content pixel dimensions.

 wireframeresearch

PHOTOSHOP BLUEPRINT

I find that I can visualize my website much better if I have a Photoshop mock-up of what the site should eventually look like. I built a PSD blueprint of Projector, completely with the correct margins and pixel dimensions.

© Dustin Patterson