Images I have created for my Double page spread

I have used a camera off the web and edited it so that it has a printscreen of the robin cam footage.


This is the Tv listings for a whole day. There is also a +1 of these using different colour but practically the same.

Design ideas for listings magazine

These are the design ideas I have for my magazine.

• To keep the consistant green from my website.
• To include pictures of my cats from the video on the website.
• To have footprints all over.
• To keep the theme of the page original so the layout on the right page is completely different to a normal TV magazine.
• To add some comedy to it to make it family friendly.
• Have the listings on the right page.

Research for TV listings Double Page Spread

Looking at all the different TV magazines I have found that there arent any recent channel launches that I can refer to. However in the magazines, they contain a stucture of having a main picture/ story at the top - usually a celebrity, a caption depending on the formality of the magazine and some text or pictures crossing the fold in the magazine. As my target audience is the family, I have decided to make the double page less formal so it is fun and entertaining to look at for everyone.

I looked at What's on Tv and Tv listings magazine. Above is what I noted from them. My real feels about this will be in my evaluation.

The finished product of my website

How I made my gallery page

My gallery is a collection of photos taken at the London Zoo. The pictures may not be amazing quality but I wanted to show my skills in using Java/Javascript embedded in a website as used in the BBC3 website. To make this work, I had to resize the photos twice, once to create thumbnails for the gallery page and again to create sensible sized photos for the display. I used a java applet called Lightbox, a free applet. On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation. Lightbox determines which images will be shown in the modal window through the XHTML "rel" attribute, which is used on an [a] element wrapped around the [img src="" /] element. Lightbox also provides a way to attach captions to images and to run a slide show, which can be navigated using the arrow keys. This worked very well indeed.

How I made my video into a flash video

First of all, I shot the various elements with a camcorder. I roped in members of my family to appear. I then downloaded all the recordings and edited them together in a package called Movie X4 by Serif. This produced a finished video in .AVI format. The next stage was to get the video onto the webpage which was not as easy as I thought. AVI format is not suitable because of it's size so I knew that I needed to convert it to a compressed format, preferably one that could be 'streamed' such as Flash. Streaming would enable the video to play almost immedeately which is important as viewers don't want to wait. Firstly, I tried various free file format convertors from the web but none really achieved the result that I wanted. I then turned to Adobe Flash where I was able to convert my .AVI file to Flash format with the associated support files. I was then able to insert this into my web page where it would play in a window as soon as the viewer pressed the 'play' button. I chose not to have it play automatically as this gets annoying and I also decided not to have it automatically repeat. Furthermore I deliberately omitted the 'full screen' option as this would degrade the quality of the video.

Finishing touches

My website is now finished at http://www.octaveblue.co.uk/AnimalEarth

To finish off my website, I have now created a video of my cats to the song of "whats new pussycat" to advertise the programme 'cat borstal'. I have used really short clips to make the video entertaining and I have slowed down parts and sped them up to give the video an exciting visual effect. This contributes towards the success of my website as the audience will have a better reason to stay online along with the bird cams and the gallery. I am going to edit this video a tiny bit more; adding more effects to make it look more interesting. I am also going to redo the voiceover at the end and increase the volume of it. I will then convert this into flash and put it on my website.

This is the video below

Decision to add a gallery page

As in a lot of places; especially in schools the games page is blocked on the internet. This means that my third page will not be accessible from the internet. I have come to a decision that I should make the gallery false link into an actual link to a range of animal pictures which can open into a professional picture viewer. I am then going to delete the hyperlink of the games page so only three pages are linked.

Making every page look professional

I am adding in text and pictures in the big spaces on the bird cam page and the schedule page.

I have also decided that I am going to remove all the adverts on the robin cam page and insert another cam to go next to it. It will then be a bird came oage with a robin cam and a blue tit cam.

finishing stages of design

I have got to a point where I have decided to upload my website so far to the internet so you can see how it works. The address is

http://www.octaveblue.co.uk/AnimalEarth

If the homepage has a video from google videos on it; I have just put it on there to show how a video will complete it. I will film my own video when the whole design of this website has been completed.

The best broswer to view this site on is Mozilla Firefox because Internet Explorer inserts and removes the odd space in dreamweaver documents that aren't fully encrypted. However google chrom and safari are suitable to view this as well.

Web Forum

I have set up a web forum on my website. There is a link to it on the top right hand corner of the page and there is also a big text link in the middle further down the page.
It looks like this:

Bird cam webpage so far

Research on other page ideas for a TV channel website

