CMP81001 Assignment 1: Interactive Web Content Design

Desklib provides 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).............................................................................................3
Media List/References (if required)............................................................................................3
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://_________________
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.

CMP81001 Assignment 1
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.
 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)

CMP81001 Assignment 1
Title: Home Page Frame ID: Home
FIGURE 1: HOME PAGE
FIGURE 2: BACKGROUND IMAGE
Dimensions:
Background: 720 X 360
Teacher and kids: 150 X 100
Tornado: 100 X 80
Rescue Man: 80 X 50
Media Used:
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:

CMP81001 Assignment 1
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 3 Frame ID: Screen 3
FIGURE 3: SCREEN 3 PAGE
FIGURE 4: 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.

CMP81001 Assignment 1
Title: Screen 4 Frame ID: Screen 4
FIGURE 5: SCREEN 4
FIGURE 6: KID 2
Dimensions:
Background: 720 X 360
Tornado: 100 X 80
Rescue Man: 80 X 50
Kid: 100 X 80
Media Used:
The sound of the Tornado would be used here as when the entry of the Tornado is shown.
Entry of the Rescue man will also generate a heroic sound.
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. Suddenly, the Rescue man get entered and saves the kid from 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
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)
(If you create your own images, this section is not required. Otherwise, you should reference all
images that you found online or other sources for your story.
Note: It is recommended that when you search for images online to use, we suggest you use search
parameters set with permission for reuse or within creative commons.)
Image name
or
description
Resource address/URL
Beach
Background
https://png.pngtree.com/thumb_back/fw800/back_pic/00/11/31/495637862ebbc95.jpg
Kid 1 https://cdn2.vectorstock.com/i/1000x1000/47/01/smiling-kid-boy-cartoon-character-
vector-15054701.jpg
Kid 2 https://i.pinimg.com/originals/bf/fd/19/bffd19b3fa0013b443dffa24369809ac.jpg
Kid 3 https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQxhGWFoyk7kZ6eYWYUnHeJRwU0aXM5V8bx2rNMHRrm8kHH
Bf-
Teacher https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTaEV6glbU13oWhGBt-
KuX5Sqf4JL2JSMJd9I8rCNN8WPzZfaEj
Tornado https://banner2.kisspng.com/20180418/gyw/kisspng-tornado-cartoon-animation-clip-
art-tornado-5ad7c89aa08951.5089672515240910346576.jpg
Rescue Man https://t3.ftcdn.net/jpg/
01/27/37/22/500_F_127372289_AKhFhU2o8f7O9Aw2NkTBC47NnuOH1sG2.jpg