Web Project

MS801 Web Design & Development
Project 1 - Wildlife Park

Final Documentation
Submitted by:
John OConnor ID 13101883
Kevin McDermot ID 08566771
Colm ORielly ID 09608770
November 2013
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
Table of Contents
Software Used ............................................................................................................... 4
The Target Audience ................................................................................................ 5
Identifying Technology and Accessibility Constraints ................ 6
The Colour Pallet ........................................................................................................ 7
Logo Development .................................................................................................... 8
Homepage Development ...................................................................................... 9
User Testing ................................................................................................................ 10
Header Image ............................................................................................................ 11
Homepage Slideshow .......................................................................................... 12
Image Manipulation ............................................................................................. 13
Kiddies Corner .......................................................................................................... 15
Search Engine Optimization (SEO) .......................................................... 16
Contact us page ........................................................................................................ 17
Advertising Banner ............................................................................................... 18
Planning and Distribution of Work .......................................................... 19
Cross Browser Testing ....................................................................................... 20
References / Credits ............................................................................................ 21
Wildlife Park
Software utilisation
Adobe Dreamweaver
Used to build and link the website pages combining CSS and
a variety of dreamweaver features.
Adobe Fireworks
Used to build the Amuay Logo.
Adobe Illustrator
Used to create graphical elements in the side banner
giftshop advert.
Adobe Photoshop
Used to manipulate and resize imagery, layering of the
header image.
Quark Xpress
Documentation initial proposal and final document layout.
Wildlife Park
Beware the trap

of going straight
to the design of
the wallpaper
before the walls
are built.
(Turner, 1999)
The Target Audience

The target audience was our first priority when designing our
website. Before the initial design stage we needed to clearly
define our target audience. Our website is targeted at people
from all ages and gender. We put in place a very educational
section detailing all the wildlife and flora that is available at
Amuay Wildlife Park and which is mostly indigenous to
Venezuela.
Our conclusion came to that we needed to direct our website
towards families interested in travelling to Amuay Wildlife Park.
We needed to provide both a sophisticated and entertaining
website to try and entice people to come back and visit our
website. We always kept families in mind when designing this
website so it was inevitable that we introduced a Kiddies
Corner to show that Amuay Wildlife Park is a fun and an
educational place for families and schools to come and visit.
Our website offers families a trip of a lifetime so, we needed to
make the booking process stress free. Amauy Wildlife Park has
loads to offer and so, as designers we needed to showcase these
offers as clearly as possible by making the pages as big and as
clear as we could.
Wildlife Park
A designed
object has both
form and
function.
(Class notes, 2013)
Identifying Technology
and Accessibility Constraints
It was important during the early paper prototype stage to
identify any limitations that users might have when visiting our
website. A lot of people in todays world are tech savvy but there
is always going to be people who are not that familiar with
computers and are almost scared to try and book something
online. So in the design stage we brainstormed that our website
needed to be so easily navigated that an 8 year old could flick
through the web site at reasonable ease. We needed to plan for
people gaining accessibility to the website by taking into account
that the user may be on the go and will probably be browsing via
a hand held device such as a smart phone or tablet.
Navigation needs to be:
Minimal (but visible)
Persistent (except Homepage and forms)
Clear
Conventional
Logical
Tested (without browser tools)
Wildlife Park
The Colour Pallet

During an initial brainstorm our company came up with a list of
keywords that prompted an effective colour scheme for Amuay
Wildlife Park. Getting the perfect colour scheme is crucial for an
effective website, the message needs to be right. Our team needed to
choose colours that capture the essence of a wildlife park.
Choosing the right colour pallet helps when building brand
awareness for the Amuay Wildlife Park. We choose a pallet that
worked for people who may be visually impaired.
A sample of the keywords we came up whilst choosing our colour
pallet is listed below.
Environmental
Jungle Leaves Wild
Green, Brown, Red
Snakes
Rainforest Earthy
Tropical
Spiders
River Beds
Grasslands Marsh lands
but....
Fun and Bright, Inviting and safe
Wildlife Park
Yellows, Creams
Logo Development (evidence of original work)

