Screen Layout Design

Overview

Unit: Coding for Solutions
Lesson Number: 5 of 30
Duration: 60 minutes
Class Size: 4 students
Age Group: Year 7 (11-12 years old)
Curriculum Reference:

• National Curriculum for Computing (England), Key Stage 3 (Years 7-9)
• Specifically:
  • "Design, write and debug programs that accomplish specific goals..."
  • "Use logical reasoning to explain how some simple algorithms work and to detect and correct errors in algorithms and programs."
  • "Design and create computer programs that model the behaviour of physical systems." (Program design includes interface layout)

Learning Objectives

By the end of this lesson, students will be able to:

• Understand the importance of effective screen layout in programming (NC KS3: Design and create programs).
• Plan a screen layout indicating input and output areas to enhance usability.
• Apply logical thinking to position components effectively for user experience (NC KS3: Logical reasoning, designing programs).
• Collaborate on producing a labelled screen layout draft relevant to their ongoing coding project.

National Curriculum Links

• Design and Technology 3.1 Design and Make Principles – apply knowledge of user interface design principles.
• Computing Programme of Study (Years 7-9) – "Use selection and variables... design, write and debug programs that accomplish specific goals."
• Personal Development – promote teamwork and communication skills through paired/group work.

---

Resources

• Large A3 paper sheets or whiteboards
• Coloured markers and post-it notes
• Pre-prepared example screen layouts (visual aid)
• Tablets/laptops (for reference of software UI)
• Tactile materials (e.g., foam board pieces for hands-on arranging components)
• Timer and visual schedule for short timed activities (helps ADHD)

---

Lesson Structure

1. Introduction and Objective Setting (10 minutes)

• Teacher explains: Why screen layout matters in programming — it impacts how easily users can input data and view output clearly.
• Show examples from familiar apps/games (on tablet or projector), asking:
  • Where do you input data?
  • Where do you get results?
  • What makes these easy or difficult to use?
• Use visual highlight of input vs output areas.

Engagement tip: Use an interactive question board so all 4 students can verbally or non-verbally (e.g. emojis or post-it notes) share observations, encouraging neurodiverse participation.

---

2. Direct Instruction & Modelling (10 minutes)

• Teacher quickly sketches a simple screen layout design live, labelling input boxes, output display, buttons, menus.
• Introduce simple UI principles (tailored language):
  • Keep inputs grouped, easy to find
  • Outputs visible without scrolling if possible
  • Buttons large and clear
• Demonstrate simple rearrangements and discuss their usability impact.

---

3. Hands-On Group Activity: Design Your Screen Layout (25 minutes)

• Students work in pairs or as a group of four (depending on preference) to design their screen layout for their program.
• Instructions: Use A3 sheets or whiteboard space to:
  • Draw the outline of the program window/screen
  • Mark clearly where all inputs (e.g., text boxes, buttons) and outputs (e.g., results display) will go
  • Use sticky notes for each UI element (so they can move them around)
• Alternative tactile option: Use foam pieces shaped like buttons/input/output sections on a board for more sensory engagement.

Teacher support: Circulate to guide and ask prompting questions like:

• “How will the user know where to enter data?”
• “Is the output easy to see and understand?”
• “Have you thought about making buttons a good size?”

ADHD/Autistic Strategies:

• Allow movement breaks during the task.
• Use clear step-by-step visual prompts displayed on the board or tablet.

---

4. Peer Review and Reflection (10 minutes)

• Each student/pair presents their screen layout design briefly (1-2 minutes).
• Classmate feedback using a “Two Stars and a Wish” framework:
  • Two things they liked (stars)
  • One thing to improve (wish)
• Teacher reinforces good design choices and gently guides improvements with positive framing.

---

5. Plenary and Assessment (5 minutes)

• Class discussion: Why is designing a screen layout before coding an important step?

• Quick quiz (verbal or physical flashcards) on layout principles:

  • Where should inputs go?
  • How important is output positioning?
  • Why use sticky notes or tactile tools for design?

• Teacher records anecdotal evidence of participation, understanding, and ability to use logical design thinking aligned with NC objectives.

---

Differentiation

• For students needing extra support, provide a printed template with pre-labelled input and output boxes to rearrange.
• For advanced students, challenge them to consider accessibility (colour contrast, font size) as part of their design.

---

Reflection and Next Steps

• Reflect on designs and consider integrating these layouts into students’ next coding lesson (Lesson 6: Implementing the Screen Layout).
• Encourage journaling or drawing about what they learned today for students who benefit from writing or visual expression.

---

Summary

This lesson combines visual, tactile, and verbal learning styles to engage Year 7 students—including those with ADHD and autism—in planning user-friendly screen layouts. It ties directly into National Curriculum computing aims by developing computational thinking, program design, and user-centred problem-solving skills. The hands-on studio-like task invites creativity and iteration, modelling authentic software development practices.