A little less than a month ago, I posted my first design-related assignment from my classes at Full Sail University.  The assignment was for a fake company called World Surf, and the instructions were to create wireframes and a composition for the site. I posted the homepage composition here. Next, I moved on to designing a layout for Paintball Journals- an online Paintball magazine. On that post, you were able to see a tiny look into the process which I followed. Somewhere in between that and this, I came up with a nice little media player mockup.  However, now I am busying myself with a new project. This composition will be much more detailed, as is the Functional Specification Sheet is a lot more detailed. Follow along as I go over the varios stages; Phase 1 began on a Thursday afternoon, while Phase 5 ended at 1:30 the next Monday morning.. and, no, this project did not talk that long back to back. I spent roughly 15-20 hours from the initial wireframe to the final composition.

Phase 1: High Fidelity Mockup

The first stage is to create a wireframe. How is this done? Well, I use my web designer magic and great wealth of knowledge to formulate a layout that works for the task at hand. Can’t give away my secrets

High Fidelity Wireframe

Phase 2: The Background and Navigational Sector

After taking into account the layout, intent, and user base, I came up with a color scheme of desaturated blues, black, and a gray. The background is meant to symbol the light at the very top of movie theaters and how they seem to shine down right on your eyebrows. The home icon is an affordance for the homepage. Notice the blue line under the homepage icon; that’s the current state- in other words, this is a preview of the homepage.

Composition 1: The Background

Phase 3: Featured Movie and Featured Trailers

Below, we have two sections: Featured Movie and Featured Trailers. I have also tweaked the navigation so that theaters- the only link which is not a genera- stands out. Not only does this separate it from the rest, it calls attention to the theaters section, which is very important. The Featured Movie section highlights a current movie review, gives a tantalizing excerpt, and links to the full review while subtly hinting at the month in the background. The month is not very eye popping because.. well.. you should know what month it is.

The Featured Trailers section highlights three trailers, links to the page about that movie, and links to some photos. The image below says “Continue Reading” in the Featured Trailers section- that’s an error. It should read “View More Trailers.” Will be fixed in the next update.

Phase 2: Above The Fold Sections

Phase 4: Upcoming Movies, Top Ten Movies, and Featured Actor

As you can see here, much of the content was added between phase 3 and phase 4. Top ten movies (current, by the way), upcoming movies, and a featured actor section were all added. As always, special attention was paid to gutters, spacing, typography, colors, images, balance, and uniformity. Right clicking on the image and opening in a new tab or window will give you the full-size image; the lightbox obscures things a bit.

Phase 4: Final Composition

Phase 5: Last Minute Changes and Additions

First off, the logo wasn’t cutting it for me. It looked horrible; thus the change. Secondly, the banner ad was tightened up a bit. Thirdly, the navigation issue was addressed. If you’re a web designer, then you probably noticed what I am talking about starting in phase 3. For everyone else, the issue is that there were two “active” states; the blue horizontal bar under the homepage icon and the yellow color to the word “theaters” both could have denoted what page the user was currently on. In other words, the navigation was not clear in depicting what page you were on: home or theaters. The way I addressed this navigation issue, and (hopefully) solved it, was by knocking down the size of the font a little bit and desaturating the color.

The final addition was  the “Find a Theater” section, placed above the Featured Actor area. This was a requirement for the project; luckily I remembered it. I also fixed a spelling issue or two… opps.

Phase 5: Final Touch Ups