Lips

As part of the S.M.A.R.T acronym animations the image of lips will be part of the 'T' initial which stands for the word 'Tell'. Each lip has been cut on Photoshop so that they can be managed separately on Flash. The lips will have a opening and closing affect as words appear from the middle giving the idea of a talking mouth. The use of lips seemed relevant as it would express the relevant interpretations that we want the audience to connote from this animation. Not much had to be altered on the lips apart from using the blurring tool in order to blend in the colour and therefore make it seem more even and outstanding to the viewer.

Navigation System

As mentioned previously on the 'E-learning project' blog, the group opted to have a navigation system in a form of a spaceship from an inside view. Therefore similar to the image used below we have designed a new form of navigation system that would have the structure of each button on the surface where the participants have a clear visual of each control i.e. home, previous, next etc. The image is a spaceship from the spaceman's point of view looking out into space. This image links in perfectly with the overall theme and concept of the whole project. Our first design did not fit in very well as it proved to be very small and the 'screen' which the animations and graphics would be projected through was far too small.Like most of the images used in the project the navigation system was originally produced as a freehand drawing on paper and later altered on Photoshop. By drawing out our own image it made it possible to structure the buttons in the position that the group agreed upon. The extra 'objects' that were placed on to the drawing would not have much of a function towards the navigation system however it does add to the image and make it look somewhat 'real'. However due to size complication a new image had to be produced and this is the final draft of the navigation system;

Icons (continued...)

Added to the 'Acceptance' part of the acronyms is the icon of a 'folder' otherwise know as an icon for files that are consistent in Window PCs. Like the others this image has been drawn out on paper then later scanned and altered in Photoshop, particularly to emphasise the colours used as well as correct any mistakes and even make the image seem rather graphic and illustrated with a hint of originality. In relation to the icon the group felt it would be appropriate to add a few 'slimy' objects that were designed separately and later attached onto the words 'nasty messages' as it would be involved in a graphic animation that will appear from inside the folder. The slimy figures will visually contribute to the message that is inside the folder; again the images and visual art is easier for our target audience to understand and interpret therefore its suitable for this project.

Icons (continued...)

Also included in the 'A' acronym letter of 'Acceptance' is a simple envelope image that consist of the iconic '@' symbol that is associated with E-mail and E-mail addresses. However a different approach was taken for this icon as most of this design was produced on Photoshop, its simplicity would not interrupt the illustrated theme of the overall project, therefore using the Photoshop 'Rectangle marquee tool' to create the outer shape of the envelope over the sketch drawing that the designer of the group drew and scanned. She later found an @ symbol via google.com/images of which she cut and pasted on the the envelope image, thus completing the image with connotations of its purpose.

Icons

Some designs were produced for the letter 'A' - Acceptance in the 'S.M.A.R.T' acronym that are being included in the e-learning project as mentioned previously. Acceptance touches upon the problematic issues that are involved when surfing the web, for example receiving and accepting un-known files that different sources may send through the use of e-mail, instant messenger, or even downloading folders. For this particular part the group decided that it would be a good idea to visually match the general connotations and interpretation that link to these images. The virus image which was drawn out on a sketchbook then later scanned and altered using Photoshop was made to be an 'ugly' and slimy subject as it would project the same kind of perception that people usually have of the word 'virus'. Further-more, the icon drawn out for the instant messenger is by ordinary associated with the 'smilies' that are continuously used in many different instant messaging enterprises such as 'MSN', 'GMAIL', 'BLACKBERRY'. Thus the audience will be able to easily recognize what the icon stands for and what it represents.

Problem - second testing

During the making of the acronym button a problem did arise. When testing the project for a second time, the participant pointed out that part of the M acronym (meeting) did not make sense. The message we are trying to put across is if the child is meeting with people that they have met over the internet, do not go alone, go with others! However, this message is put across via images and not text. See below...

Don't go alone...

...go with others.

Even after this feedback from the participant, we decided to keep the acronym as it is. We feel that by adding text it will ruin the animation. As discussed through the research undertaken...the fact that the project is visually appealing, has equal importance.

Project testing

