Embed Size (px)
Citation preview
The Web
The Web
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
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).
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
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
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
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
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
The Web
Elements of Great Web Page Design
Information Design
Interaction Design
Presentation Design
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?
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?
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?
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?
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?
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?
The Web
Presentation Design
How you plan your site?
What will it look like?
What elements do I need to incorporate in my site?
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?
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?
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
INFORMATION DESIGN
What is my sites message?
Second Step:
Put the topics in the order from most interesting to least interesting
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
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
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
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
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.
INFORMATION DESIGN
What is my sites message?
Seventh Step:
Save your message statement as Design.doc or similar name.
INFORMATION DESIGN
Who is my web site’s audience?Things to consider:
Their ageWhere they live
What they do for a livingWhat style of clothes they likeWhat language do they speak
What food do they likeA cause they feel strongly about
Etc.
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
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
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
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.
INFORMATION DESIGN
What is my web sites purpose and scope?
Your web site and audience messages will help you determine your sites purpose.
INFORMATION DESIGN
What is my web sites purpose and scope?
First Step:
Conduct an audience analysis. Do personal interviews or pass out questionnaires.
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
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
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
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.
INFORMATION DESIGN
What is my web sites purpose and scope?
Sixth Step:
Rewrite your paragraphs after feedback and save them in your design.doc
INFORMATION DESIGN
How should the message be structured?
Random Access Structure:
A
B
C
D
E
F
G
H
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
INFORMATION DESIGN
How should the message be structured?
Linear Structure:
A B C D E E G
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)
INFORMATION DESIGN
How should the message be structured?
Hierarchical Structure:
A
B1 B2 B3
C1 C2 C3 C4 C5
INFORMATION DESIGN
How should the message be structured?
Hierarchical Structure:
A good way to organize information sites.
Uses categories & subcategories
INFORMATION DESIGN
How should the message be structured?
Mixed Structure:A
B1 B2 B3
C1 C2 C3 C4 C5
D
E
F
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
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.
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.
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?
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
INFORMATION DESIGN
Organizing your message:
Fourth Step:
Look at your paper, some type of structure should be evident, review the lines if necessary
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
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
INFORMATION DESIGN
Organizing your message:
Example:
What type of fish can be used for sushi?
Salmon
Octopus
Tuna
Yellowtail Bluefin
Herring
Seabass
INFORMATION DESIGN
Organizing your message:
Seventh Step:
Save your design.doc and print a copy
End Section
• Questions?
