Research on other websites

I have found one particular website that had caught my eye, and I found that this one was very similar to what I was trying to create.

The site is called Cbeebies, the site is www.bbc.co.uk/cbeebies.

Here is a screen grab of what the site looks like, as you can see it is very colourful and bright this is because the target audience is very young and like this sort of website that can keep them interested.

I had taken a screen grab of the story page, where they put all of their animations to show to the audience. Here they have a more extensive range of animations to what we have been told to create, therefore they are able to had different pages to show them. For example they have an A-Z section so the audience are able to look through all of the stories in alphabetical order. They also have a section called Our Picks this part shows what stories the creators would recommend the viewer to watch.

All in all I like the style of the site, however I feel for the brief at which we have been set, having those sorts of colours probably will not fit in with the theme, therefore I will be coosing different, less bright colours for my interface. As a reference though this site is good to look at because it is very popluar with the my target audience, which is 5-7 year olds, therefore I can use this to make my website better and more pleasing to the eye, as well as make the audience more engaged with my site.

Assignment 5 - Interactive Design

In this assignment, the brief is live and I am having to create an interactive flash animation, at which tells a story. The target audience is 5-7 year olds. The client is Treasure Island Toys.


Within this project we are each having to decide which story we are wanting to animate (most of the stories are already written), and after reading all of the stories provided I decided on Berite and The Egg.


The characters that are in this story are:

Bertie

Pecky

Mummy Bird

Baby Bird

Bertie and Pecky were already created by the client, however due to having other characters in my story I then had to create mummy bird and baby bird myself.

The reason why I have put an orange rectangle around baby bird is so that is stands out from the white background, however in the story there is a green background therefore the box will not be there.

Validating My Work

For this project I also had to validate my html on the Internet using W3C Validator.

http://validator.w3.org/ This way I can see if my website is compliant with the web standards at which the W3C upholds.

Here is a screen shot of my work when I copied and pasted into the correct area on the site.

Once I clicked on the word validate, I had found that within my code I had got 9 Errors and 1 Warning, (Errors means that you must fix the problem and Warnings means that they advise you to fix the problem).

I had looked through my work and I had tried to fix some of the problems that were accoring. Some were easy some were harder, however when I had tried to fix all of the problems my website worked in Internet Explorer however it did not work in Firefox or Safari, therefore I had to go back and have a look at what I needed to do to correct this error.

When I looked through the coding I had found that some of the conditional comments in my header section that linked my html to the correct css was not correct therefore I had to go back and correct the conditional comment, this then was flagged up again when I again placed it into the validator.

Here is what the errors look like on the site:

They are listed in a very organised way, however, I did not understand some of the problems that I was having and the way that the website had worded the problems, I therefore asked my tutors.

After all of the problems I had fixed all that I could, even though I cannot fix them all I will still be trying to find out what is wrong.

Background Colour Changes

After showing my website to my peers and tutors someone had suggested for me to maybe change my background colour so that the middle area stands out more.

Therefore here are a few screen shots that I have taken to show what variables I have done:

However, after experimenting with different background colours, I had decided to stay with my original idea, this is because I was initially wanting to create a simplistic and easy to understand website, therefore I will be keeping my original design, of the white background.
As demonstrated here:

Graphics Continued

For my Moods page I did not know which images I wanted to use, and due to the fact that I had created all of my images on my website I wanted to create these as well.

I first thought about using 2 images that I had found from the internet, the reason that I had chosen these was because I wanted to show how different colours affected the moods of an image or picture.

Both of these images would have been good for this page because both of these are showing how colours affect the moods, however I found that I wanted to use something a bit different.

I therefore decided to use my own images that I had taken myself previously.

This is an image of Ayres Rock that I had taken about 5 years ago, I chose this image because of the heat that the place has and what I want to achieve at the end.

I have changed the shadows and highlights to blue and I then placed a blue object over the top and I decreased the opacity to 25%, this is to give the illusion that the hot place is actually cold.

I then thought that I would have to do another image however I would do the opposite and use an image that is cold and make it hot.

This is a photo of a field that I had taken when it snowed heavily. I chose this image because of how cold snow is, and I want to change the image to achieve the end result.

I have changed the highlights and the shadows of the image on the left to yellow/red, I also placed a yellow object over the top and then changed the opacity to 25%.

Both of these images I have chosen for a specific reason as I have said before, but the main reason was because I wanted to show how having different colours affect the feeling and the moods of the images, therefore having a very hot place look cold and a very cold place look hot was my goal.

Heading Changes

Due to the feedback that I had from my pitch, I had found that they liked my heading however to make it look better I needed to get rid of the shadow that was behind the colours, the reason for this was so the colours would flow easier and better and they would not be cut off by the black of the shadow.

The original heading was:

And the one that I changed to was:

I had place a background colour to this so it would be able to fit in with the background colour of my page. Also due to the colours being gradient I had to save it as a Jpeg, and unfortunately Jpeg's do not allow for the background to be transparent therefore I had to place the background in, in order for the heading to match the background of the page.

My Mock Ups for Pitch

Here are all of the mock ups that I had created for my pitch. Each of these have been made different to show the different variables that I could have.

At first I used my first idea for the buttons and then I changed them to the second idea. This is where I found out that my button size was too big and therefore I had to change the size of them to fit my site.

I then decided to add a paper like background because that would then make the aspects of the page stand out as well as create a frame of which the content will sit.

This was my final idea, and the feedback that I got from it wasn't very good, this is because the buttons were too big, also I got told that there are no websites with the buttons on both sides of the page, the text in the middle should be left aligned, the heading should not have a shadow.

I took all of this in and then created my final page:

Here I have taken into account everything that was said about my mock-ups, and I have changed the elements that needed changing and I have got a good website that works well for what I wanted.