Presentation stuff

This is what me and Ju came up with for the presentation earlier

SITE MAP

Here's a site map I made up in photoshop. 

Obviously some of the pages when screenshot where not all in view so just made two pics and put them together.

This is set to A2 dimentions but I chopped it in two so we've got a top and a bottom. That way it won't cost so much to print (£10 for A2! 1.50 for A3), so we'll just cut of the margins and stick them together.

I've also scanned in some of my sketches so we can put some of them on the devlopment board.

Testing

Some wierd thing happened........ the intro page works perfectly on my imac! absolutely!
size wize, checked it on my 1024x768 laptop screen and there is only Ju's page that is a little wide. overall though its fine, we needn't have worried about centering it. it doesnt like internet explorer very much though.
just sorting the disc for friday out now.

see you tomorrow!

Tomorrows To Do List:

1. Add the final swf.flash file to the blood_urine_seawater.html page. Add the seawater figure, unless there is a need for it.

2. Add river illustration on after_disinfecting.html. Delete material where neccesarry.

3. Arrange Inro sequence (vid) page with border in tact.

4. Add backgrounds to blank pages if appropriate. Could use mud crack's some more (but will require putting a whte boarder around all gifs/jpegs).

5. Allign all to centre.

6. Add a sound for each page.

FINITO!!! cya 11.00 2moro.

Made an attmept of improving the layout in this page.

Put the mud cracks in the back ground and a border around the vids.

Also gave the txt a white background so it stood out well and changed the title.

Added some extra vector images to the top. 

That okay? Once again, we'll make it all central at the end.

Background for opening sequence

I made this border background for the opening page with leaves round the outside to accomdate the theme and add to the spice of our topic. 

Only trouble is I'm not sure how to centralise it, Jonny fixed the video for us in the middle but I'm not sure how you do that with the border. 

It adds something to the page anyway, I thought it looked a bit bland otherwise.

We'll sort that out tomorrow.

Hopefully we'll be able to get rid of the text so you can click anywhre on the screen to start up the rest of the site.

backgrounf

Looks nice with the background pic behind it.

Maybe we should use this for all the pages so its not so white, then again the images won't stand out as well....plus most of them have white backgrounds which would come up as squares....maybe not then.

Thought we may as well put those left over images to ue on a Frequently Asked Questions Page.

Gone thru the net to get some good answers.

Also I've found out how to embed youtube vids so they play directly on our site rather than redirect you to you tube which is quite cool

Again the layout is a bit naff, looks quite cheap n that.

Maybe should have set up a template first.

The links to home or back could be on the side panel again.

Been laying out some more of our pages to work on 2moro. 

Thought of having a navagation bar down the right hand side. Have the home page/back/links etc. That buttons set up and working but it looks a bit tacky so maybe we'll change it around.

With regards to having all the things you can't drink on different pages, with the road symbols as a directory page to each....it seems a bit pointless cuz there's not enough material to put over three pages so it works just as well all on one like the above. 

Tomorrow we've got to have this finished.

We need to...

- finilise layout of text and pictures on each page. Add animated gifs (without background!)

- Make text gifs for the above and a few other gaps, one for swimming pool water and bath water. I was going to do this myself but I'm not sure of the exact tracking measurements and colours.

- Set up all links.

- Download Add sounds.

It all needs to me centralised in the middle of the page aswell

Maybe some of this can be done tonight. Such as sounds etc.

Can anyone think of anything else?

Timetable says we have to be in at 10 tomorrow. Lets hope thats so to do dreamweaver and nothing else.

Meet downstairs suite at 10 then? I'll bring my mac.

Yea it's quite a rough quide but bear in mind we've not got long to do this now. Here's an example of the page which you get to from clicking the disinfectant warning sign. The spider is a gif that crawls off the screen. Things like hazard markings and leafs/birds could go in the white gaps.

