They think it's all over...

...and with final hand in looming it really is. That's right, eight weeks are over, a website has been developed, and a lot has been learnt. It's been a steep curve from complete Photoshop and Dreamweaver novice to someone with a bit of skill, it's been rewarding, but it's also been a lot of hard work and much frustration.

My site is not the most advanced of the bunch, it doesn't have the most content or the most pages, but what it does have is a well thought through design, simplistic usability and good functionality for it's audience. There is room for development, and expansion - Ideally the home page would become a house, allowing the user to select the room (or garden) that they want to do experiments in, and then give the room to explore. There is nothing else like this site currently available for fun experiments, with easy to follow instructions and a visual (rather than text) medium, so it would be nice to continue to develop it and actually put it live. One day.

Over the last eight weeks I have tried to take you on a journey through my design, background thinking, planning and use of technology. In terms of evaluation let's just recap on the main points:

1. Evidence of original, innovative and imaginative concept.
Searching the web does not reveal any other sites like this one, only text heavy home experiments. From my own experience as a teacher this type of fun resource is not easy to come by.
2. Ability to write for the web: 
content, images, accuracy, currency, scannability, organisation.
The site aims to be very simplistic. Most of the text is reduced to images making cartoon style instructions for the experiments. The pages that do contain text have been carefully thought through to keep words to a minimum. All the experiments have been tested (when photographed) and do work.
3. Awareness of website planning and architecture.
I have tried to consider the architecture of the site through wire frames and flow diagrams. These tools helped me to design the layout and interaction of pages.
4. Awareness of web design principles of interface design, layout, navigation, usability, 
readability and accessibility.
It was important that this site was very easy to use as it has a child / family audience. Therefore the web interface and layout are simple and do not involve a lot of site exploration to get to the information. It also utalises external sites for further research allowing users to use the site either for entertainment ideas or to find out more science. The 'about' page gives some tips on navigation to ensure an easy to use experience.
5. Ability to utilise and integrate different software programmes to produce a small scale website.
I have learnt how to use Photoshop and Dreamweaver in the production of this site. I have also created a blog using an online service, created simple images using Paint and Microsoft picture editor.
6. Successful uploading the website on the university or personal server.
My site can be found at https://www.imperial.ac.uk/humanities/webdesign/2011/eleanorsaunders/

1. Evidence of research and engagement
A lot of my knowledge for this sites theme, content, and subject come from my work as a secondary school teacher. I did research other sites, and looked for experiments that would be easy to put into simple, visual, steps. I also thought about how children like to learn, and how learning can occur through exploration and practical activities. This site will particularly appeal to visual and kinesthetic learners.
2. Process: 
Planning and Working out ideas (artistic, creative, conceptual) include outlined proposal.
My initial planning can be found in my blog - http://copiouscascades.blogspot.com/2011/06/all-signs-of-s-serial-killer.html
3. Awareness of technology (useful links, problems encountered, independent learning, the use of software to explore and present ideas).
My site uses existing material by linking to BBC bitesize. This is a well accepted resources by teachers and gives credibility and authority to the site.
I encountered many design problems, and have learnt a lot about image manipulation and CSS for web design. This has all been new to me and required considerable amounts of time researching how to best use these technologies. I found user help videos on Youtube, Adobe help, and w3schools to be invaluable resources.
4. Demonstration of self evaluation and critical reflection.
As I have developed the site I have evaluated the functionality and changed elements, I also took on board feedback to make changes and improve the site.
5. Demonstration of skills of problem solving.
Restricted by my limited skills in web design I had to overcome many issues translating my ideas into online elements that I actually had the skill to build. This has meant that some of my ambitious ideas for a very professional look to the site have been downgraded by my use of Photoshop, however by using an 'arts and crafts' style to the site this has negated the need for a very clean finish. One of the biggest changes I made tot he site was the reduction of 'Draw AP Div' elements. These were not aligning properly and made the site open very differently in different browsers. Learning how to use hotspots, and developing better base images in PhotoShop allowed me to work around this and greatly increase the usability of my website.

