Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
1. 2011
Game Design 2
Lecture 5: Game Interface (paper) Prototyping
Partially adapted from:
Joel Laumans - Introduction to Wireframes - http://bit.ly/48uVt7
http://www.comu346.com david.farrell@gcu.ac.uk
2. Why?
• Games are expensive
• Large teams, extended development time
• Game designers, programmers, artists will
all spend a lot of time implementing the
interface
• prototypes are a design aid
• prototypes are a communication aid
3.
4.
5. Tools
• Flow Charts (see lecture on menus)
• use case flow
• final menu flow
• Wireframes
• Paper Prototype
6. Wireframes are:
A visual representation of an interface; used
to communicate the structure, content,
information hierarchy, functionality, and
behaviour of an interface.
7. Wireframes are:
A visual representation of an interface; used
to communicate the structure, content,
information hierarchy, functionality, and
behaviour of an interface.
16. Types of Wireframes
• Sketches are good
for experimentation
• Sketch out different
ways of representing
data
• Useful for
‘workshopping’ areas
of interface
17. Low Fidelity
• Block Diagrams
• Don’t represent
function
• Do represent
content
• Good for testing
flow of interface
21. Tips
• Use potentially ‘real’ text, not fake ‘Lorem
Ipsum’ style text
• Start with the largest part of interface first
(main canvas) and work from largest to
smallest.
• Remember audience is mixed (artist,
designer, programmer, producer, user)
22. Wireframes
• Visual design
• NOT graphical elements
• NOT branding, mood etc.
• Avoid unnecessary elements
• Focus on content and interaction
24. Wireframe Tools
• Similar to flowcharting, any vector graphics
program is suitable
• Visio on Windows
• OmniGraffle on OS X
• Inkscape on Windows, Mac, Linux
25. Paper Prototyping
• Even with a wireframe, it is possible to miss
important interface elements
• A digital prototype will allow for expert
and user testing
• Even this is quite expensive
• Paper prototyping allows a relatively cheap
method of evaluating
26. Creation
• Draw UI components
• Model different states
• Ideal for work-shopping each part of
interface
• More visual than wireframing
• may feature platform UI components
27.
28. • Sketch an outcome for every possible
action on your interface
• This might seem like a lot of work but it’s
far far lest work than a digital mock-up or a
real interface
32. • Can also help identify physical interface
problems
33.
34. Where does it fit?
• Where a wireframe shows flow, a paper
prototype shows UI elements and can be
handed off to a developer.
• Can be used along side wireframes to pitch
to team / publisher
• Can be used to test with audience
35. Usability Testing
• layer widgets and replace screens as
required.
• If user confused to an action, give them
paper and ask them to sketch what they
would expect.
• video sessions and label user sketches to
help identify required changes
36. Usability Testing
• Present user with first ‘screen’
• have library of ‘screens’ and widgets available
• ask them to perform an action and state steps
• every step should be a verb like ‘click on this’ or
‘press this button’
37. Useful Tools
• A List Apart article on paper prototyping
http://www.alistapart.com/articles/paperprototyping/
• An article about wireframes & tools
http://bit.ly/wireframetools
• Yahoo UI Stencils
http://developer.yahoo.com/ypatterns/about/stencils/
• iPad stencils
http://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kits-
stencils-and-icons/ (hint hint)
• Wireframe grid paper
http://konigi.com/tools/graph-paper