Looking at the other pages on the 5 websites I have looked at; I found that each hosted a different variety of features. Most of them however housed some games so I am going to have a go at putting at least one game and some links to other games websites on my site.

Furthermore after not finding something individual enough, I started to go out of the tv channel boundaries and looked at tv soap websites to give me ideas. On the Eastenders website, I found that they had a set of three webcams for fans to look upon albert square around filming times. I decided that this would be a very good idea for my website because I could host a bird cam which relates to the idea of 'animal earth'. My dad and I set up a bird cam in our garden during the month of spring and it has remained there, providing us with a lot of footage of the robins. This has been hosted on my dads website. I am going to connect it so I can host it on my website too; meaning animal earth viewers could view inside of the birdbox live and possibly be lucky to catch one in there.

Research on schedule pages

This is the UKTV Gold schedule page. I have already decided that I am not going to use any of this on my website because it is not the correct shape to house it.

This is the Disney channel shedule page. Again I can't use any of this to help me because the webmaster has used a lot of java script which I am not fully experienced in yet.

I really like the layout of this shedule page for the discovery channel. I can fit this on my page and it is not too complex to input into a page. I will probably use this as a template to make mine. I do not like the lack of colour in this but I really like the confined schedule box which fits nicely onto the page.

This is also a good example of a schedule page from the bbc3 website. I will use this to help me as well. I like the small confined space that the schedule is in. and the amount of colour used in it.

Choice of fonts

After fiddling around with all different size fonts and styles, I decided that microsoft sans serif is the one that looks most professional. Before this I experiemented with comic sans, times new roman, tahoma, ariel,

All the fonts I tried to display in my links bar didn't look right, it looked like an unexperienced student had chosen a pretty looking font.

Below are displayed the word 'Schedule' a few times in the different fonts I used with the one i chose at the very top.

Schedule – Microsoft sans serif

Schedule – Arial

Schedule – Times new roman

Schedule – Comic sans

Schedule – Tahoma

images I have created on fireworks to improve the graphics of my website

There is a grey outline on all of the images I have created because black seemed too bold.

This is the table of links to other websites which are connected with Animal Earth. This is a picture that I have created in Fireworks. When I placed it into Dreamwever, I created hotspots on the real websites to link them to their addresses.

A hot spot is a shape you can drag onto an image in Dreamweaver which is invisible when viewed on any browser. You can then right click on these shapes and make a hyperlink which links a section of the image to a different website. This is a better solution to making a table because tables are hard to make look good.

This image was created by accident. I found an old picture of my cat's eye and a clipart image of some bubbles. I merged them together in Fireworks and came up with this. I decided it would be an effective picture to advertise a scientific program.

This is the image I am going to use to advertise a tv program beneath the video sequence. I have used the image I created by accident because it was a good choice for the name of program I picked.

This small schedule box advertises the brief schedule for the day. I again created this in fireworks. I got the idea of this from the discovery channel website.

Development for the homepage

After making the top of the page of the tv channel website perfect, I started working on the bottom. I found adverts to place there and created the bottom bar with the words "Channel 27 on Sky and Virgin Media, channel 198 on Freeview."

Within a day of editing what I had created previously and a lot of referring to my research, I decided that the website should be square so it would fit any shape computer monitor/screen. I made it square and fitted all of the pictures and ideas in the space so everything fitted perfectly like a jigsaw puzzle; meaning there was no black white spaces. Moreover when referring back to my research, I found that most of the websites where aligned to the middle of the screen. I did this by selecting the option at the bottom which says 'align page centre.'

When I had sorted out the issue of sizing and placing, I found that the navigation bar did not look professional enough to be for a real tv channel website. I played around with techniques and effects and still could not find what looked could improve it. I then went into Fireworks and created a rectangle; filling it in with an emarald setting which I modified from a custom Fireworks preset. I put a rectangle in each end of the navigation bar to neat it up.

When I first began to put my idea together using the pictures I made; posted in the next post, I came up with this. This homepage design in this stage is very weak but the ideas are beginning to shape.

For the navigation bar, I have inputted two extra rows; one below and one above. In Fireworks, I then drew a thick black line which is long enough to fit into the navigation bar. I inserted it into Dreamweaver and placed it into the top row and copied and pasted it into the bottom row. When all the images were in, I resized the rows so it looked like the black lines were the outline of the navigation bar; increasing professionality.

Starting the website

I have started to create my website using the colour scheme of green to help me to get a decent structure.