So there, that's it. I'm sure I could and should say a lot more, but really this whole experience has just been a whirlwind for me. It has been unexplainably difficult to try and learn a lot of the techniques and programmes I used essentially on my own. Working full time meant that I had limited access to working with others and I have have spent a lot of lonely evenings in the translation lab. But it has been totally worthwhile, I wanted to know how to build basic websites, and now I do. My next project is to develop my site for my own business, onwards and upwards as they say.

Over and out.

Comments please

Having presented my site to the web design class (and made a few amendments at their suggestion) I decided to sent it out to the great unwashed for some impartial, potential user, feedback. As the site is aimed at children, and home activities I sent it to a 10 year old boy who I am in regular e-mail contact with (it's ok, he's related to me), and two different parents with children aged from 8 to 14. This blog is their feedback, in full, followed by what I will take as action points, and what comments I have chosen not to act on.

Feedback from my first cousin once removed, age 10:

I love your website and I thought the idea of a lab Kitchen was a really terrific idea.

I liked the egg test best and the speed boat test was interesting!

The only thing that I thought was to complicated was the "Whats the silence" I couldn't understand it very well.

I hope you apreshiate my feed back 

PS I had summer dance day yesterday, it was great!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Action points: Have an option after 'what's the science' of either Primary or GCSE, this could also be done by adding some direction in the 'About' page encouraging discussion of ideas.

Feedback from parent A:

Very good, I''m sure that it will impress!

You asked for comments so here are my impressions. As usual I'm being picky.

Safety page:

If  colour of the brown paper background was a little less strong it would make the type easier to read. (Also applies to Science and About pages.)

The first line implies that being dangerous is fun.

Perhaps “Science is fun but it can also be dangerous” would be better.

About page:

Re navigation tips – ingredients pics are not roll overs they are click ons.

Roll overs are when a pop-up appears as you hover over an area as on the other pages.

Eggs page:

Something wrong here – All pictures vanish unless I hover over the first picture: 

Speed boat page:

I don’t feel that density and pressure is an explanation for surface tension in liquids.

Told you I was being picky!

Action points: Change safety page text as suggested, change the link on the speed boat page.

Other comments:
Changing the background / text contrast in the text pages - I am not going to do this as I do not want black text, this is a style preference, and I am using a dark background as this is a freely available image. If I had time to take my own images I would use a lighter brown paper sample.
Eggs page - for some reason the main page image is not loading, just the roll over image, I'm not sure how to fix this, but it seems to load fine generally so maybe a firewall issue with this user?

Feedback from parent B:

Here's my comments on your website so far. However I have only looked at it for a short time, say 20 minutes, on my mobile (incl diverting to BBC science). Plus a quick look here on laptop, to see if it looks different. 

THE LOOK
Overall my impression is of a site that would be very attractive in a playful / learning setting. It would certainly attract kids and their parents and other associated adults. It would also be a nice resource for teachers, playgroup leaders, grandparents and responsible babysitters. I love the style with its brown paper background, roughly drawn arrows, watercolour sketch and handwriting font: they clearly set the work in the "fun arts & crafts" arena. Actually, I saw you mention this in your blog but would beware of using the words "craft" or "crafty" rather than "arts & crafts". as they convey different meanings. The look should appeal to children and learners of any age. It would be nice to test this. The fact that kids are learning during a fun interactive experience is the big plus for adults. 

I really like the sparse use of text. The excellent design means it's not needed and the result is a very user friendly experience.  

Your site loaded fine on my mobile and would make a very nice APP. (IDEA: commercialise the work! Optimise for both i-phone and android. Google.com has an "App Developer" section and lets you upload for free while sharing any profits! It could be a link on MUMSNET. Call it KIDSFUN?)

I liked the visual "post-its" for the menu. They added to the non-serious feel. I liked the arrows instead of sequence instructions like "next" or "step two".

I liked the simple english which made it easier to read. 

I liked the "Kids Cookery Recipes" style too. Its one kids are familiar with and they know that the results equal fun. Brown paper, as often used instead of greaseproof paper, reinforced that look. 

THE CONTENT

I found the site really high on design and appropriately low on content given the intended audience. 

