Final Zip

Just to wrap this whole thing up, here is the final zip for the mockup website. http://tonyphipps.f-snet.com/images/download/Interactive%20Website%20Final.zip.

Let me know if there is any problems downloading this file.

Changes to website

(to alex...) From the feed back from the session today. Watching other people navigate through our site made us realize some weaknesses and strengths within our site. The major thing was the navigation buttons. The users had no idea what the buttons would do to the plant and mentioned it would be appropriate to have a rollover or something telling you what the buttons are. We have done this as them buttons are rollovers anyway. Now as you rollover the leaf it clears the symbol and tells you what the button is in writing instead. We still kept to the green and white theme on the leaf by having the words in white.
We also found loads of people didn't wait long enough on the game over page and half way through the leaf falling they started clicking the back button instead of waiting and having the site automatically redirecting you to the start again. So maybe we should have made it quicker but we haven't done anything to change that. Just something to remember for future reference. They loved all the animations, and most people found it really interactive so that's all good. The site doesn't actually take you to the end, it only goes to level 2 but the site map demonstrates what it would be like. I think that's about everything. We have the presentation tomorrow and all the boards and stuff are printed and they look really good.

Feedback sheets

The feedback sheets from the site testing (thursday)

The Zip for the site

Here is the zip for the site:

http://tonyphipps.f-snet.com/images/download/Web_structure%20-%2018-12-08.zip

Most of the pages are linked I just need to put the right info into the page that the solutions on level 2 link to, this won't take long I can do that this after noon.

For Thursday...

Remember guys, we are in at 10.00am tomorrow, room 62 for site testing. Will have the finished boards with me hopefully but on my data stick. Will we need to bring a cd with us to put the website on? Does anyone know? Mark, I just need them 2 mock pages left and then thats us all done!

Mock page for winning (or just the final stage with the tree fully grown)

The winning page. Also with the trees cut back.

Mock page for cutting back of trees

Is this ok? I made the bit that have been shaved off into type so it carried on with the theme. We could say this would also be animated... as the saw goes along the letter would drop to the ground or something?

Info Board

This is what its like at the moment. Im perfectly happy to change it but need to know now as ideally I want to print it off tomorrow when we are in. I did it in quark but saved it as a pdf so it can get printed at the print shop. If you see anything wrong like spelling/grammar or even if you think something should be put/lined up somewhere else let me know by tonight so it can be ready for the morning. Is the information on it ok? Do you think I have put too much writing on it? Like I said just let me know.

Site map

I have done some of the images and placed them in, in the relevant positions. I have copied the page where the seed dies as I think for now its good enough to link the wrong options together. Im goin to email the images ive made to katie, you can put them in properly, this was just so i could get feedback weather there is anythin to change. I haven't mocked up the last page for a winner page tho cause i didnt know how you wanted to do it. Plus the page on level 3 the option for artificial lighting needs to be in your card format katie, so i've not done that one, i can have a go at it if you want if you havent got time. Just thought it would be better if you kept it in the same style.

Presentation Board - information

OK guys... for the mount board with the information.... so far I have the concept idea (being the type tree as that was what all our other ideas were based around) I have the image on the original type tree there with the white background. I also have an image of our interface we used. Plus the buttons from level 1 and 2. Because the buttons are typographical. Im not sure what else you want on there. The index page? as thats typographical. Maybe one of the solution options as they are typographical too like the watering can? The game over page maybe? Or the seed with that being a typographical seed? What do you think? We should overload the page with too much, so we need to be selective about what we think are the key points to our site... any ideas of areas i have mentioned/or not mentioned that you think should definitely be included?

Images I have so far for the site map

Just so you know, these are the only images I have from the zip file of the website posted on here last week. I thought we had more than this but obviously not and i am in desperate need of these images! I can attempt to make a few if need be. I ca try the finished tree but does the trees that surround our type tree need to be trimmed back a bit because of one of the factors from level 3? Im not sure what to do!!!! Help guys!

Structure for site map

This is what I have attempted for demonstrating the site map. I havnt placed the actual images in yet for the pages but just wanted to see if you guys thought this was the best way to represent the site. I wasn't sure how to show the three options, but as they are all their own pages it made sense to me to do it this way. If you guys think this is fine I will go ahead and place the screen grabs of the site inside the boxes.  Though I really need the mock up pages that we didn't have time to add to the website to show how the website 'would be like'. I think its mainly a couple of pages from level 3 and 2 that we need.  So let me know what you all think of this so I can get this done. Ive done it on an A2 size on Illustrator and I think I will just print it out on A2 paper and just mount that then onto A2 mount board. Same for the other mount board I think if thats all ok?

More Zips!

Hey guys, just uploaded the zips of website with everything we have today.

Junk - thur 11 - 12 - 08.zip
webstructure_ - thur 11 - 12 - 08

And for mark, Here is the image new_background.jpg

Zips!

Uploaded a zip of everything that we have done today, I have also left the other zip from yesterday up on my webspace and will do until the end of the project, so if you could download it before then if you need it!

Todays: Web_structure.zip
Yesterdays: tenthings - gardening.zip

THE Tree

This is the typographical tree we have chosen. Originally we all made our own typographical trees but we agreed this one was the best tp use. It was originally Tony's tree but it has been slightly edited since then by Alex and we have all had input on slight adjustments to it.

