3. Examples of Sounds – Edited Versions
Beat 1 Drums Piano 1
Beat 2 Guitar Piano 2 F
e
m
Beat 3 Sound Effect Piano 3 a
l
e
V
Disco Effect 1 Female Vocals 1 Recorded 1 o
c
a
Disco Effect 2 Female Vocals 2 Recorded 2 l
s
Disco Effect 3 Female Vocals 3 Recorded 3 4
5. Sound Log
Sound Description Obtained Format
Beat 1 Sound of drums being played to a Made in Ejay WAV
fast rhythm with a base in the
background
Beat 2 Sound of another fast beat, Made in Ejay WAV
similar to the first
Beat 3 Sound of drums being played Made in Aviary WAV
Disco Effect 1 Sound of a whiney disco effect, Made in Ejay WAV
played by a keyboard
Disco Effect 2 A fast sound played using a Made in Ejay WAV
keyboard
Disco Effect 3 A disco effect similar to the first Made in Ejay WAV
disco sound effect
Drums 1 A jazzy drum sound effect Downloaded from WAV
Royaltyfreemusic.com
Female Vocals 1 Female singing Made in Ejay WAV
Female Vocals 2 Female singing Made in Ejay WAV
Female Vocals 3 Female singing Made in Ejay WAV
Female Vocals 4 Female singing Made in Ejay WAV
Guitar 1 Guitar playing a cool western Made in Ejay WAV
sound effect
Guitar 2 A cool music track played by Made in Ejay WAV
guitar
Guitar 3 A nice soundtrack played by Downloaded from Spotify WAV
guitar
Piano 1 A few keys played on a piano Downloaded from Spotify WAV
Piano 2 A nice sweet sound effect of keys Made in Ejay WAV
being played on a piano
Piano 3 A nice little music track made by Downloaded from WAV
playing a few keys on a piano Royaltyfreemusic.com
Recorded 1 Sound of hands clapping Recorded using a webcam WAV
microphone
Recorded 2 Sound of a whistle being blown Recorded using a webcam WAV
microphone
Recorded 3 Sound of someone wolf whistling Recorded using a mobile phone WAV
voice recorder
Sound Effect 1 A cool sci-fi sound effect Downloaded from SoundJay.com WAV
6. Sounds Made In Ejay
Beat 1 WAV
Beat 2 WAV
Disco Effect 1 WAV
Disco Effect 2 WAV
Disco Effect 3 WAV
Female Vocals 1 WAV
Female Vocals 2 WAV
Female Vocals 3 WAV
Female Vocals 4 WAV
Guitar 1 WAV
Guitar 2 WAV
Piano 2 WAV
11. Making Sounds In Ejay
Dance Ejay 5:
• 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 5,000 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.
• Along with these features, Dance Ejay 5 also provides new features such as a
polyphonic synthesizer, the “Grove Generator” (a drum computer for programming
drum loops), Chord Generator and Bass Generator.
12. Song/sample track Dance Ejay 5
Samples
of royalty Background
free graphics
sounds
Control
panel
13. Making Sounds In Ejay
I 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.
14. 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,
etc…
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.
Sound library
Music soundtracks along an edited timeline Imported sounds
15. 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 won’t
be the primary sound
software that I will be using.
I will be mainly using Aviary
for editing sounds.
16. Ejay & Aviary
• Ejay and Aviary are essentially the same program, since they both follow the same basic principle
when it comes to making music.
• Aviary is essentially the better program since it comes in a package that includes a graphics editor,
music editor, etc… However, the two programs both work in the same way.
• 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.
• 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 wasn’t particularly used to Aviary as it has a more complicated
interface than Ejay, therefore I only used the program as a means of experimentation.
• 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.
18. Recording Sounds
• I recorded three sounds using a voice recorder, which was also used for recording the help
file for the website.
• 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.
20. Problems With Recording
White noise is random signals capturing during
recording. White noise is made by combining
White Noise different frequencies of sound together. For
instance, during a recording a person’s 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.
21. Other Method Of Voice Recording
Quality controls Progress bar
Record button
Aviary can also be used to record voices, along as you have a microphone on your computer. To start
recording, click on the “Record” 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 Aviary’s sound
editor.
23. 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.
24. Editing Sounds In Ejay
For 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
“Vocals 1”.
Part of the vocals that I wanted to keep
I then repeated this process
until I had all the sound files
that I needed.
25. Editing Sounds In Aviary
Timeline Imported song and “Import” sidebar
Import the sound file into the program by clicking “File”, “Import” and then following
the procedure to upload your files. Note that if you select “Everyone” 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 “Import” sidebar, which will allow
you to drag the clip onto the timeline.
26. Editing In Aviary
Adjustable
options
Editing the
sound in real
time
Effects drop
down menu
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: “Parametric EQ”, which allows you to fine-tune your recording.
To use this feature, open the “Effects” window in Aviary by double clicking your sound recording. From the first drop down
effect, pick “Parametric EQ”, 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 “Apply” button in the bottom right hand corner of the window to apply the effect to
the sound.
27. 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 “crop” or “trim” option becomes most effective.
To “trim” 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 “cropping” or
“trimming”. 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.
28. Saving The Sounds In Aviary
When saving sound files in Aviary, you can click the “Save as” 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 “Mixdown” option when
it appears after clicking “Save”.
The “Mixdown” 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.
32. Comparing Full Song To Individual
Sounds
Original song [video]
Individual sounds
33. Editing
Obviously the original recording isn’t
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 “Parametric EQ” feature in
the effects option.
I used this feature to –not
completely get rid of the white noise
– 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.
40. Graphic Design 1
Why I Chose Design 1:
• 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.
• Graphic 1 provides much more material than Graphic 2, such as:
– More colours in the colour scheme
– More instruments available
– Bigger image
– Blends well together
• 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.
• 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.
43. Producing The Site
The 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 doesn’t require
the use of side bars of
banners, therefore I
don’t require the use of a
CSS or any other forms
of templates.
44. Basic Setup Of Site
This acted as the basic setup for my website. Once the new
HTML document had been created, I selected “Insert”, “Table” and
then added a table with the dimensions “3x3”. 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.
45. 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 haven’t 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.
46. Image & Website Dimensions
Image Dimensions
Height: 1000 px
Width: 800px
Website Dimesions
Height: 1339 px
Width: 408
The website’s 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.
47. Average Website Dimensions
Smallest screen
size: 800x600
Average (Most
Popular) screen size
1024x768
Largest screen size:
1280x1024
48. Average Dimensions Compared To
My Site
• My website will aim to fit around
the 1024x768 mark, since this is
the most popular screen size.
• According to research around 79%
of people who own a laptop or PC
have a monitor size of around
1024x768
• Therefore my website will be
aiming for these dimensions in
mind since this screen size appears
to be the average –if not the most
popular dimensions for computer
monitors.
49. Average Disk Space & Bandwidth
• 5GB of disk space with a 100 GB worth of bandwidth should be enough space for
an average size website.
• If I upload my site to a website host then the website would cost me roughly
around £4.95 per month.
• If more disk space or bandwidth is required then I would have to transfer my site
to another account – one that would support a website that exceeds the average
bandwidth.
• 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.
• The average payment for large websites or grouped websites would be around £65
per month.
52. Creating Hotspots For
Website – 7 Steps
Step 2 – Click on the image to highlight
it. From the properties menu, click on
one of the three hotspot drawing tools
– rectangle, circle or polygon.
53. Creating Hotspots For The coordinates for each point with
Websites – 7 Steps be recorded in the HTML code.
Step 3 – Select the right tool and then
draw the shape you want on your
image.
54. Creating Hotspots For
Website – 7 Steps
Step 4 – 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 ->
Behaviours. Click Add A Behaviour and
then scroll down to: Play Sound.
55. Creating Hotspots For
Website – 7 Steps
Step 5 – Browse through files and
folders and select the sound that you
want to attach to the hotspot.
56. Creating Hotspots For
In this case I want the sound to
Website – 7 Steps play onMouseOver, so when the
Step 6 – Add the sound that you want mouse hovers over the hotspot
to attach to the hotspot. Select how
that sound will behave from the drop the sound will play.
down menu.
57. Creating Hotspots For
Website – 7 Steps
Step 7 – Save progress, and check that
the hotspot works properly by pressing
F12.
59. Adding Sounds
After 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 “Behaviour” tab, clicked “Add Behaviour”, “Play Sound” 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 “Female Vocals
4”, after browsing through my files and
folders, and then clicked “Ok” once I had
selected the track that I wanted.
60. Adding Sounds & Selecting
Behaviours
After adding the sound to the behaviours list, I then made sure to
select the correct “Behaviour”. I scrolled down the optional
behaviours and then selected the “onMouseOver” 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 can’t.
62. 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 “F12” 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 website’s behaviours so that when the cursor hovers over a hotspot the sound plays automatically
without having the user clicking on the area.
64. Time Plan & Organisation
18/10/11 21/10/11 01/11/11 08/11/11 15/11/11 18/11/11 25/11/11
Rough
Images
Recording
Sounds
Editing
Sounds
Final Image
Creating
Website
Applying
Image To
Website
Applying
Sounds To
Website
Finish
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 –if 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 –since 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.
65. Improving Knowledge Of Using
Dreamweaver
Making Hotspots
• Before I started this
project I wasn’t familiar
with Dreamweaver. I only
had a basic knowledge of
how to use the program.
• I wasn’t 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.
66. Improving Knowledge Of Using
Dreamweaver
• Another method that I wasn’t
particularly familiar with
when it came to using
Dreamweaver, was the
feature of using behaviours.
• 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.
67. Knowledge Of Sounds
• After completing this project
I have developed and
improved my knowledge of
using sounds, their formats
and how to preserve sound
quality.
• 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.
• By carefully planning and
researching into sound files, I
am able to use the best
possible file formats in order
to preserve sound quality.
68. Knowledge Of Sounds
Examples of planning and research that have helped to improve my
knowledge of digital and analogue sounds
69. Improving Knowledge Of Using Aviary
• 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.
• 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.
• 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.
72. Mission Statement
• "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.
• 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.
• 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.
73. Target Audience
• After evaluating my “Mission Statement” I have made a basic
outline of my target audience:
• Age: 11 – 16
• Gender: Female
• Occupation: Student, High School Student
• Demographic: E (unemployed, students in full time education)
• Sexuality: Any
• Ethnicity: Any
• Interest: Needs to have an interest in making music, or have
an interest in the music genre provided.
74. Secondary Audience
• The secondary audience would be anyone that has an
interest in making music. It doesn’t 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.
• 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 interface’s simplicity and the fact that
there will be an audio based tutorial available, young
children will be able to use this interface with ease.
75. Evaluation Of Target Audience
• "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.
• 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 won't be tied down to one particular genre.
• 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.
• 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.
78. Graphic Design 1
Why I Chose Design 1:
• 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.
• Graphic 1 provides much more material than Graphic 2, such as:
– More colours in the colour scheme
– More instruments available
– Bigger image
– Blends well together
• 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.
• 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.
79. Image & Target Audience
• The client has asked for the website to primarily
target children as its main audience –aged 11 and
above. Consequently, this has greatly influenced the
design of my interface since I have gone for the more
simplistic look (i.e. using bold shapes and grouping
them together to make a basic interface).
• Incidentally, the bright and vibrant colours that make
up the background are going to be utilised as a
means of catching the audience’s 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.
• 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.
82. Development Log
Month Date Key Events Tasks No. Hours
Oct Tues, 18th Rough Images Make two rough drafts 8 – Outside/
of graphic interfaces Homework
and then decided which
one to use, giving
justifications for choice
Oct By, Fri, 21st Recording Sounds By this date have all 2 – Class work
sounds recorded to be 6 – Outside/
used on website Homework
Nov Tues, 1st Start Editing Sounds Edit all of the sounds so 2 - Class work
that they are 2 – Outside Work
appropriate for the
website
Nov By Tues, 1st Finish Image Make a final copy of the 6 – Outside/
graphic interface to be Homework
used on the website
Nov Tues, 8th Start Making Website Begin to make website 4 – Class work
in Dreamweaver, since
all components have
been finished by this
point
Nov Tues, 15th Making Website Start applying the image 2 – Class work
to the website
Nov Fri, 18th Making Website Start applying sounds to 6 – Class work
the website
Nov By, Fri, 18th Finish Applying Sounds Finish off applying Class work
sounds to the website
Nov Fri, 25th Finish Website Finish off making 2 – Class work
adjustments to the
website
Nov Fri, 25th Upload Website Start uploading the Class work
website to the internet
83. Development Log – Flow Chart
18/10/11 21/10/11 01/11/11 08/11/11 15/11/11 18/11/11 25/11/11
Rough
Images
Recording
Sounds
Editing
Sounds
Final Image
Creating
Website
Applying
Image
To
Website
Applying
Sounds
To
Website
Finish
Website
84. Problems With Development Log
• 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,
etc…
• 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.
• 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
don’t have Adobe Dreamweaver at home, therefore I can’t work on the
website outside of college.
85. How I Have Changed My Planning &
Research Do To Development Log
• I was originally going to make the website in Adobe Flash in
order to make the website a lot more professional, and
“flashier” 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.
• However because of time constraints and keeping consistent
and organised with the development log, I didn’t have time to
improve the user interface.
• If I had more time to work on the project, then I probably
would have improved on the interface by using other
programs.
87. 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.
88. Sounds That Would Work…
• 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:
• Hitting metal posts, bins, bottles, tin cans, etc...
• Rustling bags, tin foil
• Slamming doors, hitting floorboards, tables, etc...
• 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.
89. Sounds That Wouldn’t Work…
• Unsuccessful sounds that could not be used to create music include
sounds that are used as background noises. This includes sounds like:
• Sounds of traffic, train stations
• People's conversations
• Natural sounds, the wind, leaves rustling, birds singing, etc...
• 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 wouldn't 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.
90. How This Has Changed The Website
Designs…
• 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.
• Therefore long sounds, such as background noise, wouldn’t 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 wouldn’t work well with similar tracks.
• 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.
• 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 –such as dance, pop or
rock- along with it. So it gives the users better options and more variety.
91. Examples Of Good Sounds
For 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.
93. Changes In Interface
Because of time constraints within the development log, I couldn’t
work on the interface as much as I would have liked, and more
importantly the interface didn’t 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 can’t really tell what you are interacting with, until
the mouse cursors changes.
This doesn’t 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
94. Making The Interface In Flash &
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
• However, as mentioned before, I couldn’t 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.
96. Changes In Image Production
• The client has asked for the website to primarily target children as its
main audience –aged 11 and above.
• Consequently, this has greatly influenced the design of my interface
since I have gone for the more simplistic look (i.e. using bold shapes
and grouping them together to make a basic interface).
• However, I didn’t quite intend to focus on just a feminine audience, as
the client asked for attracting children aged 11 and above –not
specifying whether they wanted it to attract males or females.
• 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.
• Also the colour scheme is made up of more pinks and purples
therefore it serves to attract females even more.
• 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.
97. Sounds Compared To Plan
• 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, etc…
• However, in comparison to
the sounds that I actually
used in the website, there is
an obvious different as I
didn’t use sounds that were
recorded from natural
sources.
• 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.
99. Recorded Sounds Compared To Final
Design
• Because I thought that recorded sounds made by natural
resources didn’t sound particularly professional I decided not
to use them in the actual final production of the website.
• This was because, I thought that the sounds didn’t 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.
• I also made and recorded more sounds than was necessary for
the actual website –not 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.
