Teacher(s) Youssef hassan Subject group and discipline Digital Design

Unit title Website Design ( CSS ) MYP year 5 Unit duration (hrs) 12

Inquiry: Establishing the purpose of the unit

Key concept Related concept(s) Global context

Communication Ergonomics / Innovation globalization and sustainability

Statement of inquiry

Interaction with the client using online communication techniques to come up with
the proper website design.
Inquiry questions

Factual— What are front-end and back-end in web design?

Conceptual— How do good design impact website usability?
Debatable—When is design is more important than coding?

Objectives Summative assessment

A: Inquiring and analyzing Part 1 from the design cycle folder Inquiring and Criterion A:
analyzing

Middle Years Programme Unit planner 1

 I. explains and justify the need for a
solution to a problem for a specified
client/target audience
II. identify and prioritize primary and
secondary research needed to develop a
solution to the problem
III. analyses a range of existing products that
inspire a solution to the problem
IV. develop a detailed design brief, which
summarizes the analysis of relevant
research.
B: Developing ideas
I. develop design specifications, which
clearly states the success criteria for the
design of a solution
II. develop a range of feasible design ideas,
which can be correctly interpreted by
others
III. present the chosen design and justify its
selection
IV. develop accurate and detailed planning
drawings/diagrams and outline the
requirements for the creation of the
chosen solution.
C: Creating the solution
Middle Years Programme Unit planner
Criterion A Students will select the idea of their interests, they
have to visit websites that are similar to their idea to
Student will communicate the assigned client using
check the contents, design, and usability.
any online communication technique to collect the
primary data. Students will collect all data needed to build the
website. This data could be collected from internet or
Students needs to search internet to collect the
from clients or from their minds.
secondary data.
Students will explore some websites that are similar to
their project to take idea about different designs and
solutions.
Students will create the sketches that will be used for
the final product. They need to communicate the
clients to take the approval for the suggested
sketches.
Part 2 from the design cycle folder Developing Criterion B:
ideas
Students start creating the theme for their product,
Criterion B then discuss this theme with teacher. Theme
Students will create document that contains the contains:
design specifications and requirements. Background color
Students need to develop more than one idea then Logo or background image
they have to present the chosen design and justify
their selection. Lines
Students will develop a detailed planning document Font options (color, size, …)
that outline the detailed stages about the creation of
the chosen solution.
Part 3 from the design cycle folder Creating the Criterion C:
2
 I. construct a logical plan, which describes
the efficient use of time and resources,
sufficient for peers to be able to follow to
create the solution
II. demonstrate excellent technical skills
when making the solution
III. follow the plan to create the solution,
which functions as intended
IV. fully justify changes made to the chosen
design and plan when making the
solution
D: Evaluating
I. design detailed and relevant testing
methods, which generate data, to
measure the success of the solution
II. critically evaluate the success of the
solution against the design specification
III. explain how the solution could be
improved
IV. explain the impact of the solution on the
client/target audience.
Approaches to learning (ATL)
ATL skill categories MYP skill clusters
Communication I. Communication
Middle Years Programme Unit planner
solution Students will create the different web pages for the
product, the may apply the same theme to achieve
Criterion C
the consistency in their product:
Students start working in their actual products.
Photo album
Create/Select the logo
Tables
Write the CSS code for the different web pages
Lists
components.
Images and texts
CSS for <p>, CSS for <hr>, CSS for <body>, CSS for
<img>, CSS for <table>, CSS for <h1,h2,..>, CSS for Headers and footers
<link>
Part 4 from the design cycle folder Evaluating Criterion D:
Criterion D Students will create the home page that have links to
all other web pages in the product.
Student will create a test plan for the final product.
Students will evaluate the product by testing all the
Students need to communicate the clients to test functions of the product
and evaluate the product and get the feedback.
Students will update the final product according to
the clients’ feedback.
Students will write a statement about the benefits
of the final product for the clients.
Subject Specific ATL
● exchanging and integrating ideas produced at a brain storming activity.
3
 Social II. Collaboration ● Working in groups in scientific investigation

III. Organization ● Use graphic organizer for contrasting for organizing complex information.

Self-management IV. Affective ● giving feedback on the design of experimental methods

