🕹️Course Curriculum

Game Design & Game UI

Creative Technology· Intermediate· Ages 14–17· 32 Hours

Course At a Glance

Program Outcomes

By the end of this course, students will be able to:

1
Understand core game design principles including mechanics, loops, and player motivation.
2
Design game interfaces (menus, HUD, navigation) that are visually appealing and genre-appropriate.
3
Apply UI/UX concepts to interactive gaming environments, including onboarding, feedback systems, and flow design.
4
Create a complete game design concept with UI mockups, an interactive prototype, and a player experience document.

Module 1

Introduction to Game Design Principles

Students learn the MDA Framework, player motivation, core and meta gameplay loops, mechanics and rules, storytelling in games, game feel and juice, and how to critically analyse good and poor game design.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
1.1	What Makes a Game a Game?	Explore the MDA Framework (Mechanics → Dynamics → Aesthetics). Survey major game genres and understand how genre shapes design expectations.	Genre Deconstruction: Apply the MDA framework to a chosen game. Present to the class.	`MDA Framework (Mechanics/Dynamics/Aesthetics), game definition, genre, voluntary participation`
1.2	Player Motivation & Engagement	Explore Self-Determination Theory and Bartle's Player Types (Achievers, Explorers, Socialisers, Killers). Study intrinsic vs extrinsic motivation.	Player Type Profiling: Complete a simplified Bartle Test. Identify which Bartle types different games primarily serve.	`Bartle Player Types (Achiever/Explorer/Socialiser/Killer), SDT, intrinsic vs extrinsic motivation`
1.3	Core Gameplay Loops	Understand the Core Loop as the fundamental repeating cycle of activity. Distinguish the core loop, progression loop, and meta loop.	Loop Mapping: Map the core, progression, and meta loops for a mobile game, a console platformer, and a desktop RPG.	`Core loop, progression loop, meta loop, compulsion loop, flow diagram`
1.4	Game Mechanics & Rules	Understand mechanics as the verbs of a game. Learn how combining simple mechanics creates complex gameplay. Study constraints and freedoms.	Mechanic Remix: Generate 8 game concepts from one core mechanic. Design a 3-mechanic rule set on paper and playtest.	`Game mechanic, verbs of play, emergence, constraints, freedoms, design space`
1.5	Storytelling in Games	Understand environmental storytelling, emergent narrative, and authored narrative. Learn key story elements: premise, protagonist, goal, conflict, and resolution.	Story Brief: Write a one-page Game Story Brief for an original game concept.	`Environmental storytelling, emergent narrative, authored narrative, story premise, world tone`
1.6	Game Feel & Juice	Understand 'game feel' and 'juicing' (adding visual and audio feedback to make interactions satisfying).	Feel Analysis: Watch clips of 'before and after' game juice. Sketch 5 feedback effects for your game concept.	`Game feel, juice, screen shake, squash-and-stretch, particles, feedback, tactile response`
1.7	Analysing Good & Poor Game Design	Evaluate games against design principles. Study hallmarks of poor and good game design (e.g., unfair difficulty spikes vs clear feedback).	Design Critique: Play a browser game and complete a structured critique form identifying good and poor design decisions.	`Game design critique, feedback clarity, fair challenge, agency, punishing vs rewarding design`
1.8	Module 1 Project: Game Design Document	Apply concepts to produce a Game Design Document (GDD) Concept Section for an original game idea.	Project: 'Game Concept GDD' — produce a document covering elevator pitch, target audience, core loop, mechanics, story brief, and game feel.	`GDD: elevator pitch, target audience, core loop, mechanics, story brief, tone`

Module 2

Game UI (User Interface) Design

