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. 

Storyboard

I have finished a story board for the way the site could "flow".



As you can see the idea is heavy on animation and we would be very hard pushed to finish something like this in time. It is mearly for visual purposes and something to grab ideas from.

As you can see it is purely type that is used to make up the scenes and my idea was that when the relevent part was clicked then the words / letters zoom / fall / flow together to create the fact. What do you think of the ideas?

Found this typographical tree during my research.

Tree Idea

Here is a mock up of the way show the type and information. My idea is very similar to the others but words are kept intact instead of everything being split up into letters. Something like this

This mock-up was made in Illustrator. In the mock-up I used random statements about trees these would be replaced with the words from the fact all mixed up or the sentences mixed up which could then "worm" together to make a paragraph. Just some ideas.

I Have also been working on a story board that illustrates some ideas I have about the flow of the page / animation. This will only be something to go on as we it will probably turn out to be a lot harder to execute some of the ideas. I'll post it soon to see if we can get any idea from it.

basic tree physiology

might be worth looking at splitting it up into the three sections listed here.

crown

trunk

roots

and finding a way to display the information in all 3 sections

basic animation...

urr okay, so i uploaded an animation, but it got deleted? what the hell... anyways, here i go trying again :P it is pretty basic and not that great, but the idea is there :P

Images I found

I thought I would post these on here. I was searching for different types of tree illustration and thought these were really visually interesting but quite different from our original idea. But could give some ideas when adding colour or something. I dont know really, its probably a girly thing and they look pretty, you guys might not like them but thought they were worth putting up here for discussion. Oh got them from 'www.shutterstock.com' (my scanner is having one of its moments so uploading my drawings is going on hold until I can sort it!!)

Trees made in Illustrator

These are some 'word trees' I made on Illustrator. The one of the left is just separate letters positioned, all in the same font but different size and opacities as it gets further away from the middle of the tree. The tree on the right is a cut-out of a tree which I layered over the top of lots of text that I had made really compact. Not too sure it works that well but thought I would post it on here for you guys to see anyway. Have done some drawings too, will get them on here once scanned in.

Video

For some reason guys, the animation I made today in the mac suite wont load onto here! So im going to wait until we are next in the mac suite and try load it then. Im so gutted... I was so proud I remember how to use flash and now I have nothing to show for it! boooo!

Any Ideas?

okay - so we have agreed that we are doing 10 things your need to know about GARDENING 

AWESOME!

if we could post anything relevant in this section, that would be great! thanks guys

Testing

1.2.3