Final Evaluation

Laura Edwards

Sounds

Examples of Sounds ndash Edited VersionsBeat 1

Beat 2

Beat 3

Disco Effect 1

Disco Effect 2

Disco Effect 3

Drums

Guitar

Sound Effect

Female Vocals 1

Female Vocals 2

Female Vocals 3

Piano 1

Piano 2

Piano 3

Recorded 1

Recorded 2

Recorded 3

Female Vocals 4

>

>

>

Full Ejay Song

Full Ejay Song Unedited

Sound LogSound Description Obtained Format

Beat 1 Sound of drums being played to a fast rhythm with a base in the background

Made in Ejay WAV

Beat 2 Sound of another fast beat similar to the first

Made in Ejay WAV

Beat 3 Sound of drums being played Made in Aviary WAV

Disco Effect 1 Sound of a whiney disco effect played by a keyboard

Made in Ejay WAV

Disco Effect 2 A fast sound played using a keyboard

Made in Ejay WAV

Disco Effect 3 A disco effect similar to the first disco sound effect

Made in Ejay WAV

Drums 1 A jazzy drum sound effect Downloaded from Royaltyfreemusiccom

WAV

Female Vocals 1 Female singing Made in Ejay WAVFemale Vocals 2 Female singing Made in Ejay WAVFemale Vocals 3 Female singing Made in Ejay WAVFemale Vocals 4 Female singing Made in Ejay WAVGuitar 1 Guitar playing a cool western

sound effectMade in Ejay WAV

Guitar 2 A cool music track played by guitar

Made in Ejay WAV

Guitar 3 A nice soundtrack played by guitar

Downloaded from Spotify WAV

Piano 1 A few keys played on a piano Downloaded from Spotify WAV

Piano 2 A nice sweet sound effect of keys being played on a piano

Made in Ejay WAV

Piano 3 A nice little music track made by playing a few keys on a piano

Downloaded from Royaltyfreemusiccom

WAV

Recorded 1 Sound of hands clapping Recorded using a webcam microphone

WAV

Recorded 2 Sound of a whistle being blown Recorded using a webcam microphone

WAV

Recorded 3 Sound of someone wolf whistling Recorded using a mobile phone voice recorder

WAV

Sound Effect 1 A cool sci-fi sound effect Downloaded from SoundJaycom WAV

Sounds Made In EjayBeat 1 WAVBeat 2 WAVDisco Effect 1 WAVDisco Effect 2 WAVDisco Effect 3 WAVFemale Vocals 1 WAVFemale Vocals 2 WAVFemale Vocals 3 WAVFemale Vocals 4 WAVGuitar 1 WAVGuitar 2 WAVPiano 2 WAV

Sounds RecordedRecorded 1 Hands

ClappingWAV

Recorded 2 Whistle Blowing

WAV

Recorded 3 Wolf Whistle WAV

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds

Examples of Sounds ndash Edited VersionsBeat 1

Beat 2

Beat 3

Disco Effect 1

Disco Effect 2

Disco Effect 3

Drums

Guitar

Sound Effect

Female Vocals 1

Female Vocals 2

Female Vocals 3

Piano 1

Piano 2

Piano 3

Recorded 1

Recorded 2

Recorded 3

Female Vocals 4

>

>

>

Full Ejay Song

Full Ejay Song Unedited

Sound LogSound Description Obtained Format

Beat 1 Sound of drums being played to a fast rhythm with a base in the background

Made in Ejay WAV

Beat 2 Sound of another fast beat similar to the first

Made in Ejay WAV

Beat 3 Sound of drums being played Made in Aviary WAV

Disco Effect 1 Sound of a whiney disco effect played by a keyboard

Made in Ejay WAV

Disco Effect 2 A fast sound played using a keyboard

Made in Ejay WAV

Disco Effect 3 A disco effect similar to the first disco sound effect

Made in Ejay WAV

Drums 1 A jazzy drum sound effect Downloaded from Royaltyfreemusiccom

WAV

Female Vocals 1 Female singing Made in Ejay WAVFemale Vocals 2 Female singing Made in Ejay WAVFemale Vocals 3 Female singing Made in Ejay WAVFemale Vocals 4 Female singing Made in Ejay WAVGuitar 1 Guitar playing a cool western

sound effectMade in Ejay WAV

Guitar 2 A cool music track played by guitar

Made in Ejay WAV

Guitar 3 A nice soundtrack played by guitar

Downloaded from Spotify WAV

Piano 1 A few keys played on a piano Downloaded from Spotify WAV

Piano 2 A nice sweet sound effect of keys being played on a piano

Made in Ejay WAV

Piano 3 A nice little music track made by playing a few keys on a piano

Downloaded from Royaltyfreemusiccom

WAV

Recorded 1 Sound of hands clapping Recorded using a webcam microphone

WAV

Recorded 2 Sound of a whistle being blown Recorded using a webcam microphone

WAV

Recorded 3 Sound of someone wolf whistling Recorded using a mobile phone voice recorder

WAV

Sound Effect 1 A cool sci-fi sound effect Downloaded from SoundJaycom WAV

Sounds Made In EjayBeat 1 WAVBeat 2 WAVDisco Effect 1 WAVDisco Effect 2 WAVDisco Effect 3 WAVFemale Vocals 1 WAVFemale Vocals 2 WAVFemale Vocals 3 WAVFemale Vocals 4 WAVGuitar 1 WAVGuitar 2 WAVPiano 2 WAV

Sounds RecordedRecorded 1 Hands

ClappingWAV

Recorded 2 Whistle Blowing

WAV

Recorded 3 Wolf Whistle WAV

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Examples of Sounds ndash Edited VersionsBeat 1

Beat 2

Beat 3

Disco Effect 1

Disco Effect 2

Disco Effect 3

Drums

Guitar

Sound Effect

