Practical: Assembling the Website

In correspondence to our trailer, we were required to produce a promotional website containing the trailer. I was in charge of the placement of the relative components on the site, such as where to position the trailer and title. The overall look of our website was to look like the YouTube site; this was to coincide with the narrative of our teaser trailer, whereby the online blog used to submit the torture videos was YouTube.

YouTube Site:

As mentioned above, we wanted our promotional website to resemble that of the YouTube website. Attached below is a screenshot taken of one of the videos from YouTube:

As the image shows, the video itself is the main feature on the page. There are then comments and descriptions underneath the video and other video links and advertisements in the right hand panel. Like many successful websites, there is also a header at the top of the page containing the YouTube Logo, a search box and typically, account details for regular users.

Setting Basic Aesthetics:

Firstly, using the control panel on the left hand side, I chose the image created in Photoshop (highlighted above) and clicked the button 'Change Background'. This then created the background of the website to look like a YouTube video page. I then added the title, using the 'Text' option on the left hand side to insert a text box and input the film name; using the settings option, I was able to manipulate the font and size to make the title more appropriate for our genre.

When previewed, we found that the background would move with the scroll bar, whilst the test and video would remain in the same place; this did not look professional nor provide the desired look in terms resembling the YouTube website. For this reason, we made the header and footer for each page smaller and also set the background image to 'Freeze' under settings (pictured above) in order to fix the screen. I also inserted the social media menu using the same control panel, which is situated in the right hand margin of the website. 

On the same panel, I selected the 'Video' option and from 'YouTube', attached our trailer onto the site. We wanted the look of the website to resemble the YouTube screen as much as possible in order for the website to coincide with our plot and hence, we placed the video on the black screen where uploaded YouTube videos would be found. The title was then placed below this to represent the title of the trailer, much like would be on YouTube also. 

Animating the Title:

The 'YouTube Play' logo, as evident, was attached in place of the 'E' in the title 'Captured'. To make our site more interactive, I added animation to the image; this was completed using the 'Settings' icon which appeared when the image was selected. From here, I selected the animation 'Fade'.

Additionally, it was possible to customise the animation set by manipulating the duration and delay. As the image depicts, I set the duration to 0.5 seconds so that the fade was obvious when the site loaded, but not so it was too slow where the effect would be lost. 

Adding Buttons: 



This image shows all of the buttons once they had been inserted onto the site

The buttons were creating using photoshop prior to assembling the site. Under the control panel on the left hand side, I was able to insert the pre-existing images created that were in a 'JPEG' format. In order to continue with out YouTube theme, I positioned the buttons on the right hand side of the screen, in the panel where additional links to YouTube videos would normally be placed. I then repeated this process for the remaining 5 buttons.

By selecting the 'Settings' icon once each button image was selected enabled me to add links so that when clicked, the website would transition the user onto a different page. As the image attached above shows, this was done by selecting 'Page/Anchor' and then setting the 'Which Page?' option to the desired page. I repeated this process for all remaining buttons.

Getting the Final Look:

When the website was then tested in the 'Preview' view, I discovered that since I had assembled the buttons only on the homepage, there were no navigation buttons on any other pages. To improve this, I discovered that when each button was selected in the edit mode, there was the option to select 'Show in All Pages', as indicated by the orange slider in the right hand settings panel. By selecting this option for all buttons meant that they could be viewed and accessed across all pages.

This screenshot shows the finished website in terms of positioning for the first draft

Evaluation:

Overall, I feel that I managed to achieve the design desired as, when the website is accessed, it clearly looks like the YouTube website. I would also say that this specific design was very creative and innovative, which captured our concept extremely well, coinciding appropriately to the narrative of our trailer. Since many people are familiar with YouTube, our website will be easy to understand and navigate as well as effectively promoting our film.