Unit+3

**Background/Rationale:** When beginning to develop a website, start with the 3 Ws. **Why** do you want to create this website? **What** do you want to say? What is the purpose? **Who** do you want to visit your site? Better yet, what do visitors want/need to find when they visit your site? Time spent answering these questions will help you to define your site and develop a strong focus. Many people have quoted (original author unknown), "If you fail to plan, you plan to fail." This is especially true for web design. There is more to creating a website than just page creation. A good amount of time goes into thinking about and planning a website -- as much and sometimes more than goes into the actual page and graphic development. Spending the time to plan will ensure a high-quality and highly usable website. **Learner Outcomes**: At the end of this Learning Topic, you will be able to: · Identify qualities of website design that promote exploration and usability as well as qualities that discredit or distract from a website’s value. (Field experience) · Assess how color, image choice, content style, and other elements promote a website’s major purpose or goal as well as target an intended audience. (Project 1) · Effectively organize and prioritize website content/site architecture using strategies such as sitemaps and wireframes. (Project 2 and Project 3) · Identify and construct website navigation that is efficient, intuitive, and consistent for end users. (Discussion 1 and Project 3). **Readings and Research:** 21 Ways Your Audience Affects Your Design. (2008, February 24). Vandelay Design. Retrieved from [] .  Bona, L. R. (2009). District Website Essentials. District Administration, 45(1), 69-72. doi: Article. [Available via Academic Research Premier] or select link,  [] Gube, J. (2009, March 17). Breadcrumbs In Web Design: Examples And Best Practices. Smashing Magazine. Blog. Retrieved October 11, 2009, from [] .  Learning Web Design Process: Site Structure (2009, September 25). The University of Texas at Austin. Educational website. Retrieved October 21, 2009, from [] .  Morris, T. (2009, August 4). Web Design Best Practices: Design for Your Target Audience. YouTube: Broadcast Yourself. Retrieved October 20, 2009, from [] .  Rodriguez, J. (2009, July 10). What’s the Plan? A Guide to Effective Website Navigation. Blueprint Design Studio. Retrieved October 20, 2009, from [] .  Snell, C., & Sahlin, D. (2009). Building Websites All-in-One For Dummies (2nd ed.), Chapter 2 - Creating Effective Layouts. For Dummies. Accessible via Books24x7. **NOTE: See instructions on accessing Books24x7 in the syllabus Required Course Materials section.** Stocks, E. (2009). //Sexy Web Design: Creating Interfaces that Work//, Chapter 3 and 4 - Navigation and Interaction. SitePoint. [Accessible via Books24x7. What to Ask When Designing for a Target Audience. (2009, August 12). //Addicott Web//. Retrieved October 21, 2009, from [] .  **Learning Activities** **Activity 1: Discussion – Field Experience - Identifying a Quality Website** Step 1: In your field experience log, respond to the following. Interview three peers and/or educators who have either created a website or who are frequent users of the Internet. Throughout the course of each interview, ask "What makes a quality website?" Additionally, ask “What makes a viewer leave or discredit a website?” Note whether any of the following factors are mentioned and which, if any, take clear priority over the others. · Color use · Clarity of site purpose · Quality of site content · Site navigation - ease of use · Load time of site · Graphic use · Identification of audience · Layout/organization of content How are the results of your three interviews similar and/or different? Step 2: Post your responses to the Discussion Forum for this activity. Read and respond to two or more of your colleagues’ responses. **Note: This field experience is necessary for Project 1 for this Learning Topic.** **Activity 2: Discussion 1 – Target Audiences** **Project 1 – Analyzing Web Design for Goal and Audience** Step 1: Choose and then analyze an educational website. Using concepts found in the assigned readings for this Learning Topic, construct a Target Audience chart or graphic organizer that: 1. Identifies the site's major purpose or goal and cites evidence that confirms this. 2. Identifies the site's targeted audience and design elements (color, image choice, content style, etc.) that are representative of the targeted audience. Step 2: The facilitator may assign pairs or small groups for this activity. Post your Target Audience chart/graphic organizer in the Discussion Forum for this activity as directed by the facilitator. Step 3: Review and analyze the Target Audience chart(s). Create a collective pair/group checklist of what makes a website effective as well as web page elements that ensure a successful design. Step 4: Read and respond to two or more pairs/groups Target Audience charts. Revise your chart/graphic organizer if needed to include additional ideas gleaned from your colleagues. **Activity 3: Discussion – Sitemap Creation** **Project 2 – Creating a Sitemap** Step 1: Design a flowchart or **"sitemap"** for an educational website you would like to create. This website will become your second major project to be presented and evaluated during Learning Topic 8. Examples of sitemaps can be found by using Google Images. Use the terms "web design sitemaps" for your search. Step 2: Using [|bubbl.us] [|,] [|writemaps.com] [|or other] [|web 2.0 mind-mapping tools] , create a skeletal structure for your site and all pages you intend to include. Save the sitemap as a .jpg. Ask if you need help. Step 3: Post your sitemap image to the Discussion Forum for this activity. Step 4: Review and provide feedback to two or more of your colleagues. **Assessment** See the Sitemap Creation Checklist **Activity 4: Discussion 2– Designing for Ease of Use** Step 1: Read the two separate articles by Gube and Rodriguez. Step 2: Respond to the following: · Is one type/placement of navigation better than another? · When should a designer use breadcrumb trails as a navigational aid? · Are there logical reasons for using breadcrumb trails in website design? · How important is consistency for successful user experiences? Step 3: Post your responses to the Discussion Forum for this activity. Read and respond to two or more of your colleagues. **Assessment** Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated. **Activity 5: Discussion – Wireframe Creation** **Project 3 – Creating a Wireframe** Using information gained from your articles and chapters on content planning/website architecture/layout, create a **“wireframe”** for the sitemap you created in Project 2. Remember that you can search for [|example web design wireframes] using Google Images. When creating your wireframe, consider placement of various web page elements - your logo, navigation bar, news, events, about, and contact information, and/or any other content integral to your website’s success. Your wireframe may be a simple hand sketch or may be created with software or webware of your choice. Remember to use simple shapes and to label each web page element. Try to design your wireframe “above the fold.” Above the fold is a graphic term that means that the most important articles and/or photos appears on the upper half of the front page of a newspaper. **Assessment** See the Wireframe Creation Checklist **Activity 6: Discussion – Sitemap and Wireframe** **Peer Analysis of Sitemap and Wireframe** After completing Projects 2 and 3, read through your colleagues’ postings. Provide feedback to two or more colleagues on element placement, ease of navigation, and prioritization of content. **Assessment** Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
 * Learning Topic 3: Early and Essential Footwork - Website Planning**