Designing the User Experience: Interactive Web Content for Mario Game

Desklib provides past papers and solved assignments. This project documents the design of an interactive web-based Mario 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 tosubmit in any other file format please
discuss this with your lecturer well before theassignment submission date.
Student Name: YADIKI BHARAT KUMAR
Student ID No.: 23113282
Unit Name: Designing the User Experience
Unit Code: CSC10214
Tutor’s name: Ms Carolyn Seton
Assignment No.: Assignment 1, Part A - Design Documentation
Assignment Title: Interactive Web Content
Due date: 05-04-2019 11:00PM
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:
(please type
your name)
YADIKI BHARAT KUMAR
Date: 05-04-2019
0

[Marion Game Short Movie]
Design Documentation
By [YADIKI BHARAT KUMAR]
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
2

Introduction
This story is a short animation about the Mario-The Savior. The scenes capture from the start
of the game in which at first the main character of the game Marion, the villain and the
princess are seen. The story moves on with the monster entering the area and threatens the
princesses to take away from the Mario and in the next screen Mario enter the fight between
the Monster starts after which Mario saves the Princess.
The Mario 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.
Wireframe
Theme
The scenes in the story are created with the mix of “Cartoon” theme. This story is generally
liked by the kids but young people also loved to view this type of story too where no stress
and no pressure involved. This theme of game blends and explores 3 types of the format and
hope it will provide the best experience of users as possible.
Storyboards
3

HOME SCREEN
Dimensions:
This scene shown above will use the more available as this will going to display like a short
movie.
Media Used:
Sounds
Mario: In this scene when Mario starts waling the sound like . . . . . . . . . . “Tin Tin Tin” will
play on the background of the story. From the start of the game to its completion of the game
this sound will play continuously.
Images
 This scene requires the image of the Mario which make the viewer looks like the real
scene.
 This scene requires the image of the Villain which make the viewer looks like the real
scene.
 This scene requires the image of the Princess which make the viewer looks like the
real scene.
 This scene requires the image of the Background which make the viewer looks like
the real scene.
Fonts
At the top of the scene, there is also one font is used for writing the “Mario-The Savior”
looks like it is handwritten.
4

Buttons:
At the start of the game there will be various buttons one is for the adventure to start and the
other button is for the replay the story. Different buttons are being used in order to facilitate
the viewer to view whatever scene they want to view.
Background:
This scene requires the image of the Background which make the viewer looks like the real
scene.
MAIN SCREEN
Dimensions:
This scene shown above will use the more available as this will going to display like a short
movie.
Media Used:
Sounds
Mario: In this scene when Mario starts waling the sound like . . . . . . . . . . “Tin Tin Tin” will
play on the background of the story. From the start of the game to its completion of the game
this sound will play continuously.
Images
 This scene requires the image of the Mario which make the viewer looks like the real
scene.
 This scene requires the image of the Villain which make the viewer looks like the real
scene.
 This scene requires the image of the Princess which make the viewer looks like the
real scene.
 This scene requires the image of the Background which make the viewer looks like
the real scene.
Fonts
At the top of the scene, there is also one font is used for writing the “Scene-3” looks like it is
handwritten.
5

Buttons:
Different buttons are being used in order to facilitate the viewer to view whatever scene they
want to view.
Background:
This scene requires the image of the Background which make the viewer looks like the real
scene. The background is continuously been used in all the screens.
END SCREEN
Dimensions:
This scene shown above will use the more available as this will going to display like a short
movie.
Media Used:
Sounds
Mario: In this scene when Mario starts waling the sound like . . . . . . . . . . “Tin Tin Tin” will
play on the background of the story. This sound will continuously be used in all the screens.
From the start of the game to its completion of the game this sound will play continuously.
Images
 This scene requires the image of the Mario which make the viewer looks like the real
scene.
 This scene requires the image of the Princess which make the viewer looks like the
real scene.
 This scene requires the image of the Background which make the viewer looks like
the real scene.
Fonts
At the top of the scene, there is also one font is used for writing the “The End” looks like it is
handwritten.
Buttons:
At the start of the game there will be various buttons one is for the adventure to start and the
other button is for the replay the story. Different buttons are being used in order to facilitate
the viewer to view whatever scene they want to view.
6

Background:
This scene requires the image of the Background which make the viewer looks like the real
scene.
Content:
The Marion story scene contains the 15 seconds of the narration scene. There is also the
Marion on the page of the starting of the story and walking against the devasted background.
Also, the villain and the Princess images and gifs are used in order to make the story look
real.
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 the adventure button then the adventure and
the story starts. The story moves on with the monster entering the area and threatens the
princesses to take away from the Mario and in the next screen Mario enter the fight between
the Monster starts after which Mario saves the Princess.
Animations:
Following are some of the animation used on the scene like the:
Various key frames are being set to make the characters move and to create the moving story.
User Interactions Required:
Only buttons that are used to move the viewer to different screens are used.
Navigation / Links:
Shown below are some of the navigation presents in the scene like:
 Navigation to the story page
Technical specifications
Dimensions of the web page are500 x 800 pixels. Shown below are a more brief description
of the Banner dimensions:
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
7

Sound:
Mario
Images
Background
Mario gif Front
Page
Villain Front
Page
Princess Front
page
Crying Princess
Villain Page 2
Mario End Page
Princess happy
Final Page
Princess Scene 2
https://www.prokerala.com/downloads/ringtones/download.php?id=31967
https://i.pinimg.com/originals/89/78/3b/
89783b90dfc88107491f76e6f4e62149.png
https://thumbs.gfycat.com/EarnestSmoggyCranefly-size_restricted.gif
https://i.gifer.com/Y1Mq.gif
https://thumbs.gfycat.com/SarcasticEverlastingGroundbeetle-max-1mb.gif
https://vignette.wikia.nocookie.net/mario/images/b/b7/Princess_Peach_
%28Gloom_Vibe%29.png/revision/latest?cb=20190131192618
https://vignette.wikia.nocookie.net/mario/images/6/6c/Bowser
%2C_Super_Mario_64_DS.png/revision/latest?cb=20121106012958
http://pngimg.com/uploads/mario/mario_PNG53.png
https://upload.wikimedia.org/wikipedia/en/thumb/d/d5/Peach_
%28Super_Mario_3D_World%29.png/220px-Peach_
%28Super_Mario_3D_World%29.png
https://www.cartoon-clipart.co/amp/images/princess-peach.png
8