Pacific Rim

Pacific Rim - student project

Perfect time to work on responsive design and a movie I'm looking forward to watching this summer. Really like how the instructor has the class outline the project first to figure out the main parts.  

  • Navigation

  • Hero

    • Imagery

    • Movie Ttitle

    • Release Date

  • Synopsis

    • Poster

    • Plot Summary

    • Rating

    • Details

      • Director

      • Producer(s)

      • Writer(s)

  • Video & Image Gallery

    • Trailers & Scenes

  • Cast & Characters

    • Photo

    • Character’s Name

    • Actor’s Name

  • Additional Images

    • Scenes with similar characteristics

  • Music

    • Album Cover

    • Artist

    • Writer

    • Buy/Stream Links

  • Online / Social Links

  • Footer

Here's my wireframes. Simplifying as much as possible down to the colors and wording.

Mobile Wireframe:

Pacific Rim - image 1 - student project

Tablet Wireframe:

Pacific Rim - image 2 - student project

Standard Wireframe:

Pacific Rim - image 3 - student project

The designs below are 95% of what the instructor did for his Oblivion example. So all the credit to him. I wanted to practice on the structure and wrap my head on where the content goes. I tweaked the structure a little and played with the images, color palette, and typography. You'll see standard, tablet, and mobile in that order.

Pacific Rim - image 4 - student project

Pacific Rim - image 5 - student project

Pacific Rim - image 6 - student project

So I got a chance to rev off my wireframes. Wanted to explore more on the grid and see where I can serve up the images and videos. Had fun inserting other movies and tv shows I have seen that are similar to Pacific Rim. You'll only see the Standard for now but I pretty much think it will follow a similar flow for tablet and mobile that I did earlier above.

Pacific Rim - image 7 - student project