Students learn the full game UI design discipline: diegetic vs non-diegetic UI, main menu design, HUD principles, iconography, typography, colour semantic systems, and building mockups in Figma.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
2.1	Game UI vs App UI	Understand how game UI serves the fiction. Study diegetic, non-diegetic, meta, and spatial UI.	UI Type Hunt: Identify UI elements in 5 games and categorise them as diegetic, non-diegetic, meta, or spatial.	`Diegetic, non-diegetic, meta, spatial UI, game world immersion, UI-fiction coherence`
2.2	Main Menu Design	Design a main menu focusing on visual language and hierarchy.	Build: 'Main Menu Design' — design a main menu in Figma including title treatment, navigation buttons, and background art.	`Menu hierarchy, Play/Continue/Settings/Credits, button states, title treatment, background art`
2.3	HUD Design Principles	Design the Heads-Up Display (HUD) prioritizing screen real estate and placement zones for critical/secondary information.	HUD Critique & Design: Analyse 3 HUD screenshots and then design a HUD for the Module 1 game concept.	`HUD zones, critical/secondary/tertiary information, screen real estate, placement rationale`
2.4	Iconography & Visual Language	Design a consistent icon system. Understand representational, abstract, and symbolic icons.	Build: 'Game Icon Set' — design 10 icons for the game concept sharing a consistent visual style.	`Icon silhouette, recognisable at 16px, representational/abstract/symbolic, consistent style`
2.5	Typography for Games	Select game typography prioritizing legibility, tone, and character. Study display vs UI vs body fonts.	Font Matching Game: Find appropriate font pairs for 8 game genres and apply the fonts to the main menu design.	`UI font (legibility), display font (character), body font (readability), genre font conventions`
2.6	Colour in Game UI	Apply colour theory to game UI (red = danger, green = safe). Learn colour accessibility for games.	Build: 'Game UI Colour System' — design a 10-colour semantic system. Test semantic colours with a greyscale shape version.	`Semantic colour (red/green/blue/yellow conventions), colour-blind accessible, greyscale test`
2.7	Interface Mockup with Figma	Build a complete game interface mockup set in Figma using components, dark treatments, and layer effects.	Build: 'Game Interface Mockup' — design Main Menu, HUD, Pause Menu, and Settings screens using consistent styling.	`Figma game UI components, layer effects, glow, gradient, dark UI treatment`
2.8	Module 2 Project: Complete Game UI Kit	Deliver a complete Game UI Kit including menus, HUD, icons, palette, and typography.	Project: 'Game UI Kit' — deliver a complete set of 4 screens, an icon set, colour palette, and typography specimen in Figma.	`Full Module 2 — game UI kit: menus, HUD, icons, colour palette, typography`

Module 3

Game UX (User Experience) & Player Flow

Students master game-specific UX: flow state, player onboarding philosophies, multi-sensory feedback systems, difficulty balance, state diagrams, player journey mapping, and usability testing.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
3.1	Player Flow & Csikszentmihalyi's Flow State	Understand Flow: the state of complete absorption where challenge matches skill. Map the Flow Channel.	Flow Channel Mapping: Play a game and map the player's skill and challenge levels over time to identify moments of flow, boredom, and anxiety.	`Flow state, flow channel, boredom zone, anxiety zone, dynamic difficulty, scaffolding`
3.2	Player Onboarding Design	Understand onboarding philosophies: tutorial screens, contextual tutorials, and implicit/discovery tutorials.	Onboarding Critique: Compare the onboarding of 2 games. Design a 3-screen onboarding flow for your game concept.	`Tutorial screens, contextual tutorialisation, implicit/discovery onboarding, safe fail space`
3.3	Feedback Systems: Visual, Audio & Haptic	Design multi-sensory feedback systems that confirm actions. Categorise visual, audio, and haptic feedback.	Build: 'Feedback Design Matrix' — design feedback systems for 8 player events (e.g., taking damage, collecting an item).	`Feedback immediacy, multi-sensory feedback, positive/negative events, visual/audio/haptic`
3.4	Difficulty Balance & Progression Design	Learn difficulty design tools: learning curve, pacing, checkpointing, and affordances. Introduce difficulty accessibility.	Difficulty Curve Design: Design a difficulty progression for 6 levels of your game concept plotted on a graph.	`Difficulty curve, pacing, checkpointing, affordances, accessibility options, breathing room`
3.5	Navigation & Information Architecture	Design the navigation structure of a game. Map all possible game states as a State Diagram.	Game State Diagram: Draw a complete State Diagram showing all screens/states and the transitions between them.	`State Diagram, game states, transitions, wayfinding, minimaps, quick resume`
3.6	Player Journey Mapping	Adapt UX journey mapping to games across stages like Discovery, First Impression, Tutorial, Progression, and Long-Term.	Player Journey Map: Create a complete Player Journey Map for the game concept across 5 stages with emotional curves and pain points.	`Player journey stages: discovery, first impression, tutorial, progression, long-term mastery`
3.7	Usability Testing for Games	Adapt usability testing to game design. Use paper prototypes to observe and analyze player actions.	Paper Prototype Playtest: Create a paper prototype for a 2-minute sequence and run a playtest with classmates. Compile a Findings Summary.	`Game usability testing, think-aloud, paper prototype, success metrics, severity rating`
3.8	Module 3 Project: Player Experience Document	Produce a comprehensive Player Experience Document detailing the full UX of the game.	Project: 'Player Experience Document' — produce a 3-page document covering Player Journey Map, Onboarding Design, Feedback Matrix, Difficulty Curve, and State Diagram.	`Full Module 3 — player journey, onboarding, feedback systems, difficulty curve, state diagram`