The 'Solution Buttons'

These are the 'solution buttons' when each level is phased with a problem you have the option to resolve the problem to grow a healthy tree. Here is what the solutions will look like which Mark made on Illustrator. We want to try to keep the solution buttons as typographical as possible, a bit like the tree and the seed.

New Interface

This is the new interface we have. The bottom area with the paper grass is still Tony's but the Trees and sun are what I created out of card. We chose the lighter version of the trees as the brighter ones just didn't work with the rest of the interface.

Idea of animation of roots growing

This is the animation Alex created of the roots growing from the seed. He did this by placing a mask over the 'letter roots' one by one on the timeline.

Tunnel for the seed.

This was the original interface for the game that Tony created with ripped bits of paper. As the seed goes into the ground Alex created this 'tunnel' to appear so it looks a bit like a hole has been dug to plant the seed. This was done by having a rectangular shape and putting a gradient on it. This will then close up once the seed is planted. We also hope for the seed to drop behind the layer of grass as it is being planted by placing a mask over the top layer of the grass. This should just add to the visual effect of the game.

Zoom out of the seed

This is from Marks handy work with After Effects. He made it so the seed starts off as a white blank page but then zooms out to create the image of the typographical seed and then drops into the ground.

Index page

This is the index page Alex created during our group session together. We did have many variations but finally decided on this one. This will become a link to begin the game. This will then turn to a blank page of the typographical seed zooming out.

Action Script

Hey guys. I've got the little piece of script that loads a new page when the animation finishes. basically we have to create a new layer in the animation for action script an on the frame where the animation ends you have to put:

stop();
getURL("1_level.html");

Zip

Hey guys here is the link to the zip file with everything we did today. http://tonyphipps.f-snet.com/images/Tenthings%20-%20Gardening.zip. Let me know if you have any problems downloading this? Should all be fine, just checked the link and downloaded myself.

Card colours

As we decided to have the images out of card I tried different coloured cards and attempted the watering can, which i visualized as a silver colour but was also going to try it in green but thought we already have a bit too much green with the tree tops.

Free Rice

I found this web based game which I though was a good example of how a web based game works. Free Rice doesn't have any animation but the principle is very similar, except here they use coding to give the result. Plus they donate rice so give it a go!

Grid System

Here is a scan from a quick mockup about the grid system. I have been working on these in illustrator as a piece of documentation to support our work but the rough drawings and notes from the layout pad will do for now. Here is how I imagined the grid, with space for animation in the middle bottom and centeral box. The other boxes would remain unchanged apart from the images which make up the interface unless they need to change for a specific reason which could be done no problem.



Also had an attempt at the way in which I have been thinking the layout could be. This was all made from a couple of stock images of paper, just to give you an idea of how I imagined it. Again paper seems important to me with the whole print - paper - tree thing, think it carries the theme along nicely.



Just an idea of how I pictured the interface in my head. Can do a better idea tomorrow after I buy some nice paper.

Site Map and Test

I have looked at how the sitemap would flow and drawn out an example and scanned it in, hopefully gives a better idea of how it will flow?



Also just drew up dimensions of the grid and then created a basic CSS table-less layout to test the size out and how it would look at different resolutions. On a pc at 1024 x 768, problem is the height was a little bit to much, don't know what you think about this but it might be important to take this into account as there are still people out there who use this resolution and even others who used TV's for internet browsing which also uses this resolution.



This is is the 900 x 650 size layout in 1024 x 768 screen resolution.

Different materials

Just been playing with some different materials and bits and bobs. The top one is done in felt, the middle one is corrugated card (the tree trunks are always done in felt) and the bottom one is done in normal card with some green mesh over the top which isn't that visible. I used my type tree as example but only because I couldnt download tonys tree that we agreed to use, so if you could send me that by email or something tony, that would be much appreciated. I did the trees, cloud and sun just to get a feel for the materials really. If you dont like any of them thats totally fine but I thought we should look at different materials so we have the option to choose or dismiss them. Is there any other materials or stuff you want me to look into... as I seem to be taking this role on really so im happy to do m bit.

symbols?

Basic Symbols that can cause some sort of animation (waiting for rain is the wrong solution?!) so yeah... i'm not sure what else to do for the interface?!

this is what i meant in that last comment - i know its not great, but even this is set to 900x750, which is obviously 100 more height than intended. but if we shrink the image, the type becomes illegible?

AI File

Hey guys, I've uploaded the .ai file, can be found Here Here. Download and have a play.

Edit: Sorry the first link didn't work, uploaded it again to some file host. If that either link doesn't work i'll just email it to everyone.

My ideas

Just some simple ideas with putting the type tree with cartoon stuff. Its ok but im really not sure what kind of approach you guys were thinking... is it to be quite a cartoon type look or are we thinking more hand drawn illustration? Plus I came across the problem of finding space to put the information too... any thoughts/likes/dislikes?

gaming format

can we try and have a clear idea of how we would like to approach this in view of a gaming format AND content by tomorrow? yay or neh? i mocked up this piece of crap, just keeping it simple, in a 900x700 pixel format (72DPI)

Speed Networking

Sorry its not great quality. But thought I would post it anyway.