CSC10214 Assignment 1: Interactive Web Content Design Documentation

Desklib provides past papers and solved assignments for students. This project details interactive web content design.

CSC10214 Assignment 1
SOUTHERN CROSS UNIVERSITY
ASSIGNMENT COVER SHEET
For use with online submission of assignments
Please complete all of the following details and then make this sheet the first page of each file
of your assignment – do not send it as a separate document.
Your assignments must be submitted as either Word documents, text documents with .rtf
extension or as .pdf documents. If you wish to submit in any other file format please discuss
this with your lecturer well before the assignment submission date.
Student Name: ____________________________
Student ID No.: ____________________________
Unit Name: Designing the User Experience
Unit Code: CSC10214
Tutor’s name: ____________________________
Assignment No.: Assignment 1, Part A - Design Documentation
Assignment Title: Interactive Web Content
Due date: ____________________________
Date submitted: ____________________________
Declaration:
I have read and understand the Rules Relating to Awards (Rule 3 Section 18 –
Academic Misconduct Including Plagiarism) as contained in the SCU Policy
Library. I understand the penalties that apply for plagiarism and agree to be
bound by these rules. The work I am submitting electronically is entirely my own
work.
Signed:
(please type
your name)
____________________________
Date: ____________________________

CSC10214 Assignment 1
[Your STORYBOOK TITLE]
Design Documentation
By [Your Name]

CSC10214 Assignment 1
Table of Contents
Introduction........................................................................................................ 1
Wireframe.......................................................................................................... 1
Theme............................................................................................................... 1
Storyboards........................................................................................................ 1
Technical specifications (optional)............................................................................8
Media List/References (if required)...........................................................................8
Introduction
In this story scenario, a short animation is created that will let the viewer know about
the story scenario. This animation is for about half a minute which is shown to the
viewer to get to know the whole story. Player can skip the screen by moving to the
different screens by just clicking the buttons.
In this story, title as catch fish, a fisherman goes to the jungle and feels hungry and
then he finds a fishing area and moves there to catch the fishes and satiate the hunger.
Lot of buttons are being provided on the screen in order to allow the viewer to switch
on to the different screens. The Final part of the story shows the complete pond being
empty.
Wireframe
Theme
Theme for this story is chosen to be catch fish. Jungle theme suits the scenario best at
the beginning and as he sees the fishing area board he moves to the pond side area for
which the Pond image for the background is being used. As the fisherman catches the
fishes from the pond, fishes requests the fisherman to let them live but the fisherman
shows no mercy and eats them and makes the pond empty. This theme supports the
narration of the story at its best.
The narration which is to be developed is completely according to the theme in which
fishes and fisherman talk is represented. The sound of sea from the back end will work
as a supportive agent to the theme.

CSC10214 Assignment 1
Storyboards
The following storyboards on the following pages provide a more detailed explanation
of the planned product.

CSC10214 Assignment 1
Title: Home Page Frame ID: boat
Dimensions:
Around 250 pixels wide 250 pixels height size may vary according to the requirement of the game.
Media used:
Sounds: -
A showering sound is used on this page so that player feels like he is in the sea. When the Screen of
the pond, fisherman and the fishes appears then the sound of the sea is played and the fishes and
fisherman communication is shown.
Images: -
A fisherman image is used in this scene which is used in the narration who is going to communicate
with the fish in the further part.
Also a jungle background is used to show the starting of the story where the Fisherman seems to be
hungry and sees the Fishing area board.
Buttons:
On the main home page, a total of 6 buttons are used to represent which redirects the user to the
different pages. This button is also used to skip the animation for that player who does not want to
watch the particular narration. If the player is already watched the narration, then he/she can skip
the scene by clicking the particular page screen.
Background:
A jungle background is used to show the starting of the story where the Fisherman seems to be
hungry and sees the Fishing area board.
Content:
The screen of the home page has a character (fisherman). He is thinking here to eat something and
suddenly sees the Fishing area board and wants to go there.

CSC10214 Assignment 1
Description (purpose / objectives):
A fisherman goes to the jungle and feels hungry and then he finds a fishing area and moves
there to catch the fishes and satiate the hunger. Lot of buttons is being provided on the
screen in order to allow the viewer to switch on to the different screens. The Final part of
the story shows the complete pond being empty.
Animations:
Fisherman is continuously moving on its place which makes the feel of the moving person.
User Interactions Required:
To skip the narration user press the Page name button.
Navigation / Links:
This page is linked with the main game page.