V. Reflection ● KWL (what they know, what they want to know, what they learned)

VI. Information literacy ● Access information to be informed and inform others

Research ● Communicate information and ideas effectively to multiple audiences using a variety of media and
VII. Media literacy
formats

VIII. Critical thinking ● Gather and organize relevant information to formulate an argument

● Consider multiple alternatives, including those that might be unlikely or impossible

Thinking IX. Creative thinking

● Apply skills and knowledge in unfamiliar situations

X. Transfer
Action: Teaching and learning through inquiry

Content Learning process

Learning experiences and teaching strategies
The student will create and design a Website for a • Some of the learning experiences which are gained by the students during this unit:
selected idea
 Finding alternatives
The Website contains the following:
 Comparing and contrasting alternatives to make a decision.
Paragraphs
 Using graphic organizers and /or comparison tables.
Tables
 Defending his choices in a logical way at a limited time in front of audience
Images
 Designing a scientific investigation
Horizontal lines
Logo
Formative assessment
Background

Middle Years Programme Unit planner 4

Lists During the study of the unit there will be some formative assessment tasks, which are:
Links
● Group discussion

● weekly task

● discussion and immediate feedback during the working on part A from the
worksheet

● Assessing the results students obtained in classwork activities.

● Quiz that will conclude with self-assessment and then will be revised by the teacher.

● Practice/take-home test that will conclude with peer assessment and then will be
revised by the teacher.

● Discussion and immediate feedback during the working on part A from the worksheet.
Differentiation

I. Student select the idea of their interest to work on it during the quarter. They
must work in the same idea every week until the end of the quarter.
II. At the end of the quarter, students will submit a complete project that contains all
the tasks during the quarter.
III. Extra clarification and explanation for the tasks and the subject can be given to the
students whom are facing some difficulties in the learning and/or the language.
IV. A recording for the lesson will be uploaded regularly to enable students with low
achievement to see the lesson more than one time.
Resources

Middle Years Programme Unit planner 5

 What resources are available to us?
How will our classroom environment, local environment and/or the community be used to facilitate students’ experiences during the unit?
Internet
www.w3schools.com
https://medium.com/level-up-web/100-css-resources-for-web-designers-and-developers-c060bed7a362
https://alligator.io/css/css-resources/

Reflection: Considering the planning, process and impact of the inquiry

Prior to teaching the unit During teaching After teaching the unit

This unit will be interesting for the students because
they will create their products (websites), and when
they apply the CSS code they will find all the web pages
have the same design which reduces the time and effort
that are needed to change the design and layout for
every single web page.
Students already know how to create the website using
HTML. They already know how to format and design
the web pages using HTML.
The main attribute of the learner profile does this unit
focus on is the communication. Students have the
opportunity to know more about the online
communication with the clients to collect primary data
and to get the feedback about the products.
This unit is very important for the community since it is
The main difficulties that the students met in the tasks
are online teaching because of COVID-19 and the
number of periods that are allocated for DD subject (1
period/week) So no enough time to cover the most CSS
topics.
The most useful resource for the students to practice
more in CSS topics is W3schools.com website and its
free editor.
We scaffold the learning for students who need more
guidance by recording the lessons and upload the
recording on google classroom, so the students have
good opportunity to repeat the lesson many times.
Many skills were developed for the students as
communication skills, design skills, coding skills.
The major outcome of this unit is to create
interactive websites that meet the client
requirements. This includes other main
outcomes as to know and use the proper online
communication techniques, to critique other
websites (bad and good features), and to collect
primary and secondary data and use them to
create the websites.
Next unit is about JavaScript, which is about how
to add functions to the website. Students will
use what they have been learnt from this unit to
create interactive websites with functions like
username and password, math operations,
forms, and many others.
Students show very attractive website with rich
information and interactive buttons. Most of the

Middle Years Programme Unit planner 6

 about services that related to our society and students succeeded to submit the final product
community like recycling website, services websites. that contains at least 7 web pages.

We effectively differentiated the learning in this

unit by applying differentiation in the product or
the outcome. Before starting this unit, students
select the idea of their interests, then they
collect information about the idea. This increases
the enthusiasm of the students to work
effectively on their idea.

Updated 6th June, 2021

Middle Years Programme Unit planner 7