CSC10214 Assignment 1: Interactive Web Content Design Documentation

Desklib provides past papers and solved assignments. This project showcases interactive storybook 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 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:
(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, an animated narration scenario is discussed here. This narration is for 30
seconds long in which scene of the game is discussed. All the controls are being
displayed in the form of animation in this short video. In the same video, the scenario
of the story is also discussed.
In this story, crows need to take the crowman to his own planet so crows came to the
Earth to take the crown back but crow man needs to stay on the earth as he wants to
take her princess as well. So the crows are requesting the crow man to get back to their
planet and the crow man puts the condition in front of them to allow her princess with
him.
Wireframe
Theme
This story consists of the theme of the space above the Earth. Alien crows came to take
his master to their planet. So to narrate the story properly we choose the space theme.
Earth is seen in the background. A background tune is used to make the game
attractive. Also, various png images and texts are used to make the story easy and
understandable for the user.
Storyboards
The following storyboards on the following pages provide a more detailed explanation
of the planned product.
(Note that:

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

CSC10214 Assignment 1
Title: Home Page Frame ID: Home
Dimensions:
This character is of the dimension of 150 pixels of height and 150 pixels of width. But the size or
dimension may worry according to the requirement during the development of the game.
Media Used:
Sounds: -
An immense dense sound for the background is used which makes the environment more versatile
and realistic.
Talk in the form of crow voice is coming while crows and crow man continue talking.
Images: -
A background image is used which suits the scenario.
A crow man which interacts with the crow during the animated video.
Crow is used to getting interaction in the video.
Buttons:
On the home page, this game has 6 buttons which can take the viewer to whatever he/she wants to
visit. This button is used to redirect the viewer to different screens.
Background:
Dark background of space is used in the image in which earth is seen. This background is complete
suits with the scene. Also, the background that is used is the two different images of the farm area.

CSC10214 Assignment 1
Content:
The content of this video has a short animated film for the game scenario. In this video, the whole
conversation between crow man and the crow goes on in the voice of Crow. Crows need to take
their master to their planet but crow man needs to be on earth to meet his princess. So crow man
does not want to be caught by the crows and puts the condition in front of them to allow her
princess with him.
In this video, this whole conversation is animated to make it more attractive.
Description (purpose / objectives):
This video is created to let the viewer know about the whole scenario. The main objective of this
video is to let the viewer know about the story of the crows and the crow man.
Animations:
A crow man is continuously moving to make it real. The text appears on the screen is also animated.
This animation is totally applied to video to make it more user interactive. System controls are
shown in this video is also achieved by the video animation.
User Interactions Required:
Different Buttons are being provided to the viewer to go to whatever they want to move
and check out the twist in the story.
Navigation / Links:
This page has a link which navigates the player to the main game area.

CSC10214 Assignment 1
Title: Story Screens Frame ID: Story
Dimensions:
This character is of the dimension of 50 pixels of height and 50 pixels of width. Size of the crow may
worry according to the requirement of the game.
Media Used:
Sounds: -
Same sound as used on the home page.
Images: -
Images used here are of the background taken. Farm image and also in one of the screens earth
image is taken.
Buttons:
On this page, this game has 6 buttons which can take the viewer to whatever he/she wants to visit.
This button is used to redirect the viewer to different screens.
Background:
Farm image and also in one of the screens earth image is taken.
Content:
The entire screen contains the main explanation of the story in which the viewer can easily view the
whole scenario of the story.
Description (purpose / objectives):
Purpose of this page is to save the crow man to be caught by the crows so that he can meet his
princess. The Crowman agrees to go back to the planet at last when the crows agree to allow his
princess as well.
Animations:
. A crow movement is also shown on this page. A story over animation is also created in which crow
man with his princess goes back to the planet along with the crows.

CSC10214 Assignment 1
User Interactions Required:
On this page, this game has 6 buttons which can take the viewer to whatever he/she wants to visit.
This button is used to redirect the viewer to different screens.
Navigation / Links:
This page has a link which navigates the player to the score page area.

CSC10214 Assignment 1
Title: Story Frame ID: Story End
Dimensions:
This page fits the whole window of the game.
Media Used:
Sounds: -
A crow sound expressing the joy as the master of crows is bringing the queen of crowplanet.
Images: -
A background image is used which suits the scenario.
Buttons:
An End button is present which will direct the user to start a page of the story.
Background:
Dark background of space is used in the image in which earth is seen. This background is complete
suits with the scene.
Content:
This page has the final end of the story.
Description (purpose / objectives):
To show that the crow man finally get her princess and she is ready to go with the crow man.
Animations:

CSC10214 Assignment 1
Crow movements and the motion of the crow man and the princess are added.
User Interactions Required:
User can start the story again by clicking on the end button after that the user will be
directed to start page of the story.
Navigation / Links:
This page has a link to take the player to the home or to different pages to wherever the person
wants to move.

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: 700 pixels wide x 150 pixels high;
a. This banner div is used for the platform. This platform is used for moving animation.
2) Vertical banner: 160 pixels wide x 600 pixels high;
a. The requirement of this banner is not sure.
3) Button 1: 125 pixels x 125 pixels;
a. This button is used for the jumping button which helps the crow man to jump on its
place.
4) Button 2: 180 pixels wide x 150 pixels high;
a. This button is used to place the do not want to play button which helps the player to quit
the game.
5) Custom 1: 150 pixels x 50 pixels;
a. This box is used to place the crow as an object inside this box and then animate it.
6) Custom 2: 400 pixels x 250 pixels.
a. In this box, a crow man is placed which is later animated according to the game
requirement.
Media List/References (if required)
Image
name or
description
Resource address/URL

CSC10214 Assignment 1
Crow man
Crow 1
Crow 2
Princess
Farm 1
Farm 2
Earth
Sounds:
More
Sounds
https://www.wallpapersin4k.org/wp-content/uploads/2016/12/Scarecrow-
Wallpapers-1.jpg
https://i.pinimg.com/originals/d2/93/5e/
d2935ea0054662a0e6e8f325709946e7.png
https://static1.squarespace.com/static/
59cb51ca2278e76492900c82/5a1e9a73f9619afa6ae4f1fa/
5a1e9abb4192021369adc81a/1511955238391/Crow.png?
format=1000w
http://clipart-library.com/images/8iA68yXgT.png
http://res.publicdomainfiles.com/pdf_view/52/13526491218331.png
http://www.clker.com/cliparts/r/R/P/T/N/U/farm-scenery-hi.png
https://i.stack.imgur.com/yPomB.png
http://soundbible.com/1486-Black-Crows-Cawing.html