Intro to App Design - Lesson 4: Project - Designing an App Part 2
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 into code.
Goals
Students will be able to:
- Create a user interface based on a prototype
Resources
Supplemental Code.org material
For the students
Getting Started (5 minutes)
Teaching Tip
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 (5,6, and 7) 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.
- 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!
Discuss: Why is it important to plan out the design of an app?
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
Activity (30 minutes)
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.
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.
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.
Explore the Prototype
- 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, we'll open the project template where you will start creating your user interfaces!
Open a Project: Have students open the "ProjectTemplate" project. (NOTE: Until pages are added you will get a compiler error if you try to compile in Quorum Studio)
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 (5 Minutes)
Discuss: 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
- CSTA K-12 Computer Science Standards (2017): 3A-AP-16, 3A-AP-19, 3A-AP-21, 3A-AP-22, 3A-AP-23
Next Tutorial
In the next tutorial, we will discuss Code.Org Unit 3 Lesson 5, which describes Learn about why we need programming languages.