Final Homepage

Below is the final homepage of our site.  The design and look of the site is consistent throughout having a desired look of it being sketched/drawn.  This fits in with the product and what it is about creating a feel and look that we desired from the start when planning the project.  The background and stage with the shadow provides an effect of the drawing stage being raised.  The logo has a friendly welcoming look to it having the smiley face incorporated into it.

Evaluating / Testing

Throughout our testing and evaluating we have always took on board what has been said negative or positive and used it to our advantage in creating a product that the users are happy with.
We have strived to improve our product along the way with the testing sessions being very valuable to us.

For our final testing we should a Graphic Design Teacher who only had good things to say about the product.  He thought the design and layout of the product had been well though through taking into account what the product is about and how we sell it to people.

He thought the fact that the output of the image size being small was a bonus for when being used in Schools to storage issues on networks.  Also the ability to add to pictures once you have completed them was if you had drawn a dog you could add a dog house behind it or a bone and a bowl.
He recommended that more categories of images would allow for a wider target audience.

The drawing stage looks good with the applied shadow and works really nicely with the background now it has been lightened.

One thing that was of very importance to us was a comment made about the step by step function as the bottom of the screen, he said he sometimes forgot what step he was one and that it would be useful to notify the user in some way of which stage they are actually working on.  We took this on board and made the change which darkens the step the user is currently on.

The images for the people category look stretched. I will resize the images to look better

All the feedback has been vital and critical in the way our finished product stands today, without it we wouldn't of been able to of produced such a brilliant product.

Our product has been tested on PCs, Apple Macs and laptops, on a range of browsers such as Mozilla Firefox, Internet Explorer, Google Chrome and Safari.

We have tested the product using the following peripherals -
- Mouse pad
- Mouse
- iPhone
- iPad
- Bamboo tablet
- Smartboard / Interactive board

Website entrance

We thought long and hard about how we wanted the website to start when its loaded up.  I didn't want the site to just appear with all the contents so thought it might produce a nice effect if the panels came in one by one with buttons flying in providing the site with some animation that young users would enjoy and appreciate.  We decided we would also use a pre loader for the opening of the site, this being the Skoodle logo but having it go through 100%. i.e. Sko1odle, Sko2odle and so on till when it got to 90 then the site would load up on 100%.
The final entrance of the site we decided on is as follows, the pre loader starts then once at 100% the Skoodle background appears, the top panel comes down with no buttons, then the left panel slides out with the tools in place though.  After that the buttons appear on the top panel in colour, the white stage on which to draw on then the Skoodle logo comes from of the top of the screen with a nice effect of the eyebrows and mouth bouncing. Finally the buttons on the top panel change to the colour grey in which they are until rolled over or selected by the user.
This works really well and we have received some good feedback on this sue to the fact that it provides a nice fluid entrance with its animation.

Pre loader

We decided that we would use a pre loader on the entrance to the site which would have the percentage going up in the middle of the skoodle logo.
Another area that we identified that would require the use of a pre loader was in the image bank menu when the images loaded up.
I designed an egg timer in the same style as to which I had produced all the other buttons and icons and then created the loader in flash.  This may also be used on the loading up of the actual larger images on to the drawing area, depending on the sizes.

Final update of buttons and tools

It was very important for me being in charge of the design and layout of the product that all the buttons and tools were consistent throughout the product having the same sketched effect look to them.  I had already designed and produced all the icons for the product but noticed that when they were in place some just didn't look like they were part of the same product not having the same consistency as others.  In total I have probably drawn over a hundred buttons to get the desired look that I was completely happy with.  

Below are the final images for the most recently changed icons and tools that are used in the product.

 

Evaluating / Testing

We our now nearing the end of the project and feel not too much more testing / evaluating with people will be required.

This testing session involved adults from the area and staff from a local Secondary School.

Feedback:

The tool tips were useful though could of appeared quicker.

The design of the site having the sketched effect looked went down well with the users.

They thought the product worked really well providing a great way for people to learn to draw.

The text on the information page needs to be speeded up slightly.

The pre loader on the image bank is viewable for some reason over the images even when they have loaded up.

The clear tool when pressed once can be pressed and pressed until the user is bored of pressing it, basically the warning message will appear however many times the button is pressed and the user will have to select no on them all which will not be a good advertisement for the product.  This will be solved with some coding.

The PE teacher was really impressed with the product and the outcome of the picture though it wasn't neat and perfect you could see what it was and a great way of learning breaking things down into manageable sections.  He said his son would love to use the product and benefit from it.

The feedback in general for this session was excellent.

Image Bank Menu

The image bank menu (shown below) I created using Photoshop and through sketches I had drawn and scanned into the computer then manipulated using Photoshop.  The arrows and cross I again had drawn and scanned in then manipulated them in Photoshop.  The user will use the arrows to scroll through the categories which have been split up into three like shown in the image below, animals, animals 2, animals 3.  This allows the user to scroll through a smaller number of images rather than having to go through all twenty at once.  A roll over effect is applied to the category boxes, they outline enlarges.

