CMP81001 Assignment 1: Interactive Web Content Design Documentation

Desklib offers solved assignments and past papers to help students succeed.

CMP81001 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: CMP81001
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: ____________________________

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

CMP81001 Assignment 1
Table of Contents
Introduction........................................................................................................ 1
Wireframe.......................................................................................................... 1
Theme............................................................................................................... 1
Storyboards........................................................................................................ 1
Technical specifications (optional)..........................................................................12
Media List/References (if required).........................................................................12
List Of Figures
Figure 1: Home Page............................................................................................. 2
Figure 2: Background Image...........................................................................2
Figure 3: Rescue Man......................................................................................2
Figure 4: Screen 1 Page.................................................................................. 4
Figure 5: Background Image...........................................................................4
Figure 6: Screen 2 Page.................................................................................. 6
Figure 7: Background Image...........................................................................6
Figure 8: Screen 3 Page......................................................................................... 8
Figure 9: Kid 1................................................................................................. 8
Figure 10: Screen 4 Page...................................................................................... 10
Figure 11: Kid 2............................................................................................. 10
Introduction
The introduction part contains the short description related to the story and here the story
is named as “Rescue from Tornado”. The story starts with a plot where a teacher takes
the students to a school trip and after sometime a student gets missed from the entire
group of kids. The kid suddenly sees a tornado coming near to him and he starts
shouting for the help. Suddenly, a Rescue Man reaches to the kid and saves him from
getting him by the Tornado.
The story is just a fictional idea and I always wondered. This is mainly inspired from the
different superheroes stories that we used to read in various books. The story is purely
based on the imagination made by the kids and also shows the conversation between the
kid, rescue man as well as the tornado.
Wireframe
The wireframe prototype to demonstrate this storybook can be found at:
https://app.moqups.com/Lfup07Xvhm/view

CMP81001 Assignment 1
Theme
The Story is named as the “Rescue from Tornado”. This story is based on a fictional drama
which completely related to the imagination of the various kids. Different conversations
are shown between the various characters of the story such as between the teacher and
the kids, tornado and a kid, rescue man and tornado and also between rescue man and a
kid.
The story is to be narrated very well and conveys the message of fighting against the
natural disaster. The story is created in four different screens and also narrated well in all
the different parts; it also gets inspired from the fictional stories that kids used to hear
from the books. The story could also be related to the small scenario of the spider man story.
Storyboards
The following storyboards on the following pages provide a more detailed explanation
of the planned product.

CMP81001 Assignment 1
Title: Home Page Frame ID: Home
FIGURE 1: HOME PAGE
FIGURE 2: BACKGROUND IMAGE
FIGURE 3: RESCUE MAN
Dimensions:
Background: 720 X 360
Teacher and kids: 150 X 100
Tornado: 100 X 80
Rescue Man: 80 X 50
Media Used:

CMP81001 Assignment 1
The sound of the Tornado would be used here as when the entry of the Tornado is shown.
Kids playing will also be used along with the nature sound.
Entry of the Rescue man will also generate a heroic sound.
Buttons:
 Start Button: This would help in starting the story.
 Play/Pause Button: This would stop or resume the story.
 Home Icon: Home icon would help the user to go to the Home Screen.
 Setting Icon: Screen icon would show the various Settings.
 Screen Button: Screen button would help in moving to various screens.
Background:
The background of the story is purely based on the fictional story that is given the name as “Rescue
Man”. This story starts as a teacher takes the students to a school trip and after sometime a
student gets missed from the entire group of kids. The kid suddenly sees a tornado coming
near to him and he starts shouting for the help. Suddenly, a Rescue Man reaches to the kid
and saves him from getting him by the Tornado.
Content:
The Content is similar to one of the small scenario of the superhero stories. The story is based on a
scenario which shows a superhero saving a kid from the tornado.
Description (purpose / objectives):
The story is based on the fictional drama where the superhero named as the “Rescue Man”
saves the kid from being hit by the Tornado.
Animations:
The Animation that would be used in this story is the flying rescue man and moving tornado
in a clockwise direction.
User Interactions Required:
The user needs to click on the buttons to see them perform.
User Feedback:
To check if the buttons are working properly and along with it, it checks the proper linking of
all the screens.

