Salber IB Unit Planner Web Design - 11-12

Subject group and
Teacher(s) Salber, Christopher Design

discipline
Unit duration 15
Unit title Mass Com – Website Design MYP year Year 1
(hrs) hrs
Inquiry: Establishing the purpose of the unit
Key concept (1) Related concept(s) (1 or 2) Global context (1)
An inquiry into - Communities An inquiry into - Function Global Context:

Communities are groups that exist in Function: The function of a solution refers to what it has been designed to do and how Personal and Cultural
proximity defined by space, time or effective it is at enabling that action to be performed Expression - the ways in
relationship. Communities include, for which we reflect on,
example, groups of people sharing particular extend and enjoy our
characteristics, beliefs or values as well as creativity; our
groups of interdependent organisms living appreciation of the
together aesthetic.
What is the nature and
purpose of creative
expression?
Entrepreneurship,
practice and competency
Exploration:
Science & Technical
Innovation
Statement of inquiry
Conceptual Understanding: (1 key concept + 1 - 2 related concepts = 1 short sentence[conceptual understanding])
Online communities may function as a way to express student’s personal

identity and accomplishments
Statement of Inquiry: (Conceptual Understanding + e xploration = in 1 sentence)
Middle Years Programme Unit planner 1

Online communities, such as student portfolio websites, may function as a way to express student’s personal identity and accomplishments
Inquiry questions
Line of Inquiry: “Students will inquire into...” (include lots of content along with red, blue, and/or green when it fits – be very specific)
Factual —
• What is the nature of the problem?
Re-write the task in your own words
State the main points of inquiry• what is the relevant data that I need to collect? What fonts or images need to be included?
• Research who the website is intended for:
What appeals to the target audience?
Line of Inquiry: “Students will explore...” (include lots of content along with red, blue, and/or green when it fits – be very specific)
Conceptual —
• What is the need for web design?
• Who is it a problem for? What is the cause of the problem?
● What is the value of a setting?

Research into required technical design skills
What skills do you need to know?
Line of Inquiry: “Students will investigate into...” (include lots of content along with red, blue, and/or green when it fits – be very specific)
Debatable — May begin with “Does”, “Could”, “Should”, “To what extent”…
• Why is this problem important in this context?
● How does the web design situation impact the entire world? • How did others solve this problem? Evaluate past student projects and determine which ones you
believe are effective
● How did the web design of others inspire you to solve the problem in your own way?
● Analyze the materials used, efficiency, ease or web navigation, ergonomics (is it user friendly), aesthetics (the artistic taste), form and function
● Does the product/solution work well in all areas of the website?
● Are any ideas new, or are they new versions of old designs of previous PSAs?