Re Titles
The experiment titles are nice and snappy. But for consistency and sense, would "Celery Straws" work better for #3? I expected it to make straw at first!

Re (lack of) Instructions.
I thought some pop-ups would be good to give quantities of ingredients, time for boiling etc. But I see you have now added rollovers. Anyone who wants more content can use the rollovers on the "ingredients" pics or use the links. Perhaps how to find the rollovers could be mentioned on the "About" page?

Re "Sivery Eggs"
On my mobile I thought that the bowl of water picture actually showed a broken egg with its yolk!

Perhaps a final link to "additional experiments if you liked this one" would be nice.  

Re "ABOUT" Page
Should the "About" page mention suggested ages? Perhaps a "Recommended Age" tag could be added to each experiment. I think that a form like "All ages from n yrs" would be more likely to encourage teenagers or other late learners, like me.

RE "The Science" Link on Silvery eggs
The point of the "Emulsifers" link provided, may be that the carbon residue has oil in it which repels the water - but I did not really get it. How does the mirroring effect happen? Is this the right page to go to? 

Re "RAINBOW WATER"
I liked this experiment that produced a "ph indicator", although I only worked out what it offered when I read "The Science". The illustration of the result did not quite live up to the expectations of the title as I could not see the different colours clearly on my mobile or laptop monitor screen. I could only see they were red, green and purple when I zoomed in. Could you include a yellow result liquid for a clearer rainbow result? 

THE FUNCTIONALITY

Could "ABOUT" mention using the "Back Button" on one's browser to get back to the experiments from extrenal links? 

As the site is all about communicating science and stimulating learners to search / discover answers to their questions, should "The Science" mention that kids could ask the adults present, including teachers, to provide them? Or could you suggest another way to "collective discovery" like kids using networking and "collected cleverness" (nice phrase from blog) in classroom brainstorm sessions? Perhaps these group situation ways of getting answers is not the intent, but it probably could be included.  

THE RESULT

I learnt a lot and definitely wanted more! I'm going to do all these experiements as soon as I have time. The beetroot growing in the graden will provide the "Indicator" water when its ready. I found myself exploring the BBC science website you provided for further detail. This was a good consequence of the learning trick you are pulling. However, the bad side is that it's easy to leave the experiment, and very possibly not return or find one's way back! An extra help to solve getting lost elsewhere could be the use of a memorable name for the site like KIDSFUN repeated on every page so that you could always google your way back. Losing readers online is always an issue when adding links.

At first I wanted you to add byelines to each experiment title saying for instance "Rainbow Water - How to make a homemade acidity indicator" - but I guess that would have taken the old fashioned teaching route of providing answers first. Your approach takes more time but is actually more interactive and engaging. 

I think your visual and interactive site will communicate the science learning much better than the pure text based approach. The fact that learners will actually use their hands, feel and smell the results will reinforce what they learnt from their reading. The low text content of the site especially helps it to work well for people without much reading experience, like younger children, immigrants and slower learners.

Action points: Make all suggested changes to 'about' page, change link on eggs experiment, add some text suggesting discussion of science with adults, teachers, or other children.

Other comments:
Change to Celery experiment title - due to the way I have built this image, and my limited time I will not change this at the moment, but may do when I have more time in the future.
Additional experiments if you liked this one - A great idea for when the site grows, possibility to link up similar experiments.
Results picture on 'rainbow water' - This image is poor quality as I had to use my phone for the photography. I cannot get a better home image before hand in, but it is something to change in the future.
App idea / commercialization - Nice idea, maybe a thought for the future.

Eggs is eggs

As we draw to a close the site is almost complete. it is time to reflect on the foibles of actually getting a working site onto the internet - the answer, as always, is Photoshop.

This week my site has not been behaving. Clickables have walked across the page, FireFox has not been compatible, and the sun has been shining hard enough to completely distract me. I have managed to make a series of pages, interlink them, and upload them. This is a small success of monumental scale.

The site structure now looks like this:

It is a little different from my original plan due to the constraints of adding linkable components to my website. I do not think this has drastically reduced functionality, but it is annoying that you cannot link back to the experiment pages if you click onto the safety page.