CSC10214 Assignment 1
Title: Main Story Page Frame ID: Main Story
Dimensions:
Fits the whole page completely in 720 pixels x 360 pixels.
Media Used:
Images: -
On this page images of the water pond area is used to make it real so that fishes are felt to
be in water.
A fisherman image is used in this scene which is used in the narration who is going to communicate
with the fish in the further part.
Fish images are being used to communicate with the Fisherman.
Sounds: -
A showering sound is used on this page so that player feels like he is in the sea. When the Screen of
the pond, fisherman and the fishes appears then the sound of the sea is played and the fishes and
fisherman communication is shown.
Buttons:
On the main home page, a total of 6 buttons are used to represent which redirects the user to the
different pages. This button is also used to skip the animation for that player who does not want to
watch the particular narration. If the player is already watched the narration, then he/she can skip
the scene by clicking the particular page screen.
Background:
On this page images of the water pond area is used to make it real so that fishes are felt to
be in water.

CSC10214 Assignment 1
Content:
This page contains the whole story scenario where the fisherman communicates with the
fishes but the fishes pleads to the fisherman for not killing and eating them but fisherman
shows no mercy and takes away all the fishes from the pond.
Description (purpose / objectives):
On this page, main story scenario is developed. The fisherman communicates with the fishes
but the fishes pleads to the fisherman for not killing and eating them but fisherman shows
no mercy and takes away all the fishes from the pond.
Animations:
In this game, an animated platform is moved which seems the fishes are moving and also
the fishes are shown moving to make the story really attractive.
User Interactions Required:
To skip the narration user press the Page name button.

CSC10214 Assignment 1
Title: Score Page Frame ID: Score
Dimensions:
Fits the whole page completely in 720 pixels x 360 pixels.
Media Used:
Image: -
On this page images of the water pond area is used to make it real so that fishes are felt to
be in water.
A fisherman image is used in this scene which is used in the narration who is going to communicate
with the fish in the further part.
Sound: -
A sound of sea waves comes from the background.
Buttons:
On the main home page, a total of 6 buttons are used to represent which redirects the user to the
different pages. This button is also used to skip the animation for that player who does not want to
watch the particular narration. If the player is already watched the narration, then he/she can skip
the scene by clicking the particular page screen.
Background:
A sea face background is used similarly to all the pages.
Content:
All the fishes present in the pond are being taken away by the Fisherman and the whole pond is
shown empty.

CSC10214 Assignment 1
Description (purpose / objectives):
All the fishes present in the pond are being taken away by the Fisherman and the whole pond is
shown empty.
Animations:
Animation of the Fisherman going back is used here.
User Interactions Required:
To skip the narration user press the Page name button.
Navigation / Links:
This page is linked with the home page and story page.

CSC10214 Assignment 1
Technical specifications (optional)
(Simple example below could be provided if these details are not provided on storyboards)
Web page dimensions: 600 x 900 pixels. Banner dimensions:
1) Horizontal banner: 600 pixels wide x 90 pixels high;
3) Vertical banner: 160 pixels wide x 600 pixels high;
2) Button 1: 125 pixels x 125 pixels;
4) Button 2: 180 pixels wide x 150 pixels high;
5) Custom 1: 320 pixels x 50 pixels;
6) Custom 2: 300 pixels x 250 pixels.
Media List/References (if required)
Image name
or
description
Resource address/URL
Images
Jungle
Background
Image
Fishing Area
Board
Pond Area
background
Fisherman
Fish 1
Fish 2
Sounds
Sounds
https://png.pngtree.com/thumb_back/fh260/background/20190222/
ourmid/pngtree-sunny-forest-advertising-background-
backgroundnaturalgrasssunlighttreeshand-paintedblue-skysmall-
image_61537.jpg
http://www.gladewaterpd.com/wp-content/uploads/2016/08/
kids_fishing_tournament_sm.png
https://www.wellcraft.com/uploads/2017/7/302FishermanBABbase2018_1.png
https://banner2.kisspng.com/20180227/gaw/kisspng-pond-royalty-
free-stock-photography-illustration-vector-forest-
5a961d08ca6612.2100104615197872728291.jpg
https://cdn.bulbagarden.net/upload/thumb/e/ea/VSFisherman_PE.png/250px-
VSFisherman_PE.png
http://www.amisvegetarian.com/wp-content/uploads/2018/10/school-of-fish-
clipart-school-of-fish-clip-art-cartoon-fish-clipart-free-transparent-clipart-for-
teachers.png
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWQIyLqz0j-
5TsJWowdzMTy5iXPEVqGKwLoRiBi-Ma5vo0AsAM
http://soundbible.com/1571-Fishtank-Bubbles-2.html