Student-generated questions:
Objectives (from MYP criterion Summative assessment

and strands)
Design
Outline of summative assessment task(s) including assessment criteria: Relationship between
A – I, II, III, IV summative assessment
GRASPS
task(s) and statement of
1) Explain and Justify the need
Goal: inquiry:
2) Identify and Prioritize research
To complete this goal students must develop their skills as a web designer and Statement of Inquiry:
3) Describe the main features of one inpute a varity of information in a student generated website that can be used to
existing product that inspires a track their progress in IB courses.
solution to the problem Communication
Role: Web Designer demonstrates perspective
4) Present the main findings of and provides fairness and
relevant research 1) Explain and Justify the need
development as seen in a
2) Identify and Prioritize research student made PSA.
B – I, II, III, IV 3) Describe the main features of one existing product that inspires a solution to
the problem The platform of the PSA will
5) Develop a list of success criteria for
the solution 4) Present the main findings of relevant research serve as the outlet of
communication where
6) Develop design ideas 5) Develop a list of success criteria for the solution students can share their
7) Develop Planning/Drawing 6) Develop design ideas ideas for a solution of a
Diagrams global problem. They will use
7) Develop Planning/Drawing Diagrams their perspective for a
8) Outline a plan, which considers the solution and also use
8) Outline a plan, which considers the use of resources and time, sufficient for
use of resources and time, sufficient empathy to put themselves in
peers to be able to follow to create the solution
for peers to be able to follow to create the situation of a
the solution 9) Demonstrate excellent technical skills when making the solution disenfranchised person in
10) Follow the plan to create the solution, which functions as intended which they will create the
C – I, II, III, IV PSA to help. Solving this
11) List the changes made to the chosen design and plan when making the global problem will help
9) Demonstrate excellent technical solution promote fairness and
skills when making the solution 12) Present the solution as a whole development in
10) Follow the plan to create the disenfranchised situations.
13) Design testing methods
solution, which functions as intended
14) Outline the success of the solution against the design specification
11) List the changes made to the
chosen design and plan when making 15) Outline how the solution could be improved
the solution 16) Outline the impact of the solution/product on the target audience
12) Present the solution as a whole Audience: People who are interested in tracking their progess and
who may be influential in accepthing them into their school.
D – III, IV Situation: Students are creating a digital portfolio that can track
13) Design testing methods their progress for the duration of their IB career.
14) Outline the success of the solution Product/performance: Student created websites with a variety of
against the design specification media to display.
15) Outline how the solution could be
improved
16) Outline the impact of the
solution/product on the target
audience
Approaches to learning (ATL)
In order for students to explain and justify the need for a solution to a problem for a specified client/target audience students must Negotiate ideas and knowledge with peers
and teachers and collaborate with peers and experts using a variety of digital environments and media (ATL Category: Communication, Skill Cluster: Communication)
In order for students to Identify and prioritize the most effective digital displays students need to collect, record and verify data and make connections between various
sources of information. (ATL Category: Research, Skill Cluster: Information literacy)
In order for students to analyze a range of existing products and sites that inspire a solution to the problem. Students must consider multiple alternatives. (ATL Category:
Thinking, Skill Cluster: Creative Thinking)
In order for students to develop a detailed design brief that summarizes the analysis of relevant research students must gather and organize relevant information to formulate
an argument, interpret data and evaluate evidence and arguments (ATL Category: Thinking, Skill Cluster: Critical Thinking)
In order for students to develop design specifications, which clearly states the success criteria for the design of a solution students must plan short- and long-term
assignments; meet deadlines (ATL Category: Self-Management, Skill Cluster: Organization Skills)
In order for students to develop a range of feasible design ideas that can be correctly interpreted by others students must Use lateral thinking to make unexpected
connections and apply existing knowledge to generate new ideas, products or processes (ATL Category: Thinking, Skill Cluster: Creative Thinking)
In order for students to present the final chosen design and justify its selection students must combine knowledge, understanding and skills to create products or solutions
and Share ideas with multiple audiences using a variety of digital environments and media and demonstrate how it may change over time. (ATL Category: Thinking/
Communication, Skill Cluster: Transfer/ Communication)
In order for students to develop accurate and detailed planning (digital) drawings/diagrams and outline the requirements for the creation of the chosen solution students must
Transfer current knowledge to learning of new technologies (ATL Category: Thinking, Skill Cluster: Transfer)
In order for students to construct a logical plan that describes the efficient use of time and resources, sufficient for peers to be able to follow to create the solution students
must keep and use a weekly planner for assignments (ATL Category: Self-Management, Skill Cluster: Organization Skills)

In order for students to demonstrate excellent technical skill when making the solution students must create original works and ideas (ATL Category: Thinking, Skill Cluster:
Creative Thinking)
In order for students to follow the plan to create the solution, which functions as intended students must plan short and long term assignments; meet deadlines (ATL
Category: Self-Management, Skill Cluster: Organization Skills)
In order for students to fully justify changes made to the chosen design and plan when making the solution students must try new approaches to learning and evaluate their
effectiveness (ATL Category: Self Management, Skill Cluster: Reflection)
In order for students to explain how the solution could be improved students must test generalizations and conclusions and interpret data (ATL Category: Thinking, Skill
Cluster: Critical Thinking)
In order for students to explain the impact of the solution on the client/target audience students must identify obstacles and challenges and troubleshoot systems and
applications (ATL Category: Thinking, Skill Cluster: Critical Thinking)
Action: Teaching and learning through inquiry
Content Disciplinary learning engagements and teaching Formative Assessment Differentiation

strategies
(subject standard and
criterion strand)
All About Me Presentation

Brochure/Flyer
Research of my My interests research
interests project
Design cycle
assignment
Creating a website
Obtaining and using
feedback
Other class
assignments

Resources
Google Suite of tools
Reflection: Considering the planning, process and impact of the inquiry

Prior to teaching the unit During teaching After teaching the unit
Middle Years Programme Unit planner