Female Vocals 1

Female Vocals 2

Female Vocals 3

Piano 1

Piano 2

Piano 3

Recorded 1

Recorded 2

Recorded 3

Female Vocals 4

>

>

>

Full Ejay Song

Full Ejay Song Unedited

Sound LogSound Description Obtained Format

Beat 1 Sound of drums being played to a fast rhythm with a base in the background

Made in Ejay WAV

Beat 2 Sound of another fast beat similar to the first

Made in Ejay WAV

Beat 3 Sound of drums being played Made in Aviary WAV

Disco Effect 1 Sound of a whiney disco effect played by a keyboard

Made in Ejay WAV

Disco Effect 2 A fast sound played using a keyboard

Made in Ejay WAV

Disco Effect 3 A disco effect similar to the first disco sound effect

Made in Ejay WAV

Drums 1 A jazzy drum sound effect Downloaded from Royaltyfreemusiccom

WAV

Female Vocals 1 Female singing Made in Ejay WAVFemale Vocals 2 Female singing Made in Ejay WAVFemale Vocals 3 Female singing Made in Ejay WAVFemale Vocals 4 Female singing Made in Ejay WAVGuitar 1 Guitar playing a cool western

sound effectMade in Ejay WAV

Guitar 2 A cool music track played by guitar

Made in Ejay WAV

Guitar 3 A nice soundtrack played by guitar

Downloaded from Spotify WAV

Piano 1 A few keys played on a piano Downloaded from Spotify WAV

Piano 2 A nice sweet sound effect of keys being played on a piano

Made in Ejay WAV

Piano 3 A nice little music track made by playing a few keys on a piano

Downloaded from Royaltyfreemusiccom

WAV

Recorded 1 Sound of hands clapping Recorded using a webcam microphone

WAV

Recorded 2 Sound of a whistle being blown Recorded using a webcam microphone

WAV

Recorded 3 Sound of someone wolf whistling Recorded using a mobile phone voice recorder

WAV

Sound Effect 1 A cool sci-fi sound effect Downloaded from SoundJaycom WAV

Sounds Made In EjayBeat 1 WAVBeat 2 WAVDisco Effect 1 WAVDisco Effect 2 WAVDisco Effect 3 WAVFemale Vocals 1 WAVFemale Vocals 2 WAVFemale Vocals 3 WAVFemale Vocals 4 WAVGuitar 1 WAVGuitar 2 WAVPiano 2 WAV

Sounds RecordedRecorded 1 Hands

ClappingWAV

Recorded 2 Whistle Blowing

WAV

Recorded 3 Wolf Whistle WAV

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Full Ejay Song

Full Ejay Song Unedited

Sound LogSound Description Obtained Format

Beat 1 Sound of drums being played to a fast rhythm with a base in the background

Made in Ejay WAV

Beat 2 Sound of another fast beat similar to the first

Made in Ejay WAV

Beat 3 Sound of drums being played Made in Aviary WAV

Disco Effect 1 Sound of a whiney disco effect played by a keyboard

Made in Ejay WAV

Disco Effect 2 A fast sound played using a keyboard

Made in Ejay WAV

Disco Effect 3 A disco effect similar to the first disco sound effect

Made in Ejay WAV

Drums 1 A jazzy drum sound effect Downloaded from Royaltyfreemusiccom

WAV

Female Vocals 1 Female singing Made in Ejay WAVFemale Vocals 2 Female singing Made in Ejay WAVFemale Vocals 3 Female singing Made in Ejay WAVFemale Vocals 4 Female singing Made in Ejay WAVGuitar 1 Guitar playing a cool western

sound effectMade in Ejay WAV

Guitar 2 A cool music track played by guitar

Made in Ejay WAV

Guitar 3 A nice soundtrack played by guitar

Downloaded from Spotify WAV

Piano 1 A few keys played on a piano Downloaded from Spotify WAV

Piano 2 A nice sweet sound effect of keys being played on a piano

Made in Ejay WAV

Piano 3 A nice little music track made by playing a few keys on a piano

Downloaded from Royaltyfreemusiccom

WAV

Recorded 1 Sound of hands clapping Recorded using a webcam microphone

WAV

Recorded 2 Sound of a whistle being blown Recorded using a webcam microphone

WAV

Recorded 3 Sound of someone wolf whistling Recorded using a mobile phone voice recorder

WAV

Sound Effect 1 A cool sci-fi sound effect Downloaded from SoundJaycom WAV

Sounds Made In EjayBeat 1 WAVBeat 2 WAVDisco Effect 1 WAVDisco Effect 2 WAVDisco Effect 3 WAVFemale Vocals 1 WAVFemale Vocals 2 WAVFemale Vocals 3 WAVFemale Vocals 4 WAVGuitar 1 WAVGuitar 2 WAVPiano 2 WAV

Sounds RecordedRecorded 1 Hands

ClappingWAV

Recorded 2 Whistle Blowing

WAV

Recorded 3 Wolf Whistle WAV

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sound LogSound Description Obtained Format

Beat 1 Sound of drums being played to a fast rhythm with a base in the background

Made in Ejay WAV

Beat 2 Sound of another fast beat similar to the first

Made in Ejay WAV

Beat 3 Sound of drums being played Made in Aviary WAV

Disco Effect 1 Sound of a whiney disco effect played by a keyboard

Made in Ejay WAV

Disco Effect 2 A fast sound played using a keyboard

Made in Ejay WAV

Disco Effect 3 A disco effect similar to the first disco sound effect

Made in Ejay WAV

Drums 1 A jazzy drum sound effect Downloaded from Royaltyfreemusiccom

WAV

Female Vocals 1 Female singing Made in Ejay WAVFemale Vocals 2 Female singing Made in Ejay WAVFemale Vocals 3 Female singing Made in Ejay WAVFemale Vocals 4 Female singing Made in Ejay WAVGuitar 1 Guitar playing a cool western

