Monday, 28 October 2013

Movie Website Production File

Rich Media Film Website
Project Details

I’m tasked with making a movie website for a movie which has recently been re-released on DVD I need to make the website match the theme of the movie and appeal to the target audience. I will initially conduct research into existing horror genre websites and then I will implement my findings into my design.

Common attributes and research

Websites open with a theatrical trailer and then transition to the homepage so may consider using a theatrical trailer as pre-loader and when pre-loader has reached 100% then the user has the choice to skip trailer and go to the homepage.
They also link to sites where you can buy the film on DVD, Blu-Ray and Digital copy. A movie poster acts as the background which fades in and the homepage includes names of the cast and includes Facebook and twitter links. Some sites have on-screen GIFs located around the page which has sequences from the film. Parts of the “Scream 4” website which I liked was the background and colour scheme as it felt very relevant to the films genre but elements of the site are quite poor and in my opinion the site feels quite bare of interactivity and media content so I think it will be quite easy to make a flash website better than the official site.

The site contains links to page which plays the trailer but the button which links you to that page is pretty poor and is movie clip which plays when the mouse rolls over it and stops playing when you roll out. I will try doing the same technique they used but improve it significantly. There’s a button located on the “Scream 4” homepage which is basically an image of the Blu-Ray case which when clicked on links you to the Scream 4 triple play Blu-Ray on This button is pretty poor because the button is completely static and the only emphasis the user has to click on that button is that the rest of the website is bare.
When you select the “enter site” button which is located at the bottom middle of the homepage it plays a very short clip of the movie which is used as a transition and the page quickly fades in from black and the content of the page is loaded. These internal pages of the website contain a silent montage of sequences from the  film which is located in the top left corner of any page. This is feature of the site I really like and I will very much try and implement this into my website.

I have watched Scream 4 and the film itself has some comical scenes which I don’t think this website expresses very well. Scream 4 is very much a horror/comedy and I believe this website presents the film as 100% horror movie so I will try present my film so that it meets both genres.


The official website for Inception is considerably better than the Scream 4 website as the website does consist of multiple pages and includes effective page transitions which are relevant to the movies theme. 
The homepage basically uses a movie poster as a background which displays the name of the cast and director. The homepage has three buttons which link off to different pages these buttons are “Enter Site” ,“Buy Now” and “Watch Trailer” The theme of the website is pretty good and the interface matches the theme of the background (poster).


I decided to research the movie websites for other popular horror franchises such as Saw and immediately I identified some cool features such as pre-loader which has the title of film fill with blood which acts as a visual display of the loading progress of the page. I would very much like to attempt something like this for my website.
I believe the Saw website keeps very much in the theme of the movies but would be considered quite tame to hard-core fans as the movies are quite bloodthirsty.

Inglorious B*******S

One of the key features which stood out for me was the animation which was playing on the homepage background. This feature added life to the page which otherwise would look quite dull without it. The site also processes very few colours and doesn't have any bright colours which make the movie seem like its set some time in the past.

Client Requirements

The sites needs to have at least 5 pages and be about a film which has been released in the last 10 years and needs to include video and images from the chosen film as well as content which is downloadable. The site should have lots of media content and be easily identifiable as the chosen film. The Site must be as interactive as possible and have a very fluent navigation and seem almost organic in most aspects.  The way in which I will obtain the media content for my site would be to obtain content such as wallpapers and trailers from the real “Scream 4” website and then scaling them down in Photoshop so they are available in several different screen resolutions. I must be sure try to keep to my initial “Site Map” and schedule as this is the documentation I would display to the client before completion. I will utilize all of the skills I have learnt so far and implement them on the site.

Audience Consideration

The site should be easy to navigate and all buttons to different pages must be clear. The site must appeal to its target audience “Fans” .The interface must be relevant to the theme of the movie so elements such as the sounds and chosen text must be relevant. The downloadable wallpapers should be available in various different resolutions so that the audience can choose the size which is suitable for them, it may also be wise to have the downloadable videos in various different video formats so that the videos would be compatible with any media player the user may have for example if the user has a media player such as QuickTime then they would likely prefer having the video available to download in a MPEG format. I will create my own skins, backgrounds and even the mouse cursor will be customized to fit the theme. Another factor which I considered during the design of my website is accessibility.
I considered some health issues such as photosensitive epilepsy which may be induced as a result of flash sequences in the website. I tried to minimalize this effect in my transitions and dynamic background effects.  I need to make the website easy to navigate so that the audience knows what to click on so I will be sure implement some sort of visual aid to enable to ensure a button can be immediately identified by the user.

