Game Design lecture and assignments for Session 4 of The Los Angeles Film School's Game PreProduction course.

1. Session 4
David Mullich
Game PreProduction
The Los Angeles Film School

2. UI and UX
The terms UI and UX are sometimes (incorrectly) used
interchangeably, but they have specific meanings.
UI, or User Interface, refers to the methods (keyboard
control, mouse control) and interfaces (inventory screen, map
screen) through which a user interacts with your game.
UX, or User Experience, refers to how intuitive and enjoyable
those interactions are.

3. UI and UX
To look at it another way:
 The UI of a car is its steering wheel, its pedals, the dials and
controls on the dashboard.
 The UX of the car comes from intangibles like the brake
pedal being responsive, the engine smoothly accelerating
when you step on the gas, the gear stick having just the right
amount of resistance - those things that make the car
enjoyable to drive.

4. What Does Good UI Do?
A good UI tells you what you need to
know, and then gets out of the way.

5. What Does Bad UI Do?
This.

6. Fundamental Questions
1. Does this interface tell me what I need to know right now?
2. Is it easy to find the information I'm looking for, or do I have to look
around for it? (Are the menus nested so deep that they hide
information from the player?)
3. Can I use this interface without having to read instructions
elsewhere?
4. Are the things I can do on this screen obvious?
5. Do I ever need to wait for the interface to load or play an
animation?
6. Are there any tedious or repetitive tasks that I can shorten (with a
shortcut key, for example) or remove entirely?
Desi Quintans

7. Screen Flow
Draw a box of each of your game screens
and connect them with lines to mark basic
interactions and behavior.
This first step allows to the team to
understand how large a game will be. It also
helps with defining controls, data and
programming requirements.

8. Screen Flow

9. Wireframes
Everyone loves pixel-perfect mockups, but there’s a huge issues with
polished designs: they take too much time you can afford in the
beginning.
So, in the Preproduction phase, we usually create line drawings, or
“wireframes”, of what each screen will look like.
As a result of this wireframing process we get clear estimates and
visual documentation, directions to work in and every teammate
comprehending how an app will work and how components interact
between each other.

10. Wireframes

11. Wireframes

12. Wireframes

13. Create a page in your Concept PowerPoint that
shows the following:
 Camera: What view do we have into this world
(first person, third person, top-
down, isometric, side-scrolling, 2D, 3D)?
 Controls: How you will use the mouse, keyboard
or keypad to control the game? List the main
controls and what actions they perform.
 Main Gameplay Screen Wireframe: Label all the
relevant buttons, icons, indicators.
PowerPoint

14. 1. Complete your Controls Wiki page:
 Describe your controls and what they do
 Explain why you chose this control scheme
2. Complete your Camera Wiki page:
 What view do we have into this world (first person, third person, top-
down, isometric, side-scrolling, 2D, 3D)?
 How does the camera behave as the player moves?
3. Complete your Character Wiki page:
 Who are we controlling and what can this character do? Think in verbs.
 What special abilities does the the character have (e.g., magic, combo
attacks, BFGs)? How do they work?
 How does the character move? Are there different modes
(walk, run, swim, fly, swing, crawl, climb, jump, vehicles) or speeds?
Wiki

15. 2. Complete your Interface Wiki page
 Create flowchart of your game screens. Examples of screens that might be in your
game include:
○ Title Screen
○ Main Menu
○ Gameplay
○ Settings (volume control, difficulty setting, restart button, quit game)
○ Help
○ Win
○ Lose
 Create wireframes for all game screens.
Wiki