sound effectMade in Ejay WAV

Guitar 2 A cool music track played by guitar

Made in Ejay WAV

Guitar 3 A nice soundtrack played by guitar

Downloaded from Spotify WAV

Piano 1 A few keys played on a piano Downloaded from Spotify WAV

Piano 2 A nice sweet sound effect of keys being played on a piano

Made in Ejay WAV

Piano 3 A nice little music track made by playing a few keys on a piano

Downloaded from Royaltyfreemusiccom

WAV

Recorded 1 Sound of hands clapping Recorded using a webcam microphone

WAV

Recorded 2 Sound of a whistle being blown Recorded using a webcam microphone

WAV

Recorded 3 Sound of someone wolf whistling Recorded using a mobile phone voice recorder

WAV

Sound Effect 1 A cool sci-fi sound effect Downloaded from SoundJaycom WAV

Sounds Made In EjayBeat 1 WAVBeat 2 WAVDisco Effect 1 WAVDisco Effect 2 WAVDisco Effect 3 WAVFemale Vocals 1 WAVFemale Vocals 2 WAVFemale Vocals 3 WAVFemale Vocals 4 WAVGuitar 1 WAVGuitar 2 WAVPiano 2 WAV

Sounds RecordedRecorded 1 Hands

ClappingWAV

Recorded 2 Whistle Blowing

WAV

Recorded 3 Wolf Whistle WAV

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds Made In EjayBeat 1 WAVBeat 2 WAVDisco Effect 1 WAVDisco Effect 2 WAVDisco Effect 3 WAVFemale Vocals 1 WAVFemale Vocals 2 WAVFemale Vocals 3 WAVFemale Vocals 4 WAVGuitar 1 WAVGuitar 2 WAVPiano 2 WAV

Sounds RecordedRecorded 1 Hands

ClappingWAV

Recorded 2 Whistle Blowing

WAV

Recorded 3 Wolf Whistle WAV

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds RecordedRecorded 1 Hands

ClappingWAV

Recorded 2 Whistle Blowing

WAV

Recorded 3 Wolf Whistle WAV

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds Made In Aviary

Beat 3 Aviary WAV

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds Downloaded From Royalty Free Websites

Guitar 3 Spotify WAVPiano 3 Royaltyfreemusic

comWAV

Sound Effect 1 SoundJaycom WAVDrums 1 Royaltyfreemusic

comWAV

Piano 1 Spotify WAV

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Making Sounds

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Making Sounds In EjayDance Ejay 5bull Dance Ejay 5 provides a new dimension in music creation The program provides

an incredible new interface and the first-ever 3D engine plus a whole multitude of brand new features However Dance Ejay 5 still remains easy to use in order to inspire the flow of musical creativity The programme provides 5000 brand new royalty-free dance samples to choose from providing music samples from trance techno house and dance genres The whole spectrum of dance music is covered

bull Along with these features Dance Ejay 5 also provides new features such as a polyphonic synthesizer the ldquoGrove Generatorrdquo (a drum computer for programming drum loops) Chord Generator and Bass Generator

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Dance Ejay 5

Samples of royalty free sounds

Background graphics

Control panel

Songsample track

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Making Sounds In EjayI dragged the sound samples from the library to compose a song Instead of making individual sound samples I decided to make an entire song and then edit the track down to capture individual sound clips that I could incorporate into the website

By making an entire soundtrack instead of making individual sound files I made sure that the sounds would work well together

By making a whole song and then editing it down I made sure that the sounds work well together This works better than just making different individual sounds since the sounds can work together to make a song

If I had just made individual sounds then there would be the possibility that the sounds would sound jumbled and messy when they were put together in the website

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Making Sounds In Aviary

Another method of making sounds that I used was making sounds online through Aviary

Aviary provides a multitude of different functions such as vector editor graphics editor music generator music editor etchellip

Aviary may have a slightly more complex interface than Ejay however I can still use this program in order to create suitable sound beats

The sounds that I made were done through registering online

Music soundtracks along an edited timeline

Sound library

Imported sounds

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Making Sounds In Aviary

The sound maker in Aviary is only used for making drum beats and making music loops therefore there are limitations in using this method

I can only make drum beats in aviary therefore this wonrsquot be the primary sound software that I will be using

I will be mainly using Aviary for editing sounds

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Ejay amp Aviarybull Ejay and Aviary are essentially the same program since they both follow the same basic principle

when it comes to making music

bull Aviary is essentially the better program since it comes in a package that includes a graphics editor music editor etchellip However the two programs both work in the same way

bull For instance the programs both provide a library containing a multitude of royalty free sounds that can be used to make a sound track Also they give the user full control over their music

bull However Ejay was the primary website that I used to make sounds as I only used Aviary to make one or two sounds At the time I wasnrsquot particularly used to Aviary as it has a more complicated interface than Ejay therefore I only used the program as a means of experimentation

bull Incidentally I wanted to provide a variety of sounds therefore I also wanted to provide a variety of ways of making and recording sounds The way that I have done this has been for experimentation purposes as it has all been about finding out different means of preserving sound quality which means that I wanted to try different recording methods to see which method worked best

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Recording Sounds

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Recording SoundsRecording Soundsbull I recorded three sounds using a voice recorder which was also used for recording the help

file for the website

bull I recorded the sounds using this simple voice recorder and then uploaded the sounds on to a computer for editing The final sounds have been saved onto a computer as WAV files The voice recorder automatically saves the sound files as WAV files therefore when I upload them onto the computer I can then convert the sounds to MP3 files

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Recorded Sounds

Recorded 1

Recorded 2

Recorded 3

>

>

>

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Problems With Recording

White Noise

