Read on Twitter
GAME UX BIBLE THREAD When delivering a styleguide for your team you need to break it down
- Overview
- Brand Pillars
- UX Pillars
- Players
- Style pillars
- Mood
- Feedbacks
- Narrative devices
- Graphic Design
- Interaction
- Accessibility
- Motion
GAME OVERVIEWSet the scene for your documentation by describing what the game is, important points here
- Name and brand identity
- Genre
- Target platforms
- Game narrative
- History of existing game
- Core game loop
- Project info, dates, teams, milestones
Brand PillarsAlign with your marketing teams and directors about what the game is you’re making, what is its DNA, can they describe it in 5 key words. Often they’ll completely disagree
Then add this to your guide with corresponding imagery that represents those words
UX Pillars What are the fundamental overarching goals for the user experience team? What are the core goals that must be met no matter what? eg. Immersive.
Theyd usually also spotlight underlying core strategies to any successful experience
eg. Reactive, Accessible
PLAYERSWho are we designing for? What kind of personas have been identified that enjoy your game? What are player expectations? What other games do they like to play? What do the players want? What risk areas are there when designing for them? eg. nostalgia. Any history..?
Style - PillarsWhat are the style targets? What is the AESTHETIC. This would be a few key images. The more abstract the more beautiful the interplay between elements. eg. On TW: Three Kingdoms I had a horse submerged in milky amber, gold leaf and ink.
MoodWhen you experience the game what mood does it communicate? eg. energetic, nightmarish, serious etc. What are some of the visuals that reinforce it? How do you describe the mood? What emotions does the game evoke? eg. Sense of calm, excitement
FeedbacksWhat methods are you using to provide feedback to the player from their actions? How is a player rewarded? How does the game let the player know if something went wrong ingame or with the software?
Do we use sound, VFX, 3D imagery, animations, motion graphics?
Narrative devicesWhich ingame narrative devices are used to communicate technology, lore from a book, magical powers etc. Are you telling the story through a hologram/floating head? Do you use loading screens
& ingame items to drop lore to the player? Is there a narrator?
Graphic design - ColourWhat are your brand/art direction colours and what are your functional colours? How do you use primary/secondary colours? Show a colorwheel and swatches. Colorblind mode? Validation colors, trafficlighting, team colors, celebration
Graphic Design - Layout & GridHow do layouts vary within your game and what kind of grid system are you using for consistency and structure/spacing? How do HUD elements sit on the grid vs menus? How do layouts change on screen sizes? Do you have consistent nav, headers?
Graphic Design - Typography/FontsWhich fonts have you decided on for headers, body text, numbers? Does it fit with art style? Licensing a commercial/os font? Font weights? Does it meet loc needs? Are they vectors/sprites? Distance fields? Define text size rule templates!
Graphic Design - Shapes What are your primary/secondary/tertiary shapes? How do shapes repeat through the interface and world? How do shapes interplay/subdivide/fit within each other? When do you use certain shapes? Do shapes hold feedback/narrative meaning?
Graphic Design - Contrast How do you contrast shapes, colours, layout to denote hierarchy of elements? Dark vs light, Big vs Small, Simple vs Complicated. Guide the players eye for clarity and readability? Are you using contrast to help legibility for those with impairments?
Graphic Design - Negative space Not defining rules for negative space can lead to disaster. What are the ratios you use for spacing elements? How much breathing room are you providing between list items, buttons, menus. Set clear definitions for spacing/margins
Graphic Design - LinesHow do you draw visible and invisible lines through your design on your grid to create structure? How do lines interplay with shapes and how do you use lines on elements, text etc? What meaning do you associate with lines of varying width and length?
Graphic Design - Treatment With the defined shapes and colours
how do your stylistic pillars inform your treatment? Do you have smooth/rough textures? Do lines and shapes have varying treatment? Is it “modern” or physical? Do you use blurs, light, incandescense etc?
Graphic Design - Alignment How do you align blocks of text? Do you have specific alignment rules for icons, imagery and text within tiles?
Do HUD elements and menus align to the center of the screen, anchored to the corners? Do lists align items in specific ways?
Graphic Design - IconographyWhat style are your icons? What size variances are there? How much breathing room do you give icons inside holders?Do you have consistent weighting/line thickness? Do you use simple vs illustrative vs both? Define legend/control/tile icons...
Graphic Design - HierarchyThe player needs to understand where to go and where to look and hierarchy helps define that. Define rules for sizing/priority of blocks of content. Shape, color, contrast, treatment, lines etc all determine information hierarchy.
Graphic Design - GroupingHow are elements logically grouped together to make readability and function clear to interpret? Are all currencies together? Do all menu buttons/legends sit in the corner of a screen? Define how elements are grouped
Interaction - Character Interactions and locomotionWhat kind of interactions can a player do? Are they able to jump, attack, what are the nuances that contribute to the gamefeel? How do they interface with in-world elements/props/puzzles/loot?
Interaction - ControlsWhat is the default control scheme? What input types are supported? How do binding icons look like? How do control hints, legends, QTEs etc vary in visuals and experience? How can a person change/remap their controls? How are they staged to the player?
Interaction - Interactive UI controlsCreate a glossary of all interactive UI controls and show their different states. Buttons, scrollbars, radio buttons, etc. Show typical states such as active/disabled and up/down/hover etc... and show how they differ on platforms.
Interaction - Lists Create a glossary of list types and states eg. tree lists, navigation, paginators, tile lists.
Define when certain lists would be used in specific contexts.
Interaction - NavigationWhat types of navigation elements do you use? Vertical/Horizontal tabs? are they aligned to the edge of a screen? Are they always placed below a header? Define cases where you use iconography and text in your navigation. How deep do you nest info?
Accessibility - Disabilities Which accessibility features are you designing for? List out different strategies for helping people who are hard of hearing, have dyslexia, are blind, have learning difficulties etc and stage everything as a priority throughout design.
Accessibility - Inclusion Design for inclusion, whether its gender, race, sexuality etc Show strategies for tackling design bias eg. inclusive character creator, proper race representation in game world, include as many languages as possible, show sensitivity to cultures.
MotionWhat kind of animation and motion feedback do you use to reinforce rewards, create clarity that input was processed. Show examples of timing and reinforce the mood and attitude of your animation through splines, well timed sound, color and contrast.
Every project is different and no one person does a document like this the same way. Look forward to learning from you how you approch this! There is def more interesting info you can uncover such as information architecture rules etc.
Thanks for reading
Thanks for reading