This is a print screen of the website so far after I have deleted the 1st logo and inserted the 2nd logo. I think that this looks much better and the quality level has increased.
Looking at all the features of websites, I found that they all included search boxes and an a-z of tv programmes so I included that on my website which looks quite effective and it starting to form the boundaries to look professional.


This is the previous printscreen before I improved my site.

Logos for website

These are 2 logos i created for my website, I tried using the 1st one to begin with but after I realised it didn't look quite right so i am now going to try using the other logo. The 1st logo didn't look right with the monkey background in the header because the 2 ideas do not relate in colour and shapes. The shape of this is too square and bold meaning it does not blend in with the header and looks strange.

I have chosen the 2nd logo because it has brighter colours like the monkey and doesn't have a definate shape. Futhermore it still has the same attributes as the 1st logo, but it is just neater.

Pictures I have taken for my website

Ignore the date of which this picture was taken as the date was not set. This is a picture I took of the trees in Danson park which I have used as the background of my website.


This picture has been resized to fit in the news part of the website. This was taken by me at London Zoo.

Names for wildlife/animal channel

I have thought of some names for my tv channel

creature kingdom
channelearth
wildlife uk
cat community
animal earth
animal sector

After looking at these carefull, I am going to use the name 'animal earth' as it has not been used commercially before.

Final initial ideas on TV channel website homepage

I am going to produce a wildlife/animal Tv channel website. It is going to have a strong theme of water and long plants. My colour scheme is going to be mainly green although there will be some blue in there and brown.

Next I am going to list my ideas of names for my wildlife channel.

What I'm going to take away and use to help me in my website

I am going to take away for my homepage

1. The main video being right in the middle of the page or set slightly to the right (disney)
2. A simple theme (uncluttered homepage) which looks effective. (food channel)
3. The logo on the top left hand corner. (all tv channels that I have looked at)
4. The box at the bottom for links and networked pages.
5. TV lineup
6. The use of adverts at the sides and bottom of the homepage.
   

Research on TV channel websites

Animal Planet

• The first thing you see about this website is the "its not all about wales". It captures your attention so you then look at the other features on the website. This is a slow slide show showing the audience what this channel has in store. This takes up the whole of the tiop half of the page.
  
• This design is a lot like the discovery channel as it is by the same people.
  
• The header includes the logo, a search bar and a slogan as the most prominent features you tend to notice in that particular place.
• There is a large advertisement banner at the top of the page which I cut off in the printscreen however I don't think this is necessary.
• The links for other discovery sites are repeated at the bottom of the page but with logos.
• In the middle there is a box of a big variety TV shows.

UKTV Gold

• This website is set out a lot like the bbc website.
• There is a big space at the top of website for logo/header.
  The content of the site is listed across the top of the page, built into the header. The channel number for sky, virgin media and top-up TV are integrated into it too.
  
• The theme of the page makes a strong background the the theme is carried on throughout the site.
  
• The login/reigster part is located underneath the header rather than in it and has a site search under that too but more graphical.

• In the centre of the page is a slide show of highlights of the week, upcoming exciting programs that the channel wants you to watch.
• To the left of the sideshow is a link to clips on the site, but no actual videos.
• Below the slideshow and still really in the middle of the page are advertisements of facebook, people wanted for presspacks and competitions.
• There is also trivia, a couple of advertisements at the bottom that you can't see when you 1st navigate to the page and a list of gold stars who are loved by the gold viewers. This is displayed using pictures and when you hover you mouse over it, an arrow points at it and reveaols information about the actor/star.
• At the very bottom of the page is a small space for quick links to other sites. This is just done in plain writing because it is no very important.
  

Food Channel

• In the header, the logo is set in white on its own. Underneath but still built into the header is the list of content on the site. The strip for this is in a different colour to the header. Also in this green stip is a site search bar.
• There is a place to sign into the site to get more specialist info on food.
• When you 1st navigate onto the page, you see a slide show of pictures of food advertsising dishes and opportunities.
• Below the slide show is a 'featured video'.
• To the left of the featured video is the 'recipe of the day'
• All of the parts of the site that the Tv channel wants you to spot 1st, are there right staring at the audiences eye.
• To the very right there are advertisements are twitter pages and surveys which obviously earn the channel and twitter, money. These adverts go right down to the bottom of the page.
• After that is a long list of the resturant/food related news which is laid out quite a lot like the bbc websites.
• There is no theme for this page, its just plain. The only theme I see is the green strip across the top of the page which shows life and health.
  

Disney Channel