Come to think of it, shall we just have another warning sign (so three in total) other one saying - WARNING - DO NOT DRINK?

As you both now we were both told by Jonathan that our website should contain at least 3/4 pages.

So I've been chopping bits up and putting them on their own pages.

Here we've got the video which will be the main enterance to the main page.

Next is the two warning signs, (I havn't got the after decontaminating sign - that'll go next to it). 

By clicking on each it will take you to detailed normal size page with our gifs and texts relating to that topic.

So by clicking on that 'after distilling sign' it will take you to the page below where ive left space for the Seawater character. The good thing about this is the urine which we'll put in as a gif will still fall down to the appropriate character. Again the text has b/w rollovers.

For the 2nd half of the site is everything that you CANNOT drink. So this time the main selection is a page with the road sign like symbols, again clicking on each of these will take u to the desired page.

Personally I think it works a lot better this way, it's much more structured and user friendly.

Let me know wot u think.

So I've been on Dreamweaver for like 6 hrs now. Havn't got very far.

Done the first page with the link to the main page. Worked out the essentials for doing stuff.

In terms of the technical stuff such as CSS, we don't need to be doing much of that since our images are ready made and they're going on a white background. I've set up the root folder and that. Yet, ideally that stays the same i.e. on one local computer. Hopf will just be able to upload it and change the directory.

I put a 'tracing image' of our mock up page into Dreamweaver, previewed it and its all rediculously big. Nothing really fits on the screen without having to scroll down to see the rest of that image or text. Also that original background image we've all got is too big for the screen dimentions so that needs to be made even narrower.

That means I've been trying to resize it all, however either there's something corrupt or the file size is just that large it keeps crashing over and over again like it was doing earlier on. So annoying, especially when it's not saved. have to restart the computer everytime...

I've in turn changed a few bits like the angle of the hazard marking. Maybe we should keep that consistant at the top? I was gonna upload it on here but it's taking ages so that can wait.

We may have to make it narrower than the width of the page cuz it's quite overwhelming and hard to see what's going on.

freshwater

Here's a pic put together for no drinkin bath water.

I don't like it very much so perhaps we shouldn't use it. 

I quite like the idea but the live trace on the straw/danger has come out a bit jaggy and I've done enough pen tooling for today.

We could just use the bath image. I'll save an AI version of it.

After spell check

Thanks!!

Hahahaaa!:p

gif of blooding

Here's the image for the 'no drinking swimming pool water.'

That okay?

I quite like the typo Ju, nice and structured...looks quite organised. Might want to do a quick spell check tho haha.

typograpgy_01

What about using this kind of typography???

character of drinking ink

Hi Adam, it is ok?

Pls reply, hahahaa

Ahah, finally seems to have worked.

Might be a bit more jumpy.

ok thats really annoying.

The vid won't upload. I've tried various file types all, says they should work.

Nevermind it still plays in Quicktime so I'll show you on wednesday.

typograpgy

BACKGROUND

How about something like this for the background.

I think the white will mean our visuals placed on top will still be easy to define...making it more user friendly and all that.

INK

Visual for 'don't drink ink'

I quite like the idea of having these hazard tape marking across the home page as part of the background. Wot u rec? Kinda consistent with the book theme aswell. With leaf and maybe simple bidr vectors.

I'll try and put something together so you can see what I mean.

I'm yet to do the other ones but I know what they're going to look like. 

-The 'no swimming pool water' one will be a pool with liquid being poured from a hazardous bleach like vector shape with a skull and 'corrosive' sign on it. 

-The bathing water one will be a bath, then a bendy straw that comes from the bath to the mouth of a character but is like one of those long plastic curly straws that has all twists and turns. The straw will say the word danger.

character 03

Drinking sea water...

Gif

Here's some more stuff.

Will lay it all out properly later.

Was thinking of making the fuel dial into a gif that goes from full to empty.

The 2nd pic just shows the stomach in the body in biological terms, in need of water kind of thing.