White noise is random signals capturing during recording White noise is made by combining different frequencies of sound together For instance during a recording a personrsquos voice can be recorded as well as background noise White noise is made by the different between these two frequencies of noise

Sound studios sound proof their recording studios so that no background or low frequency noises are captured during the recordings This is a method of preventing white noise

Because white noise is made up of different noise frequencies white noise can also be problematic as it drowns out or masks lower frequency sounds

White noise prevents the recording being clear and sharp

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Other Method Of Voice Recording

Aviary can also be used to record voices along as you have a microphone on your computer To start recording click on the ldquoRecordrdquo button This will then open the option box as appears above

Note before beginning the recording test the microphone An easy way to see if the program is working is by speaking to the microphone and checking whether the speaker bar goes up and down

In this feature you can also adjust your volume and reduce the echo

When you start properly recording the progress bar will gradually fill up showing how much time you have left during your recording The current time available for all recordings is 2 minutes If you require more time then you will need to start another recording and then join the two together in Aviaryrsquos sound editor

Quality controlsRecord button

Progress bar

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Editing Sounds

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Editing Sounds In Ejay I made one song in Ejay and then edited it down so that I could get parts of the song to use as individual sounds

The reason that I did this is to make sure that the individual sounds can be mixed together to make a suitable song

To get individual sounds for this I saved the main song reopened it into a new Ejay file and then deleted different elements of the song to get individual sounds

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Editing Sounds In EjayFor example if I wanted to make a sound of just the vocals then I reopened the original song file deleted out all of the other elements of the song and just kept the vocals

For example the vocals in yellow were the part of the song that I wanted to keep so every other sound file I deleted

I then saved this sound file as a new file and labelled it ldquoVocals 1rdquo

I then repeated this process until I had all the sound files that I needed

Part of the vocals that I wanted to keep

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Editing Sounds In Aviary

Import the sound file into the program by clicking ldquoFilerdquo ldquoImportrdquo and then following the procedure to upload your files Note that if you select ldquoEveryonerdquo from the drop down menu when the options box asks for the security settings this setting will allow everyone on the internet to see the sound file

Once the file has been imported it will show in the ldquoImportrdquo sidebar which will allow you to drag the clip onto the timeline

Imported song and ldquoImportrdquo sidebarTimeline

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Editing In Aviary

I recorded this sound therefore it needed editing and fine tuning in order to be used in the website For instance there was a lot of white noise within the clip and the volume was low

Aviary provides a convenient feature called ldquoParametric EQrdquo which allows you to fine-tune your recording

To use this feature open the ldquoEffectsrdquo window in Aviary by double clicking your sound recording From the first drop down effect pick ldquoParametric EQrdquo which is displayed in the print screen above

You can play the sound as you are adjusting the settings in order to test out the different effects in real time

In this example the lower frequencies of the sound needed to be boosted whilst the higher ones needed to be lowered in order to balance out the sound nicely

Once finished with the effects click on the ldquoApplyrdquo button in the bottom right hand corner of the window to apply the effect to the sound

Editing the sound in real time

Effects drop down menu

Adjustable options

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Editing Sounds In Aviary

The sounds that I made and recorded needed to be edited down and reduced in order to be suitable for the website Some of the sounds either needed the ends trimming or the pauses in the recordings need to be deleted so this is where the ldquocroprdquo or ldquotrimrdquo option becomes most effective

To ldquotrimrdquo a click I hovered the mouse over the top corner of the clip (as shown above) where a small triangle icon will appear Then I dragged the icon down to the part of the clip that I wanted ldquocroppingrdquo or ldquotrimmingrdquo Then drag another triangle icon to the end of the clip and this will then clip the sound

I then deleted the part of the clip that I had trimmed to get rid of it

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Saving The Sounds In Aviary

When saving sound files in Aviary you can click the ldquoSave asrdquo option however this will not export the sound as an MP3 or a WAV file Therefore to export the sound file save the file and then click the ldquoMixdownrdquo option when it appears after clicking ldquoSaverdquo

The ldquoMixdownrdquo option will then flatten the sound so that it is no longer on multiple layers and this will then allow you to download the song as a MP3 or WAV file This is for listening to the song outside of Aviary instead of having the file saved as a regular Egg file to use when editing in Aviary

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Original Sounds Compared To Edited Sounds

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Comparison [Videos]

Original Recording Edited Recording

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Comparison 2 [Videos]

Original Recording Edited Recording

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Comparing Full Song To Individual Sounds

Original song [video]

Individual sounds

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

EditingObviously the original recording isnrsquot clear and has a lot of white noise Also the whistle is repeated which is unnecessary for the website so I need to trim the sound as well as reduce the white noise

I edited the sound in Aviary and used the ldquoParametric EQrdquo feature in the effects option

I used this feature to ndashnot completely get rid of the white noise ndash but to reduce the lower frequencies completely and raise the higher frequencies

This reduces the background noise and makes the whistle sound sharper and clear

I also cropped the sound down so that I just had the sound of one whistle instead of two

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Technology amp Programs

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

List of Programs Used

Photoshop CS37For Image Design

Dreamweaver CS3For Site Design

Aviary For Sound Editing

Dance Ejay 5 For Making Sound

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Image - Tools

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Making The Graphics Interface

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Image

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Image Production

Rough Image First Draft Final Image

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Producing Website In Dreamweaver

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Producing The SiteThe beginning stages of making the website are very basic and simple

Firstly I started by opening Dreamweaver and then created a new HTML file

This creates a basic blank webpage that I can easily work with The website that I am creating doesnrsquot require the use of side bars of banners therefore I donrsquot require the use of a CSS or any other forms of templates

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Basic Setup Of Site

This acted as the basic setup for my website Once the new HTML document had been created I selected ldquoInsertrdquo ldquoTablerdquo and then added a table with the dimensions ldquo3x3rdquo The centre square will be where the image will be located and the surrounding squares will acted as placement guides for the borders