Below shows the images layout, which co-insides with the image bank menu.  Having consistency throughout the menus is important to the look and design of the site, all are fluid going from one to another with just the contents changing.  The outline of the menu and the cross stay in the same position as the previous menu, the arrows are now located on the sides allowing the user to scroll right and left throughout the images. The box outline enlarges when roll over providing the user with more interactivity.

When you select the image you want the following message appears warning the user of what will happen and do they wish to continue.  Again I have been consistent with the design and menu never actually changes just the contents. 

Step by Step

The step by step option was originally located under the assistance tool when the user selected the assistance it then appeared underneath the tool.  We altered this due to the fact that we wanted the step by step function to be available to the user at all times when they were drawing as this is the main feature of the site, allowing the user to draw in six easy steps that they are comfortable with.  We added a nice animation to the steps so that once the user selects an image to draw they appear at the bottom of the drawing area one by one as if they are walking on to the screen.  As you can see there are two other buttons located either side of the steps, these are an exit button allowing the user to remove the image they are drawing for good and will be prompted by a message to warn them.  The other on the left hand side is a re-size tool for the image, this allowing them to make the image they are drawing smaller being able to place it in a corner or to the side so they can draw the illustration without tracing it.  As you can see there is a slight tint/glow to the buttons so if they appear on the background due to the size of the users screen resolution.

Evaluating / testing

Through our testing sessions in schools we had gained some valuable feedback from users as to what their thoughts were about the product.
The following users had tested the product -
Primary School Children
Secondary School Children
Adults
Teachers
College Pupils

The evaluating and testing of the product from other users has been extremely valuable throughout the production of the product.  Its played a vital role in how the product has been shaped along the way with the feedback always took on board and worked on as to how we can alter, modify and improve the areas that we have been made aware of.

This testing session involved 10 pupils half from Secondary School and the other from College pupils also an ICT Teacher from the Secondary School.

Feedback:

It was mentioned the site could have an exciting start up rather than just everything in place.  We will look into creating some animation of the site for when appearing on the homepage.  Panels and buttons flying into place possibly.

Animation of the menu was brought up as not much really goes on. We will look to incorporate some roll over effects to the menus and images.

The children liked being able to alter the colours of the panels, having the freedom to do that gave them a feeling of being in control, that they could be different from their friends having a different colour.

The ICT Teacher thought the product worked really well allowing the pupils a way of learning how to draw in a pace that suits them.  The grid tool was something that he liked being able to resize the picture and using the grid area to draw like you do when painting by numbers.

The feedback in general for this session was a major improvement on our previous testing.

Background and drawing stage

The drawing stage we decided would be restricted to a size of 800x600 allowing us not to worry about the re-sizing issue that we came across.  We wanted a background to the stage so that if the users had the browser maximised then it wasn't just white/blank where they couldn't draw on or interact with so we decided to incorporate a background.  Nothing too extreme or fancy as we didn't want it drawing the users attention away so we used the Skoodle logo and put it on an angle as you can see below.  It works really well with the colour of light grey behind it.  We added a shadow to the drawing stage which provided a look that worked really well as if it was raised.

Completion of all Illustrations

All illustrations have been completed, each one consists of six images which when all are drawn they complete a full illustration.  There are sixty images, with six drawings to each making 360 in total.  To add to these I have also included a smaller version of the final drawing which will be used in the image bank menu where users choose the one they want to attempt to draw.  This has been a lengthy process but I'm extremely pleased with the final outcome of all the drawings.

Information Page

For the information page I wanted create something different so it wasn't just text that appears like any other site.  As the page opens I wanted it to stand out and provide some anticipation even though it is only text appearing.  I wanted to keep the amount of text to a minimum on the site so I wanted something that would excite or engross our target audience as the site required an information section.  I produced this using Adobe After Effects.

Testing/Evaluation

I had organised an hour at a local Secondary School where I could test the product with several pupils and staff members allowing us to gain feedback that we could use to our advantage to improve the product.  I showcased the product with pupils from years 10 & 11, allowing them the opportunity to play with the site and give us some much needed feedback as to how we could improve it and what features worked well.
The feedback from the pupils was mainly positive yet some areas they came across that they felt we could improve on.

Animation was an area that was mentioned, not enough interactivity though we had added more from our previous testing. (Logo, eyes following you and the eyebrows and mouth jump when rolled over. Also the tools were interactive when rolled over)

The trace tool took away the learning aspect of drawing.  This will now be removed due to users pointing this out as something they wouldn't use.


The step tool wasn't needed in the assistance area. The step by step tool will now be placed at the bottom of the screen.


Feedback on the design and layout were good, even though I was still unhappy with the appearance of certain buttons no negative feedback was received.

