Treasure Island Toys

For this assignment we will be working on a live brief, producing content for an online toy store called Treasure Island Toys. Our target audience for this assignment is for the ages between 5 and 7 year olds.

Already a series of characters have been created by the owners, and nine short stories have been written. There is however 12 in our class so three more stories needed to be created so each one of us has a story. From this we are then going to produce illustrations with animated flourishes, weather that be a blink of the eye of a flutter of a feather.

The illustrations will be drawn up in either Illustrator or flash or both, flash will be used to produce the animated flourishes. A voice over is necessary as our age group will not be fully competent in reading the content. Also the sie of the stage that we will create our illustrations in will have to be 845 x 475 pixels. Buttons are essential, as navigation forward backward and back to start, so these will have to also be created in Flash.

To bigin with I did some research on the internet, I firstly looked at the clients website, as this has the style that we need to aim towards, so our work ties in with already existing illustrations. Also CBBC website was another very useful site in which to get inspiration from, they had lots of animated buttons and similar story structures as well.

My final thoughts on my design

I think that if it had all gone smoothly I most certainly would have not learnt nor understood the workings of HTML and CSS as much as now do, the process that you go through when trying to figure out how to correct an element is an essential skill to have when working in this area, I feel that I have learnt a great deal and hopefully when I come to make another website I will have the basics under my belt and will be able to further my skills, and start to explore more advanced techniques.

If I could change my website I would certainly try to include some illustrations, and make more pages so I could explain composition in more detail. I do like what I have created, I would perhaps change the positioning of the text, but I was limited to what I knew. Overall I am pleased that I managed to create a working website, at one point I really didn't think it was going to happen.

Composing my website

I began by doing some mock ups of my pages first in Illustrator, so I could configure various different looks. My first mock up that I did right back when we were doing our presentations, was way to simplistic and did not really have any significance, however it did help me to create a vision in my head to where I would like to place different elements. I did create a new mock up which was much closer to how I would like my web page to look.

Above is how I would like my home page to look like, it is very simple and plain, however I wanted to start with what I understood how to do, I did not want to include lots and lots of advanced elements as I wanted to create a fully functioning site, that was easy to navigate your way round, therefore catering for the all abilities.

However as simple as it is to look at, I found it very confusing at some points in its development. For example I got it all in place how I wanted it, but the navigation at the top of my page would not link or change colour when I hovered over it. This I found very confusing indeed. It was as if something was over the top of it, even when I used firebug it could not find/select it. After much restructuring my pages both in CCS and HTML, and through trial and error of removing elements and rearranging I did manage to sort it out.

I created all my images, for example, the navigation bar and the various different titles, I then saved them to web and devices so I was then able to insert them as divs onto my site. It was important to have a strong and well structured file structure.

My navigation bar, to create that almost painted look effect on the edge of the circle, I applied a brush style, and just changed the size and colour to each circle, I feel that this is very effective.

Once I had sorted out my problem with the nav bar, that I explained above, I then used the working page and duplicated it several times and just changed links, text etc, I did this so I knew that they in theory should all work, this worked!

Flow diagram

Wire Frames

These are my wire frames, both the home and internal pages :

Proposed content

My proposed content that I would like to include has changed a little, I have decided that I would like to have three main subject heading that will be

• Photography
• Art
• Web design

These will be my main areas of conversation, I will however have subheadings within each main heading, I am thinking of something like this

• Photography - will have the subheadings of, Pattern, Symmetry, Texture, Depth of field and lines.
• Art - Picture, Depth, Line and value.
• Web design - What users are looking for, Dimensions, Size, Space and Colours and text.

colours

These are a few colours that I would like to use in my design, perhaps different colour variations I might use, but this colour pallet.