design

This was my first of many mock-ups done in photoshop, I decided to go with this one and started to code it, I could chose a different colour scheme light or dark. I have featured the dark version

 

I liked this design I thought it had a similar structure to the research I had done, however when coding it I found that some of the design elements were not working and didn’t look as nice as it did in photoshop, so I decided to go back to the drawing board.

After looking back at the research I decided I need something more simple, as after all it is a trailer website. I knew I needed a focal point this could be images or a video in the centre of the screen. So I came up with a brief layout for the front page

While looking back at my old design and carrying out in photoshop I realised that I needed to design it with the code rather than a brief design in photoshop first. This came out to be less time consuming, and fewer problems arose, while designing it I also looked at my peers for some design advice so I did not do it myself, as this was the problem previously. My goal was to make it simple and modern.

Coding

What I included on the homepage I used some JavaScript to change the picture on a timer of 2.5 seconds, this consisted of three images shown below.

(var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",3000)
)



 The next thing was to embed the video and an image rollover effect on the second page :

<script>
  function getVid() {
   return document.getElementById('myVideo');
  }
  function pressedPlay() {
  getVid().play();
  }
 
  function pressedStop() {
  getVid().pause();
  }
 </script>
 <script>
   function swapImage(targ, src) {
    targ.src=src;
   }
  </script>