Lesson Plan
Course Title: Web Technologies
Session Title: Web Site Planning & Design
Lesson Duration:
3 Hours
Performance Objective:
Upon completion of the lesson, students will understand how to develop a Quality Assurance
Plan as well as the characteristics of professional website layout and design.
Specific Objectives:
 Students will understand the importance of proper planning before beginning a project
for website development.
 Students will understand the four parts to developing a Quality Assurance Plan.
 Students will know how to determine client needs.
 Students will be able to plan out a website’s design.
 Students will know how to determine if a website meets its goals and objectives.
 Students will know design characteristics such as balance, layout, alignment, and
consistency.
Preparation
TEKS Correlations:
 11 - The student evaluates a problem and creates a written plan of action for meeting
client requirements. The student is expected to:
(11)(A) -- Communicate with clients to analyze requirements to meet needs;
(11)(B) – Document all necessary design properties;
(11)(C) – Identify tools and resources to complete the job;
(11)(D) – Identify and address risks;
(11)(E) – Develop and use a timeline task list such as critical milestones,
potential challenges, and interdependencies; and
(11)(F) – Use various methods to evaluate the progress of the plan and modify
as necessary.
 12 - The student creates and implements a written plan of action in the development of a
web product. The student is expected to:
(12)(B) -- Develop a test plan for a multipage web product for testing usability,
effectiveness, reliability, and customer acceptance;
(12)(C) – Explain the quality assurance process; and
(12)(D) – Develop and implement a quality assurance plan.
Instructor / Trainer
References:
For further reference material, use your favorite web browser and search for web
style guides and easy web tutorials.
Instructional Aids:
 Web Site Planning & Design Presentation
Materials Needed:
 Printed presentation handouts for students
 Webpage layout plan for each student
 Guidelines for creating the Quality Assurance Plan
 Quiz printed for each student
Equipment Needed:
 Projector for presenting presentation
 Computers with Internet and a word processor for each student
Learner
Introduction
MI
Introduction (LSI Quadrant I):
Ask students to consider a retail business and ask them to think about the website
that the business would need.





