Topic_3

= = = Learning Topic 3: = = Early and Essential Footwork - Website Planning =

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.
 * 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.
 * Effectively organize and prioritize website content/site architecture using strategies such as sitemaps and wireframes.
 * Identify and construct website navigation that is efficient, intuitive, and consistent for end users.

Readings and Research:
//**NOTE: See instructions on accessing Books24x7 in the syllabus Required Course Materials section.**//
 * 21 Ways Your Audience Affects Your Design. (2008, February 24). Vandelay Design. Retrieved from @http://vandelaydesign.com/blog/design/audience-affects-design/
 * Bona, L. R. (2009). District Website Essentials. District Administration, 45(1), 69-72. doi: Article. [Available via Academic Research Premier] or select link, @http://dml.regis.edu/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=aph&AN=36206078&site=ehost-live
 * Gube, J. (2009, March 17). Breadcrumbs In Web Design: Examples And Best Practices. Smashing Magazine. Blog. Retrieved October 11, 2009, from @http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
 * Learning Web Design Process: Site Structure (2009, September 25). The University of Texas at Austin. Educational website. Retrieved October 21, 2009, from @http://www.utexas.edu/learn/designprocess/structure.html
 * Morris, T. (2009, August 4). Web Design Best Practices: Design for Your Target Audience. YouTube: Broadcast Yourself. Retrieved October 20, 2009, from @http://www.youtube.com/watch?v=rtCZloFmHBo
 * Rodriguez, J. (2009, July 10). What’s the Plan? A Guide to Effective Website Navigation. Blueprint Design Studio. Retrieved October 20, 2009, from @http://blueprintds.com/2009/07/10/whats-the-plan-a-guide-to-effective-website-navigation/
 * Snell, C., & Sahlin, D. (2009). Building Websites All-in-One For Dummies (2nd ed.), Chapter 2 - Creating Effective Layouts. For Dummies. Accessible via Books24x
 * 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 @http://www.addicottweb.com/2009/08/what-to-ask-when-designing-for-a-target-audience/

3.1: Field Experience - Identifying a Quality Website
How are the results of your three interviews similar and/or different?
 * 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

//**Note: This field experience is necessary for 3.2 Analyzing Web Design for this Learning Topic.**//
 * Step 2:** Post your responses to the Topic_3_Student_Page for this activity. Read and respond to two or more of your colleagues’ responses.

3.2: 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 on the Topic_3_Student_Page 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.

3.3: Sitemap Creation

 * 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.comor 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 Topic_3_Student_Page for this activity to share with your class.


 * Assessment**

3.4: Discussion – Designing for Ease of Use

 * Step 1:** Read the two separate articles:
 * Gube, J. (2009, March 17). Breadcrumbs In Web Design: Examples And Best Practices. Smashing Magazine. Blog. Retrieved October 11, 2009, from @http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
 * Rodriguez, J. (2009, July 10). What’s the Plan? A Guide to Effective Website Navigation. Blueprint Design Studio. Retrieved October 20, 2009, from @http://blueprintds.com/2009/07/10/whats-the-plan-a-guide-to-effective-website-navigation/


 * 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?

Refer to the Discussion Checklist for more information on how you will be evaluated.
 * Assessment**

3.5: Wireframe Creation

 * Step 1:** Using information gained from your articles and chapters on content planning/website architecture/layout, create a “wireframe” for the sitemap you created in Activity 3.3. 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.


 * Step 2:** Save your wireframe as a jpg. If you draw your wireframe by hand, scan it as a jgp. Submit your jpg to the Topic_3_Student_Page to share with your colleagues.


 * Assessment**

3.6: Discussion – Sitemap and Wireframe Comparison
Peer Analysis of Sitemap and Wireframe - After completing Projects 2 and 3, read through your colleagues’ postings. Provide feedback to two or more colleagues in the Discussion Section of Topic_3_Student_Page on element placement, ease of navigation, and prioritization of content.

Refer to the Discussion Checklist for more information on how you will be evaluated.
 * Assessment**

Homework

 * **3.3 & 3.5** Complete your individual sitemaps and wireframes. Save them as jpgs and post to Topic_3_Student_Page. // (Due Friday following Class Session4.) //
 * **3.6 Sitemap and Wireframe Comparison** feedback. Submit to the discussion section of Topic_3_Student_Page. // (Due by the start of Class Session5.) //
 * Be familiar with the **Required Readings for Topic 4** by the start of Class Session4.