6
Students have a preconceived notion of
plagiarism and what can and can’t be
used in school, music, film, et al.
There is a finite view of how students can
communicate their ideas and present
themselves digitally. This needs to be
explored and developed in alignment with
ISTE standards
Students have a wide array of
experiences in terms of their prior
knowledge of a digital footprint. I will
need to assess where the students are
and adjust the lessons based upon their
skill level.
Students need to develop empathy
towards a variety of situations and
assess what can be done to promote
digital safety and explore digital
risks/rewards.
Students will create an active website to
track all of their accomplishments through
their IB tenure.

7
Design Brief Outline
MYP Design class - Next Chapter
Year 1 - 6th Grade
Link to video introducing the Design Cycle for the E-Portfolio:
https://youtu.be/qYAstk0r6w4

Design Brief
Topic: Web Design

Criteria A - D
A. Inquiring and Analyzing
B. Developing Ideas
C. Creating the Solution
D. Evaluating

Student Name:

Design Cycle Project Title: Website Design


8
Global Context: Science & Technical Innovation

Design Situation: Efficient web design is a critical component of the 21st century. Web
design skills are becoming increasingly necessary for academic and career opportunities. The
range of web design layouts is limitless; design and present an ePortfolio with the layout of
your choice to showcase your exemplar projects and your web design skills.

9
A. Inquiring and Analyzing

i. Explain and Justify the need
Explain and justify the need for a solution to a problem for a specified client/target audience
○ Guiding Questions
■ What is the need? What is the need for web design?

■ What is the nature of the problem? Refer to the design situation to help you here..
■ Who is it a problem for? What is the cause of the problem?

■ What is the purpose for web design?


10
○ How does the problem relate to the Global Context for this unit?
Science and Technical Innovation
■ Why is this problem important in this context?
■ How does the web design situation impact the entire world?

ii. Identify and Prioritize research

Identify and prioritize the main points of research needed to develop a solution to the problem
○ Re-write the task in your own words
○ State the main points of inquiry

○ Write guiding questions to help you decide what you need to find out
Examples: what is the relevant data that I need to collect? What fonts or images need to be included?


11

■ Research into required technical design skills
● What skills do you need to know?

● What software do you need? What program are you using to create your website?

■ Research who the website is intended for:
● What appeals to the target audience?

iii. Describe the main features of one existing product that inspires a solution to the problem

12
○ How did others solve this problem? Evaluate past student projects and determine which ones you believe are
effective
○ How did the web design of others inspire you to solve the problem in your own way?

○ Analyze the materials used, efficiency, ease or web navigation, ergonomics (is it user friendly), aesthetics (the
artistic taste), form and function
■ Does the product/solution work well in all areas of the website?

13


14
iv. Present the main findings of relevant research
The analysis and summary must be presented in a design brief, a series of detailed paragraphs that present only the useful
information. The brief shouldn’t solve the problem at this stage, but instead outline what the student intends to
design to solve the problem, provide answers to each of the research questions, and clarify the essential and
desirable features of a solution.


15


16

B. Developing Ideas
What does develop mean? Research the definition and insert it below; you will then describe what the definition means in
your own words. Hint: you can highlight the word, right click, and then click define. The shortcut keys for defining a
highlighted word are Ctrl + Shift + Y

Term Definition In Your Own Words
Develop

i. Develop a list of success criteria for the solution
○ Your specification should include information that you learned from your inquiry and analysis research
(Criterion A worksheet)
○ Your specification is what the solution (your website) must or must not have to be successful.
How will you address this
Specification Description for Web Design specification when creating your
website?
Consider appearance, style, color,

Aesthetics fonts, background images, layout,
organization.
What are the potential time costs

Cost
involved? How long might it take?

17
How will your website appeal to peers,
Customer
teachers, colleges, future employers?
Environmental How will your E-Portfolio impact the

considerations environment? Will it be positive?
Will your website be organized in a

way that will allow your viewers to
Function
easily find all of your pages and
documents?
What materials are available? When

identifying digital materials, students
Materials
should consider text, fonts, images,
audio, video, animation, icons, etc.
What safety factors need to be

Safety considered in web design? Think
about digital privacy.
Are there any specific sizes that

need to be considered? Think about
the size of the embedded images,
Size
videos, and docs. How will you
determine the best sizes for your
website?

ii. Develop design ideas
Develop a range of realistic design ideas that can be easily understood by others.
○ Click HERE to see an example of wire-framing your website design ideas.

