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 into code.


Students will be able to:

Important context for teachers: During this lesson students will only be using code to design the screens (or pages) of their app. Students will NOT be programming the interactive behavior of their app at this point.

The following three lessons teach students how to use event handlers and debugging strategies. Then, in Lessons 8, 9, and 10, students will add responsive 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 pages in place.

Getting Started


Prompt: Why is it important to plan out the design of an app?

Discussion Goals



Open a Project: Have students open the "Lesson3_SampleApp" project.

Display: Show students the prototype picture for the sample app. Have them compare the prototype to the finished app.

A sketch featuring all 6 of the pages of the Bird Quiz sample app. Every page has every screen element from the app, and every button has flowchart-style arrows pointing to what screen the button takes you to.

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.

Non-Visual Prototyping: While it's often convenient to sketch out a prototype, it can be useful to break it down into a non-visual representation. (This can be useful for any student, but it's especially important when teaching visually impaired students.) You could represent each page in the sketch as a list of components, where each component has a simple description or directions indicating what it does when you interact with it. You could deconstruct the prototype even more by putting specific values, like pixel coordinates, for each listed component. Students may notice that the more you break down the prototype, the more closely it resembles the code that produces the app.


Open a Project: Have students open the "ProjectTemplate" project.

Activity: Students will work on transferring their prototypes to pages in the project template. Partners can work together sharing a computer, or they can divide the pages between themselves and work individually. After they are done, the code for the individual screens can be copied into a single file to create a complete project.

Wrap Up

Prompt: Were there any changes you had to make to your original design once you transferred it to a screen?

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.

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