• As soon as you open up the page, a video in the middle automatically starts playing to get your attention, however some audiences may find this annoying if that starts everytime they refresh or go back to the page.
• In the header of the page, there is a big space for an ad. The list of content of the site are listed along the top but below the ad. The disney logo is integrated into the side of it.
• Below the content of the page, there are 9 picture of disney shows that get bigger when you move your mouse over them. These are links to the pages on the shows. Furthermore there is a link to the side of this saying to click there to view the rest.
• Located in the centre of the page, including left and right are the 'what's hot' and 'what's on TV' etc. This makes it easier to find.
• Underneath the middle section is a box with games advertised in big bright colours. This site is obviously to amuse kids.
• At the very bottom of the page is graphical links for arts and craft printouts and e-cards. This is just a bit of fun.
• There is only really one paying advertiser on the page which isn't clearly seen when you 1st navigate onto the page.
• The whole site is themed with a deep blue and a pattern in the background which looks like the whole site is placed into a crystal ball, relating to disney films such as cinderella.
  

Discovery Channel

• Advertisement banner across the top of the page.
• Header includes logo, a site search bar, links to other discovery sites without the logos, links of the discovery shop, a discovery travel site and the list of website content across the page attached to the head but underneath the bulk of it.
• The top video of the week is located on the right hand sites and has a list of 4 more top videos to watch.
• On the left hand side of the page, there is an advertisement for the most devastating/exciting news. The discovery channel clearly wants to try and explore the causes and fascination of such events which will draw in an audience.
• Below the devastating news, is a column for recent discovery news, features and a list of games.
• In the bottom right hand corner is the listings for today and a link to the rest of the listings for the next upcoming week.
• The links for other discovery sites are repeated at the bottom of the page but with logos.
• In the middle there is a box of a big variety TV shows.

bbc 3

• Big space at the top of website for logo/header.
• The content of the site is listed across the top of the page, built into the header.
• All of the video links and highlights of the week is set in the middle in a big square to look like a big TV.
• Listings along the side of the page to show the days of the week rather than the highlights but take up much less space.
• There's a Tv programmes a-z section on the top right hand corner which is clickable and links to the programs in chronological and alphabetical order to show what is on TV or what has already been on.
• Above the big square of showings there is an advertisement for programs to boost ratings which changes every now and again.
• On the right hand side of the page there is a news bulletin that states the most recent news. For example today, (16/9/09) it says: Dirty Dancing film star Patrick Swayze dies aged 57 after a long battle with pancreatic cancer, his publicist says.
• BBC header is at the very top to show that it hosts the bbc3 site.
• At the bottom is all links to other bbc hosted sites, for example, bbc radio, cbbc, bbc1 and bbc hd.
• Under the big square, an advertisment of i player has been made and links of yet 3 more links to well reccomended programs. This makes the page easier to navigate.
• The theme of the page makes a strong background the the theme is carried on throughout the site.

Decisions on what brief to create.

I have looked at my ideas for both briefs and have come to a conclusion that the Tv channel website brief will help me produce the best possible outcome at the end of this project.
I shall start planning my final initial ideas to help me move onto some solid material.

Tv channel website ideas

City drama channel

• A strong header with a logo which remains the theme throughout the whole website.
• city theme (i.e. cartoon buildings or something along those lines)
• Dark colours, pictures of street lamps integrated into the site.
• video footage located just overthe middle of the page to the right slightly.

Wildlife channel

• A strong contempory header which doesn't look out of place with green and wildlife pictures.
• countryside theme
• light colours, mostly green.
• video footage in the middle.
  

Ideas for a movie trailer

IDEA 1

• Strong voice over
• fast cuts from different locations
• action
  
• fast music with a strong beat and a tempo of around 150
• Actors dressed in suits and dark glasses with black brief cases
• scene mostly at night
  

IDEA 2

• Strong voice over
• slow cuts from different locations in the countryside
• drama
• music with strings and a lot of legato notes - tempo of around 120
• scene mostly in daylight but one inside the house at night.
• Girls in flowery dresses and bonnets

Ideas for a music video

Music video
Inspiration comes from ‘She left me’ by Go Audio.
www.youtube.com/watch?v=DBvRXi53bAs