Have the students write down how the business might benefit from having a
website.
Next, have them list specific goals that the website should achieve.
Ask students to consider a service business and to again think about the
website the business would need.
Have the students write down how they think the service business would
benefit from having a website.
Have students list specific goals that a website for a service business should
achieve.
Discuss with the students how the overall mission for a website is different for each
type of business, and why it is important–before any website project is started–to
clearly define the purpose and objectives of that website.
Explain that the job of the website designer is to create a site that achieves each of
the goals the business sets for its website.
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
2
Outline
MI
Outline (LSI Quadrant II):
I.
Instructor Notes:
Introduction to the lesson
See the section above.
II. Determining the client’s needs
III. Developing the Quality Assurance Plan
a. Creating the Needs Assessment
b. Establishing the Development Plan
c. Establishing the Testing & Revision Plan
d. Determining the Final Review Procedures
IV. Content aesthetics components
a. Content Layout
b. Content Proximity
c. Text Alignment
d. Contrast
e. Balance
f. Font Selection
g. Consistency
V. Students will design the layout for a commercial
website. The instructor should walk through the
class and determine how to arrange the content.
VI. Students should work in teams to develop a
Quality Assurance Plan following the guidelines
provided.
VII. Lesson Quiz
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
3
Application
MI
Guided Practice (LSI Quadrant III):
Hand out the Webpage Layout Plan. Through class discussion, design a layout
determining where things should be placed and why. Have the students consider the
balance of the page and other design concepts discussed.
MI
Independent Practice (LSI Quadrant III):
1. Have students complete the Webpage Layout exercise again on their own with
a different design.
2. Have students work independently or in groups to create a template for a
Quality Assurance Plan following the guidelines provided.
Summary
MI
Review (LSI Quadrants I and IV):
1. Have students show the webpage layouts they designed on their own, and
have them explain why they chose to place certain things where they did.
2. Go through the Quality Assurance Plans. Ask for important components of each
sections of the plan.
Evaluation
MI
Informal Assessment (LSI Quadrant III):
While students are working on their Design Plan, observe to make sure each student
is following the guidelines discussed in the lesson.
While working on the Quality Assurance Plan, look at their plans to determine
whether they understand what elements should be included, and whether or not it
will result in a well-designed website.
MI
Formal Assessment (LSI Quadrant III, IV):
1. Check the webpage layouts and Quality Assurance Plans the students
developed to assure that they understand the concepts.
2. Following the lesson and activities, have the students complete the lesson quiz
to assure that they understand the terminology.
Extension
MI
Extension/Enrichment (LSI Quadrant IV):
Students should contact various organization sponsors and meet with them to plan
their organization website. The students should complete the Quality Assurance Plan
while meeting with the sponsors. Upon completion of the HTML lessons, students
should design the sites planned out while following the Quality Assurance Plan.
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
4
Icon
MI
Verbal/
Linguistic
Logical/
Mathematical
Visual/Spatial
Musical/
Rhythmic
Bodily/
Kinesthetic
Intrapersonal
Interpersonal
Naturalist
Existentialist
Teaching Strategies
Personal Development
Strategies
Lecture, discussion, journal
writing, cooperative learning,
word origins
Reading, highlighting, outlining,
teaching others, reciting information
Problem solving, number
games, critical thinking,
classifying and organizing,
Socratic questioning
Mind-mapping, reflective
time, graphic organizers,
color-coding systems,
drawings, designs, video,
DVD, charts, maps
Use music, compose songs
or raps, use musical
language or metaphors
Organizing material logically, explaining
things sequentially, finding patterns,
developing systems, outlining, charting,
graphing, analyzing information
Developing graphic organizers, mindmapping, charting, graphing, organizing
with color, mental imagery (drawing in
the mind’s eye)
Use manipulatives, hand
signals, pantomime, real life
situations, puzzles and board
games, activities, roleplaying, action problems
Reflective teaching,
interviews, reflective listening,
KWL charts
Cooperative learning, roleplaying, group brainstorming,
cross-cultural interactions
Natural objects as
manipulatives and as
background for learning
Socratic questions, real life
situations, global
problems/questions
Creating rhythms out of words, creating
rhythms with instruments, playing an
instrument, putting words to existing
songs
Moving while learning, pacing while
reciting, acting out scripts of material,
designing games, moving fingers under
words while reading
Reflecting on personal meaning of
information, studying in quiet settings,
imagining experiments, visualizing
information, journaling
Studying in a group, discussing
information, using flash cards with
other, teaching others
Connecting with nature, forming study
groups with like-minded people
Considering personal relationship to
larger context
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
5
Name: _____________________________
Date: ______________________________
Webpage Layout Plan
Before you sit down at a computer and start creating your webpage or website, a little advanced
planning will save you a lot of time in the long run. Simply sketching out your design will help
you understand how everything should fit together and how to structure your page before you
even start.
For this activity, you will sketch out and plan the layout for a bakery webpage. The design you
come up with will be used on all the pages of the site. You will need to create a sketch of the
webpage for the client to approve, paying careful attention to the balance and organization of
the page. The client wants the following items included on all the pages, so they should all be
included on the design.
 Masthead banner identifying the company (bakery) and providing contact information.
 A menu home, ordering, catering, products, deliveries, samples
 A rotating image
 Primary content area
 A secondary information section for information related to the primary content.