We wanted to show that Amuay Wildlife Park is a fun and exciting
place to visit, so our logo needed to reflect this. The development
stage of the logo was enjoyable, we selected a range of different fonts
and styles and came up with some early prototypes to test on a user
population.
We took into account that it would be best if we kept the design of
the logo very simple so that it would be easily recognised when used
in advertising and merchandising.
Our final logo included a range of colours from our colour pallet.
Using Adobe Fireworks we were able to design a clear and
recognisable logo that would appeal to the users of the website.
To gain feedback we carried out a survey on a small population at
our local athletics club. The user sample ranged from 8 50 years of
age and we asked them to choose which version of our logo they
preferred. This exercise proved very useful as we could see
immediately which logo would be the best fit for the website.
Amuay
Wildlife Park
Homepage Development
The homepage is typically the most important page. Losing users hear means they are unlikely to
come back. The development of the homepage was a lengthy process because there were many
design considerations to take into account. By comparing competitor websites we were able to
gather the required information to design a homepage that would place Amuay firmly in its
marketplace. Other considerations such as how users read a website, easy of use and good utility
influenced the effective use of imagery and colour.
Other important factors when designing a website are: Navigation, the user needs to be able to
browse the site with ease. Usability, our target audience ranges from children to adults all with
different computer abilities. Fonts, we needed to make the font clear and legible so that users from
all demographics can navigate through the site. We agreed on a sans serif font for the body text.
different
users have
different
needs.
(Class notes, 2013)
early prototype.
redesign
Wildlife Park
User Testing
It was suggested during our proposal review that we simplify our suggested
homepage and after making a few adjustments it looked much better. Constructive
criticism is crucial to any design process especially a website. We removed the
gradients on the navigation and simplified the horizontal navigation. We also
lightened the colours on our slideshow which helped visually, for a better user
experience. We conducted user testing again with some volunteers from the local
athletics club. This time on the entire website.
Feedback was positive from this test evaluation. A key finding that emerged was to
reduce the amount of text on the home page.
In eyetracking research,
Nielsen discovered users
used an F-Shaped pattern
when reading Web content.
We agreed the Amuay website needs to be:
Easy to use
Easy to learn
Easy to remember
Effective to use
Have good utility
A satisfying user experience
Wildlife Park
10
Header Image (evidence of manipulative work)

We created the main heading banner using Adobe Photoshop. Through the use of layer
masks (to create nice reversible blending), the Lasoo tool (to cut away unwanted image
background), importing of our logo from Fireworks and the use of fun typography. We feel
that these methods demonstrate the skills we learned during class and at our tutorials.
Starting point images
Wildlife Park
We flipped the cat image so it wasnt

looking away from the website.
The result
Wildlife Park
11
Homepage Slideshow
We felt that the homepage needed some movement. So, we developed a looping
slideshow using the Photoshops timeline function. This will showcase the 3 major
events at the park. It can be easily updated evey month to keep the site fresh and inform
the revisiting user of upcoming events. It's a very effective method to increase the web
site usability and engage the user.
Starting point images
The result
Wildlife Park
12
Image Manipulation
Some of the imagery we used needed to be manipulated to make our
website more visually pleasing. Using adobe photoshop we carried out a
variety of filtering and adjusting to customise the images. In most cases
we increased the contrast from the original versions.
Some samples and descriptions of before and after are illustrated below.
To make this picture a bit more interesting we filled the background

of the parrots with a blend that matches the colouring of the birds.
There was a person holding the sloth in this picture. We cut away the
background and replaced it with some greenery so the animal looks
like its in its natural surroundings.
To put some movement into this monkey picture we ran a motion

blur on the background and preserved the foreground.
Wildlife Park
13
Again we changed the colour of this photo to colours which were

sampled from the bird using the eyedropper tool. A little bit 80s.
To soften this image we ran a gaussian blur filter on the background.

A very subtle but useful effect.
This monkey needed a bit of brightness and contrast to shine a bit of

sunlight on him. He looks much happier.
Again, some contrast on this photo helped bring it to life

and make it a bit more interesting.
Wildlife Park
14
Kiddies Corner
Did you know?
0
We have 100,00
ar.
ye
visitors evert
to visit us and
Get your school
EE Goodie Bag.
you recieve a FR
Our oldest mon