Plan of video:
2 establishing shots of the scene/band.
Close up of keyboards.
Close up of guitar.
Cut away to story of 2 people walking in a gloomy rainy looking park.
Cut to close up of singer singing.
Shot of the whole band.
Close up of keyboards.
Quick cut away to the people in the gloomy park picking up an umbrella which has holes in.
Shot of the rain coming down from below.
Cut to drumsticks hitting snare drum from below.
Cut to bassist’s face and then move the camera down to the fingering of the bass line.
Shot of singer singing again.
Cut to park – 2 mins of park footage. Car comes, people hitch a lift and find patches for the umbrella and duct tape. They fix the umbrella and get out of the car just as the sun comes out. They then look depressed but look up and see a hot air balloon at the end of the park. They rush towards it.
Cut to keyboards.
Shot of guitar.
Shot of singer.
Shot of DJ.
Shot of drummer.
Shot of the whole band.
In the end....\/
Hot air balloon going up in the air and floating in the distance.

How can I achieve this?
Film the shots of guitars and keyboards separately with people who are easier to get hold of and then film the establishing shots on a day when the band/ group of volunteers, can make it.

Research

I picked out a few of the given briefs and have researched what each of them involve and include.
Here are my findings:

Film trailer

• Short - about 1 min 20 secs long
• Lots of action, characters and locations.
• Doesn't reveal whole story, but introduces the basic premis.
• Voiceovers
• Loud sound effects
• Music
• Name of prominent cast members
• Quotes from reviews in writing across a black screen.
• Begin with names of production company and studio
• End with title and then release date of the film
• Begin with a slightly longer extract of film without music, then music and fast cutting kicks in.
• Extract not in chronological order, but an order which introduction premis, main theme and highlights (funny, sad, sfx etc)
• Music buildto a climax which occurs just beforetitle and release date
• More fade outs
• Changes in tone
• Close ups that are integral to the plot

Music video

• Often have bright/contrasting colours
• Energetic
• Cuts match the rhythm of the music OR match the pace of the music e.g. slower fades for slower songs, quick straight cuts for faster songs
• They suit the particular genre of the musoc, e.e. aggressive theme/imagery for rock music, club theme/imagery for dance music etc.
• They always tell a story. Sometimes have an acted prologue or epilogue to set the scene or conclude the story
• Similar to films they have establishing shots and close ups to shot emotion
• Cuts in between band and story
• Lots of cultural references
• Close up of the insturments being played
• Extreme angles to emphasise emotions
• Tendancy to use handheld camera rather than other cameras on tripods or pedestals
• Huge variety of bugets depending on wealth of the band, genre and where they were classified in the charts depending on how much they were earning
• Generally innovative use of camera and effects.

Commercials

• Usually set in the same location
• Like music videos, use a range of angles and cuts
• Usually have a musical soundtrack/jingle
• Close-ups of product and emotional reaction to product
• Sometimes focuses on brand building rather than product
• Always have a slogan that they go back to
• Focus on the senses to create an appetite
• Use attractive models/images to sell things (the brain remembers such things easily)
• Tend to stick to one location
• Use humour and irony (the brain also finds it easy to remember funny things)
• Generally try to be innovative
• Almost always finish with the brand or corporate colours
• The action/themes/images don't always have a strong connection to the product but are memorable
• Sometimes use 'ordinary' people
  to help audience relate to them
• Use innuendo and double meanings
• Celebrities are used to raise a high profile
• Use a 'visual slogan' -> Adsa advert - for example an action that is associated with company/product.

Soap opera trailers

• Horror and tragedy - generally extreme emotions - something nice about to be destroyed by something nasty going wrong (emotionally contrasting plotlines)
• Lots of action
• (Melo)dramatic
• Specific characters - focus on heroes, villains and victims
• Cliffhanger endings (lie the episodes)
• Lots of short scenes of specific characters speaking
• Hints of revelations of murky past
• Dramtic soundtracks
• Voiceovers
• Echo effects
• Ends with title of soap and schedule info (channel, day and time)
• More hysterical emotion than could possibly be contained in one person's entire life, let alone a week of their life (even in the self admittedly self obsessed and emotionally supercharged world of a kent girls school)
• Lighting tends to be dark, flashes, short cuts to empasise the tragic emotions.
• Repetition of schedule information
• Use of soft focus to emphasise romantic scenes
• Use of block and white to signift dreams and flashbacks.

Websites

• Bands - prominence given to image of band and/or band's logo
• Soaps - prominence given to flash player window in the which you can play an extract from the tugid rubbish that somehow captivates the attention of millions of viewers
• Bands - use imagery and colour schemes which are associated with the band's image
• Bands - Lots of links to whatever the target audience might be interested in - new photos, upcoming gigs, websites where you can download (for money) their music. Adverts for related products and services.
• Soaps - homepages seem to be plainer - more empty white space. Channel logo prominent at top of the homepage.
• Band - Use fonts and logos associated with the band and its style.