Lesson 4: Project - Designing an App Part 2
Project | App Lab
Overview
Students continue working on the unit projects in this lesson that is primarily designed to be work time. Students continue to follow the app development process outlined in their App Development Guide by transferring their user interfaces designs from their planning guides over to App Lab
Agenda
Lesson Modifications
Warm Up (5 mins)
Activity (30 mins)
Wrap Up (10 mins)
View on Code Studio
Objectives
Students will be able to:
- Create a user interface based on a prototype
Preparation
- Make sure students have access to their App Development Planning Guides
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- CSP Unit 3 - Intro to App Design - Presentation
For the Students
- App Development Planning Guide - Activity Guide
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please read the full lesson plan below, then click here to access the modifications.
Warm Up (5 mins)
Important context for teachers: During this lesson students will only be using Design Mode to design the different screens of their app. Students will NOT be programming the behavior of their app at this point. The following three lessons teach students how to use event handlers, key commands like setProperty, and debugging strategies. Then, in Lessons 8, 9, and 10 students will add their first lines of code to their app to make their ideas come to life! The purpose of this lesson, Lesson 4, is only to get the design of individual screens in place.
Discussion Goal
- Planning can save time so the developers don't spend time designing faulty user interfaces
- Planning can help the developers talk through and test out ideas with the users of the app
Remarks
In the last lesson, you developed a prototype of an app with a partner. It's important to remember that other people will be using your app and need to understand how to use it!
Prompt: Why is it important to plan out the design of an app?
Activity (30 mins)
Remarks
The design you sketched out is a prototype of your app. A prototype helps you plan the looks and features of your app before you program it."
Do This: Direct students to Code Studio.
Teaching Tip
Students should explore the app and the prototype for a few minutes, noting how different elements are represented on the prototype.
Encourage Collaboration: Reinforce a collaborative classroom environment in which students share responsibilities for designing screens and discuss with one another the choices they're making. Students should be communicating their ideas with one another as they build.
Waiting for Programming: Some students may be eager to start programming their apps rather than simply build screens. Let students know that they'll be able to start programming their apps in the coming lessons and that the first half of the unit focuses more heavily on design.
Level 2: On this level, students see a sample app they've looked at before along with the sketches for the screens. Students run the app and compare the screens to the original design.
Remarks
After looking at this app and the prototype, you may want to make a few adjustments to your own prototypes. Take a few minutes to update your design.
When you are finished, move on to Level 3 where you will start creating your user interfaces in App Lab!
Level 3: Here students will work on transferring their prototypes to screens in App Lab. Partners can work together sharing a computer, or they can divide the screens between themselves and work individually. After they are done, the individual screens can be shared to create a complete project (see slide for instructions).
Wrap Up (10 mins)
Teaching Tip
The Wrap-up is short today to allow students the maximum amount of time to work on their apps.
Often times students will discover that their design is too complicated on paper and simplify it when they transfer it to the screen. This is ok! Sometimes the best designs are simple designs.
Prompt: Were there any changes you had to make to your original design once you transferred it to a screen?
Assessment: Planning Guide
This is a good opportunity to look over student's work in the App Development Planning Guide - Activity Guide as a formative assessment.
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
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.
- 3A-AP-19 - Systematically design and develop programs for broad audiences by incorporating feedback from users.
- 3A-AP-21 - Evaluate and refine computational artifacts to make them more usable and accessible.
- 3A-AP-22 - Design and develop computational artifacts working in team roles using collaborative tools.
- 3A-AP-23 - Document design decisions using text, graphics, presentations, and/or demonstrations in the development of complex programs.