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 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. 2
Outline Outline (LSI Quadrant II): Instructor Notes: I. 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 3
Application 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. 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 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 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. 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 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. 4
Icon Teaching Strategies Verbal/ Linguistic Logical/ Mathematical Visual/Spatial Musical/ Rhythmic Bodily/ Kinesthetic Intrapersonal Interpersonal Lecture, discussion, journal writing, cooperative learning, word origins 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 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 Personal Development Strategies Reading, highlighting, outlining, teaching others, reciting information 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) 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 Naturalist Existentialist Natural objects as manipulatives and as background for learning Socratic questions, real life situations, global problems/questions Connecting with nature, forming study groups with like-minded people Considering personal relationship to larger context 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: 6
Sample Page Layout Plan 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. 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 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 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 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 12