Overall Design:

main example

The website for the motion picture Quarantine uses some of the "5 C's" of design in order to communicate the content of the movie in an efficient and entertaining way. Consistency is adhered to in every page of the website. Likewise, Clarity within its design is due to the use of grids and design sets that are vintegrated unto the website.Cinematic Principles are are a driving force, as expected for a movie website, through the use of Flash elements that are cleverly and tastefully used.

Interface Diagram:

diagram example

1.] Billboard Area 2.] Navigation #1, 3.] Navigation #2, 4.] navigation #3, 5.] Navigation #4,6.] Navigation #5,7.] Navigation #6, 8.] Navigation #7, 9.] Sound On/Off button, 10.] Footer/Legal Disclaimer area

Navigation/Functionaliy:

rollover example

There are multiple hotspot/rollover areas within the "billboard" area of the main page. Each of these hotspots serve as the main navigation area of the website. When accessed, each area of the building will lead to a new page of the website.

navigation example

Within each page there is a main drop menu which makes for an easy access and frustration-free exploration of the website. Of note is the clever design of the drop down menu which resembles an elevator button panel.

preloader example

The navigation also features a preloader, in which through action scripting, the loader image follows the movement of the cursor throughout the web page content area.

Website Color and Theme:

color example 1

The colors chosen for the website reflect the dark and ominous subject matter of the motion picture. The dark values compliment the graphics and images for the movie. There is an option to view certain web pages in "night vision" mode. Even with this feature, the color pallette changes yet remains an effective graphic element.

color example 2

p>As shown above, when viewing the web pages without the night vision feature, the overall ambience and feel of the movie is never compromised. Also, the fonts which are used are complimentary to the overall design of the website. The design team obviously has carefully thought out the look and feel of the web page in order to be a valuable tool in promoting the motion picture.

Design Efficiency:

The overall design of this website is appealing both graphically and technically. Many times, Designers tend to overuse tools and tricks that are at their disposal. However, within this website, the design team has wisely chosen to incorporate their creative ideas into a cohesive and user-friendly website that never leaves the viewer fatigued or frustrated. Overall it is a fine example of Flash driven website design

design example 1

Final Thoughts...

design example 2

The official website for the motion picture Quarantine is yet another fine example of creative website design which uses the "5C's" of design to their best abilities. As usual, the grid was used in order to better organize the content of the website, and in turn provide the viewer with a fun, creative and technically exciting experience. Motion picture websites are quickly becoming the leaders of efficient and artistically cohesive website design.