Describe the color scheme you will use on the site: ___________________________________
___________________________________________________________________________
___________________________________________________________________________
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
6
Sample Page Layout Plan
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
7
Creating a Quality Assurance Plan
The Quality Assurance Plan should be developed to be sure that the web designer fully
understands the needs of the client and ensures they are developing the site the client actually
wants. Generally, the designer completes the Quality Assurance Plan with the client. Use the
guidelines below to develop a Quality Assurance Plan outline that you can use to design your
website.
A good quality assurance plan generally consists of 4 parts:
1. A Needs Assessment
2. The Development Plan
3. The Testing and Review Guidelines
4. The Final Review Guidelines
You should use a word processor to develop four separate forms that will go together to form
your Quality Assurance Plan. Each form should be properly identified.
1. Needs Assessment
This section should be completed during the initial interview with the client. Often times, the
client will not know what information you will need. Your job as the web designer is to determine
exactly what the client wants and needs from his or her website. This section should collect very
specific information from your client, including the overall mission of the site.
2. Creating the Development Plan
The development plan should consist of your plans for building the site. This section should
collect information on the look and feel of the site, timelines, and anything associated with the
building of the site.
3. Testing and Reviewing Guidelines
How are you going to determine if the site you designed meets the needs of the clients? You
should establish guidelines. The designer must check every component of the site to assure
that it is meeting the client’s needs; this includes the appearance, functionality, and any other
features. This section should be extremely detailed and include a complete checklist. You
should be assured that the client is satisfied with everything you are working on.
4. Final Review Guidelines
The final review should take place with the client and should include items to check for when
assuring that the site development has come to an end. Make sure you know what process and
questions should be answered to ensure that the client approves of the site. Take a look at the
items checked in the previous section. If the client is verifying the progress of the items, he or
she should check the same things for completion.
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
8
Name: _____________________________
Date: ______________________________
Website Planning & Design Quiz
1. A document that is completed by the website designer during a meeting with the
client is a
a. Domain name registration form
b. Quality Assurance Plan
c. Document Development Plan
d. Server Evaluation Form
2. The Quality Assurance Plan consists of all of the following except
a. Client Needs Assessment
b. Testing and Revision Guidelines
c. Timeline Assessment
d. Development Plan
3. The visual appearance of a website is known as
a. Design
b. Layout
c. Aesthetics
d. Development
4. The section of the webpage that tells where to go from one page to another is the
a. Heading
b. Sub-Section
c. Banner
d. Navigation
5. Which layout & design technique refers to the placing of similar objects and
content together?
a. Proximity
b. Alignment
c. Balance
d. Consistency
6. The layout and design technique that refers to the degree of difference in
lightness and darkness is
a. Consistency
b. Balance
c. Contrast
d. Alignment
7. The process of giving all pages of your site a similar look and feel is referring to
which layout and design technique?
a. Alignment
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
9
b. Consistency
c. Balance
d. Proximity
8. Why should you only use standard fonts when designing web sites?
a. Most fancy and custom fonts are hard to read.
b. The visitor will not be able to see the font if they do not have it.
c. Web browsers can only interpret a few font styles.
d. Fancy fonts increase the page size of the web page.
9. The horizontal and vertical positioning of text and objects on the page is referred
to as
a. Alignment
b. Balance
c. Consistency
d. Proximity
10. The placing of objects on a web page so no one side appears to “outweigh” any
other part is referred to as what?
a. Alignment
b. Balance
c. Consistency
d. Proximity
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
10
Name: _____________________________
Date: ______________________________
Website Planning & Design Quiz – KEY
1. A document that is completed by the website designer during a meeting with the
client is a
a. Domain name registration form
b. Quality Assurance Plan
c. Document Development Plan
d. Server Evaluation Form
2. The Quality Assurance Plan consists of all of the following except
a. Client Needs Assessment
b. Testing and Revision Guidelines
c. Timeline Assessment
d. Development Plan
3. The visual appearance of a website is known as
a. Design
b. Layout
c. Aesthetics
d. Development
4. The section of the webpage that tells where to go from one page to another is the
a. Heading
b. Sub-Section
c. Banner
d. Navigation
5. Which layout & design technique refers to the placing of similar objects and
content together?
a. Proximity
b. Alignment
c. Balance
d. Consistency
6. The layout and design technique that refers to the degree of difference in
lightness and darkness is:
a. Consistency
b. Balance
c. Contrast
d. Alignment
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
11
7. The process of giving all pages of your site a similar look and feel is referring to
which layout and design technique?
a. Alignment
b. Consistency
c. Balance
d. Proximity
8. Why should you only use standard fonts when designing web sites?
a. Most fancy and custom fonts are hard to read.
b. The visitor will not be able to see the font if they do not have it.
c. Web browsers can only interpret a few font styles.
d. Fancy fonts increase the page size of the web page.
9. The horizontal and vertical positioning of text and objects on the page is referred
to as
a. Alignment
b. Balance
c. Consistency
d. Proximity
10. The placing of objects on a web page so no one side appears to “outweigh” any
other part is referred to as what?
a. Alignment
b. Balance
c. Consistency
d. Proximity
IT: Web Technologies: Web Site Planning & Design Lesson Plan
Copyright © Texas Education Agency, 2013. All rights reserved.
12