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

Poster Creation | Final Version

The poster has now finally been finished and this is the version of the poster.

There have been some significant changes in the way that we have added some extra logos and conventions to the poster. Two logos have been added to the bottom of the page and using he black space that was available to use, therefore taking the effect away from the isolated, eerie and mysterious look of the poster.

As I have previously mentioned, the colour of the masthead has been changed to enable it stand out when looking at the printed copy of the poster. furthermore we have situated most of the content at the bottom of to page to make sure that the focus of the poster wasn’t all over the place and that the victim of the trailer was easily visible as well. Furthermore I also believe that we have followed the conventions that are normally associated with horror posters such as Friday The 13th and SAW. From this we decided to put everything at the bottom of the page.

And now we have managed to get the poster the way that we want it to be. This is now going to allow us to get feedback on it make some last minute changes, if they are serious or not and then help us to answer one of the evaluation questions which is about what we have learned from the audience feedback given to us.

Final Poster

Final Poster

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.

Poster Creation | Further Development

We have further developed our poster and after planning and bringing together all of our ideas we have finished the first of two bits of ancilliary work.

The poster has been created and the 3 parts that I havent spoken about yet I will do in this post and break down the poster as to how I got the finished product that I am at now with the poster side of the ancillary tasks.

1. Arranging All Files

 This was the part that for some reason took a bit longer than we would have liked for to have done. This was beacause we wanted to maek sure that the tagliens were in the correct place so that it looked professional and not rushed. The title of the poster had been arranged slightly differently and the colour had to changed as well. This is because when we orignally printed the poster the colour of the title was very dark because of the colour scheme which we tried to replicate the colour of blood.  However we had to stick with the original red colour because this was the best colour that prinetd well fo the final outcome.

we were experimenting with different layouts and I think that we must have done 3 – 4 different ways of just moving things around, exporting it to a PDF file and seeing what it looks like without the guidelines that we had on when creating this is InDesign. We wanted to make sure that the whole time this was being created that we were following the typical conventions that we commonly see for horror posters at the moment. Furthermore we didn’t want either the top or bottom to be to crowded with different aspects of the poster.

Layout 1

Layout 1

Layout 2

Layout 2

2. Tidying Up The Poster

Nothing much happened with the tidying up of the poster, however as a whole we were making sure that the poster wasn’t blurry and was looking correct. if it was blurry then this would have taken the whole look of the poster away form the audience and the denotations/connotations wouldnt be as aparent as we would have originally hoped for. But this wasnt the case because the actual cropping of the image made it better and the whole poster better for the final outcome. The layout had been changed on a number of different occasions and this was to ensure that we got the best possible outcome for the poster and that it was correct for the intended tagrget audience that we where aiming this whol project at.

3. Finished Product

This is the finished product for the poster of Forest Of The Unknown. There have been some major chanegs when comparing this to the first draft that we handed in and received fedbcak for. We made sure that the image had been cropped a little bit to ensure that there could more emphasis on the main character within the trailer. The connotations that we wanted to achieve from doing this is that we wanted the audience to fully see the emotion and terror that has been put upon his face as if he has just met the antagonist in person. Furthermore te sole reason of trying to achieve this meant that we had to move most of the features near to the bottom of the page and think that we have achieved this well leaving sufficient space between each feature as well.

A sense of realism is something else that we wanted to have in terms of this lookinh like a real poster for a real film. and the way that we did this was by having the small print at the bottom along with the names of the acotrs and the various company names that where involved in the production, casting and directing of this trailer/film.

We may make some final weeks and touches her and there but with regards to the layout  and the overall look of the poster, we have completed this and now for the next week or 2 we can carry on with the editing of the trailer to make it to the best of our ability as a pair.

Final Version

Final Version

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.

Poster Creation | Bringing Together Ideas

Both me and Sam have both created out own version of the poster within our spare time, when we weren’t carrying on with the website or with trailer. And what we are going to now is we are going to bring the two posters together and hopefully the outcome will be one main poster which will include aspects and key features from both of the posters created.

We want to make sure that the poster has all of the correct angles and content such as title, taglines and other pieces of information ready for the audience to see when they get to the poster and view it for the first time.

With the posters particular conventions and features will be transferred across and one poster will be the final product with all the aspects put together:
In the coming days we will receive feedback from our fellow peers on what is the best poster to use and which aspects of the poster that they like and some aspects that they don’t like and tell us how we can improve it.

The process of getting to these stages were very time consuming in terms of getting the components into the right places to make sure that it looks correct of for the final outcome.

Poster Vol. 1

Poster Vol. 1Screen shot 2013-11-26 at 08.52.31

Trailer Creation|Part 2

The next stage of the trailer creation has begun and there have been some pretty significant changes. The first and main change that has been made by both me and Sam is the content of the trailer. We have decided to take out the final part of the video, which was the interview stage of the trailer. the reason behind this is because we though that it wouldn’t be right to have this as a part of the trailer because effectively this is the end of the film and we didn’t want this to happen. And so as a result we want the trailer to end on a slight cliff hanger because this is the connotation of a typical horror film that we want to give off for the audience.

Screen shot 2013-11-14 at 09.03.07

Back to the creation I have added a static type effect for the video and a reason for this was because I researched other films such as Paranormal Activity which had that static effect which gives off the impression that the film has been lost or that the contents of it is damaging to anyone who watches the trailer. I think that effects like this is going to make sure that we follow the typical conventions that are associated with most horror films that are released. At this stage we are still experimenting with lines and things that will hopefully increase the suspense that we want to have in this trailer.

Screen shot 2013-11-14 at 09.03.18

Furthermore I believe that to give the trailer as much realism as possible we have included the green trailer screen which doesn’t effect the trailer in any way but we think that it makes the trailer look more realistic and like a professional production. There has been further images inserted and other words which will be showing the extent of the film.. This is because at this stage we are roughly 75 – 85% completed in terms of the trailer and what we need to do is we need to carefully go over each piece of footage and the trailer as a whole to make sure that specific audio has been edited correctly an that other background and unnecessary sounds have been removed and that it is to the best of our ability.