Topic_3_Student_Page

= Topic 3 Student Page = = Early and Essential Footwork - Website Planning =

//** Student pages are for submitting your assignments. As a member of this wiki, you have permission to edit these pages. Please feel free to post reminders or important notes that might also assist other class members. **//

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 table below for this activity.

Michelle

Our sites should look professional and be effective if we follow the design “rule of thirds”, have less “which gives more” and they have to be very easy to navigate. Organization, layout, and simplicity are where everyone felt it was necessary to navigate sites. Some people like graphics and some don’t but they need to function as a link. The younger teacher was more interested in the graphics option then the older so it could be a generation gap or digital divide.


 * <  ||< I nterview 1 ||< Interview 2 ||< Interview 3 ||
 * < Color use ||< Some color and background may draw away from attention of the sites important links or information ||< Not too flashy or multi-colored ||< No bright colors- darker colors for main tables are hard to see. White background and black and grays are also. Pastels are nice. ||
 * < Clarity of site purpose ||< Purpose should be straight forward-most likely at the top ||< Must be a purpose at the top or left side ||< Want information from homepage purposeful and not hard to figure out ||
 * < Quality of content ||< Content needs to be easy and available to find ||< keep advertisements out- takes away from content ||< Needs to be relevant to product but graphics are easy for me to evaluate page or where to go too ||
 * < Site navigation- ease of use ||< Must be organized and not too many clicks away ||< I need to see main links right away and will only scan through once ||< The navigation needs to be obvious- Color can help guide you to other area’s ||
 * < Load time of site ||< Most websites load quickly today- not an issue ||< too much time taken to find things I go to a different site- go back to google and click somewhere else. ||< Most important thing- QUICK Access… ||
 * < Graphic Use ||< not too many that distract and take away from the content or navigation ||< Only want concise and complete, Search is easy to find, Graphics need to actually work or they are useless ||< When looking for information graphics get in the way. Depends on the website. If looking at a shopping site- small images important ||
 * < Identification of audience ||< Identified at about 5th gr. Level which is what the newspaper was/is written at ||< not too simple or complicated. ||< Used by all audiences-difficult content under Topics/subtopics and summarized ||
 * < Layout/organization of content ||< Two columns evenly spaced and not too dark or too fancy of a font! ||< All on one page with fun and interesting graphics ||< If graphics are confusing simple information makes it easier to read ||
 * < Other thoughts ||< Find what you are looking for as simple as possible ||< I need to identify information quickly Finding where I should click to get where I need to go and graphics ||< Fun sites or Educational sites should be user friendly ||


 * < Marcia ||< [[image:blum_3.1FieldExperience.jpg]] ||
 * < Joe ||< [[file:What makes a good website.docx]] ||
 * < Faye ||< * Color use-yes all 3 teachers wanted color, one said depend what "emotion" you want to bring out: red=excitement, pastel=calming, one said not too much color because it takes too long to download.
 * Clarity of site purpose-very important for all 3.
 * Quality of site content-all 3 agreed that this is important but not too busy and no pop-ups
 * Site navigation - ease of use-This was a big important one for all three! *
 * Load time of site-faster is better for all 3
 * **Graphic use-all 3 want and like pictures and graphics, as long as they are** not slowing down the process or jumping/dancing around**, static is good!**
 * Identification of audience- for these educators the website is for educators/parents/kids so important in that sence as what was displayed.
 * Layout/organization of content-YES! It must be easy to find things, and one noted that Jeffco is NOT user friendly.
 * One thing that the teachers want is SUPPORT. They wanted a phone number, with a person on the other end, and an email address to reach someone.**
 * Everyone was in agreement about what they wanted. I found this so supprising as I interviewed 3 different people from 3 different places. I guess we all just want the same thing, in general: Easy, Fast, Entertaining, and Supportive.** ||
 * < Curt ||< [[file:3.1 Field Experience.doc]] ||

Michelle || ||
 * < Betty ||< [[file:3-1 Quality Website BAH.doc]] ||
 * Mike || [[file:Quality Websites.doc]] ||
 * 3.2

 **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 chart below to share with your class.**


 * ====Student==== || ====Sitemap Image==== ||
 * Michelle || [[file:site map.pdf]] ||
 * Joe || [[image:Classroom_site_map width="640" height="657"]] ||
 * Marcia || [[image:Creately_-_Draw,_Share,_Validate_and_Export_diagram.jpg width="800" height="523"]] ||
 * Faye || [[image:DSCN3709.JPG width="800" height="600"]] ||
 * Mike || [[image:Site_Map_(Math_web).jpg width="800" height="572"]] ||
 * Betty || [[image:Site+Map+for+Class.jpg width="800" height="1035"]] ||
 * Curt || [[image:3.3_sitemap.jpg width="800" height="444"]] ||

**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 chart below to share with your colleagues.**


 * ====Student==== || ====Wireframe Image====


 * //Save as a jpg.//** ||
 * Joe || [[image:main_webpage width="400" height="269"]]

||
 * Marcia || [[image:wireframe.jpg width="800" height="498"]] ||
 * Michelle || [[image:100_0485.jpg width="800" height="600"]] ||
 * Mike || [[image:Wireframe_(Website).jpg]] ||
 * Betty || [[image:WireFrame+3.5.jpg width="800" height="1035"]] ||
 * Curt || [[image:3.5_1.jpeg width="720" height="561"]] ||
 * Faye || [[file:Faye WireFrame 603.docx]] ||

3.6: Discussion – Sitemap and Wireframe

Peer Analysis of Sitemap and Wireframe - After completing Projects 3.3 and 3.5, read through your colleagues’ postings. Provide constructive feedback to two or more colleagues in the Discussion Section of this page on element placement, ease of navigation, and prioritization of content.**3