The website with have a basic square structure during final production but that merely adds the overall simplicity

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Final Website

This is how the website turned out in its final stages via following the method of using a basic table to organise the different components As you can see this method has saved me some time and effort as I havenrsquot wasted time merely trying to place the components in the right positions The basic table has helped me to place borders and a banner around the central image

The overall website may come off as blocky and rigid however it merely adds to its simplicity After all I am not focusing on attracting an older and mature target audience The website will be targeting children aged 11 and under Incidentally I am focusing more on the quality of sounds and how easy the interface is to interact with rather than its general appearance

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Image amp Website DimensionsImage Dimensions

Height 1000 px Width 800px

Website DimesionsHeight 1339 px

Width 408

The websitersquos dimensions have increased in comparison to the image dimensions since borders and banners have been applied which account for the extra pixels

However the image contained within the website still has the original dimensions attached to it

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Average Website Dimensions

Smallest screen size 800x600

Average (Most Popular) screen size 1024x768

Largest screen size 1280x1024

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Average Dimensions Compared To My Site

bull My website will aim to fit around the 1024x768 mark since this is the most popular screen size

bull According to research around 79 of people who own a laptop or PC have a monitor size of around 1024x768

bull Therefore my website will be aiming for these dimensions in mind since this screen size appears to be the average ndashif not the most popular dimensions for computer monitors

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Average Disk Space amp Bandwidthbull 5GB of disk space with a 100 GB worth of bandwidth should be enough space for an

average size website

bull If I upload my site to a website host then the website would cost me roughly around pound495 per month

bull If more disk space or bandwidth is required then I would have to transfer my site to another account ndash one that would support a website that exceeds the average bandwidth

bull The only disadvantage to this method would be that if I decide to improve my site or add more to it then obviously the bandwidth and the amount of disk space needed would go up which means that I will have to switch to another internet hosting company which could charge me extra per month

bull The average payment for large websites or grouped websites would be around pound65 per month

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Adding Hotspots

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Hotspots For Website ndash 7 StepsStep 1 ndash Add an image to the website

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Hotspots For Website ndash 7 StepsStep 2 ndash Click on the image to highlight it From the properties menu click on one of the three hotspot drawing tools ndash rectangle circle or polygon

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Hotspots For Websites ndash 7 Steps Step 3 ndash Select the right tool and then draw the shape you want on your image

The coordinates for each point with be recorded in the HTML code

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Hotspots For Website ndash 7 StepsStep 4 ndash In the properties window for the hotspot type in or browse to the page that hotspot should link to To add a sound click on the behaviours panel by selecting Window -gt Behaviours Click Add A Behaviour and then scroll down to Play Sound

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Hotspots For Website ndash 7 StepsStep 5 ndash Browse through files and folders and select the sound that you want to attach to the hotspot

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Hotspots For Website ndash 7 StepsStep 6 ndash Add the sound that you want to attach to the hotspot Select how that sound will behave from the drop down menu

In this case I want the sound to play onMouseOver so when the mouse hovers over the hotspot the sound will play

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Creating Hotspots For Website ndash 7 StepsStep 7 ndash Save progress and check that the hotspot works properly by pressing F12

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Adding Sounds

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Adding SoundsAfter creating all of the hotspots for the website I then needed to attach the sounds to the mapped areas For this I simply clicked on the ldquoBehaviourrdquo tab clicked ldquoAdd Behaviourrdquo ldquoPlay Soundrdquo and the browsed through my files to find where the sounds are located

In this example I added a hotspot to the female face within the image therefore I needed to attach one of the sounds that included a female singer

For this example I picked ldquoFemale Vocals 4rdquo after browsing through my files and folders and then clicked ldquoOkrdquo once I had selected the track that I wanted

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Adding Sounds amp Selecting Behaviours

After adding the sound to the behaviours list I then made sure to select the correct ldquoBehaviourrdquo I scrolled down the optional behaviours and then selected the ldquoonMouseOverrdquo behaviour

These activation behaviours describe how the sound will be activated when the user interacts with the website

For instance in this example I select the onMouseOver feature which indicates that when the user hovers the cursor over the selected area the sound will play Of course I can change the behaviour to make the sound play differently when the website is interacted with for example I could change the behaviour to onMouseClick so that when the user clicks the mapped area the sound will play when the mouse is clicked not when the cursor hovers over the area

I chose the onMouseOver behaviour because this is what I had original indicated in my plans and I wanted to stick to my plans as closely as I could Also I feel that using this behaviour makes the website easier to interact with fore if I had chosen the onMouseClick option then users might become confused about which areas they can click on and which areas they canrsquot

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Testing Website

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Testing Website During Production

Obviously during the production stages I needed to make sure that the sounds and behaviours worked correctly For instance as I selected the behaviours used to activated the sounds when the website is interacted with I needed to make sure that these worked practically

To make sure that the website works I saved all of my progress so far and hit the ldquoF12rdquo shortcut This then opens the website in Internet Explore and shows you the website how it would appear if it were uploaded onto the internet This also helped me to test the website so that I can make sure the hotspots are attached to the appropriate areas on the graphics interface as well as making sure that the sounds worked clearly and efficiently and the right behaviours are applied

I have set up the websitersquos behaviours so that when the cursor hovers over a hotspot the sound plays automatically without having the user clicking on the area

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Skills I Have Developed

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Time Plan amp Organisation181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording SoundsEditing Sounds

Final Image Creating Website

Applying Image To Website

Applying Sounds To WebsiteFinish Website

Through consistent organisation as evidenced by the time plan shown above I have been able to work effectively and use time to my advantage so that I can get the most out of lessons and out of outside work I have stuck relatively within this time plan ndashif not I have worked quicker- and have made sure that I have stuck to deadlines