18
○ Click HERE to see an example of sketching your ideas in Google Drawings or Google Slides.
○ Watch a quick tutorial on how to sketch out page tabs in Google Drawings here: bit.ly/websitesketchesvideo
○ You will insert one website design idea for each of the 3 boxes below.
○ You will create each sketch in 3 separate Google Drawings files.
○ From the post in Google Classroom, click CREATE, then click DRAWING. Do this 3 times.
○ After you design and annotate your sketches, simply download each drawing as an image (.jpg), and then drag
each image into the three boxes. Click FILE, DOWNLOAD AS, .JPG
● To annotate your sketches, you will add notes/arrows/markups on your sketches to describe things such as
motion that cannot be depicted in a drawing. For instance, you use annotations show what color a tab will turn when
you hover over it. You will also use annotations to label what fonts you will use, what pictures will be inserted, etc.
Idea 1:


19

Idea 2:


20


21
Idea 3:


22

iii. Present the final chosen design
○ Insert the sketch of your favorite Google Drawing from your 3 design ideas.
○ This chosen design is the one you plan to use as the model for your website.
○ For digital design, you will create a well-presented illustration of the final chosen design that highlights details
such as color, fonts, layout, how the website is interacted with and its features


23

○ Share THIS document with at least 3 other students in your class. Click the blue share button in the top right
corner, and then begin typing their name. Google will give you a list of suggestions for their email. If you cannot
find the person you are looking for, simply ask them for their email. BE SURE TO ONLY GIVE THE STUDENTS
PERMISSION TO COMMENT ON YOUR FILE. Ask them to leave feedback on your FINAL CHOSEN DESIGN.
Copy and Paste their responses below.


24

iv. Develop Planning/Drawing Diagrams

Create a planning drawing/diagram which outlines the main details for making the chosen solution.
○ Here you should insert your annotated sketches of your web design layout


25


26

○ Make a list of online sources, tutorials, or people where you can locate information to help you in developing
your design

Name of source, tutorial, or person How will you locate this source, tutorial,
or person?
(Web address, email, Google Classroom,
etc)


27

C. Creating the Solution

28
i.
Outline a plan, which considers the use of resources and time, sufficient for peers to be able to follow to
create the solution
○ Materials list
When identifying digital materials, students should consider text, fonts, images, audio, video, animation, icons, etc.

Materials List
Material How/why the material will be used


29

Production plan
■ Step by step guide for creating product that someone else can follow
■ Use drawings to illustrate construction
■ Indicate tools/equipment/skills needed
For digital design, tools include both software and hardware (input, processing and output devices)

Production Plan
Date/Timeline Step-by-step plan (students could Tools/equipment/skills
include annotated screenshots below to needed
illustrate construction)


30


31

○ Evaluate your plan
■ Does it make good use of time and resources?
■ Could someone else follow the plan and make your design?
■ Is it logical?

ii. Demonstrate excellent technical skills when making the solution
For digital design, the level of technical skill demonstrated can be shown through the functionality of the assembled
solution.
○ Follow your plans to make your product/solution
○ Demonstrate technical skills

iii. Follow the plan to create the solution, which functions as intended
This will be the stage of actually creating your website.

iv. List the changes made to the chosen design and plan when making the solution.
Students should list any changes that they have made that differ from their original chosen design (the ideas in their
sketches).

Why did your plan change?

How did it improve the original design?

32

v. Present the solution as a whole
This will be carried out when the student presents their ePortfolio/website to the class as a whole.

D. Evaluating
i. Design testing methods
Outline simple, relevant testing methods, which generate data, to measure the success of the solution
○ How can it be tested? Example: Performance testing - ease of navigation through a website, timed tests for
web pages to load, etc.


33

○ Who should test it? It is always a good idea to have your target audience test the product; therefore, think
about who the targeted audience is with you website.

○ What are you testing for? Examples: ease of navigation, the overall look of the website, etc.


34

ii. Outline the success of the solution against the design specification
○ Was the website design successful? Why or why not?

Specification Testing method Evidence from tests
● Example: Must have ● 10 of required 10

at least 10 pages ● Count the number of were found and
showcasing pages found on the visible
exemplar projects website ● 3 extra pages were
from the year also found
●
● ●
●
●
● ●
●
● ● ●

35
●
●
● ●
●
●
● ●
●
●
● ●
●

iii. Outline how the solution could be improved
Through the objective evaluation of their solution, students should have identified weaknesses in their solutions. These
weaknesses provide opportunities for further development and allow students to consider how they would refine their
solution further.
○ State how the identified weaknesses and limitations of the solution could be improved
○ More time, better sketches, better diagrams, etc


