Design Documentation: Interactive Marion Game Web Content - CSC10214

Desklib provides past papers and solved assignments. This document details the design of an interactive Mario-themed web game.

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
the .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: Some Student Name____________________________
Student ID No.: 22222222____________________________
Unit Name: Designing the User Experience
Unit Code: CSC10214
Tutor’s name: Adam Fletcher____________________________
Assignment No.: Assignment 1, Part A - Design Documentation
Assignment Title: Interactive Web Content
Due date: Enter due date here____________________________
Date submitted: Enter the date you submitted here_____________________
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)
Type your name here____________________________
Date: And put the date here____________________________
0

[Marion Game Short Movie]
Design Documentation
By []
1

Table of Contents
Introduction................................................................................................................................3
Wireframe..................................................................................................................................4
Theme.........................................................................................................................................7
Storyboards................................................................................................................................8
Dimensions:............................................................................................................................8
Media Used:...........................................................................................................................8
Sounds................................................................................................................................8
Images................................................................................................................................8
Fonts...................................................................................................................................9
Buttons:..................................................................................................................................9
Background:...........................................................................................................................9
Content:..................................................................................................................................9
Description (purpose / objectives):........................................................................................9
Animations:............................................................................................................................9
User Interactions Required:....................................................................................................9
User Feedback:.......................................................................................................................9
Navigation / Links:.................................................................................................................9
Technical specifications...........................................................................................................10
Media List................................................................................................................................10
List of Figures
Figure 1: Wireframe showing Start Page of Mario game..........................................................4
Figure 2: Wireframe showing First screen of Mario game........................................................4
Figure 3: Wireframe showing jumping of character in the Mario game....................................5
Figure 4: Wireframe showing getting more score of Mario game.............................................5
Figure 5: Wireframe showing a different type of obstacle in of Mario game............................6
Figure 6: Wireframe showing getting more scored in Mario game...........................................6
Figure 7: Wireframe showing completion of game...................................................................7
2

Introduction
This game is a short animation about the Marion game. The scenes capture from the start of
the game in which at first the main character of the game Marion will start running to finish
the game and faced by many hurdles and obstacle. The scene starts from Marion standing in
the greenery place.
The Marion type theme has inspired me for many years ago. I am trying to develop an idea
about the game where I want to make the game just like the “Super Mario” and “Mario
Brother” game. The idea of this particular scene is to provide the player a feeling to be the
beginning of their journey.
3

Wireframe
Figure 1: Wireframe showing Start Page of Mario game
Figure 2: Wireframe showing First screen of Mario game
4

Figure 3: Wireframe showing jumping of character in the Mario game
Figure 4: Wireframe showing getting more score of Mario game
5

Figure 5: Wireframe showing a different type of obstacle in of Mario game
Figure 6: Wireframe showing getting more scored in Mario game
6

Figure 7: Wireframe showing completion of the game
Theme
The scenes in the game are created with the mix of “Cartoon” theme. This game is generally
liked by the kids but young people also loved to play this type of game too where no stress
and no pressure is in the game it is full of fun and stress less game. These theme of game
blends and explore 3 types of the format and hope it will provide the best experience of users
as possible.
7

Storyboards
Dimensions:
This scene shown above will use the more available as this will going to display like a short
movie.
Media Used:
Sounds
Marion: In this scene when Marion starts waling the sound like . . . . . . . . . . “Tin Tin Tin”
will play on the background of the game. From the start of the game to its completion of the
game this sound will play continuously.
Music: the fun type of music is used for creating some interesting atmosphere.
Atmosphere: In any game, its atmosphere sound is very necessary to make the proper interest
of the player. In this game also there is atmosphere music like the windy sounds, wasteland,
running sound.
On click: When the user or we can say the player will interact with the buttons there will
some sound on click the buttons.
Scene / Game loading: When the scene or the game will start loading at the time also there
will be some present music will be played at the background.
Images
 This scene requires the images of the cloud which make the player looks like the real
scene.
 There is need for some bricks in this scene which is hit by the Marion to get more
score.
 Images of the turtle, flower, and one animal character is also needed in this scene too
for making it looks so attractive.
8

Fonts
At the top of the scene, there is also one font (speech bubble) is used for writing the “pause
game” looks like it is handwritten and by pressing on that the game will be paused.
Buttons:
At the start of the game there will be two buttons one is for the game to start and the other
button is for the replay the game. One more button is there which is used for pausing and
resuming the game.
Background:
The initial background of the game will be a picture of the Marion and after that the
background change to greenery open ground where the grasses, blocks, road and the clouds
will be seen. For showing the scene is loading some loading scene sound will be created.
Content:
The Marion game scene contains the 15 seconds of the narration scene. There is also the
Marion on the page of the starting of the game and walking against the devasted background.
Description (purpose / objectives):
The purpose of the scene shown above is to familiarize the user to the Marion game by the
movie like scene. As the user will press the start button from the menu the game will start.
After loading the scene the title of the Marion game will be seen and after that game will start
along with some funning music.
Animations:
Following are some of the animation used on the scene like the:
 The Marion will walk on pressing the forward or the backward buttons.
 A character will also jump by pressing any button from the keyboard.
 Clouds will move always when the game start or resume.
User Interactions Required:
The user has to click on the help button for going to the help menu page. No other interaction
is compulsory but if they click on that button they will come out of the scene and the game
will be paused.
User Feedback:
The help button present on the screen helps the user to know more about the game and when
they will press the help button a squishing sound going to play in the background.
Navigation / Links:
Shown below are some of the navigation presents in the scene like:
 Help page navigation
 Pause the game navigation
 Navigation to the game page
Technical specifications
Dimensions of the web page are 500 x 800 pixels. Shown below are a more brief description
of the Banner dimensions:
9

1) Horizontal banner: 500 wide x 900 pixels high;
2) Vertical banner: 150 wide x 800 pixels high;
3) Button 1: 150 x 150 pixels;
4) Button 2: 160 wide x 190 pixels high;
5) Custom 1: 420 x 100 pixels;
6) Custom 2: 200 x 350 pixels.
Media List
Image name or
description
Resource address/URL
Sound:
Marion
Music
Atmosphere
On click
Scene / Game
loading
Images
Cloud Image
Bricks Image
Greenery Image
Turtle
Flower
Animal character
Image
Fonts
Bang
Notes handwritten
Heading
Need to be found or recorded
https://www.shutterstock.com/image-vector/cartoon-mario-
724004767?src=uY5gWnXQsbVyswZ6sQTLrg-1-5
https://www.fontspace.com/category/mario
10

11