This time plan was a rough estimation on how quick I could complete the work set and obviously I have given myself a little bit too much time to work with ndashsince I have completed the tasks before the final deadline that I have set

I think that these time plans are exceptionally helpful as they give you a rough estimation of how fast you will be working It also gives you motivation to work with as you are constantly checking the flow of your work making sure that you are consistently organised and up to date with deadline Simply put it just helps you to organise your work that much more easier so that you can be in full control

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Improving Knowledge Of Using Dreamweaver

Making Hotspotsbull Before I started this

project I wasnrsquot familiar with Dreamweaver I only had a basic knowledge of how to use the program

bull I wasnrsquot particularly familiar with how to make hotspots for the website however now after completing this project I can admit that I know how to add attachments links and behaviours to a website

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Improving Knowledge Of Using Dreamweaver

bull Another method that I wasnrsquot particularly familiar with when it came to using Dreamweaver was the feature of using behaviours

bull I experimented with the different behaviours in order to see which one would be suitable for the website and make it easier for the users to interact with

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Knowledge Of Soundsbull After completing this project

I have developed and improved my knowledge of using sounds their formats and how to preserve sound quality

bull My planning and research shows how I have researched into the advantages and disadvantages of using sounds so that I maybe able to gain the full advantage out of my sounds

bull By carefully planning and researching into sound files I am able to use the best possible file formats in order to preserve sound quality

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Knowledge Of Sounds

Examples of planning and research that have helped to improve my knowledge of digital and analogue sounds

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Improving Knowledge Of Using Aviarybull Before starting this project I had

no knowledge of how to use the program Aviary Also I had no knowledge of how I could possible improve sounds using Aviary

bull The program exceeded my expectations and I found that it could help to improve sounds so that they have better quality than the original recordings

bull My original recordings contained a lot of white noise and interference and I was surprised how this error could be improved so easily by using Aviary White noise is the main problem that corrupts sounds however I was surprised how it could easily be erased just by turning the low frequencies up and lowering the high frequencies down

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Planning amp Research

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Evaluation Of Mission Statement

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Mission Statementbull One Man Band is a website designed to explore sound interactivity and how sound can be

used within different media formats Not only is the website designed to attract audiences aged 11 and above but it is also designed to attract employers and to showcase my creativity and multi-media skills

bull Incidentally the main objective of the One Man Band website is to construct a simple interface that relies on visuals such as computer graphics to employ a variety of sounds that can be used both simplistically and help audiences to explore the uses of sounds The simplistic visual interface will allow users to interact with visual objects producing sounds on interaction An example of this type of interaction would be the user clicking on an image of a guitar and then hearing the guitar strings playing Moreover I could easily incorporate an example like this into a simple interface however the music instruments that I will use will vary from genre to genre

bull Furthermore the One Man Band website will primarily act as a form of entertainment not to mention also incorporating educational values into the website for instance audio based tutorials will be provided Not only will the audience be capable of enjoying the website but they will also develop understanding of how sounds can be used in a variety of ways through creating their own music Hopefully the audience will develop on their skills realise how music is made and understand how to use sounds effectively to create good quality music

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Target Audiencebull After evaluating my ldquoMission Statementrdquo I have made a basic

outline of my target audience

bull Age 11 ndash 16 bull Gender Femalebull Occupation Student High School Studentbull Demographic E (unemployed students in full time education)bull Sexuality Anybull Ethnicity Any bull Interest Needs to have an interest in making music or have

an interest in the music genre provided

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Secondary Audience

bull The secondary audience would be anyone that has an interest in making music It doesnrsquot have to be teenagers in particular for instance children below the age of 11 will be capable of using the website because of the simple interface

bull I think that the general design of the website targets a young audience range because it is simple basic and has bright and vibrant colours to make it eye catching Because of the interfacersquos simplicity and the fact that there will be an audio based tutorial available young children will be able to use this interface with ease

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Evaluation Of Target Audiencebull One Man Band strives to attract a young audience range aged from 11 to possibly 16 This is the

primary audience Secondary audiences could venture as far as employers looking for examples of how sound is employed or a study of multimedia elements to older audiences looking for a form of entertainment

bull Also since the website primarily targets a young age group the initial designs need to focus on how it will attract the audience Simple cartoonish graphics depicted using bright colours could be a method of interesting a young audience Another method of generating audience appeal is through using a variety of sounds Consequently by incorporating different musical elements into the website it is elevating the website by showing uniqueness meaning that the website wont be tied down to one particular genre

bull Another focus point is the gender of the audience Initially I will be focusing on attracting a uni-sex audience which will help to deliver a product suitable for a wide audience range

bull Moreover acknowledging the age of the primary audience the website needs to focus on simplicity rather than complexity An overly complex interface would disinterest or possibly even intimidate a young audience range causing them to abandon the website Obviously the website needs to focus on entertainment value for instance I need to include a variety of sounds and instruments that will keep the audience entertained no matter how many times they visit the website Furthermore this sense of variety means that the audience have a wide range of options that they can explore which means that in order for them to understand the different sound effects and genres of music then they need to visit the website more than once Consequently this is a primary value of attracting a wide audience range as it could attract a more mature audience whose sole interest is music based

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Evaluation Of Draft Images

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Graphic Interfaces

Design 1 Design 2

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Graphic Design 1Why I Chose Design 1bull Personally I think that Graphic 1 is better for the simple fact that it provides so much more material

that I can work with Meaning that I can incorporate more than one genre into the interface by providing a variety of instruments (Guitar and drums connote rock genre whilst having disco sound effects connote dance or techno) I can include dance music into the interface by mapping disco sound effects to the images of the flowers

bull Graphic 1 provides much more material than Graphic 2 such asndash More colours in the colour scheme ndash More instruments available ndash Bigger image ndash Blends well together

