View: Product Requirements Document
Free HTML5 Game Tutorial for Beginners: Page 4
Desktop and Mobile Web Development with HTML5
Free Online Game Development Course: Design with HTML5
This short article describes how to prepare the
view portion of a Product Requirements Document (PRD).
The View portion of the PRD, describes what the game should look like.
See the Product Requirements Introduction for an overview of the game, game play, audio, and target audience.
A game's PRD describes the vision of the game designer. The PRD provides the details necessary for artists and developers to begin the next stage of game development. Developers will read the technical specification and artists can begin creating graphics.
Surface Game will have bright graphics on a dark blue background.
When the player taps a digit, the digit will display a blue highlight. The highlight provides important user feedback. Otherwise it may be unclear to the player which digit they selected.
When the player drops a digit on the answer box, the digit will highlight with a red border.
When a level is complete, then the text of the score area animates with color. Just the text and not the background will change colors. The user can see when they have completed a level.
Desktop and Tablet View
Desktop computers usually have screens which are wider than they are tall.
Desktop computers should display game elements horizontally.
However mobile devices, when rotated horizontally, also display more width than height.
When the display screen's width is greater than it's height, horizontally, it's called
A simple layout of the horizontal,
landscape view follows.
A horizontal display means there is much more space from left to right than from top to bottom. In that case, arrange the game board to look nice with a horizontal orientation.
The left side of the Web page will display three rows. The first row will contain five movable bright digits. The second row will have the answer box. The third row will display the rest of the movable digits.
To the right, players see the output for each question, including a graphic and some text. The text will include the current question, score, level, and question number.
Under the three rows and output text, see three buttons.
The buttons labels will display
Final Answer and
The graphic colors should blend with the color scheme for the digits, answer box, and text. Therefore the images that display to the right should have a similar look and feel as the digits, and other game elements. The goal is to make a nice looking game, where everything appears to belong together.
Phone View Layout follows.
Some mobile phones can't rotate between horizontal and vertical views. Some players prefer to use mobile phones in the vertical orientation. Games on phones may be played vertically, even with phones which respond to rotation. Therefore prepare a vertical view for mobile phones, tablets in vertical orientation, and resized desktop Web browsers.
When the viewing are of a device displays more height than width, it's called
or vertical orientation.
The digits will display in two rows. The size of the graphics need to be large enough for easy selection with one finger, on a mobile phone.
Display three rows; a row of digits, the answer box, and another row of digits, just as planned for the desktop view.
Just under the three rows,
display three buttons. The
Next Question buttons maintain the same functionality, and similar view,
as the desktop view.
The text for each question will display under the buttons, and the graphic will display under the text. If the phone is rotated horizontally, or the screen doesn't have enough vertical space, the player might see just the question, not the graphic. The player might need to scroll down to see the graphic.
next question text will describe the shape and include
dimensions for the shape, as well.
Some players might be able to
answer the questions without seeing the graphic.
Ideally the entire vertical view will display on standard screen sizes for phones. Hopefully the player can see the question and related graphic without scrolling.
Phone View Layout is a little rough. In the
end, font sizes for the buttons were increased for easier viewing.
This article described what the game should look like and displayed rough layouts of the mobile and desktop views.
This tutorial provided the vision of the game with just enough detail for the next level of game development. See the technical specification article for the next step.
Have fun and love learning!
For the next tutorial, tap the image icon containing text which says
Next Lesson, or
the right pointing arrow at the bottom of the page.