CMP81001 Assignment 1
Title: Screen 1 Frame ID: Screen 1
FIGURE 4: SCREEN 1 PAGE
FIGURE 5: BACKGROUND IMAGE
Dimensions:
Background: 720 X 360
Teacher and kids: 150 X 100
Media Used:
Kids playing will also be used along with the nature sound.
Buttons:
 Start Button: This would help in starting the story.
 Play/Pause Button: This would stop or resume the story.
 Home Icon: Home icon would help the user to go to the Home Screen.
 Setting Icon: Screen icon would show the various Settings.
 Screen Button: Screen button would help in moving to various screens.
Background:
The background of the story is purely based on the fictional story that is given the name as “Rescue
Man”. This story starts as a teacher takes the students to a school trip and after sometime a
student gets missed from the entire group of kids. The kid suddenly sees a tornado coming
near to him and he starts shouting for the help. Suddenly, a Rescue Man reaches to the kid
and saves him from getting him by the Tornado. This scene contains the first scenario of the
story where the kids are just playing on their destination.

CMP81001 Assignment 1
Content:
The Content is similar to one of the small scenario of the superhero stories. The story is based on a
scenario which shows a superhero saving a kid from the tornado.
Description (purpose / objectives):
The story is based on the fictional drama where the superhero named as the “Rescue Man”
saves the kid from being hit by the Tornado.
Animations:
The Animation that would be used in this story is the flying rescue man and moving tornado
in a clockwise direction.
User Interactions Required:
The user needs to click on the buttons to see them perform.
User Feedback:
To check if the buttons are working properly and along with it, it checks the proper linking of
all the screens.

CMP81001 Assignment 1
Title: Screen 2 Frame ID: Screen 2
FIGURE 6: SCREEN 2 PAGE
FIGURE 7: BACKGROUND IMAGE
Dimensions:
Background: 720 X 360
Teacher and kids: 150 X 100
Media Used:
Kids playing will also be used along with the nature sound.
Buttons:
 Start Button: This would help in starting the story.
 Play/Pause Button: This would stop or resume the story.
 Home Icon: Home icon would help the user to go to the Home Screen.
 Setting Icon: Screen icon would show the various Settings.
 Screen Button: Screen button would help in moving to various screens.
Background:
The background of the story is purely based on the fictional story that is given the name as “Rescue
Man”. This story starts as a teacher takes the students to a school trip and after sometime a
student gets missed from the entire group of kids. The kid suddenly sees a tornado coming
near to him and he starts shouting for the help. Suddenly, a Rescue Man reaches to the kid
and saves him from getting him by the Tornado. This screen starts narrating the entire story
based on the plot. Here, the work starts with the introduction of the kids and the teacher.

CMP81001 Assignment 1
Content:
The Content is similar to one of the small scenario of the superhero stories. The story is based on a
scenario which shows a superhero saving a kid from the tornado.
Description (purpose / objectives):
The story is based on the fictional drama where the superhero named as the “Rescue Man”
saves the kid from being hit by the Tornado.
Animations:
The Animation that would be used in this story is the flying rescue man and moving tornado
in a clockwise direction.
User Interactions Required:
The user needs to click on the buttons to see them perform.
User Feedback:
To check if the buttons are working properly and along with it, it checks the proper linking of
all the screens.

CMP81001 Assignment 1
Title: Screen 3 Frame ID: Screen 3
FIGURE 8: SCREEN 3 PAGE
FIGURE 9: KID 1
Dimensions:
Background: 720 X 360
Tornado: 100 X 80
Kid: 100 X 80
Media Used:
The sound of the Tornado would be used here as when the entry of the Tornado is shown.
Buttons:
 Play/Pause Button: This would stop or resume the story.
 Home Icon: Home icon would help the user to go to the Home Screen.
 Setting Icon: Screen icon would show the various Settings.
 Screen Button: Screen button would help in moving to various screens.
Background:

CMP81001 Assignment 1
The background of the story is purely based on the fictional story that is given the name as “Rescue
Man”. Here, the kid got lost and encounters with the tornado and a small conversation is shown
between them.
Content:
The Content is similar to one of the small scenario of the superhero stories. The story is based on a
scenario which shows a superhero saving a kid from the tornado.
Description (purpose / objectives):
The story is based on the fictional drama where the superhero named as the “Rescue Man”
saves the kid from being hit by the Tornado.
Animations:
The Animation that would be used in this story is of moving tornado
in a clockwise direction.
User Interactions Required:
The user needs to click on the buttons to see them perform.
User Feedback:
To check if the buttons are working properly and along with it, it checks the proper linking of
all the screens.