I have reduced the usage of 'Draw AP Div', a wonderfully visual tool for inserting elements, but very difficult to make those elements appear int he right places on the actual web. FireFox particularly seems to hate them. Photoshop enabled me to add my images to the background and then use the 'hotspot' functionality on Dreamweaver to make them into links.
Do take a look at my handi-work. The site exists in the 'real world' right about here, or maybe over there? I'm not sure.

The final task is to make rollover components on my experiment pages. They currently look like this:

Quite lovely really but lacking in a certain explanation. Much as I hate the dreaded website full of text it would be wonderful if rolling over the images changed them to a small amount of explanatory text. Hopefully using the slice tool in Photoshop I will be able to activate these elements and sort this out. if not them it is a question for the class tomorrow, they are the collected cleverness and will be able to help me. Maybe.

Next week blog number eight, the final in my eight week series. It will no doubt be a reflective wonder. Please feel free to hold your breath in anticipation. 

Actual progress

Finally it all seems to be coming together and a website may actually be on the horizon. So how has this happened?

Monday 13th 18:00, completed banner and home page image in Photoshop

Tuesday 14th 09:30, set up home page HTML and CSS, designed layout for text pages and built HTML and CSS (for some reason the new background image won't display?)

Thursday 16th 21:00, sat on a train staring out the window... and decided which experiments to showcase on the website

Saturday 18th 10:00, spent the day shopping for cabbage and celery, set up the experiments and photographed them

Sunday 19th 13:00, realised the 'camera to computer connect-y cable' is in another part of the world, sat about feeling miserable and cursing life in general... (15:00) copped onto myself and redid all the experiments photographing them on my phone (18:00) Images uploaded and sent to the file exchange server ready for photoshopping tomorrow (19:11) Bloggin'.

So there you have it captain, a week of work, real work. And, yet more impressive, a 'to do' list for next week:

• Crop and organise the experiment photos in Photoshop
• Make the experiment pages backgrounds
• Complete text pages and sort out background image that isn't displaying
• Write HTML and CSS for experiment pages
• Add clickables to the home page
• Upload to the web
• Beta testing

For the beta testing the website should be accessed by children. I think the best way to do this is to send a link to some of my cousins and friends with small children and ask them to look at the site together and send feedback. It is more appropriate to use this home environment for testing instead of a school as the aim of the website is to get children doing science at home. It would be nice to have a comments page, or a blog page, set up to facilitate this, some thought needed here. 

OK you have been very patient, here are some pictures for general entertainment:

Chemistry experiments: Red cabbage indicator and silver eggs.

Biology experiment: Xylem in celery.

Physics experiment: surface tension power boat. This one is in a complete cartoon strip as a special treat, in the website all the experiments will beset out in this sort of fashion, with catchier titles. 

Oops, I lost last week

Where did it go? I'm sure it was here a minute ago, just lazing about minding it's own business. Then I try and do anything with it and, oh, it's gone. Sneaky week. Rights so, this is a filler catch up blog - proper one for this week to come later today...

Cast your minds back ladies and gentlemen, to a time long ago, to at least the 12th of June 2011.

*waves hands in a mysterious way*

This week I did two things that seem small but really launched me forward in terms of having a product:
1. I finally knuckled down to Photoshop - booked myself a quiet evening in the lab, messed around, and learnt how to build up images, write, and draw.
2. I set up a Word doc and started developing the site content.

It is a good feeling to have some site content (text and visuals), now I am ready to start putting it all together...

All the signs of s serial killer

Yep, that's the comment presenting my blog and website idea to the class got me. Personally I disagree, I only display some of the signs of a serial killer. Today I will be less random, today is all about getting down to business.


Website idea: 'Crafty kitchen science' (title may need some work). Possibly 'crafty home science' to allow for future expansion of the site.


Market opening: Current websites showing home experiments are not very user friendly. For example:
http://scifun.chem.wisc.edu/homeexpts/homeexpts.html

This site is pretty bad, it has a lot of good experiments but the layout is bland. It's not child friendly in terms of layout, feel, use of colour, and use of text. The site is very text heavy, particularly once you click into the experiments. 

http://www.sciencebob.com/experiments/index.php

This site is a little better, it has a more friendly home page. However it is still text heavy without any appealing images or points of reference for children to relate to. The experiments are again very text heavy. 

http://scienceathome.cienciaviva.pt/

This site is horrible. Blue and yellow (in these shades) is not a good colour scheme, I can't even look at it.

http://www.hhmi.org/coolscience/forkids/

This site is better, posing questions to spark interest and using images. It is very corporate looking, and I think this detracts from it. 

Target audience: My site will be aimed at children and parents who want to do fun experiments at home.


How: By making it text light, image heavy, exceptionally easy to navigate, and having a 'crafty' feel rather than a 'sciency' feel to encourage playing with the ideas.

Navigation:

Layout:

Experiment pages will be similar in style to that used by the Science Museum:
http://www.sciencemuseum.org.uk/educators/classroom_and_homework_resources.aspx

Mood board:
Old style point and click for the main page main image:

I like the style of a slightly muted background with clearly 'cliackable' elements overlayed.

General theme mood = crafty (like the beautiful Little Big Planet):

Planning: 7th June - Build elements in Photoshop
14th June - Finalisation of elements in Photoshop, entering elements into HTML code, writing site content.
21st June - Finalisation of text content, tweaking, addition of a gallery page if I can work out how to do this (this will allow users to post their own pictures / comments and make the site more interactive)
28th June - class presentation of website, final final tweaking
4th July - Hand in

That's all folks. I'm sure I've forgotten some vital element of the business side of things, but they can come in the form of updates.

Sleep deprived ramblings

Hmmmm, we are to be more personable in our blogs... so errr, welcome to me! It's hard to share a lot about yourself on the web when you have a paranoid fear of stalkers, and some of us have it with good cause. I am a lady, who used to work in the games industry, in a public role, and I still receive requests and comments from fans who I really have no interest in keeping up with. Thankfully I no longer get actual gifts sent to my work place, or at least work have stopped forwarding them onto me. So quite frankly any info that makes me obviously Googl-lable is a no no. So, what can I say, it's alright being me, yes that is a wig in the photo, and so far I am holding down the pretense that I'm not struggling with web design although my face apparently says otherwise.

This week was Photoshop week, I made a duck site, which was rockin' duck rock. No picture available as the file I e-mailed is not compatible with my home computer so won't open. It was really interesting to see some of the functionality of Photoshop and how it relates to Dreamweaver. Basically you can just make a nicely layered image that looks like a website, slice up the sections that you want to be links and Bob's your uncle (well he's definitely not my Uncle, mine's called Bill. He has a rare form of Parkinson's disease which is really quite cool / interesting depending on how empathetic you are). Ctrl T for free transform of objects was the learning tip of the day.

