Time:
- Plan: 30-45 min
- Execute: 50 min
Type(s) of Essential(s):
Social & Emotional Growth
Design
Critical Review
Prerequisite:
Overview
Educators demo a prototyping tool for learners they will use to complete their pitch. Learners explore the tool and become familiar with how it can be used for their pitch.
Essentials in the Activity
Educators create custom materials that showcase the individual features of a prototyping tool and how to utilize the features to create a prototype and demonstrate the use of the tool in real-time. Learners acquire knowledge about the tool and how to apply this knowledge to turn their game idea into a digital prototype. By familiarizing themselves with the tool and asking educators clarifying questions, learners discover options for designing their prototype, make a clearer connection between the Transformational Design Framework and game design, and utilize critical thinking as they converse with peers about initial ideas for their prototype. As learners determine how to use the tool for their game pitch, they collaborate with their peers and utilize relationship skills.
Goals and Outcomes
Outcomes: Learners enhance their media and digital literacy by learning how to use a tool to showcase a game wireframe and foster their design thinking skills and creativity by having the learners figure out how they can utilize a tool to show their game idea.
Materials
Marvel1 or prototype2/wireframe3 tool, instructions of tool, paper, writing instruments
It may be helpful to create instructions customized to the learners. Refer to examples from Marvel’s or the prototyping tool you selected for ideas. Here are examples of Marvel instruction sheets created by Learning Games Lab teachers in previous sessions: computer, iPad pt. 1, iPad pt. 2. These examples do not reflect the most current version of Marvel.
Print sketches of characters and icons from the game Outbreak Squad. Or have a link to these sketches ready to share with learners.
Preparation
Complete prerequisites.
Become familiar with the prototype tool and instructions for onboarding and using the tool. If you’re using Marvel, explore the Marvel Help Center and identify content to share with learners. If you’re using a different prototype tool, locate the help features and select content to share with learners.
If you decide to make an instructional sheet for learners, be sure to use language that is easy for readers to understand. Have printed or digital copies available and ready for learners. Create an example of a prototype to show during the demo. If possible, select a tutorial video that briefly shows how to use the prototyping tool.
Implementation and Completion
Distribute prototyping tool instructions and sketches to each learner. Inform learners they will use a tool to design a prototype or wireframe of their game.
Begin the activity by showing a tutorial video of the tool and discussing how to use it on different devices (e.g, computer, tablet). As the tutorial is presented, point out different features of the tool and address learners’ questions as they arise. Present your example with learners. Also inform learners that the goal of the prototype is to not have finished products. Rather, it is to have sketches of their ideas of characters, icons, and gameplay. Show them the sketches from Outbreak Squad. If possible, share with learners icons and characters of the finalized game and compare them to the sketches.
Text for footnotes and note:
[1] Marvel is a design platform that allows users to build digital products, through wireframes, mockups, and prototypes.
[2] Prototyping is “the process by which a game designer builds an example of their game in order to test the gameplay” (MasterClass, 2021). From a prototype, “users are able to access a functioning replica of the product first-hand and interact with it accordingly” (Mamtani, 2020).
[3] Wireframe can be explained as a “an opportunity to give deeper detail about something that can be tied to a specific feature for how it works or should behave” (Filament Games, 2016). To do this, the designers often use images and words to explain different aspects, which could but are not limited to: navigation, gameplay, characters, icons, title screen, and settings.
Note: Depending on the time allotted to this activity, the learners may make a wireframe or prototype. To learn more about the distinctions between these forms, review the article “Prototype vs. Wireframe vs. Mockup – What Are the Differences?” from UXPin.