Web Design Basics

Overview

This 60-minute introductory session sets the foundation for the "Web Design Essentials 10" unit, aimed at Year 10 students. It introduces key concepts of web design, focusing on the significance of audience and purpose in shaping websites. Students explore different website types and their intended functions, aligned closely with the National Curriculum for Computing at KS4 (Years 10-11).

Class Size: 3 students
Subject: Technology (Computing focus)
Unit Duration: 10 lessons

National Curriculum Links

Computing KS4 - Key Stage 4 National Curriculum [England]

Design, use and evaluate computational abstractions (NC Objective)
Understand the purpose and audience for a range of technologies
Analyse user needs and produce appropriate design solutions
Understand and apply knowledge of user interface design

This lesson specifically addresses:

Design and development of software and systems: Applying knowledge of audience and purpose in web contexts
Functional understanding: Understanding different types of digital systems (e.g., websites) and their functions
Computational thinking: Starting to break down user needs and requirements

Learning Objectives

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

Explain the fundamental principles of web design and why audience and purpose are crucial.
Identify different types of websites and describe their main features and intended functions.
Analyse examples of websites to determine how their design suits their audience and purpose.
Discuss the role of effective communication and usability in web design.

Resources

Laptop/tablet per student (with internet access disabled for focus)
Printed screenshots of various types of websites: e-commerce, portfolio, blog, informational, social media
Whiteboard and markers
Student workbooks/notebooks
Colour-coded sticky notes or cards
A previously designed simple website wireframe (printed or projected) for discussion

Lesson Structure

1. Starter Activity (10 minutes)

Icebreaker Discussion & Brainstorming

Using the whiteboard, ask each student to name a website they frequently visit and why.
Prompt: “Who do you think that website is designed for?” and “What is its main purpose?”
Record student responses under two headings: Audience and Purpose.
Briefly introduce the terms audience and purpose as fundamental to designing any digital product, focusing on websites.

2. Input/Teacher-led Discussion (15 minutes)

Key Concepts: Fundamentals of Web Design

Explain the concept of web design as the combination of aesthetics (visual layout), functionality, and usability.
Discuss why understanding the target audience and purpose shapes design decisions (content, layout, navigation).
Introduce different types of websites and their typical purposes:
- E-commerce (selling)
- Informational (providing knowledge)
- Portfolio (showcasing work)
- Blog (sharing opinions/updates)
- Social media/networking (interactions and sharing)
Show printed screenshots or projected images of different websites.
Interactive element: Briefly describe an audience and ask students which type of website suits that user best.

3. Group Activity (20 minutes)

Website Type Matching & Analysis

Hand out printed screenshots of different websites (5 types, as above).
Provide colour-coded sticky notes or cards labelled with “Audience” and “Purpose” for each type.
In pairs or individually, students match each website screenshot to its correct audience and purpose, placing the sticky notes accordingly.
Students then write a short description (2-3 sentences) in their workbook explaining why the design suits its intended audience and purpose.
Teacher moves between students, prompting critical thinking with questions:
- “What features help this website engage its audience?”
- “How does the layout reflect the site’s purpose?”

4. Plenary (10 minutes)

Class Discussion & Reflective Questioning

Reconvene as a group and share key findings.
Discuss common design elements found across multiple website types.
Teacher poses reflective questions:
- “Why might one design not suit all purposes?”
- “How can understanding audience prevent design mistakes?”
Summarise the importance of user-focused design decisions.
Introduce the next lesson briefly: focusing on planning and wireframing a website.

5. Assessment & Feedback (5 minutes)

Formative Assessment through Q&A and Exit Tickets

Each student writes on a sticky note: “One new thing I learned today” and “One question I still have”.
Collect and review these notes to inform planning for Lesson 2.

Differentiation

For the less confident: Provide sentence starters for website analysis, e.g., “This website is designed for ___ because ___.”
For the more able: Encourage deeper critical thinking by comparing usability features or suggesting improvements.
Provide visual aids and glossary for key technical terms (audience, purpose, usability, wireframe).

Cross-curricular Links

English: Communication skills through descriptive writing and vocabulary use.
Art & Design: Basic principles of layout and colour theory introduced lightly to pique interest.
PSHE: Understanding digital citizenship and the role of technology in society.

Extension Ideas

Students could come in their own time to explore and screenshot websites they use, preparing a short presentation for Lesson 2 on why those sites work for their audience.
Introduce simple sketching tools or digital wireframing apps for students comfortable with technology to start preliminary design work.

Teacher’s Reflection Notes (After Lesson)

Evaluate student understanding of audience/purpose via exit tickets and recorded observations.
Note student engagement with group activity—did it stimulate analysis and discussion?
Plan to adapt next lessons based on any gaps or advanced understanding seen today.

This detailed plan not only adheres strictly to the National Curriculum requirements but integrates active learning, critical thinking, and reflective assessment to foster a deep understanding of foundational web design concepts suitable for Year 10 learners in a small group setting.

Teaching Instructions