Exploring Web Design

Unit: Web Design Mastery

Lesson 1 of 20: Introduction to Web Design

Class Size: 8 students
Duration: 55 minutes
Level: Years 9-10 (ages approx. 13-15)
Subject Area: Technology

Learning Objectives

Aligned with the New Zealand Curriculum Technology learning area, focusing on Designing and developing digital outcomes and Technological Practice:

• Understand the role and importance of web design as a digital outcome within technology.
• Identify and describe the key elements that contribute to an effective website (layout, navigation, content, usability, aesthetics).
• Comprehend the project-based learning approach to be used throughout the unit.
• Recognise the unit’s objectives and expectations, including skills in digital design, user experience, and technical creation.
• Develop critical thinking and communication skills to describe design features in context.
• Foster collaboration, creativity, and the use of digital tools relevant to web design.

This lesson addresses key Technology curriculum expectations under these strands:

• Technological Practice: Planning for developing digital outcomes, understanding briefs.
• Technological Knowledge: Understanding how digital technologies work to create interactive and functional web pages.
• Nature of Technology: Appreciating how technology influences society and vice versa.

Key Competencies supported:

• Thinking – analyzing design elements critically.
• Using language, symbols, and texts – interpreting and communicating design concepts.
• Relating to others – collaboration in discussion.

---

Curriculum References

• Technology Learning Area: Design and develop digital outcomes, understand digital systems and how they serve user needs.
• Unit of Work: Web Design Mastery (Years 9–10)
• Learning progression is consistent with NZC Technology achievement objectives for these years .

---

Lesson Plan Breakdown

1. Introduction & Engagement (10 minutes)

Focus: Activate prior knowledge and build interest

• Begin with a stimulating question: "What makes a website easy and enjoyable to use?"
• Brief whole-class discussion drawing on students’ experiences with popular websites they like.
• Show a brief demonstration or screenshots of good vs poor website designs highlighting different web design elements (navigation ease, aesthetics, load time).
• Introduce the unit theme: "We will learn how to create effective, user-friendly websites through hands-on projects."

Resources: Projector or screen with example websites, whiteboard for brainstorming.

---

2. Exploration of Fundamentals (15 minutes)

Focus: Discover core web design elements

• Present the five fundamental elements of an effective website:
  • Layout
  • Navigation
  • Content
  • Visual design (colour, typography, imagery)
  • Usability/accessibility
• Through guided notes and visuals, explain how each element contributes to user experience.
• In pairs, students analyse a sample website on laptops or tablets, identifying these elements and discussing how well they are implemented.

Activity: Use a simple checklist worksheet for pair evaluations.

---

3. Introducing Project-Based Learning & Unit Objectives (10 minutes)

Focus: Explain learning approach and unit goals

• Explain the project-based learning approach: students learn by designing and developing their own websites incrementally over 20 lessons.
• Outline unit objectives:
  • Research and apply design principles
  • Plan and build functioning web pages
  • Use coding and design tools confidently
  • Test usability and improve design
  • Present and reflect on their final websites.
• Discuss assessment criteria briefly and expectations for skills development.

Interactive Discussion: Students share their expectations and any previous experience in web design or coding.

---

4. Class Activity: Brainstorming Website Purpose & Audience (10 minutes)

Focus: Develop understanding of design purpose and user needs

• In groups of 4, students brainstorm ideas for a hypothetical website: purpose (e.g., school club, local business, hobby) and its target audience.
• Each group shares their ideas with the class, focusing on how design might differ depending on audience and purpose (a key NZ Curriculum aspect: understanding needs and contexts).

Outcome: Recognise that effective web design depends on user-centred decisions.

---

5. Wrap-up and Reflection (10 minutes)

Focus: Consolidate learning and set next steps

• Recap key points about the importance and elements of web design.
• Quick round for students to share one new thing they learned today.
• Introduce next lesson topic: "Planning Your Website".
• Assign a simple homework: think about a website they visit often and note what they like or dislike about it.

---

Teaching Strategies and Considerations

• Inclusive teaching: Use diverse examples reflecting NZ culture and ensure relevance by allowing local or student-interest topics for website projects.
• Digital tools: Introduce students to beginner-friendly web design platforms or HTML/CSS basics gradually in future lessons, but today focus on concept understanding.
• Cultural Responsiveness: Include discussion about designing websites accessible to diverse groups including Māori perspectives on digital communication if feasible.
• Formative assessment: Observe student participation in discussions and group work, review their worksheet checklists for understanding of web elements.

---

Resources Needed

• Computer lab or tablets for students (minimum 1 device per pair)
• Projector and screen for examples
• Sample website URLs/screenshots
• Checklists/worksheets for website element identification
• Whiteboard or flip chart for brainstorming

---

Assessment Opportunities

• Ongoing formative assessment via group discussions and worksheet responses.
• Observation of students’ ability to identify design elements and explain their importance.
• Use oral questioning to gauge understanding of project-based learning principles and design objectives.

---

Reflections for Next Lessons

• Plan to scaffold students’ skills in creating wireframes and mockups.
• Incorporate explicit teaching on digital tool usage aligned with curriculum goals.
• Encourage connections between technological knowledge and ethical, social implications of web design (privacy, accessibility).

---

This lesson plan ensures alignment with the New Zealand Curriculum expectations for Technology by fostering understanding of digital design outcomes, linking to project-based learning principles applicable for Years 9-10 learners, and integrating key competencies essential for success in this learning area .