So yesterday I cycled 22 miles (it should have only been 20 but I got lost) and ran a further 4. This reinforced my previous suspicion that exercise is bad for you as I rapidly developed a head full of mucus in the night and couldn't sleep. Plus side was the quiet of the wee hours gave ample website ponder-ance time. So I'm settled on my 'science experiments in the kitchen' idea (despite noting that Morag mentioned it on her blog and wrote it off as boring). Here is a Paint mock up of my home page, yes that's right, we learnt how to use Photoshop and the best I can muster at home is the use of Paint... pathetic.

The idea is that the objects in the drawn kitchen are links to experiment 'recipe' pages. I only have four experiment ideas at the moment, the cat is not an experiment, it could be an easter egg. The tabs at the top take you to information pages on safety of the experiments, the science background of the site, and one with references and stuff.

I really wanted the page to have an old skool point and click feel, where the action objects stick out like a sore thumb. This adds a nice feeling of nostalgia for oldies like me while making the site look pleasantly child friendly. Well thats the sales spiel anyway.

A worrying slice of my mind

Whilst contemplating the joys of brown paper, and sticking a load of it to my walls, I decided that this special material* needs to be incorporated into my web design project. A quick search revealed a super free resource of brown paper backgrounds, so that's my design base sorted. However the little issue of content is still looming, fortunately I have two ideas.

