1. The Web

2. How does the Web work? The web is a collection of networks, starting near your home or office and expanding until we reach the global network

3. The Web How does the Web work? We type in a URL (Uniform Resource Locator) of a page and our Web Browser contacts the computer (web server) where that address is located (stored).

4. The Web How does the Web work? The Web Server receives your request and then sends the documents back to us by breaking them into pieces we call Packets

5. The Web How does the Web work? Packets wander the internet (network) until they finally end up at our computer to be displayed on our computer monitors Packets can be re-routed if there is a breakdown on the path they are traveling or if there is congestion as well

6. The Web How Fast is the Web? The web is based on Electricity. The speed of electricity (approximately 1/3 c) determines the speed of the packets or signals passed over the network

7. The Web How Fast is the Web? The time needed to download something on the web is determined by four factors: The size of the web page The speed of the users internet connection The speed of the web server The amount of traffic competing for use of the internet

8. The Web How Fast is the Web? The users internet connection is usually the slowest of these four Improving a users internet connection speed will speed up access to the web the most

9. The Web Elements of Great Web Page Design Information Design Interaction Design Presentation Design

10. The Web Information Design What do you want to tell people? Who are you going to tell it to? Why do you want to tell it? How will this information be put together?

11. The Web Information Design Details The Message What information are you going to share? The Audience Whom do you wish to share your information? The Purpose How and why do you want to share your information with this audience?

12. The Web Information Design Details Cont’d The Background What does your intended audience already know about your subject? The Structure How can your information be organized most effectively?

13. The Web Interaction Design How will the information be organized? How will people find there way around the site? How will people work with the information?

14. The Web Interaction Design Details Organization How are graphics, text, and other elements arranged on the page? Navigation Are there any links or buttons on the home page that make it easy to move to other parts of the site?

15. The Web Interaction Design Details Cont’d Interactivity Do you have a chance to interact or to participate in the web pages in some way? Are you expected to do something with the information on this site?

16. The Web Presentation Design How you plan your site? What will it look like? What elements do I need to incorporate in my site?

17. The Web Presentation Design Details Color Scheme What colors should I use for the background, text, and links on the page? Font Selection What style of letters do you want – simple or fancy, large or small? Graphics Selection What pictures or graphic elements do you want to appear on the page?

18. The Web Presentation Design Details Cont’d Multimedia Effects Are there any multimedia motion or sound effects that I wish to include on my site? Arrangement Where on the page should I place my graphics, text, or multimedia elements or effects – known as layout?

19. INFORMATION DESIGN What is my sites message? First Step: Brainstorming Write down 10 topics you are interested in such as hobbies, pets, foods, movies, games, etc

20. INFORMATION DESIGN What is my sites message? Second Step: Put the topics in the order from most interesting to least interesting

21. INFORMATION DESIGN What is my sites message? Third Step: Examine the first topic and ask yourself: Can I create a great web site based on this topic? If your answer is no, then move onto the next topic until you decide you can make a great web site from the topic

22. INFORMATION DESIGN What is my sites message? Third Step: Cont’d Your selection should be something that: You either know or are willing to learn You are interested in Is not too narrow or too broad

23. INFORMATION DESIGN What is my sites message? Fourth Step: The topic you have chosen becomes the message of your web site Make sure it is a message you will enjoy spending many hours working on while building your web site

24. INFORMATION DESIGN What is my sites message? Fifth Step: Open up a word processor and complete your message statement: “Message: This web site will ____________.” This statement begins your design document

25. INFORMATION DESIGN What is my sites message? Sixth Step: Spend time (3-6 hours) researching your message. Learn as much as you can and keep references. Use the web or library or other resources to do the research.

26. INFORMATION DESIGN What is my sites message? Seventh Step: Save your message statement as Design.doc or similar name.

27. INFORMATION DESIGN Who is my web site’s audience? Things to consider: Their age Where they live What they do for a living What style of clothes they like What language do they speak What food do they like A cause they feel strongly about Etc.

28. INFORMATION DESIGN Who is my web site’s audience? Things to consider: Cont’d You must identify what this group has most in common with your web site

29. INFORMATION DESIGN Who is my web site’s audience? First Step: In your Design.doc write a description of your audience in a single paragraph This is called the Audience Statement Be specific so your audience will not be confused with another group Usually around 35-50 words