bull However Graphic 2 is still a good image to work with as it is more specific to theme Yet I still feel that despite Graphic 1 only attracting a female audience Graphic 2 would attract a niche audience since people who are only interested in Jazz music would be drawn in by the website

bull Incidentally this is what makes Graphic 1 significantly better than its counterpart because it adds more variety as it can attract audiences that are interested in more than one genre

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Image amp Target Audiencebull The client has asked for the website to primarily target

children as its main audience ndashaged 11 and above Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull Incidentally the bright and vibrant colours that make up the background are going to be utilised as a means of catching the audiencersquos attention The bright colours should be interesting for the audience and should be used as a way of expressing variety and excitement The bright colours should make the design look funky and original

bull Since I am attracting a more feminine audience rather than males I have focused on colouring the graphic pink purple and yellow also adding a bit of blue to the array so that the colours will contrast well together The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Image Production

Rough Image First Draft Final Image

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Evaluation Of Development Log

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Development LogMonth Date Key Events Tasks No Hours

Oct Tues 18th Rough Images Make two rough drafts of graphic interfaces and then decided which one to use giving justifications for choice

8 ndash OutsideHomework

Oct By Fri 21st Recording Sounds By this date have all sounds recorded to be used on website

2 ndash Class work 6 ndash OutsideHomework

Nov Tues 1st Start Editing Sounds Edit all of the sounds so that they are appropriate for the website

2 - Class work2 ndash Outside Work

Nov By Tues 1st Finish Image Make a final copy of the graphic interface to be used on the website

6 ndash OutsideHomework

Nov Tues 8th Start Making Website Begin to make website in Dreamweaver since all components have been finished by this point

4 ndash Class work

Nov Tues 15th Making Website Start applying the image to the website

2 ndash Class work

Nov Fri 18th Making Website Start applying sounds to the website

6 ndash Class work

Nov By Fri 18th Finish Applying Sounds

Finish off applying sounds to the website

Class work

Nov Fri 25th Finish Website Finish off making adjustments to the website

2 ndash Class work

Nov Fri 25th Upload Website Start uploading the website to the internet

Class work

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Development Log ndash Flow Chart181011 211011 011111 081111 151111 181111 251111

Rough Images

Recording Sounds

Editing Sounds

Final Image

Creating Website

Applying Image To Website

Applying Sounds To Website

Finish Website

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Problems With Development Log bull Looking at the time schedule some of the tasks have been given more

time than others for example when applying sounds to the website I have given myself more time to work with since a lot of problems could occur at this point such as programming could corrupt or sounds could distort etchellip

bull I could probably do this whole project with shorter time constraints however I have given myself extra room to work in just in case there are any problems along the way

bull Note that at the end of the time plan my work will consist of class work projects rather than outside homework which is due to the fact that I donrsquot have Adobe Dreamweaver at home therefore I canrsquot work on the website outside of college

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

How I Have Changed My Planning amp Research Do To Development Log

bull I was originally going to make the website in Adobe Flash in order to make the website a lot more professional and ldquoflashierrdquo to work with I was then going to import the Flash file into Adobe Dreamweaver as a template complete with rollover buttons that would help to improve user interactivity

bull However because of time constraints and keeping consistent and organised with the development log I didnrsquot have time to improve the user interface

bull If I had more time to work on the project then I probably would have improved on the interface by using other programs

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Evaluation Of Sounds

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Considering Possible Sounds

For this research I made a list of possible sounds that I could record and then tested and considered them in order to see if they would work well within my website

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds That Would Workhellipbull All of these sounds taken and played as individual noises would not work

successfully without being played alongside other noises Natural noises such as bird song and background noises such as traffic would not work well to make music Sounds that would work to make music include short and easily recognisable sounds such as

bull Hitting metal posts bins bottles tin cans etc bull Rustling bags tin foil bull Slamming doors hitting floorboards tables etc

bull Sounds that create short plosive sounds could work well in a combination used to create music sound tracks since they can be used to make certain notes and tones A combination of different notes produced by hitting tin cans could create a beat

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds That Wouldnrsquot Workhellipbull Unsuccessful sounds that could not be used to create music include

sounds that are used as background noises This includes sounds like

bull Sounds of traffic train stations bull Peoples conversations bull Natural sounds the wind leaves rustling birds singing etc

bull These types of sounds would not work for this simple fact is that the noises are too random For instance the sound of people talking together could not possibly be contributed to making a rhythm because the noises created wouldnt be regular This is the same for noises like traffic Incidentally the noise generated by traffic would be loud and droning which would be inappropriate to make music

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

How This Has Changed The Website Designshellip

bull I found that the short sounds such as hitting bin lids together or clapping work well to make music because they work as single notes that could be combined together in a multitude of ways

bull Therefore long sounds such as background noise wouldnrsquot work for the website since it would be difficult for the user to stop the music if it were played on a loop and it wouldnrsquot work well with similar tracks

bull These are the reasons why I decided to make my sounds as sort and simple as possible so that they could fit together and be combined in a number of different ways instead of sticking to one song or genre

bull This will give the users more of a variety to work with rather than keeping the music to just one genre For instance if I created a simple drum beat the user could combine different elements of other music genres ndashsuch as dance pop or rock- along with it So it gives the users better options and more variety

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Examples Of Good SoundsFor my planning and research I looked at examples of good sounds and found that sounds used for alerts such as ringtones and fire alarms are the most effective sounds to use

Hence this is another reason why I decided to keep my sounds sort as possible

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Changes Between Planning amp Final Production

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Changes In Interface

Because of time constraints within the development log I couldnrsquot work on the interface as much as I would have liked and more importantly the interface didnrsquot turn out quite as good as I had planned

I intended for the interface to have flashing rollover buttons and have an interface that really showed that the user was interacting with the site

For instance without the rollover buttons that I wanted to include -as a user- you canrsquot really tell what you are interacting with until the mouse cursors changes