Module 4

Game Design Project

Students design a complete game concept: a revised GDD, visual art direction, Figma design system, UI screens, an interactive prototype, and a final presentation.

Approx. 8 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Tools / Concepts
4.1	Project Briefing & Concept Finalisation	Refine the game concept from Module 1 using learning from Modules 2–3. Finalise the GDD.	GDD Revision: Update the Module 1 GDD with 5 improvements including onboarding, core loop pacing, feedback, and UI direction.	`Revised GDD: loop, onboarding, feedback, difficulty, UI direction, tone`
4.2	Game Art Direction & Visual Style	Define the visual style, colour mood, and artistic references using a moodboard before screen design.	Art Direction Document: Produce a 12-image moodboard, colour mood definition, typography direction, and UI design language description.	`Art direction, visual style, moodboard, UI design language, colour mood`
4.3	UI Design System for the Game	Set up a Figma design system with colour/text styles and components (buttons, item slots, health bars) using Auto Layout.	Design System Sprint: Build the game's Figma design system ensuring components include required states.	`Game design system: colour/text styles, button variants, item slots, health bar states`
4.4	Screen Design: Menus & Navigation	Design all navigation screens (main menu, level select, pause, game over, settings) applying the art direction.	Production Sprint: Design 6 navigation screens using component instances. Ensure strong visual hierarchy.	`Main menu, level select, pause, game over, victory, settings — all from design system`
4.5	Screen Design: HUD & In-Game UI	Design all in-game UI including the HUD, contextual prompts, and a tutorial overlay ensuring readability.	Production Sprint: Design the full HUD screen, contextual prompts, and tutorial overlay. Test readability against varied backgrounds.	`HUD screen, contextual prompts, tutorial overlay, readability on varied backgrounds`
4.6	Interactive Prototype: Clickable Game UI	Build a Figma prototype simulating UI navigation with transitions (Push, Dissolve) and micro-interactions.	Prototype Sprint: Connect all screens with click interactions. Add button press states, health bar depletion, and hover effects.	`Figma prototype, Push/Dissolve/Smart Animate transitions, button states, health bar animation`
4.7	Playtest & Refinement	Conduct a structured playtest of the UI prototype, apply severity-ranked fixes, and prepare a presentation layout.	Playtest & Polish: Conduct playtests, fix top 3 issues, and arrange screens into a Game Design Showcase presentation in Figma/Canva.	`UI playtest, observation notes, severity fixes, game showcase layout, design decision callouts`
4.8	Final Game Design Presentation Day	Present the complete game design project including the GDD, art direction, UI prototype, and player experience decisions.	Final Presentation: 5-minute live Game Design Showcase + 2-minute Q&A highlighting key design decisions.	`Full course — GDD, game UI design system, prototype, player experience, game showcase`

Teaching Notes & Tips

Pacing Guidance

Each module contains 8 lessons of approximately 55–65 minutes each, totalling ~32 hours. Module 1 is discussion-heavy and creative — allow time for debates about game design choices. Module 4 runs as production sprints with mandatory checkpoints.

Differentiation

Advanced students can explore: implementing their game concept in a no-code game engine (GDevelop or Godot), designing a full GDD for a complex RPG, motion design for game UI, or creating a Behance portfolio case study.

Assessment Criteria

Final project assessed on: (1) GDD Quality — clear mechanics, loop, story. (2) Visual Art Direction. (3) UI Design System — components with variants. (4) Screen Design Quality. (5) Prototype Interactivity. (6) Player Experience Thinking.

Tools & Resources

Primary design tool: Figma (free Education account). Moodboards: Pinterest or Canva. Game analysis: itch.io or browser game archives. Reference: GDC Vault, Extra Credits (YouTube), GMTK channel.

Capstone Project Tracks

2D Casual Mobile Game (simple mechanics, short sessions), Puzzle Game UI (logic, clean UI, level tracking), Educational Game (engaging mechanic wrapped in education), Retro Platformer (pixel art, checkpoints, power-ups).

Prior Knowledge Expected

Students should be comfortable with: basic Figma navigation, fundamental design principles, and exporting designs. Students who have completed Introduction to Graphic & Digital Design or UI/UX Design are ideally prepared.

Enroll Your Child Now