key is
Martin. He is 15
years old.
ay well
If its your birthd
teeshirt!
give you a free
Kiddies Corner
It was suggested that we introduce a kids corner page. We did
this by creating a link from a smiling monkey on the homepage.
The kids corner page engages the younger user by offering
some easy to digest facts and figures about Amuay Park. the
page also offers schools some incentives to visit the Park.
Smiling monkey
click to visit kids
page.
Wildlife Park
The graphics on this page are kid friendly, funny and inviting.
15
Search Engine Optimization (SEO)

SEO is the practice of improving and promoting a web site in
order to increase the number of visitors the site receives from
search engines. There are many aspects to SEO, from the
words on your page to the way other sites link to you on the
web. Sometimes SEO is simply a matter of making sure your
site is structured in a way that search engines understand.
moz.com
We improved the SEO on the Amuay website by inserting

descriptions in the following fields.
Insert > HTML > Head Tags > Description
...and keywords in
Insert > HTML > Head Tags > Keywords
Wildlife Park
16
Contact us page
In order to open a communication channel with visitors, we try
to capture their details at every opportunity. When a customer
wants to contact Amuay Wildlife Park they must do so by sending
an email through the website.
This will help the park to build on their database of people
interested in the parks activities. The park can then send
promotional emails and special offers to more people every year.
A simple webform was developed using foxyform.com
An email is sent to the park
Wildlife Park
17
Advertising Banner
To generate some revenue or advertise the parks main attractions
or make important announcements, we created an advertising
banner which can easily be updated.
This is placed directly under the navigation where it will not be
overlooked. It is not an animated gift because during user
evaluation it was suggested that our slideshow had enough
interaction.
For example:
This month we wanted to generate
some interest in the wildlife parks gift
shop. We are directing followers to our
Facebook page where they can interact
with other followers of Amuay.
Wildlife Park
18
Planning and Distribution of Work

The delegation of work always proves to be troublesome to a certain
degree. As a team we all had various skills and talents which meant that
we had the basis to build a credible project. As we all know each other
previously it was easy to communicate amongst each other to organise
meetings.
The following tasks were a broad outline of what needed to be done to
get the project finished on time.
1. Image creation
2. Dreamweaver build
3. Sourcing of imagery and writing the content
Kevin
123345677
Production Schedule
Colm
123345677
John
13101883
M Tu W T F Sa S M Tu W T F Sa S M Tu W T F Sa S M Tu W T F Sa S M Tu W T F Sa S M Tu W T F Sa S M Tu W T F Sa S
Weekly Meeting
Logo / Site Map Creation
Image Research / Sourcing
Copy writing
Interface Design
User Reseach / Feedback
Redesign / Implement
Proposal Prep
Tutorials Lectures
Build FINAL DW/CSS Site
Group Formed
27th Sept
Week 1
W/e 6 Oct
Week 2
W/e 13 Oct
Week 3
W/e 20 Oct
Week 4
W/e 27 Oct
Week 5
W/e 3 Nov
Week 6
W/e 10 Nov
Week 7
W/e 17 Nov
We met 23 times a week to try and plan out our project. Once the
planning was all done we were able to collaborate with each other to
get the various tasks done. We came together as a group to get the
website completely finished as it seemed the most logical choice, as we
were able to brainstorm and bounce ideas off each other as to what
direction we wanted the project to go.
There were occasions when everyone couldnt meet together but with
the use of Dropbox, Google Drive and email it was possible to keep all
team members up to date as to what needed to be done next.
Communication is pivotal to a project like this as there are so many
factors to take account of.
With a group project like this team members are always updating and
adding content on separate occasions so it was crucial that we clearly
communicated with each other so as not to hamper any of the work
already done by other team members. Considering none of the team
had any experience with Dreamweaver before, we are very happy
with our result and look forward to our next project.
Wildlife Park
19
Cross Browser Testing

When it came time to turn the Amuay site from a mockup to
something fully functional, our team wanted to make sure that it
worked well for everyone visiting whether theyre using Internet
Explorer, Firefox, or any other browser.
Websites will look different in different browsers. Thats because
browsers understand some code slightly differently (kind of like
the difference between American English and British English).
Designers should be testing to make sure that sites work well in all
modern browsers.
www.insivia.com
Wildlife Park
20
Bibliography for Amuay WildLife Park

