Lesson 2: Introduction to Design Mode
45 minutes
Overview
Students work through a progression of levels to build an understanding of how to use Design Mode to layout an app. The final level has students setting up the screen of an app by attempting to copy an image of an app.
Standards
CRD-2 - Developers create and innovate using an iterative design process that is user-focused, that incorporates implementation/feedback cycles, and that leaves ample room for experimentation and risk-taking.
CRD-2.C - Identify input(s) to a program.
- CRD-2.C.1 - Program input is data sent to a computer for processing by a program. Input can come in a variety of forms, such as tactile, audio, visual, or text.
CRD-2.D - Identify output(s) produced by a program.
- CRD-2.D.1 - Program output is any data sent from a program to a device. Program output can come in a variety of forms, such as tactile, audio, visual, or text.
- CRD-2.D.2 - Program output is usually based on a program’s input or prior state (e.g., internal values).
AP - Algorithms & Programming
- 3A-AP-16 - Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using events to initiate instructions.
Agenda
Objectives
Students will be able to:
- Set up the User Interface of an app including buttons, text, and images
- Use meaningful names to for element ids
Preparation
- Review the programming levels to ensure you understand the fundamentals of Design Mode in App Lab and how elements are created and their properties are modified.
- Check the "Teacher's Lounge" forum for verified teachers to find additional strategies or resources shared by fellow teachers
- If you are teaching virtually, consider checking our Virtual Lesson Modifications
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the teachers
- Introduction to Design Mode - Slides
Teaching Guide
Warm Up (10 minutes)
Discuss: Think of your favorite / most used non-social media app. In your Unit Journal, explore the function of the app, along with different inputs / outputs
- Compare your journal with a partner and discuss common elements that both of your apps share
Discussion Goal: This prompt is designed to bring out students' prior experiences working with apps. If students aren't sure what app to choose, you can even ask them to pick to Code.org website. This discussion can pull out the fact that most apps contain images, buttons, and text that help users find and interact with information and content.
Create Performance Task Written Response Practice
In order to help prepare students for the new component of the AP Create Performance Task, there will be several opportunities throughout the curriculum to practice creating written responses aligned with the learning objectives that might be assessed on the exam.
Sample Prompt: How might you improve the user experience by updating input and/or output?
Sample Response for Instructors
Remarks
Yesterday we took a look at a few different apps and talked about input and output. We also discussed the User Interface. Today we are going to learn how to build the User Interface in App Lab.
Activity (30 minutes)
Do This: Direct students to Code Studio.
Level 1: Students examine an app from the previous lesson. They should feel free to move around and change any elements they'd like. Encourage students to spend a good amount of time on this level discovering how things work. Here are a few things they should notice:
- The screen can be changed by clicking the dropdown at the top of the app screen
- Each element has different properties that can be changed depending on the type of element. For example, a label element has choices like "text alignment" and "font family" while an image has choices like "fit image".
Regrouping: You may want to pull the class back together after Level 1 to discuss their findings.
Levels 2-6: In these levels, students will learn how specific elements are set up and edited. Level 3 introduces the concept of themes, which control the overall "look" of an app. No matter what theme is chosen, students have the ability to override any element's design.
Level 7: Students work from a given image to recreate the user interface for an app. It's ok if their design does not exactly match the sample. The goal is for students to become comfortable setting up a User Interface before the sketch out plans for their own apps in the next lesson.
Wrap Up (5 minutes)
Discuss:
- What elements collect input?
- What elements display output?
- Do you think there are elements that can do both?
Discussion Goal:
What elements collect input?
- Buttons
- Text Input
- Check Boxes & Radio Buttons
- Dropdown
What elements display output?
- Images
- Text
Do you think there are any elements that can do both?
- This is a tricky question! Most elements can do both because they can all be clicked and can change their content. Students will see this in action in the next few lessons.
Use the Retrieve-Pair-Share strategy to facilitate this discussion by directing students to write down their thoughts and ideas first, then pair up students to compare their answers and expand their notes. This allows time for individual processing and idea generation before sharing thoughts with others. Ask students to share the ideas they discussed with their partners as a class.
For more ideas on how to adapt this strategy to fit the needs of your class, check out the CSP Guide to Classroom Discussions
Assessment: Check For Understanding
Check For Understanding Question(s) and solutions can be found in each lesson on Code Studio. These questions can be used for an exit ticket.
Question: Why is it important for element IDs to have meaningful names?
This work is available under a Creative Commons License (CC BY-NC-SA 4.0).
If you are interested in licensing Code.org materials for commercial purposes contact us.
