Website Buttons

We created our own buttons to place on to the website down the right side of the site. These will resemble the recommended buttons that usually send different links to other videos that they viewer might also like to see.

• Firstly I took close up images of the recommended for you text bellow the name of the image, however this is the only section that I will be able to retrieve off of YouTube. After selecting these areas I placed them into a new image on Photoshop and used the text tool to create the titles of the videos. We will have links to home, gallery, film and plot, behind the scenes and meet the crew. We selected these names as they were commonly seen on websites that fall under the horror genre.

• Finally I had to add the images to create the ‘thumb nail’ of the video and link. I selected images that would refer to the section that they want to go to, for example for the home page I included an image of an abandoned house. When making the buttons I had to make them individually in order to place them onto the Wix website creation service that we are using for our project.

These were the final results for the buttons:

Practical- Changes to website

Our website design had a problem with the framing as when you scrolled down some aspects such as the video and title also moved therefore merging things together. Another problem we encountered was when the website was viewed on a computer some of the features could not be seen due to the banner at the bottom of the page and our sizing was according to our website being displayed on a mac.

As our website already had the correct layout we just needed to sort out this problem by scaling down our whole website. So instead of creating a background that included the all of the YouTube features such as the search bar at the top and different boxes for each of the features we would have to create all the images separately and place them onto the website seperately some examples are shown below.

I  changed the background so that it was white. From there I added in the images that we originally had on the background as shown above. All the other images and buttons were already on the website and just needed to be made smaller. After receiving feedback we also placed our production company on the search bar at the top of the page and moved the social media links above the advertisement. 

I then added in the comments below the title as another image. I changed the website to fit the screen of my computer so the images weren't as large they were on a mac this also meant that you wouldn't need to scroll down so the images wouldn't merge together. 

Next I rearranged all of the spacing to ensure that the video could fit in and didn't look to wide or long when I placed it onto the website. I se the video to play automatically when the website was opened.

As the YouTube website has a grey background and there are a few white boxes that are behind the features on the YouTube website. I also tried to recreate this. Firstly, I set the background to one we had made.

However, as the features on the website were smaller they didn't fit in the boxes so I used them as a guideline and put my own boxes in to create the layout.

I had to find the correct colour to make sure the boxes blended in with the background.

I then had to create the white boxes to fit around the comments, title, buttons and number of views.

With a few last tweaks such as making the YouTube search bar stretch all the way across the screen by making more white boxes and also making sure the whole background was grey the website was complete. Here is what it looks like:

Creating an Advertisement- Website

In order to create an advertisement I needed to choose my background image. As we had already decided that we wanted to advertise a horror experience I found an image of some woods and a clown which I would then merge together on photoshop.

I used the woods as the main background the layered the image of the clown on top. Then I changed the opacity of the clown so that the woods could be seen behind and the clown looked as if though it was lurking in them.

As found in my inspiration I then needed to put what the advertisement was for so I wrote 'Halloween Horror Nights'. Similar to all of the other advertisements for horror experiences I decided to base my ad on a series/film so we decided on the name "Smiler" as the clown can be seen with a sinister smile.

Using paint I downloaded a font that I thought would be suitable for the poster I then changed the colour to red which is commonly found on horror posters.

Lastly, I put a few logos, the name of our production company and 'Terms and Conditions apply. Subject to Availability" at the bottom to make sure it was clear that this is an adverisement.

 The final advertisement looked like this:

It was placed at the top right corner of the website to make it look as similar as possible to the YouTube website.

Practical: Assembling the Additional Pages for the Website

In this task, I created the corresponding pages for the website, including a page for 'Gallery', 'Film & Plot', 'Behind the Scenes' and 'Meet the Crew'. Although our homepage contained the majority of the key information and content required on a promotional website, it was imperative that we produce such pages to encourage the audience to watch the film.

The Pages:

The process for creating all pages was the same; by clicking the grey 'Page' box found along the top panel, I could add and label new pages. 

The first page I created was the Film & Plot page; the background image was maintained across all pages and thus, we were limited with layout. Where the black screen is situated would be the root location for all information regarding each topic. To differentiate each page, I changed the title from 'Captured' to the corresponding page title.

This image shows the Behind the Scenes page. Potentially, going further, we could alter the black video area to show a gallery of various videos, containing different interviews or backstage footage.

For the Meet the Crew page, once again where videos can typically be found on the black area, we could include different links to character and crew profiles, with images and descriptions about their personality. This is a common feature for many promotional film sites as it allows fans and audiences to see directors and actors that they may like, thus allowing them to immediately identify as to whether the film could be one that they would enjoy. 

Finally, the screenshot to the right shows the Gallery page created. On this page, as indicated in the image, I inserted a Gallery feature found in the control panel on the left hand side. On here, we would upload various photos taken from the film itself but also of the crew and the filming and production stages throughout the film process. 

Evaluation:

We carried out vast amounts of research into investigating different promotional websites in order for us to have a better indication as to the sorts of pages usually available for our genre. For this reason, we were more prepared when creating our site and thus, the different pages created were appropriate for our genre, allowing for a professional and successful promotional website. 

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. 

Advertisement Inspiration- Website

Our website has a design based on YouTube so I am creating an advertisement that can normally be seen in the top right corner of the YouTube website as shown below.

The advertisement should follow the genre of our trailer which is slasher horror. So we decided that it should be for a horror experience. To look for inspiration I found some horror experiences at Universal and looked at the posters, The posters all involve people as on the experiences people are often dressed up to scare the visitors. The images themselves show gore or masked killers which make the genre and target audience clear. Another common feature of the posters was that the themes were based around horror films/series such as The Purge and Walking Dead and the text was placed at the bottom and the top of the poster so that the image can be seen clearly.

                  

The colours involved are dark and gloomy and the text is in Serif whereas the film/series names are in Sans Serif. In order to see the text against the dark backgrounds the colour white or red is often used. 

At the bottom of the poster small text is used with the name of the company and stating that it is all rights reserved along with this there are a few logos such as the production company of the film/series and the Universal logo.

YouTube ads are often selling a product and entice the audience to click on them to view the website. Therefore, on my ad I will add 'tickets are available now' to make it similar to normal advertisements where viewers have to click the ad in order to buy the tickets and see other specific details such as the exact dates of the event and where it is taking place. This then means that the ad does not need to be overloaded with information and a few key points can be shown.

Evaluation

I think that the main image needs to link to the slasher horror genre in order to convey the genre clearly and show that this is for a specific audience (fans of horror). The poster should be the same genre as our trailer which is slasher horror.

Minimal writing should be used therefore only the key points such as what the horror experience is based on (film/series) and what the actual event is, 'horror nights'. The month of the experience along with 'tickets are available now' would also be good to add to make it clear that this is an advertisement and not just a scary image. Finally, the bottom of the advertisement should have a few logos and some small writing such as 'terms and conditions apply' to add to the fact that this is an advertisement.