Research: Web Designs

Since my role in the group is to produce the Flash animated website, I gathered some research online to see what kind of designs are out there. Since Disney is one of the popular websites for cartoon trailers and such I looked at a few and gained some ideas from them.

Disney's Bolt - I really liked this design as well as being able to click on the buttons on the side to navigate you can also click on the characters and images in the centre as they're buttons as well. Therefore, looking at this website for inspiration was really good.

Little Big Planet - what I liked about this website is the fact that Sackboy moves every so often so its not just a static image, as well as that but once the user has clicked on one of the buttons a second screen falls down.

Street Fighter: The Legend of Chun-Li - Looking at different types of websites also helps with inspiration, different ideas and different websites. Though this one was plain with not alot on it.

DragonBall Evolution - This website was a pretty good website, lots of animation, once accessed the trailer shows up as well as the link to go to the main page of the website where all the content is. This is an idea that we'd like to use on our own Flash website.

Final Fantasy XIII - This website was looked at as again like the others it was something different and unique, the design of it was nice and simple which I liked and I also managed to get some ideas just from browsing around the website itself.

I looked at many other websites and only picked out a few to write about on this blog as the ones which I thought were best as well as showing ones that weren't that well done. This is so that it gives us an idea as to what kind of websites are out there. It also helped give me ideas on what I could use on our own website.

Research into Audio

For our animation trailer, we decided to use only music and sound effects. There would be no speech. This is because we wanted our animation and music to explain what was going on in the scene without having the bear talk the audience through it. Many animations such as ours including great works from disney have no speech and are very entertaining. The example below is of Merbabies created by Disney:

Another example of this would be the highly popular Road runner series produced by Warner Bros.

(Image taken from: http://img114.imageshack.us/img114/2290/roadr1hb0.jpg)

We intend to use piano based instrumental music for our background. This will be aquired using the creative commons to find suitable music and sound effects. The producer of the music will be clearly refrenced.

Research: Flash Vs. HTML

As part of one of the modules I produced a paper outlining the differences between Flash and HTML based websites. Although, both have their pro's and con's but for the website we want it was decided as a group that Flash would be more suitable. This is because although HTML is user-friendly and can easily be updated it does not give us the interactivity which we're looking for whilst Flash does even if Flash is not search-engine friendly.

HTML is mainly used for content-based websites, whereby Flash is used for animation and interactivity. Therefore, it'd be more suitable for our promotional website in the long run, since the content of it requires Flash such as the games (puzzles, quiz, etc).

Below is 2 screen shots, 1 of a HTML website and 1 of a Flash website - they're both targeted for the usage of children. (Pokemon)

This screen shot is of the Official Pokemon website which is all Flash based and is also frequently updated. This is what we're aiming to create for our promotional website.

This is a screen shot of a Pokemon website which is HTML based - it does show how many members have joined since it was created and each day those figures are increasing. Even so the layout of the website does not look as effective as the Flash based website, as it looks so static.

Bedroom Research

As in the final project a little girl`s bedroom is going to be created, i carried out research on different styled bedrooms. The following images where looked at by the team members and a bedroom plan was designed.

3D Bed Research

(Image taken from: http://www.llph.co.uk/kidsbedlinen/lilly.jpg)

For the bed, I wanted a simple design which would be made more unique with the textures it had on it. Having looked at magazines, Shops and also the internet, I decided to use a wooden texture for the frame of the bed and a round headboard. This is because it has the modern look yet retains a childish feel.

A few images off the internet that were used as inspiration were:

(Image taken from: http://www.hot-tootsies.com/i//IMG_1763.jpg)

This image shows the duvet covering most of the bed including the matress and frames. This I knew would be ideal for out scene as firstly it would allow our character to get lost under it and secondly, making less bits of the bed visible at any one time will reduce rendering time.

Here is another example of a young girls bed. This was important because of the colors. Pinks and whites work well to represent a young girls room in the generic way and thus, I will be using similar colours when designing my bed.

(Image taken from: http://www.eco-furniture.com/im/623/westbury-youthbed.jpg)

Character modelling #3

Here we have the first of many designs of Mr Ted.E. Bear using Photoshop. Firstly the earlier design images were imported to Photoshop, and then drawn over using many different layers trying to keep areas individual for later editing. The most complicated part while creating these was making sure each of the bear’s limbs stayed individual, we wanted this so animation could be achieved by moving the individual limbs around, very much like a puppet. Rather than using frame to frame animation this, unfortunately, would be very time consuming.

Below you will be able to see the original pencil drawing followed by the Photoshop version that has been created limb by limb.

Original

Photoshop

OriginalPhotoshopOriginalPhotoshop

Character modelling #2

To create a stylish bear design Photoshop was the program we decided to use, this is because it is the most powerful design software on the market and on that is easy to use.

Below we have a screen shot of a bear design created using Photoshop.


And here we have a screen shot showing how each of the limbs will separate so they are easy to animate when we move them forward to other programs.

As time progresses more images will be made like that above, ready to animate.

Storyboards

Early in development we all had many ideas that we all wanted to go into the short animation, unfortunately there wasn’t enough room for them all but below we have the story boards for some of the bests that will be in the final animation.
Note: these are still in the early design stages and may change in the final product.

Below we have the scene in which the bear comes to life.


The bear interacting with a dog like toy.


Playing with Fuzzy Felt.

Wallpaper

For the bedroom we had decided to design a pink wallpaper suited for a little girls bedroom. this wall paper was decided to be used in the website as well as a material in 3ds max. before creating the wallpaper research was carried out on how a little girls bedroom wallpaper may be like here are some of the research images below.

(image from - http://static.squidoo.com/resize/squidoo_images/-1/lens1498159_1235879330Wallies_Fairyland_Castle.JPG)

This is the final design for the wallpapre which was created in photoshop.

Character modelling #1

Now that we have decided what our main character was going to look like it was up to me to create poses of the character that would later be taken into Photoshop and then designed so it could be taken further and turned in to an animated object for both Adobe Flash and Adobe After Effects. I tried to draw the bear in as many different poses as possible so that when it comes to animating the process is a simple one that doesn’t require further character designs from different angles.

Below we have many different designs in diferent poses and positions..

Project management

As a team, we have various methods of making sure there is effective communication through out the team. In order to do this, we have set up a Facebook Group only visible by the members of this team. It is a way of posting links and discussing non urgent parts of the work that can be dealt with.

In addition to this, the team all have windows live messenger which we use as a means of immediate discussion when we are working online on the project.

The main form of communication however is mobile phones and group meetings.

Character Design

For the main character it was decided that we wanted a small, cute and cuddly bear that would appeal to our desired audience of children close to the age of five. Taking this information I was able to draw a few designs. I then showed these to my group allowing for constructive criticism and alterations until I came up with a final design.

below we have some of the early designs followed by the final one.

to the top left of the image we see a face style that we wanted to take further, but with the eyes smaller


None of these images went any further.

We all liked the image in the top centre but thought both the ears and nose were too big. By combining that style and the face mentioned above we created the bear in the middle right. This bear was chosen by the group to be our main character.

And here we have Mr Ted.E. Bear on his own.