Strictly no drinking of...

Here's just some little visuals I put together. Since I've been given the section of things you can't drink I thought something like a road sign would be appropriate. Obviously these are just little symbols which'll go along side the pics I've yet to create. They are for No Bath water drinking. No swimming pool water drinking no ink.

Will do those now so watch this space.

By the way, I think the reason why the zebra is different colours is because it might be saved as a CMYK rather than RGB.

animals

photo of Emma's toilet

character 3

mock up of webpage

about the background...

I have try by using PS, I know it is not good enough, but it just a test.

Also, sorry for late post...

Style of those titles...

Using hand-drawing and scan it into the computer, and then using PS to tune the color

when they match together...

the character...

urine

C'mon people.

Wot's happening.

We've obviously gotta show devlopment of some sort at 2moro's seminar. I know it's bn a bit unfortunate this week in terms of meeting up n all but we need a website plan set in stone to start implementing soon.

The inspiration for the illustration style of the trees came from this which I think's really cool.

We could make the trees and bushes have scary faces, kinda emphasise the 'being out there alone' feeling of the outdoors. The blue and black gives it quite a night time feel aswell. Could make them laugh when when rolledover.

For some reason that second pic won't enlarge. Here's take 2. Think I deleted some HTML so may that be a lesson.

Monday 1st Dec.

Looks good. Shame I missed out. Can see how your thinking to an extent but obviously need to have been there to get the full round up. Some things look like they're changing shape? 

Today I've just been thinking of more interactive ways to do stuff and drew some more mock up screenshots.

This would be the Start up page and home page. Jonathan was saying how we should think about the whole emphemiral experience, perhaps think about the viewpoint of the perciever.

I thought it might be interesting to have a pair of hands holding the menu at a restaurant table to make the viewer feel involved. The title would be hand drawn like you mention. Could be illustrated or photographed. Kinda comes from Emma's idea of having a banquet/buffet. Except this restaurant's a little different in that it serves insects. The menu has therefore has a fitting camo theme. Was thinking we could have little ants crawling accross the table and a spider gradually appearing down it's web...should be reasonably easy to make as gifs. The audio here could be the restaurant clatter etc.

Clicking on the menu takes you to the second page. A woodland setting (on the inner menu) whereby a wildlife audio is played. Again there would be the same creepy crawlys crawling around on the screen. Rolling over certain features causes them to go black and white, plus adds audio. For exaple, rolling over the grass growth gives the sound of crickets.

Once you click on that feature it takes you to the next page.

Here the menu layout takes out a new look wherby that particular food is mentioned in focus. With such visual add ons like 'chefs special' for eg. To keep things factual the picture of the insect would be an actual photograph, which when clicked on took you to short quicktime movie footage (such as this). There would be details of what the animal looks like, what it eats, where it lives...and it's nutritional values just for a bit of a joke. 

We could make it all lateral so it uses the scrollers as a feature. 

I thought it would be good to keep the colour scheme uniform so its consistant. Here it's blue and yellow.

Anyway this is just what I've come up with. good/bad comments welcome! Let me know what you wanna do or what you've discussed today. Obviously we need to have a mix of all our ideas. 

I think the next stage is making the visual material that we are going to use on the website.

What we did today.....

Its all pretty self explanatory. 

Just loads of ideas for our website which we then explained to other groups and they gave us feedback on things they liked and things they didn't.

Bascule Website

This is a amazing website!

P.S. The sound effect will change when you are in different part of the website!

Cricket Design

This website is pretty good. Even though it's in not in English it's still is engaging. 

RESEARCH

RESEARCH.

I thought this would be not a bad example should we do it like a story in terms of the voiceover and layout, e.g som1 gets lost in the woods, has to camp out and find things to eat and drink.

I thought this one was just funny. If you drag the man fast enough he flies!

This Arcade Fire Interactive music video is quite genious.