Unit3
1
2
3
4
5
6
7
8
9
10
11

Lesson 2: Introduction to Design Mode

App Lab

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.

Purpose

This lesson introduces students to Design Mode in App Lab and the different kinds of screen elements and properties at their disposal in this tool. This lesson not only builds up skills in designing a user interface but also sets students up to begin designing an app of their own in the following lesson.

Agenda

Lesson Modifications

Warm Up (5 mins)

Activity (30 mins)

Wrap Up (10 mins)

View on Code Studio

Objectives

Students will be able to:

  • Use meaningful names to for element ids
  • Set up the User Interface of an app including buttons, text, and images

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.

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

Support

Report a Bug

Forum

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)

Discussion Goal

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.

Prompt: What is a common app that you use? Take a minute to sketch the User Interface of the main screen. Note how the user interacts with the app.

  • Compare your sketch with a partner and discuss common elements that both of your apps share

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 mins)

Teaching Tip

Regrouping: You may want to pull the class back together after Level 2 to discuss their findings.

Do This: Direct students to Code Studio.

Level 2: 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".

Levels 3-7: 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 8: 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 (10 mins)

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 element 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.

Prompt: Have students answer the following

  • What elements collect input?
  • What elements display output?
  • Do you think there are elements that can do both?

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?

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.