View: Product Requirements Document

Free HTML5 Game Tutorial for Beginners: Page 4

The View Desktop View Phone View Summary
Rough Layout of Tablet View

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.

The View

The 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 landscape mode A simple layout of the horizontal, landscape view follows.

Layout of Tablet View

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 Reset Answer, Final Answer and Next Question.

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

The Phone View Layout follows.

Rough Layout of Tablet View

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 portrait mode, or vertical orientation.

With the model, view, controller design pattern, it's easy to swap out the view. Design the game such that nothing needs to change in the model or controller, to make this game usable for a range of dimemsions. The dimensions and colors of most elements can be modified in the view with media queries, style sheets, and some JavaScript.

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 Reset Answer, Final Answer, and 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.

Therefore the 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.

The 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.

Page 4

Game Tutorial for Beginners was prepared a few years ago. HTML5, CSS3, and JavaScript have improved over time, yet this free course continues to include useful features and long standing software development techniques. Enjoy more projects with free Web & game development tutorials.


free tutorials, learn web design, learn web programming, read books online free, free ebooks, free books online,free books to read, online books, learn web development, STEM, CSS 3, HTML 5, Web developer, learn to code, learn programming, interactive web design, interactive website design,

Copyright © 2015 Seven Thunder Software. All Rights Reserved.