Monkeys
Capuchin Monkey (Cebus capucinus) |
Rainforest Alliance. 2013. Capuchin Monkey
(Cebus capucinus) | Rainforest Alliance.
[ONLINE] Available
at:http://www.rainforest
alliance.org/kids/species
profiles/capuchinmonkey.
Spider Monkey Pictures. 2013. Spider
Monkey Pictures. [ONLINE] Available
at: http://www.rugusavay.com/spider
monkeypictures/.
Spider Monkeys, Spider Monkey Pictures,
Spider Monkey Facts National Geographic.
2013. Spider Monkeys, Spider Monkey
Pictures, Spider Monkey Facts National
Geographic. [ONLINE] Available
at:http://animals.nationalgeographic.com/a
nimals/mammals/spidermonkey/.
Howler Monkeys, Howler Monkey Pictures,
Howler Monkey Facts National Geographic.
2013. Howler Monkeys, Howler Monkey
Pictures, Howler Monkey Facts National
Geographic. [ONLINE] Available
at:http://animals.nationalgeographic.com/a
nimals/mammals/howlermonkey/#.
Geoffroys Tamarin (Saguinus Geoffroyi)
Animals AZ Animals Animal Facts,
Information, Pictures, Videos, Resources
and Links. 2013. Geoffroys Tamarin
(Saguinus Geoffroyi) Animals AZ Animals
Animal Facts, Information, Pictures,
Videos, Resources and Links. [ONLINE]
Available at:http://az
animals.com/animals/geoffroystamarin/.
Primates: GeoffroysTamarin05.
2013. Primates: GeoffroysTamarin05.
[ONLINE] Available
at:http://www.yournaturephotos.com/onea
dmin/photogallery/GeoffroysTamarin
05/44/44/603/48/Yes.html.
Proboscis monkey Wild Indonesia
YouTube. 2013. Proboscis monkey Wild
Indonesia YouTube. [ONLINE] Available
at:http://www.youtube.com/watch?v=5bt
i4QFoo.
Snakes
Emerald Tree Boa Fact Sheet National Zoo|
FONZ. 2013. Emerald Tree Boa Fact Sheet
National Zoo| FONZ. [ONLINE] Available
at:http://nationalzoo.si.edu/Animals/Reptil
esAmphibians/Facts/FactSheets/Emeraldtr
eeboa.cfm.
Green Emerald tree Boa Snake Wallpaper |
Animals Desktops and Stock Photos.
Wildlife Park
2013. Green Emerald tree Boa Snake

