Interactive Web Content Design Documentation: CSC10214 Assignment 1

Past papers and solved assignments for students. This project details the design of an interactive graveyard-themed web game.

CSC10214 Assignment 1
SOUTHERN CROSS UNIVERSITY
ASSIGNMENT COVER SHEET
Student Name: Satyanarayana Maradapa
Student ID No.: 23137237
Unit Name: Designing the User Experience
Unit Code: CSC10214
Tutor’s name: Mr Adam Fletcher
Assignment No.: Assignment 1, Part A- Design Documentation
Assignment Title: Interactive Web Content
Due date: 05-04-2019
Date submitted: 05-04-2019
Declaration:
I have read and understood 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: Satyanarayana Maradapa
Date: 05-04-2019

CSC10214 Assignment 1
[Your STORYBOOK TITLE]
Design Documentation
By [Satyanarayana Maradapa]

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
Night in the graveyard is the short-animated story which has a short animation video
which tells the story about the game. In this game, a brave man is going inside the
graveyard to save his mother from dead souls. So, he wants to reach to his mother to
release his mom from the bad souls.
The short animation tells the story of this man and the incidence to happen due to
which his mom trapped by the bad souls. With the help of the video, it tells complete
animated story of the graveyard. A brave man needs to take care of himself from other
souls and their objects are also mentioned in this video only.
Wireframe
Theme
Dark night theme is chosen for this story to make it more spine chilling. A background
with the big moon is used to the scene seems more real. Halloween sound is inserted in
the story which horrified the brave man and he was begging to escape from this hell.
This dark horror theme is suited to our graveyard story to the best. The narration of the
story is completely done in this scene in front of the gate of the graveyard which makes
the scene of the story seems to be real.
Storyboards
The following storyboards on the following pages provide a more detailed explanation
of the planned product.
(Note that: At least one storyboard should be provided for each page of your story.

CSC10214 Assignment 1
 You may need to provide a separate storyboard for some of your
banner/animations in order to describe/demonstrate your planned design
ideas.
 The following storyboard format is one option. You may choose other formats
as long as you include the same details)

CSC10214 Assignment 1
Title: Home Page Frame ID: Home
Dimensions:
Gate dimensions are nearly 300px by 300px remaining the exact size of the image is only tells during
the creation of the game Night in the graveyard.
Media Used:
Background photo is used with this image to make the scene of the graveyard more spine chilling.
An actor or the brave man is used to communicating with Gate in the narrated video.
At the end of the video man break, this gate and a new image of the shattered gate is used to
represent this.
The shattered sound is used while the man kicks the gate.
Bat sound is used to make the scene more like hell.
Buttons:

CSC10214 Assignment 1
A button is provided on the home page that is used to skip this narration. This same button also
takes the man towards the graveyard.
Background:
A graveyard background is used to make the scene more real and make the whole game a horror
story.
Content:
This above-shown image is used for the image of the gate of the graveyard. This image is mostly
used in the animation of narration. The man finds talking to that gate about his mother. Every
controls and story were represented to the brave man. After the conversation, the man breaks the
gate and enters into the hell like the graveyard. Bad souls try to kill the man but the man is walking
to save her mom.
Description (purpose / objectives):
This animated video is made to let the player know about the scenario of the Night in the
graveyard. Main purpose of this video is to make the player familiar from the controls and
keys used in the story. Whole story defines each step to the player.
Animations:
An animated gate id used which seems to talk to the man.
A man is sued to talk to the gate is created by the animation.
Conversation between gate and the man is whole animated by the text appearance and
disappearance of the text.
Killing bad souls is animated by the end of the video.
User Interactions Required:
User can skip this narration when he/she required.
User move inside the graveyard by pressing the available button on the screen.
Navigation / Links:
Link provided on the home page is taking player towards the graveyard.

CSC10214 Assignment 1
Title: Game Page Frame ID: Game
Dimensions:
The actor dimensions are 150px by 150px but actual actor size is cleared after the generation of the
animated video.
Media Used:
Background image is used to make the scene of the graveyard.
A pedestrian is used to walk on.
Coins are used to collect by the player which later used to release his mom.
Danger objects like skulls and bones are used in the story which can kill the player before reaching
the destination.
Various sounds are inserted in this story like sound of sword. Sound of opening gate, sound of
pressing button, etc.
A dead man sound plays when danger object kills the man.
Buttons:
Button start is pressed to start the actor in the story.
An exit button is provided which take out the player from the graveyard.

CSC10214 Assignment 1
Background:
A graveyard background is used to make the scene more real and make the whole story a horror
story.
Content:
On this page, player enters the graveyard to save his mom. During his journey, he faces lots of
problems which can kill the man. Player need to dodge all the hurdles and reach his target.
Description (purpose / objectives):
Player need to enters into the graveyard to save his mother. As the angry gate says his
mother is trapped by the bad souls. He can release his mother by fighting with the bad souls
found in the graveyard. So, the player from the
bad souls to release his mother.
Animations:
Objects came closer to the player.
Player move on his place and jumps on the same place but the movement of the platform
and objects make the player seems to be move.
Bad souls rotating on its place in the air.
User Interactions Required:
User required to jump from its place whenever is required by simply pressing the jump
from the screen.
User moves out of the graveyard by pressing the escape button on the screen.
Navigation / Links:
Link on this page redirects the man out of the graveyard and displays the score screen.

CSC10214 Assignment 1
Title: Score Page Frame ID: score
Dimensions:
Fit the complete window used for the graveyard game scenario.
Media Used:
Sounds:
Halloween Sound was inserted to making the video like a horror place.
Images:
Background image and the brave man image was used that fits to the scenario.
Buttons:
Button ‘Home’, ‘Previous’, and ‘Exit’ is available at the top-left of the screen which takes the man to
the graveyard.
Background:
Graveyard background image shown above is selected for the background of the graveyard.
Content:
On this page defines the last page of the story.
Description (purpose / objectives):
Main objective of this page to let the brave man know about to save his mother from bad
souls.
Animations:
This page has the absence of animation opposite to every other page.
User Interactions Required:

CSC10214 Assignment 1
Man can move back to the graveyard or move out of it by the buttons provided.
Navigation / Links:
By this page, man can move to the different pages with the help of button links.

CSC10214 Assignment 1
Technical specifications (optional)
(Simple example below could be provided if these details are not provided on storyboards)
Web page dimensions: 500 x 800 pixels. Banner dimensions:
1) Horizontal banner: 600 pixels wide x 100 pixels high;
3) Vertical banner: 160 pixels wide x 300 pixels high;
2) Button 1: 300 pixels x 300 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
Actor
Background 1
Background 2
Graveyard gate
Graveyard objects
More images
Audio
Audio for the
game
https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/
uploads/2016/06/Indiana-Jones-style-royalty-free-game-art.png
https://gamegator.net/news/article/reviewed-graveyard-keeper
https://www.videoblocks.com/video/halloween-pumpkin-in-a-spooky-
graveyard-hallowenn-concept-realistic-animation-bgrh__tflizjlj475
https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-cemetery-
starter-set-low-poly-3d-model-7_2000x.png?v=1521107436
https://www.clipartmax.com/middle/m2i8A0b1i8K9b1H7_little-mummy-by-
merlin-2525-121-cute-halloween-mummyclipart/
Searched when required
http://soundbible.com/tags-halloween.html