30. INFORMATION DESIGN Who is my web site’s audience? Second Step: Put the Audience Statement between your site message and your references/resources The statement should clearly state what your audience has in common with your site

31. INFORMATION DESIGN Who is my web site’s audience? Third Step: Share your audience statement with others to determine if you have selected the correct audience for you web site.

32. INFORMATION DESIGN What is my web sites purpose and scope? Your web site and audience messages will help you determine your sites purpose.

33. INFORMATION DESIGN What is my web sites purpose and scope? First Step: Conduct an audience analysis. Do personal interviews or pass out questionnaires.

34. INFORMATION DESIGN What is my web sites purpose and scope? Second Step: Write one or more paragraphs (at least 35 words) explaining the primary purpose of your site Review it for accuracy then place it after your audience statement but before your reference/resource list section Be clear, concise, and direct in your purpose statement

35. INFORMATION DESIGN What is my web sites purpose and scope? Third Step: Write one or more paragraphs explaining what your audience already knows This is called the audience background statement Put it after your purpose statement

36. INFORMATION DESIGN What is my web sites purpose and scope? Fourth Step: Make two lists in your design.doc under the heading Scope List 3-5 things that your site will present, and 3-5 things you will not present Helps focus your work later on

37. INFORMATION DESIGN What is my web sites purpose and scope? Fifth Step: Share all of these additions to your document with others to determine if your statements adequately explain what your audience knows and what your site will cover about your topic.

38. INFORMATION DESIGN What is my web sites purpose and scope? Sixth Step: Rewrite your paragraphs after feedback and save them in your design.doc

39. INFORMATION DESIGN How should the message be structured? Random Access Structure: A B C D E F G H

40. INFORMATION DESIGN How should the message be structured? Random Access Structure: Can be very confusing if the amount of information is large, but it is a good way to give your audience access to everything

41. INFORMATION DESIGN How should the message be structured? Linear Structure: ABCDEEG

42. INFORMATION DESIGN How should the message be structured? Linear Structure: Works best when you want your audience to see one page at a time then move on through the site (Just like reading a book)

43. INFORMATION DESIGN How should the message be structured? Hierarchical Structure: A B1 C1 B2 C2C3 B3 C4C5

44. INFORMATION DESIGN How should the message be structured? Hierarchical Structure: A good way to organize information sites. Uses categories & subcategories

45. INFORMATION DESIGN How should the message be structured? Mixed Structure: A B1 C1 D E F B2 C2C3 B3 C4C5

46. INFORMATION DESIGN How should the message be structured? Mixed Structure: Because not every site fits one of the previous structures the mixed structure will probably be more common partly random, somewhat linear, and at times hierarchical = mixed structure

47. INFORMATION DESIGN Organizing your message: To turn your message into any structure you must first break it down into smaller pieces of information we call Chunks.

48. INFORMATION DESIGN Organizing your message: First Step: Write your main topic down in the middle of a sheet of paper Brainstorm chunks of information related to this topic and write them down around the message statement chunk.

49. INFORMATION DESIGN Organizing your message: Second Step: Look over the chunks to see if you missed any. Have you accidentally duplicated some? Are there chunks that don’t belong at all? Can any of the chunks be grouped topically under one of the other chunks?

50. INFORMATION DESIGN Organizing your message: Third Step: Draw a line from each chunk to the message statement or if a chunk is more closely related to another chunk, draw a line between them

51. INFORMATION DESIGN Organizing your message: Fourth Step: Look at your paper, some type of structure should be evident, review the lines if necessary

52. INFORMATION DESIGN Organizing your message: Fifth Step: Redraw the chart, being careful to note how things are related so you can draw it more neatly Draw boxes around chunks and lines between the boxes to show relationships

53. INFORMATION DESIGN Organizing your message: Sixth Step: Using drawing software to re-create your chart (flowchart) as a picture or as a graphic using one of the four previously discussed structures Insert this graphic into your design.doc under the heading Flowchart

54. INFORMATION DESIGN Organizing your message: Example: What type of fish can be used for sushi? Salmon Octopus Tuna Yellowtail Bluefin Herring Seabass

55. INFORMATION DESIGN Organizing your message: Seventh Step: Save your design.doc and print a copy

56. End Section Questions?