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

trailer

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.

Advertisements

Website Creation | Part 2

After the first stage was completed of thinking of ideas and choosing the basic layout/content that we where going to use, we then had to decide on two “prototypes” that we would quickly created to get the basic view of how we wanted the the website to look like when we completely finish it. And so as result we did two designs and then once we had done them we would decide together which one would be better appealing not only to us but to the audience that we where aiming this website at.

Design 1:

We wanted this design to be a basic first layout but we had to make sure that it followed the conventions that we looked at when we constructed the research for this task. And so on this layout we have done a basic but very effective layout of having the information there are ready for the users to see when they go onto the website for the first time. The title and menu appearing at the top, with the main feature below, more content below that and then the footer. Not only this but the website will have a navigation menu that involves taking the user to different pages of the website. We will have top make sure that the features and typical conventions are clearly visible for the audience.

Prototype1Draft1

These are just the first conventional mockups of the website and we have just been playing around and checking to make sure that the basic layout of the website is good enough and going to be well placed for the final design. furthermore seeing as this is just a mock up we haven’t inserted any other parts of the project such as the trailer and poster because that would seem like a lot of work for just a draft mock up but we are constantly thinking about this as well. As a result this is going to mean that the user will spend a bit of time scrolling down the webpage to find the content and this something that we will have to take into consideration before deciding on the final website.

Design 2:

For the second design we have decided to go for something that subverts the conventions normally seen of for website based around films. Subverting can be seen as a good thing because changing some of the rules ever so slightly can be the difference between a good website and a brilliant website. And so as result we have made a linear displayed webpage and this design to decide between.

Depending on  what design we want to go for there is something that will stay the same and this is the content of the layout for the websites. We are going to have:

  • Home
  • Behind The Scenes
  • Cast & Crew
  • Review
  • Story

The order of this may change but these are the tags that we are going to have and they will have the individual information that is needed for each section. However if need be we may have to get rid of some parts because we may not create that bit of content because we may not have time and we may feel that it isn’t needed but this will change and progress as we go through the project.

Prototype2Draft2

Verdict of Designs:

After some talking and speaking to our peers we have decided to go for the second design because this means that we are going to be able to add more content and make the website look more appealing to the target audience and to other viewers of this website. There will be section that will be completely devoted to the trailer and this will have the trailer linked to our YouTube in which the trailer will be uploaded to either my channel or Sam’s channel. Here is a very simple colour scheme on this website, there are three colours used here. Black, Red and White. These colours allow the user to easily see the content on the page without having to strain their eyes too much. This differs from the top design because there is only one shade of red (#660000 incase you’re interested) whereas on the first design there were multiple reds, overpowering the rest of the page.

Website Creation | Part 1

This is the next stage of our ancillary work and this is the website that we are going to have in which it will support our main production of the trailer for Forest Of The Unknown. This is going to be a fully functioning website and will follow the conventions and relate to the research that we did top see what makes a good horror website and what makes it a successful one as well.

One of the ancillary products that we have to create is a website homepage for the trailer. This will be what a user will see upon entering the website. I feel that this is going to be the part of the project that I’m going to enjoy the most.

There are a few steps that we have to undertake when creating a website. The first of these steps is planning. We will be planning out various designs to ensure that the website is going to look the best for the second part of our ancillary project.

Then the next step is to create mock-ups of the site using Adobe Photoshop  or a similar product to see exactly what the website it going to look like once it has been built. Some changes may occur from the original Wireframe, or even from the finished product.

After this, you actually have to build the website using Adobe Dreamweaver or another product. Dreamweaver is going to be our preferred choice because we have some experience between us and together we can help each other if need through the further stages of development.

In these posts, I will be detailing how we are making the website and the fundamental steps of creating the webiste and the specfic decision that we had to make.