Professional Documents
Culture Documents
Web Project
Web Project
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
Wildlife Park
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
Environmental
Jungle Leaves Wild
Green, Brown, Red
Snakes
Rainforest Earthy
Tropical
Spiders
River Beds
but....
Fun and Bright, Inviting and safe
Wildlife Park
Yellows, Creams
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
Amuay
Wildlife Park
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
Wildlife Park
The result
Wildlife Park
11
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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.
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.
Wildlife Park
13
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
Wildlife Park
14
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
Wildlife Park
16
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
www.insivia.com
Wildlife Park
20
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
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
Wikipedia, the free encyclopedia. [ONLINE]
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
Wikipedia, the free encyclopedia. [ONLINE]
Available
at:http://en.wikipedia.org/wiki/Tabebuia_r
osea
Tabebuia Rosea
Ranchers.net's Bull Session :: Venezuela's
national tree, the Araguaney.
MS801 Web Design & Development - Project 1 Wildlife Park - Final Documentation - November 2013
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
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.
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