Week+3

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. As Harvey MacKay once said, "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 usable website.
 * Learning Topic 3: Early and Essential Footwork - Website Planning **
 * Background/Rationale: **

**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)
 * Using existing educational sites, 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 site maps and wireframes. (Project 2 and Project 3)
 * Identify and construct consistent website navigation that is efficient, intuitive, and consistent for end-users. (Discussion 1 and Project 3).
 * Demonstrate course learning by creating a final project web site for your classroom incorporating all the elements discussed in this and previous units (right tool, navigation, layout and design, typography, and color). (Final project due week 8)

**Readings and Research:** 21 Ways Your Audience Affects Your Design. (2008, February 24). Vanderlay Design. Retrieved from []. BONA, L. R. (2009). District Web Site Essentials. District Administration, 45(1), 69-72. doi: Article. [Available via Academic Research Premier] 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 Web Sites All-in-One For Dummies (2nd ed.), Chapter 2 - Creating Effective Layouts. For Dummies. [Accessible via Books 24X7] Stocks, E. (2009). //Sexy Web Design: Creating Interfaces that Work//, Chapter 3 and 4 - Navigation and Interaction. SitePoint. [Accessible via Books 24X7 ]

** Field Experience - Identifying a Quality Website ** In your field experience log, repond 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 if any of the following are mentioned and if any take clear priority over the others. How are the results of your three interviews similar and/or different?
 * 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

Choose and then analyze an educational website. Using concepts found in the assigned readings, construct a chart or graphic organizer which: A. identifies the site's major purpose or goal, and evidence which confirms this.
 * Learning Activities **
 * Project 1 – Analyzing Web Design for Goal and Audience **

B. identifies the site's targeted audience, and design elements (color, image choice, content style, etc.) which suggest this.

**Assessment - Project 1** Peers analyze above charts via discussion (online or in class). Students create a group checklist of what makes a website effective as well as web page elements that ensure a successful design.

Design a flow-chart 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 week 8. Using [|writemaps.com], MindMeister 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. Print and/or post your sitemap image to the Week 3 Projects page.
 * Project 2 – Creating a SiteMap **

Examples of sitemaps can be found by using Google Images. Use the terms "web design sitemaps" for your search.
 * Assessment - Project 2: **
 * **Sitemap Creation** ||  || **1 absent ••••••• 5 advanced** ||
 * Sitemap is logical in its flow from page to page ||  ||   ||
 * Sitemap adequately covers the topic of the site according to purpose ||  ||   ||
 * Sitemap reflects target audience of the website ||  ||   ||
 * Sitemap reflects main goal of the website ||  ||   ||
 * Sitemap reflects main goal of the website ||  ||   ||

**Discussion 1 – Designing for Ease of Use** After reading the articles by Gube and Rodriguez, have student discuss the following: Use the Regis general discussion rubric: Student actively and thoughtfully participated in the discussion. Student was respectful of classmates’ points of view.
 * 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?
 * Assessment - Discussion 1 **

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, new, 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 created with software or webware of your choice. Remember to use simple shapes and to label each web page element. Print and/or post your wireframe image to the Week 3 Projects page.
 * Project 3 – Creating a Wireframe **


 * Assessment – Project 3 **
 * **Wireframe Creation** || **1 absent ••••••• 5 advanced** ||
 * Placement of page elements follow conventional/tested design practice ||  ||
 * Wireframe is consistent with established goals and target audience of site ||  ||
 * Wireframe promotes clear, unhindered navigation for the user ||  ||
 * Wireframe clearly prioritizes content for the user ||  ||

After completing Projects 2 and 3, have students engage in peer analysis on another peer's sitemap and wireframe. Encourage discussion of element placement, ease of navigation and prioritization of content.
 * Discussion 2 - Peer Analysis of Sitemap and Wireframe **

Use the Regis general discussion rubric: Student actively and thoughtfully participated in the discussion. Student was respectful of classmates’ points of view.
 * Assessment - Discussion 2 **

As a final project for this course you will develop a classroom website that incorporates all elements discussed during this class. Begin this week by choosing a web site creation tool. In addition to Wordpress, Dreamweaver, Kompozer and iWeb you also can choose a webware application like: · Weebly - [] · Google Sites - [|http://sites.google.com] · School Rack - [] , · Viviti - [] · Webnode - [] · Blinkweb - [] · Doodlekit - [] · Yola - [] · Wix - [] · Webs - []
 * Begin Final Project **


 * Final Project Classroom website evaluation rubric: **

**creative choices obvious** ||
 * || **1 = low quality ••••••••••••••10 = high quality,**
 * Clear navigation ||  ||
 * Use of color ||  ||
 * Use of and quality of images ||  ||
 * Accessibility features ||  ||
 * FTP and technical ||  ||
 * Overall usability ||  ||
 * Content quality ||  ||