Thursday, 7 April 2011

How to build and interactive product - 10 Steps

Step 1 - Research

One of the websites I looked at for my research into children's healthy eating was 'Food Dudes'. I immediately noticed that the site used a flash animation in the header for moving clouds. The site looked effective in appealing to the target audience as it uses bright colours and cartoon characters. I felt that the website was aimed at older children rather than the younger target audience I would be leaning towards. This was due to the site being more informative than interactive and plus the cartoon characters on the site looked older. 

Step 2 - Brainstorming 

After completing my initial research a began to formulate some ideas in my sketch book. After I had considered the target audience, I thought about a suitable name for the site and eventually landed upon 'an apple a day'. I began skecthing out wireframes and considering page content before I went straight into Photoshop or Flash. This was an important stage of the production of my site as I was able to gain a better understanding of what the site would have to include and how I could make it appeal to a selective audience. 


Step 3 - Technical Requirements

I had to consider the technical aspects or my site and what I would need to create it. I realised that it would be a small site so a CMS would not be required, but I would have to create the site in Flash to ensure interactivity. I would have a timeframe of around 5 weeks to create the flash website so it is important to organise time wisely when working to such constraints. The final product should be successful in informing and entertaining the target audience of young children.

Step 4 - Written Outline

Site Structure


Home - Introduction to site, some healthy eating info.
Quiz - Interactive game which helps the user to seperate healthy products from unhealthy products.
Guide - More info on healthy eating and information of five a day.
Contact - Small contact section including contact details of the website.

Step 5 - Wireframes 

When I had decided upon the pages and content of my site I could then begin to sketch out wireframes to give me a clear idea of layout and structure.

Step 6 - Design


After generating some ideas and plans in my sketch book, I began to bring the design into Photoshop. I visited Adobe Kuler to find a suitable colour scheme which would be eye catching and appealing to the target audience. I wanted to make the design as true as possible to my original wireframe, as this would make structure considerations easier and I could use my full focus on design. I worked on the logo of the site and used a simple graphic of an apple behind the main text. I thought about how I could animate the apple in Flash so this would be a good feature to have. My navigation looked simplistic but it was clearly readible and understandble and this was important to consider as the site is for children. I was pleased with the outcome of this design and was now ready to develop it into Flash.

Step 7 - Construction

The next step was to begin constructing my sketches and ideas in Flash. I added my images to the library in Flash using the Photoshop mock-up I had already produced. I converted my navigation images into buttons in order to add action script code to them to make the site navigable. I created a seperate layer in the timeline for actions and I added the content of the site in individual layers based on the page. I decided to do the site in one scene which meant my timeline would become quite busy as there would need to be a lot of motions tweens and navigation using labels.

Step 8 - Development

The next step of the process was to link the pages together make sure that the site was fully functional and interactive. When I had tested the site and checked that everything was working correctly I could then begin user testing in order to find out other peoples views and feedback on my website. This is an important part of the process as I need to know if my site would be appropriate and appealing to the target audience.