36

iv. Outline the impact of the solution/product on the target audience
With guidance, consider the impact of the solution on the client or target audience (which in this case will be your peers and
your teacher)
○ Who will it impact?
○ What kind of impact will it make?
○ Why is the impact important?


37


38
Daily Progress Template - Optional

Copy and paste the table below for each day that you work on your website in class:

Date:
Today’s biggest achievement:

Problems I had today and how I solved

them:

Changes I made in the design today:

Photos/screenshots of work done today:


39

Next session I want to:

E-Portfolio Content Checklist
Place a
checkmark below
Title of your page Items to be included on the page for each page
once you have
completed it
● A Picture of you
● A general statement of the purpose of your

40
HOME website
● Be sure to welcome your viewers; your home
page should be inviting
● Insert your All About Me Presentation

All About Me ○ Google Slides Format
Presentation
● Insert your All About Me Flyer

All About Me Flyer ○ Your choice: Google Slides Format OR
PDF
● Insert your Animal Research Project

Worksheet
Animal Research Project ○ Google Docs Format
● Optional: You can also insert your Animal
Flyer if you wish
○ Google Slides Format OR PDF
● Optional: You may also insert any videos

Videos that you have created and edited with video
editing software
● Insert your Design Cycle Worksheet

○ Google Docs Format
Design Cycle ● Insert your Process Journal
○ Google Docs Format
● Insert your Design Sketches
○ Google Slides or Google Drawings
Format
● Create and Insert a website feedback survey

41
Website Feedback ○ Google Forms Format
○ Be sure you have at least 5 questions.
Questions should be regarding the
overall appearance, navigation, design,
etc. of your website
● Insert your first Typing Test from

Typing Typing.com
○ PDF Format
● Insert your last Typing Test from Typing.com
○ PDF Format
● Write a reflection on your growth on Typing
● Create subpages for all of the webquests

Webquests that you have completed:

● Insert each of the webquests on the correct
subpage. All webquests are Google Slides or
Google Docs Format.

● This page is optional. This is a good place to

add any extra info you want to include. Ideas
Extras include links to your social media, projects
from other classes, pics from sports, or
activities you are involved in, info about your
church or family, etc.
● This page is optional. This is for students

that completed enrichment activities
Enrichment throughout the year

42

E-Portfolio Design Checklist

Design Specification Place a checkmark below for each page once
you have completed it
Have you changed your background colors or

images?
Have you changed your fonts?

Does your website look similar to your
sketches?
Have you customized your sidebar?

Is your website easy to navigate? Can your
peers and teacher easily find the info they are
looking for?

43

44
45
46
47
48

Salber IB Unit Planner Web Design - 11-12

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Salber IB Unit Planner Web Design - 11-12

Hochgeladen von

Copyright:

Verfügbare Formate

Subject group and

Teacher(s) Salber, Christopher Design

An inquiry into - ​Communities An inquiry into - ​Function Global Context:

Conceptual Understanding: (1 ​key concept​ + 1 - 2 ​related concepts​ = ​1 short sentence[conceptual understanding]​)

Online communities may function as a way to express student’s personal

Middle Years Programme Unit planner 1

● What is the value of a setting?

● Does the product/solution work well in all areas of the website?

Middle Years Programme Unit planner 2

Objectives ​(from MYP criterion Summative assessment

Approaches to learning (ATL)

Middle Years Programme Unit planner 4

Action: Teaching and learning through inquiry

Content Disciplinary learning engagements and teaching Formative Assessment Differentiation

All About Me Presentation

Middle Years Programme Unit planner 5

Google Suite of tools

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

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

ii. Identify and Prioritize research

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Consider appearance, style, color,

What are the potential time costs

Middle Years Programme Unit planner

Environmental How will your E-Portfolio impact the

Will your website be organized in a

What materials are available? When

What safety factors need to be

Are there any specific sizes that

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

iv. Develop Planning/Drawing Diagrams

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

● Example: Must have ● 10 of required 10

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Middle Years Programme Unit planner

Today’s biggest achievement:

Problems I had today and how I solved

Changes I made in the design today:

An inquiry into - Communities An inquiry into - Function Global Context:

Conceptual Understanding: (1 key concept + 1 - 2 related concepts = 1 short sentence[conceptual understanding])

Objectives (from MYP criterion Summative assessment

● Insert your first Typing Test from