Logo animation

I thought with the logo having a face incorporated into we could take it a step further and have the eyes follow the movement of the mouse as the user moves around the site.

We have also added more animation so that when the user roll overs the logo the eyebrows and mouth jump.

Facebook and Twitter

We have linked our product to its own Facebook and Twitter page.

Facebook        Twitter                                     

Testing/Evaluating

I had organised an hour at a local Primary School where i could go and gain an insight in to what users thought of our product at its current status.  I showcased the product with pupils from years 5 & 6, allowing them the opportunity to play with the site and give us some much needed feedback as to how we could improve it and what features worked well.
The feedback from the pupils was positive and they made some good comments that we can take away and improve certain areas of the product.

Animation was an area that was mentioned, not enough interactivity.
The navigation buttons went down well with the use of bright colours.
They weren't sure what colour they had selected.
The trace tool took away the learning aspect of drawing.

Image Bank Pages

The image bank homepage will provide the user with three different sections that they can access to view the various drawings.  Once they have clicked on the button it will direct them to the selected page containing numerous drawings in relation to the button clicked on.
The image below shows how the section will be set up with the section title in the top left corner and the drawings located in the middle, three at a time with arrows either side allowing the user to scroll through the numerous images.

Layout

Now that the majority of content has been created I have imported it into Photoshop and placed them as we want them to appear in the product.  Here is our layout at the present:
The first image shows the buttons in their black and white state and the second when coloured.

Colour Scheme

The colour scheme has always been something that we haven't really worried about too much as we concentrated on the actually content and then the colour choices that we used for them.  The drawing area of the product was always going to be white with the user having the ability to colour their drawings in and the background.  We had decided on the colours for the buttons and tools so the last place that we could incorporate colour was the background for the top and side banner.  Now through the research I had done at the beginning of this project I had already made up my mind that if we were to use large spaces of colour they would be pastel colours, nothing too bright and vibrant.

The top and side banner will be coloured when the user arrives on the homepage and they will have the option to select four different pastel colours.  To do this they will use the colours option at the bottom of the tool panel.

A colour palette tool has been designed that could be introduced should this be decided on, this is shown below.

Colour and Size Alterations

The buttons on the top banner change from black and white to colour when clicked on.  I had originally chosen colours that we associated to the symbols that were on the buttons such as red for the life ring on the assist button and blue for the floppy disk on the save button but Tim suggested that they might look best using the colours of the rainbow so I tried this but now I have seen them in the product laid out it has to go back to how they were originally done.  The product is aimed at young people and they represent the colour red with the life ring and when green it looked nothing like it and the floppy disk 'save button' is known for being blue so I think it is important they it is easy for the users to know what the buttons are through the use of the images on them.

A small  alteration is the sizes of the buttons which has had to been changed.

These are the finish coloured buttons. 

 

Colour Palette

To allow users the option of colouring in the finished pictures we wanted to provide a range of colours that they could choose from and the best option we thought that would give the widest range of colours would be the colour palette I designed below.  This will require more work to be done later on to provide a more 3D look to it for the final product as at the moment it doesn't fit into the scheme.

The new design I have chosen for the colour palette is just a random shape, like a paint splodge.

I think this works well as it is nothing too fancy looking out of place with the other tools.

Assistance Menu Buttons

The assist button when clicked on will provide a small menu below the top banner where users can use the assistance tools on offer, these are the grid tool, step by step tool and the free hand tool.
The grid tool will bring a grid over your image, the step by step tool will provide six steps to choose from which will be located at the bottom of the screen and the free hand tool will provide the user an opportunity to draw illustrations of their own choice rather than selecting an existing drawing from our database.

Arrow Tools

The arrow tools will be utilised at the tool panel, as the user will be able to open and close this panel so when the panel is out the arrow will able on the left showing the option to close it and when closed it will appear on the right giving the option to open it.
The arrows will also be used on the image bank pages where the users will use them to search through the images available to them to draw.

Tool Panel Alterations

Some minor alterations have been done to the tool panel.  The following items have been re-designed to give a better effect of a sketched look : redo button, undo button and the paint tin tool.
The previous undo and redo buttons I had designed didn't give the desired look of the sketch effect, slightly drawn too neatly so I re-produced these:

The paint tin looked too neat also and when I looked back over the previous designs I had create I ended up working on the original one I'd done and worked on that producing a tool that looked well with the other tools portraying the desired effect I was looking for.

Drawings

The actual content that the users will be drawing I have produced using Adobe Illustrator.  I have drawn the illustrations in steps that users can easily follow and learn how to draw in six easy steps.  We are looking to allow the users the opportunity to start at any of the steps, giving them the freedom to begin drawing the illustration at a stage that they are comfortable and confident at.
Here are just a few drawings that I have done that will be in the animal section.  Hoping to produce at least 10 -15 illustrations for each section, animals, transport and people.