Wallpaper | Animals Desktops and Stock
Photos. [ONLINE] Available
at:http://www.animalsw.com/wallpaper/Gr
eenEmeraldtreeBoaSnake/.
Panoramio Photo of Eyelash Viper .
2013. Panoramio Photo of Eyelash Viper .
[ONLINE] Available
at: http://www.panoramio.com/photo/251
01973.
Eyelash Viper Fact Sheet National Zoo|
FONZ. 2013. Eyelash Viper Fact Sheet
National Zoo| FONZ. [ONLINE] Available
at:http://nationalzoo.si.edu/Animals/Reptil
esAmphibians/Facts/FactSheets/Eyelashpal
mpitviper.cfm.
South America's most venomous snakes
Venomous, Poisonous, Dangerous, and other
Wonders. 2013. South America's most
venomous snakes Venomous, Poisonous,
Dangerous, and other Wonders. [ONLINE]
Available
at: https://sites.google.com/site/venomous
dangerous/snakes/southamericasmost
venomoussnakes.
Florida Venomous Poisonous Snake Photos.
2013. Florida Venomous Poisonous Snake
Photos. [ONLINE] Available
at:http://www.wildlife.pro/florida
snakes.html.
Birds
Blueheaded Parrot Wikipedia, the free
encyclopedia. 2013. Blueheaded Parrot
Wikipedia, the free encyclopedia. [ONLINE]
Available
at:http://en.wikipedia.org/wiki/Blue
headed_Parrot.
blue head parrots HD Wallpaper Birds
(#5775). 2013. blue head parrots HD
Wallpaper Birds (#5775). [ONLINE]
Available
at:http://hdwallpapers4free.com/bird/blue
headparrotsdesktopwallpaper5775/.
File:Portrait of a Golden Pheasant.JPG
Wikipedia, the free encyclopedia.
2013. File:Portrait of a Golden Pheasant.JPG
Wikipedia, the free encyclopedia.
[ONLINE] Available
at:http://en.wikipedia.org/wiki/File:Portrai
t_of_a_Golden_Pheasant.JPG.
Golden Pheasant (Chrysolophus pictus)
BirdLife species factsheet. 2013.Golden
Pheasant (Chrysolophus pictus) BirdLife
species factsheet. [ONLINE] Available
21
at: http://www.birdlife.org/datazone/speci
esfactsheet.php?id=273.
The Life of Animals: August 2012. 2013. The
Life of Animals: August 2012. [ONLINE]
Available at: http://thelifeanimal.
blogspot.ie/2012_08_01_archive.html.
Umbrellabird Wikipedia, the free
encyclopedia. 2013. Umbrellabird
Available at:http://en.wikipedia.org
/wiki/Umbrellabird.
Rodents
Capybara Wikipedia, the free encyclopedia.
2013. Capybara Wikipedia, the free
encyclopedia. [ONLINE] Available
at:http://en.wikipedia.org/wiki/Capybara.
The Capybara Page. 2013. The Capybara
Page. [ONLINE] Available
at:http://www.rebsig.com/capybara/.
The Way of Improvement Leads Home: Gina
Barreca on Sloth. 2013. The Way of
Improvement Leads Home: Gina Barreca on
Sloth. [ONLINE] Available
at:http://www.philipvickersfithian.com/20
12/05/ginabarrecaonsloth.html.
Sloth Wikipedia, the free encyclopedia.
2013. Sloth Wikipedia, the free
encyclopedia. [ONLINE] Available
at: http://en.wikipedia.org/wiki/Sloth.
Monkey punches capybara's nose YouTube.
2013. Monkey punches capybara's nose
YouTube. [ONLINE] Available
at:http://www.youtube.com/watch?v=
6ty7_Hm78.
Trees
Flowering Tree Tabebuia Rosea For Sale
Philippines 22144289 . 2013.Flowering
Tree Tabebuia Rosea For Sale Philippines
22144289 . [ONLINE] Available
at:http://www.sulit.com.ph/index.php/vie
w+classifieds/id/22144289/Flowering+tre
e++Tabebuia+Rosea
Tabebuia rosea Wikipedia, the free
encyclopedia. 2013. Tabebuia rosea
Available
at:http://en.wikipedia.org/wiki/Tabebuia_r
osea
Tabebuia Rosea
Ranchers.net's Bull Session :: Venezuela's
national tree, the Araguaney.
2013.Ranchers.net's Bull Session ::

Venezuela's national tree, the Araguaney.
[ONLINE] Available
at: http://ranchers.net/forum/post
512244.html
The Araguaney Venezuela Tuya. 2013. The
Araguaney Venezuela Tuya. [ONLINE]
Available at: http://www.venezuela
tuya.com/natura/029eng.htm.
Araguaney Tree
Flowers
Scarlet pimpernel photo Anagallis arvensis
A11704 ARKive. 2013. Scarlet pimpernel
photo Anagallis arvensis A11704
ARKive. [ONLINE] Available
at: http://www.arkive.org/scarlet
pimpernel/anagallisarvensis/image
A11704.html
Top 10 GoTo Landscape Plants | Personal

Garden Coach. [ONLINE] Available
at:http://personalgardencoach.wordpress.c
om/2011/04/26/gardendesigners
roundtabletop10gotolandscapeplants/
Mangroves
Membranes desalinate water: mangrove
Ask Nature the Biomimicry Design Portal:
biomimetics, architecture, biology,
innovation inspired by nature, industrial
design. 2013. Membranes desalinate water:
mangrove Ask Nature the Biomimicry
Design Portal: biomimetics, architecture,
biology, innovation inspired by nature,
industrial design. [ONLINE] Available
at:http://www.asknature.org/strategy/f580
efcadd6c8c19dadf3811bdd6222d.
Northern South America: Northwestern
Venezuela | Ecoregions | WWF. 2013.
Anagallis arvensis Wikipedia, the free

encyclopedia. 2013. Anagallis arvensis
Available at:http://en.wikipedia.org
/wiki/Anagallis_arvensis
Northern South America: Northwestern

Venezuela | Ecoregions | WWF. [ONLINE]
Available at: http://worldwildlife.org
/ecoregions/nt1408
April | 2011 | SpanishEnglish Word

Connections | Page 2. 2013. April | 2011 |
SpanishEnglish Word Connections | Page 2.
[ONLINE] Available
at:http://wordconnections.wordpress.com/
2011/04/page/2/
Map How to get there

Google Maps. 2013. Google Maps. [ONLINE]
Available at:https://maps.google.com.mx/.
Garden Designers Roundtable: Top 10 Go

To Landscape Plants | Personal Garden
Coach. 2013. Garden Designers Roundtable:
Wildlife Park
Flag - header
VENEZUELA FLAG BANDERA by paundpro
on deviantART. 2013.VENEZUELA FLAG
BANDERA by paundpro on deviantART.
[ONLINE] Available
at: http://paundpro.deviantart.com/art/VE
22
NEZUELAFLAGBANDERA346525204.
Jaguar - header
jaguar animal Google Search. 2013. jaguar
animal Google Search. [ONLINE] Available
at: https://www.google.ie/search?q=jaguar
+animal&stick=H4sIAAAAAAAAAGOovnz8B
QMDAw8HixKHfq6
gYmJZUFS1tmQHVbTj8ZrqT_MMdPcfPHp72
cAuVNUzSkAAAA&source=lnms&tbm=isch
&sa=X&ei=tmyLUr7NH6iI7AbZ0YGIBQ&ved
=0CAcQ_AUoAQ&biw=1440&bih=738#facrc
=_&imgdii=_&imgrc=UG_RrZLsu9Op_M%3A
%3BfDi6fZh8n0rAcM%3Bhttp%253A%252
F%252Fstatic.comicvine.com%252Fuploads
%252Foriginal%252F11113%252F111133
145%252F34243243539659878
jagua.jpg%3Bhttp%253A%252F%252Fww
w.comicvine.com%252Fforums%252Foff
topic5%252Fgrizzlybearrunsgauntlet
1510563%252F%3B800%3B534.
Accommodation
50 Dynamic Tree Houses These Arboreal
Abodes Remind One of Their Childhood
(TOPLIST). 2013. 50 Dynamic Tree Houses
These Arboreal Abodes Remind One of
Their Childhood (TOPLIST). [ONLINE]
Available at:http://www.trendhunter.com
/slideshow/dynamictreehouses.
Summer Destination: Glamping |
Honeysuckle Life. 2013. Summer
Destination: Glamping | Honeysuckle Life.
[ONLINE] Available
at:http://www.honeysucklelife.com/2012/
05/17/summerdestinationglamping/.
Submitted by:
John OConnor ID 13101883
Kevin McDermot ID 08566771
Colm ORielly ID 09608770
November 2013

Web Project

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Project

Transféré par

Droits d'auteur :

Formats disponibles

MS801 Web Design & Development

Project 1 - Wildlife Park

Beware the trap

The Target Audience

The Colour Pallet

Grasslands Marsh lands

Logo Development (evidence of original work)

Header Image (evidence of manipulative work)

We flipped the cat image so it wasnt

To make this picture a bit more interesting we filled the background

To put some movement into this monkey picture we ran a motion

Again we changed the colour of this photo to colours which were

To soften this image we ran a gaussian blur filter on the background.

This monkey needed a bit of brightness and contrast to shine a bit of

Again, some contrast on this photo helped bring it to life

Our oldest mon

Search Engine Optimization (SEO)

We improved the SEO on the Amuay website by inserting

Planning and Distribution of Work

Cross Browser Testing

Bibliography for Amuay WildLife Park

2013. Green Emerald tree Boa Snake

2013.Ranchers.net's Bull Session ::

Top 10 GoTo Landscape Plants | Personal

Anagallis arvensis Wikipedia, the free

Northern South America: Northwestern

April | 2011 | SpanishEnglish Word

Map How to get there

Garden Designers Roundtable: Top 10 Go

Vous aimerez peut-être aussi