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 theres 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