In order to see if the animating of the acronyms works on a REAL audience...we put it to test on a 9 year old. The participant understood the project and was able to interact efficiently. The only part of the project that confused the child was that the animation started immediately and therefore she didn't know what she was watching. In order to resolve this, a short brief will appear to explain what they are going to learn about:

'5 SMART Rules on how to safe online'.

Video development

During the editing of the video we realised that the audio was very poor. It would be her hard for the participant to understand what is being said! To resolve this problem we have decided to put speech bubbles in the video and take out the existing audio. The mother will have pink speech marks and the young boy will have blue to represent the sexes.

Clips before video!

Before the video begins, we are thinking of having a short clip of which implies the video is about to be begin. See below some examples...

Homepage Introduction

Below is the introduction. This message will pop up automatically at the beginning of the experience to inform the participant of what to expect. The message is quite simplistic as we have had to take into consideration the age of the users.

Hello and welcome to ‘The Social space’

This interactive experience will provide you with information on how to be safe whilst networking as it is a big part of our life’s today and something we should all be aware of. The futuristic homepage will give you the option of four buttons; these will lead to different experiences and a quiz at the end where you can test your knowledge on what you have learnt in ‘The Social Space’. At all times navigation buttons will be available at the bottom of the screen giving you the option to go back to the home page and select the experience of your choice.

Have a happy space experience!

Project developments - Homepage

Another amendment that has been made to the project is the homepage. The reason for this is the fact that we want to concentrate on sticking to the theme. Therefore we are still going with the idea of having a face, but rather then a futuristic face, we are going to have a image of an astronaut like the one pictured below. This image will not be used though as we are going to draw our own and scan it in

.

Project development - Layout

Before we decided to change the homepage, initially when you selected the video button, an animated TV screen was going to appear, which by turning the TV on would start the video playing. However, now we have opted to have spaceship controls continuously in the background after selecting the homepage button...we decided that this ties in better with the projects theme. Below is an image that we found on the web, we are going for the same idea, but have opted to draw it our self and scan it...image to follow for this!

Project development - Change of Navigations

There have been few changes made to the project. Initially the home page was going to appear with the different interactive buttons enabling the viewer to chose which button they wanted to experience. However, it has been decided that the home page will now consist of just one button which will go straight to the video button! Our reasoning for this is because the video is the main button we want the participants to take part in. Although, it is evident through research that giving the participant options is vital. Therefore, the toolbar at the bottom of the page will always be present so that the viewers has the option to exit the video and navigate aroun the project...for example go back to how page or straight to quiz button.

List of Buttons names

1. Video
2. SMART
3. Quiz
4. Information Services
5. Homepage
6. Next
   
7. Previous

Project Time-line

As far as the timeline goes we have not been able to achieve everything we wanted. The main reason for this is that the acronym button is taking much longer then expected...this is why we decided to cut out doing the 5P's, as we think it will effect the rest of the project.

Time-line Revised

Week 5 - We did get background image complete and decided that a second game was a bit ambitious.

Week 6 - Did not achieve getting the homepage complete, however this is a good thing as concept has changed.

Week 7 - Information page complete

Week 8 - Completion of safety tips not complete as acronym animations taking longer the expected.

Week 9 - Video has been edited and almost complete, however few more changes and improvements need to be done.

Week 10 - Game will not be complete in week 10 as haven't started yet, however we allowed ourselves week 11/12 to check and tidy. Also as backup in case this was to happen.

Project developments

We have been having a think as to what the name of the project should be and I have come up with a couple of ideas. Obviously we want the name of the project to include a space theme, seeing as this is this is highly relevant to the experience.

Name Idea's:

• Lost in Space
• The Social Space
• Networking Space Experience
  
• Above and Beyond

We have decided to go for 'The Social Space', it fits in well with the theme and provides a social experience by which the participant can learn and have fun in a sociable manner.

Another aspect to mention on the development of the project is that we are no longer going to include the 5 P's within the acronym button. This is due to the fact that we did not realise how much time and effort it would take to create these animations and therefore have made a group decision to just stick to the SMART acronyms. There by spending more time on just this acronym means higher quality of this specific button.