1. Dissections and dead people: I think dissections are beautiful, and the soulless nature of corpses is an eerie and fascinating reason to explore the boundaries between science and spirituality. I have often pondered how to bring the intrigue of dead people into my art and it's possible that a website is a good medium. The home page could depict a corpse in a morgue with animations of cutting into the body. The items in the morgue would function as links to pages such as the role of the pathologist, dissection equipment through history, and a body parts gallery.

http://www.scienzepostmoderne.org/Immagini/Opere/DamienHirst8AutopsyWithSlicedHumanBrain.jpg
This picture is sadly blood free, so not as nice as it could be, but still quite good.
Check out the patterns on  'second from the right, bottom row', and 'third from the right, middle row'.
Pretty.

Sadly I don't think I can take this idea forward due to a lack of resources. My idea is to show the exceptionally colourful and fluid nature of the internal body when you first open it up, but this luster does not remain for long and I don't think I can get easy access to images that really capture it. Also I am a bit worried about Googling dead people... My alternative is to break into a morgue and take photos myself, this is appealing but probably a touch too illegal to satisfy a Sci comm course component.

2. Science in your kitchen: Food is not science, I say this for my own benefit as I love food and really just want to write about it all the time, but I can't, because food is not science and this website design course is supposed to be about science (communication). Luckily scientific experiments are science and there are a multitude of them that can be done in your kitchen.

This idea lends itself to lots of fun media such as experiment descriptions, photos, and demo videos / explanatory podcasts. It could have functionality for users to post their own pictures and experiences making it more interactive and community based. I'm not sure if it should be aimed at children or adults who would then use the content with children, but either way the crafty nature of home experiments lends itself nicely to the crafty association of brown paper design. Now thats an epic win for a crazy lady like me.

Anyway, enough of my insanity, here's what you've all been waiting for... Stuff I learnt this week:

• Adding links to a webpage. I put links into my test page and also practiced this by adding the links in this blog as embedded links.
• How to put a background image on my test website. This worked nicely although I had some issues with the placement of the div wrapper against the background, adding a higher margin at the top of the background image fixed this.
• Different browsers have different displays. The div wrapper is centre aligned in Firefox but not in Explorer, I'm not sure why but one day I will find out how to fix this.
• CSS gets hard to read once there is a lot of it. My new mentor swears by the use of indentation, she may have method to her madness and next week I will try and find a nice way to format my CSS so it remains legible.

*For those not in the know brown paper is amazing for several reasons: It invokes feelings of nostalgia, sometimes it is ribbed (not just for ladies), great stuff comes wrapped in it (like Victorian parcels, mushrooms, and tramp whiskey), and it compliments twine. It also makes nice patchwork quilts.

Self centered

Week one day one: I'm not there
Week one day two: Trying to read handouts about HTML and CSS on your own is dull, apparently I am distracted today.
Week one day three: OK focus, read notes, ahhh they do make sense. Right I'm on this.
Week one day three continued: Access to Dreamweaver achieved... crack knuckles and get in there.

So basically I have done the same thing as everyone else, ran through the work sheet (although I haven't done the bit about links yet, that excitement is yet to behold my keyboard fingers), made this blog, and made a bit of web coding for a few lines of text.

I've used the same links as everyone else:
http://www.csszengarden.com/
http://www.w3schools.com/css/

My learning / reflection points:

1. Why does CSS Zen garden open with the hovering links box over half the text on my work computer? This made me hate the site, if you are going to be an example of good design then get it right. All the other pages open beautifully, so basically the makers of Zen garden are rubbish. I have taken them off my Christmas card list. 
2. Trying to write this blog using HTML instead of the editing functions is pointless since there is not really any editing I want to do, but putting in line breaks and making stuff bold was momentarily fun. 
3. I don't know how to make my div id=wrapper align properly. Why is it in the middle of the page? It's not supposed to be there, I'm not telling it to be there, why does it have a life of it's own?*
4. Colour doesn't have a 'u' in it. This is probably my biggest learning point. I shall go through all my childhood books immediately and tip-ex it out. 

*Clearly the only answer is that our worst fears have been realised and technology is self forming into a conscious entity. Note to self: ask about this in class and reign that self centered bad boy back in.