Possible Pages

Home                     Photo gallery                Video gallery          Store
Download            Character Bio page       Games (Trivia)


Theatrical trailer         Wallpaper             Photo gallery         IM Avatars
Trailer & wallpaper download           on screen animation      Site Music

Site Map


Start Date
Finish Date
Complete requirements and research
Produce several mock-ups
Create Skeleton
Create a Skeleton for the website
Create Website
Add media content  to the skeleton

Handover to client
Handover website and documentation to client

Content on pages
(Based on research & site map)


For the initial pre-loader for my website I would like to create a pre-loader which is similar to pre-loader seen on the “Saw” Movie website where the title of the movie is initially white and fades into a red (blood) colour in reference to the percentage the homepage is loaded.


For the homepage I would like to have a static background but has some animated elements. In the “Inglorious B*******S” website there is a static background but has some animated smoke. I would like to try implementing some similar animation into my website which in my opinion would make the page look more lively and professional.


My downloads page would actually be very similar to existing Scream 4 websites downloads page although my downloads page will have much more content to download such as more buddy icons and more wallpapers which I will create on Photoshop. I will also have TV spots available to download on my site as well as any promotional material I may find. The background for this page would also be animated and I will try and replicated some of the effects I have researched.

Info (Character Bio)

The info page will contain various pieces of information about the film such as the plot and character bios. There will be menu positioned on the left side of the screen which would contain the names of characters in the movie. Clicking on a name will result in a description of the character being displayed in a scrollbar. Pictures of the character would also be displayed as-well as a montage of video clips in a video player.




Character Bio


Here is an estimate of the costs which would be involved in the construction of this website.

Domain Name

A yearly price is required to ensure there is regular updating of your domain website. This would be approx. £20-40 a year. 

Hosting/ Servers = £30 – £90 
Most hosting servers provide services which enable you to track various elements of your website for example the amount of visitors as well as other useful statistics.

Total Costs

Working hours
Domain Name & hosting
Additional Resources
Total costs


The site I used to gather information on the characters was:

I was able to collect a small biography of all of the characters featured in my character bio page from this site as well as two or three images for each.

The software I used to create the buttons was “Adobe Photoshop” and the software I used to create the dynamic backgrounds and transitions was “Adobe after Effects”

The way in which I obtained clips from the movie was to browse Youtube for relevant videos and then import them in after effects to enable me to crop them and add effects.

Some other images which are featured on my website were fan-made images found on “”.

Some of the links which I have implemented into my website include links to Amazon and iTunes.

Focus Group / Questionnaire

Name: Josh McManus
Age: 18
Occupation: Business Apprentice

Name: Danny Adams
Age: 18
Occupation: Student

Name: Harry Christopher
Age: 17
Occupation: Shop Assistant

Name: Ashley Baldwin
Age: 17
Occupation: Student

1: What is your Initial reaction to the website?

A: Really likes the transitions and background animations

B: “Looks really good”

C: “I think it looks great”

D: “looks professional”

2: Do you think the interface is relevant to the theme of the movie?

A: “Yes, it's very similar to the theme of the movie”

B:  “Haven’t seen Scream 4 but it matches the horror theme of the previous three movies pretty well”

C: “Yeh, it looks like it”

D: “I think it does but havn’t seen the movie

3: Did you find the site easy to navigate?

A: “Yes, all of the buttons were easy to find “

B: “Yes, the scrollbars on the bio page work well”

C: “Yeh, I found it easy to navigate”

D: “Yeh, it was clearly displayed and there’s no risk of getting lost

4: Do you think the site has smooth page transitions?

A: “Yes, the website works well”

B: “The hallway transition is a bit too long

C: “They are very good”

D: “Yeh, they add a horror feeling to the website

5: Any feedback relevant to the sites audio?

A: “I like all of the audio clips you have used in the buttons and stuff”

B: “The silent video clips work well with the music”

C: “I liked it”

D: “Really like the sound effect for the pre-loader and when the mouse rolls over a button

6: Does the site contain enough downloadable content?

A:  “I would like it if there were a few more wallpapers”

B: “Yes it does”

C: “It could do with more to download”

D: “Yeh, I think it looks better not crowded with content.

7: Do you think there are any existing parts of the site which need to be improved? (Transitions, Backgrounds, Buttons, Cursor)

A: “More content on the character bio page but apart from that it's pretty well done”

B: “its fine as it is”

C: “I think the transition which goes to the homepage such be different each time you click on it”

D: “Not really”

(Analysis of feedback included in “Refelective Analyis” on my blog)


No comments:

Post a Comment