This doesnrsquot prove to be user friendly as the user would have to be constantly watching the mouse cursor in order to determine what parts of the interface they can interact with

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Making The Interface In Flash amp Dreamweaver

I originally wanted to make the website in Adobe Flash

1 Because I am more familiar with the program than Adobe Dreamweaver

2 Because I can improve the interactivity of the user face

3 And make the overall website look professional

bull However as mentioned before I couldnrsquot carry out with this idea because of time constraints Therefore if I were to do this project again I would ask for more time and probably experiment more with the different programs perhaps combining the two programs together in order to gain the most out of the interface

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Image Production

Rough Image First Draft Final Image

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Changes In Image Production bull The client has asked for the website to primarily target children as its

main audience ndashaged 11 and above

bull Consequently this has greatly influenced the design of my interface since I have gone for the more simplistic look (ie using bold shapes and grouping them together to make a basic interface)

bull However I didnrsquot quite intend to focus on just a feminine audience as the client asked for attracting children aged 11 and above ndashnot specifying whether they wanted it to attract males or females

bull I designed the interface hoping to include elements of pop and dance into the interface therefore I included a female singer and flowers which serve as more feministic traits rather than masculine

bull Also the colour scheme is made up of more pinks and purples therefore it serves to attract females even more

bull The blue and white only serves to represent that the secondary audience can be males as there is nothing preventing anyone from using the website if they want to

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Sounds Compared To Planbull As established from my

planning the sounds that I used as examples that I could have used included sounds made from raw materials such as bins clapping hands metal posters etchellip

bull However in comparison to the sounds that I actually used in the website there is an obvious different as I didnrsquot use sounds that were recorded from natural sources

bull I decided that because I wanted to go for a more musical element that gave the user a sense that they were using proper music tracks I decided to scrap the idea of using natural sounds and went to working with music programs

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Recorded Sounds Compared To Final Design

Recorded 1

Recorded 2

Recorded 3

>

>

>

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Recorded Sounds Compared To Final Design

bull Because I thought that recorded sounds made by natural resources didnrsquot sound particularly professional I decided not to use them in the actual final production of the website

bull This was because I thought that the sounds didnrsquot work with the theme that I was going for as the sound of whistling would not particularly go well with dance music It might make the music sound original however it would make it sound good

bull I also made and recorded more sounds than was necessary for the actual website ndashnot to actually use in the website but to experiment with recording and making sounds and seeing which methods would work best in preserving sound quality

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Final Reflection

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End

Reflection At The End

• Final Evaluation
• Sounds
• Examples of Sounds ndash Edited Versions
• Full Ejay Song
• Sound Log
• Sounds Made In Ejay
• Sounds Recorded
• Sounds Made In Aviary
• Sounds Downloaded From Royalty Free Websites
• Making Sounds
• Making Sounds In Ejay
• Dance Ejay 5
• Making Sounds In Ejay (2)
• Making Sounds In Aviary
• Making Sounds In Aviary
• Ejay amp Aviary
• Recording Sounds
• Recording Sounds (2)
• Recorded Sounds
• Problems With Recording
• Other Method Of Voice Recording
• Editing Sounds
• Editing Sounds In Ejay
• Editing Sounds In Ejay
• Editing Sounds In Aviary
• Editing In Aviary
• Editing Sounds In Aviary (2)
• Saving The Sounds In Aviary
• Original Sounds Compared To Edited Sounds
• Comparison [Videos]
• Comparison 2 [Videos]
• Comparing Full Song To Individual Sounds
• Editing
• Technology amp Programs
• List of Programs Used
• Creating Image - Tools
• Making The Graphics Interface
• Creating Image
• Graphic Interfaces
• Graphic Design 1
• Image Production
• Producing Website In Dreamweaver
• Producing The Site
• Basic Setup Of Site
• Final Website
• Image amp Website Dimensions
• Average Website Dimensions
• Average Dimensions Compared To My Site
• Average Disk Space amp Bandwidth
• Adding Hotspots
• Creating Hotspots For Website ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (2)
• Creating Hotspots For Websites ndash 7 Steps
• Creating Hotspots For Website ndash 7 Steps (3)
• Creating Hotspots For Website ndash 7 Steps (4)
• Creating Hotspots For Website ndash 7 Steps (5)
• Creating Hotspots For Website ndash 7 Steps (6)
• Adding Sounds
• Adding Sounds (2)
• Adding Sounds amp Selecting Behaviours
• Testing Website
• Testing Website During Production
• Skills I Have Developed
• Time Plan amp Organisation
• Improving Knowledge Of Using Dreamweaver
• Improving Knowledge Of Using Dreamweaver
• Knowledge Of Sounds
• Knowledge Of Sounds (2)
• Improving Knowledge Of Using Aviary
• Planning amp Research
• Evaluation Of Mission Statement
• Mission Statement
• Target Audience
• Secondary Audience
• Evaluation Of Target Audience
• Evaluation Of Draft Images
• Graphic Interfaces (2)
• Graphic Design 1 (2)
• Image amp Target Audience
• Image Production (2)
• Evaluation Of Development Log
• Development Log
• Development Log ndash Flow Chart
• Problems With Development Log
• How I Have Changed My Planning amp Research Do To Development Log
• Evaluation Of Sounds
• Considering Possible Sounds
• Sounds That Would Workhellip
• Sounds That Wouldnrsquot Workhellip
• How This Has Changed The Website Designshellip
• Examples Of Good Sounds
• Changes Between Planning amp Final Production
• Changes In Interface
• Making The Interface In Flash amp Dreamweaver
• Image Production (3)
• Changes In Image Production
• Sounds Compared To Plan
• Recorded Sounds Compared To Final Design
• Recorded Sounds Compared To Final Design (2)
• Final Reflection
• Reflection At The End