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 Amazon.com.
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.
INCEPTION
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).
Saw
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)
Content
Theatrical
trailer Wallpaper Photo gallery IM Avatars
Trailer &
wallpaper download on screen
animation Site Music
Site Map
Schedule
|
Milestone
|
Description
|
Start Date
|
Finish Date
|
|
Documentation
|
Complete requirements
and research
|
23,11,2011
|
05,11,2011
|
|
Mock-Ups
|
Produce several
mock-ups
|
25,11,2011
|
02,11,2011
|
|
Create Skeleton
|
Create a Skeleton
for the website
|
30,11,2011
|
02,12,2011
|
|
Create Website
|
Add media
content to the skeleton
|
2,11,2011
|
04,01,2012
|
|
Handover to client
|
Handover website
and documentation to client
|
05,01,2012
|
05,01,2012
(12:15pm)
|
Content on pages
(Based on research & site map)
Pre-loader
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.
Homepage
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.
Downloads
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.
Mock-Ups
Home
Downloads
Store
Character Bio
Costs
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
|
Description
|
Cost
|
|
Working hours
|
£650.00
|
|
Domain Name & hosting
|
£40.00
|
|
Additional Resources
|
£20.00
|
|
Total costs
|
£710.00
|
Resources
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 “FanPop.com/Scream4”.
Some of the links which I have implemented into my website include
links to Amazon and iTunes.
Focus
Group / Questionnaire
A:
Name: Josh McManus
Age: 18
Occupation: Business Apprentice
B:
Name: Danny Adams
Age: 18
Occupation: Student
C:
Name: Harry
Christopher
Age: 17
Occupation:
Shop Assistant
D:
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)
Storyboard
No comments:
Post a Comment