Bananas in Pyjamas Website

A little while back Visual Jazz was awarded the job of creating a website for the newly revamped Bananas in Pyjamas – a childrens TV show created by the ABC

The concept was to create a section of Cuddles Town – the home town of the Bananas and all their friends – using the new design style of the revamped show.

The design gurus I work with at VJ came up with a pretty awesome horizontal layout for the entire town, with each of the characters from the show being represented in the scene.

Each of the characters houses represented an area to explore, with some areas containing information about the show, and others containing fun little games for the kids to play.

To give the world a bit of depth, we built the entire scene in a parallaxing style using Alternativa3D. All of the hills were laid out on planes and when the user clicked on a hot spot, the camera would zoom into the area to reveal extra details, etc.

A few of the sections had some small games and activities for the user to play with. Each was a little different and tied in with the site quite well.

Topsy’s area contained a dance along game where the user had to click the mouse or press the space bar in time with the music. If the timing was correct, Topsy would dance along. There was also the option of just playing the songs and watching Topsys dance without the need to press any buttons.

Charlie’s area contained a game where the user had to fix the machine by selecting the piece that matched the missing shape. If completed correctly, the user was awarded with an award of a colour in printout of the object the machine generated.

Bernards house contained a story book where the user could select from one of three possible stories to read along with. Each of the stories were narrated by the Banana’s and had actual sound samples from the episodes.

The Banana’s area had two games. One was a simple dress-up game where you could select clothing for the Banana’s to wear. There is also a simple treasure hunt game where the user is given the task of finding items hidden around Cuddles Town.

Other areas of the site contained other types of information for the user. One area contained the ‘Watch’ section where the user could watch various episodes from the TV show streamed directly from the ABC.

The ‘Make’ section contained a number of various printouts and activities that the user could use to create heaps of different things such as gift cards, colouring-in pictures and photo frames.

The ‘Meet’ section contained a small bio on each of the characters from the show. There was also a small animation of each of the characters introducing themselves.

As a nice little touch we added in a night-time mode for the town where the sun went down and all of the houses lights came on.

This feature was later extended to ‘sleep time’ where a parent could set a timer on the site so that after a certain amount of time the entire site would go to sleep preventing any further interaction stopping the child for playing for too long.

So that’s the Banana’s site in a nutshell. It was a lot of fun to build and I had a lot of help putting together all the games. It was also my first project where I used Alternativa3D which was also a bit of fun.

I don’t think I need to mention it, but all the characters etc. are the respective property of their owners.

If you get the chance you should go check out the site by clicking here.

Leave a Reply

Your email address will not be published. Required fields are marked *

Name *

This site uses Akismet to reduce spam. Learn how your comment data is processed.