Website Creation | Part 3 | Construction & Completed

For the third stage of the website creation we have moved onto and we have made some significant changes to the previous post that was based around the website. After deciding on the structure and layout for the poster we then had to decide on the look of the menu bar which is so common on horror websites but specifically websites.  We also want to make sure that we are always following the conventions associated with horror websites.

And due to time constraints, the website has been optimized for Google Chrome andSafari. This means that it will look at it’s best in this browser, and will not look as good in others.

the first decision that we had to make was what font we where going to use and which one would look best on all of our products. We searched into it and (the five fonts chosen are on a previous post about the specific fonts) we came up with the final one. The final font that we decided that we would us is called BloodFeast.this was the choice of font because it looked right for the genre of film that we have done for this trailer.

The first stage for construction was the to build the background for the website because this is where all of the links and the location of content is going to be when the website has been completed. Furthermore it will have to be adjusted in order for it to be zoomed in and out correctly within making it look messy and unprofessional.

The top of the page is going to include the trailer for this because when looking at examples on the internet we have noticed that the first thing that they display is the trailer to draw the attention of the audience into the film through the trailer. furthermore on the left hand side of the website this is where the audience will see the menu which is going to include links such as Plot, Characters, Behind The Scenes, Reviews, Trailer etc. This body for the menu is going to be a drop dow function to hold all of the information for the pages and to also save space.

Background For Website

Background For Website

This is going to be the main look of the website where it will be separated into sections with the different ancillary such as the Poster and trailer.

We also had to ensure that the ‘video’ was located in the very middle of the section (horizontally, not vertically) as to allow it to work well on different sized monitors and screens but also so that it could be zoomed in and out correctly without losing focus for the trailer.

Once the basic layout was completed we could then start to physically add in the content and so the first thing that we added in was the section for the trailer. We went for the colour scheme of red and black because this is a good connotation of blood, evil and danger. Evil was the effect that we are going for because ours is based on an evil spirit that has a psychological impact on the characters within the trailer but hopefully in the audience as well.

Character Section

Character Section


For the next stage of construction we wanted to make sure that the character section included character profiles which had an image and a description about their characters within the trailer. A border will also be added to the images so that it ties in with the rest of the colour scheme. All of the fonts and colour schemes are going to be the same because it means that it looks even more professional but also it looks messy and not planned correctly if there are 3+ fonts being used a one point. place holder text has been put in place so we can see what the text will look like and what the final page for this section will also look like in  the eyes of the audience. Furthermore the connotations of the colour scheme and th font is going to be key because of the effect that we want the trailer to have on people.

Place-holder text

Place-holder text

Because this is a one page website, we have to display the images on the actual page, but doing that will make it look really untidy and messy because they wouldn’t be perfectly in line with one another or they may be different sizes depending on the image selected. This is why we are going to use something called a Lightbox. A Lightbox allows the use to click on a smaller version of the image, then be able to see the full size version appear on the screen. The first step in this is to place the images on the page and then we will make the image appear over the top of the rest of the webpage. The buttons will also allow them to view the next image without having to hit “CLOSE” and then open the next image that they wish to view.

"Now" and "Next" buttons have been added so the next image is available

“Now” and “Next” buttons have been added so the next image is available

The behind scenes video is going to be where we have the unused photos and video just to see what else we did whilst we were recording the trailer. the video has been made an edited on iMovie and has then been uploaded onto YouTube. The embedding of this video was very easy because all we had to was select the “embed” tab on YouTube and then copy & paste the coding into our coding for this section of the website.

The review has been done exactly the same as the other pages but instead we have just added some images and reviews that we made for the website to make it look more professional and to make sure that we continuing to follow the typical conventions for websites of the horror genre.

Review Section

Review Section

The cast and crew were the next section that we constructed and this came about from the first load of feedback that we received for the website.

All that we had to do was that we had to add another section for this part of the website. We used the images from the profiles section because it had the red border and kept in with the appropriate colour scheme of this trailer (red and black).

I will put the description of the person directly below the role of said person, which can be seen in the screenshot below.

Cast and crew which will have a description about the actor.

Cast and crew which will have a description about the actor.

And finally all we have to construct is the menu bar on the left hand side.

As I mentioned right at the very start of this post, the menu will be housed in the left hand side of the website. Also the title of the website (Forest of the Unknown) and the Global Productions logo will appear in this section.

The same colour scheme has been used throughout the whole course all the ancillary work because we wanted to keep connotation of horror and other evil related connotations.

The title of FOREST OF THE UNKNOWN was made using Adobe Photoshop and was then imported to create the top of the menu body.

When making the menu for the website, we wanted to make sure that we kept the same colour scheme and use the same font that has been used on the rest of the website.

When thinking about the type of menu that should be used on the website, I thought that an expandable and collapsible one would best suit the needs and requirements of our website.  As I have previously mentioned,, it would be used to cover all sections of the website, in the amount of space that is available on the website, while still having the font large enough to read.

New Menu Bar With The Title & Contents

New Menu Bar With The Title & Contents

The included items such as the Cast & Crew will be added into the collapsible bar on the left hand side, because we where originally going to have just the cast and crew at the bottom underneath everything but this would have made it look untidy and isnt a main topic for the website anyway unlike the Trailer, Poster, Behind the Scenes etc.

Logo Situated On The Bottom

Logo Situated On The Bottom

Added sub-item

Added sub-item

The website has now been completed. The different sections and content of the website have been added in the main menu now allows the user to navigate their way around the website.

I feel that overall, the website achieves its goals and fulfils its purpose of informing the visitors about the plot of the film, and characters, and the various people who were involved in the production.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s