Web Design
Knowledge Hunt
Student Name ______
Note: Answer all questions – Questions are marked in bold type.
This knowledge hunt will take you on a tour of a few web sites. Along the way, I hope you will learn a few basic design ideasthat you can apply to your web sites.
1. Open a web browser (Netscape or Internet Explorer).
2. Use the printed version of this page to keep notes and complete the questions. Use the online version of this page to help you navigate to the web sites in this hunt quickly and easily.
3.Read Tammy Payton's Page on Page Layout.
List the four things that struck you as most important that you can apply to your site: Write them in your own words!
a.
b.
c.
d.
4.Visit Robin William's (the author of The Non-designer's Web Book) Site.
Read the Good Design Page First
Scan this page after reading it.
a.What is her color theme?
b. Note her links at the bottom of the page.Do the colors work with her theme?
c.Explain why or why not!
5. Proximity
Proximity is a design theory that Robin talks about in her book. The idea behind proximity is that when items are close to each other, they have a relation to one another and belong together. When they are physically far away from one another they don't have arelationship.
On her Good Design page, notice how the items under "text" are close to one another. She repeats this down the page for each heading. To do this, she used a line break (shift + enter in most html creators like Navigator, etc.)
A. Look between the "Text' and 'Navigation' Headings. Do you see the separation?
Look between "Navigation" and "Links". Do you see the separation?
Based on what you just learned about Proximity, why do you think Ms. Williams chose to do this?
B. Click the back button to go back to her design page.
C. Click on Bad Design Web Features.
D. Read the sections on "Backgrounds" and "Text".
E.What color is the background of her page?
F.Does it interfere with the readability of that page?
G.Why or Why not?
H. Scan the text with your eyes. Does her text crowd the left side of the page?
I.Why do you think she chose to indent the text the whole way down the page?
J.Why do you think you shouldn't have text that is underlined that is not a link?
6.Alignment
Another design theory Robin discusses in her book is called Alignment. This means that items on a page are lined up with each other. It is tempting to mix alignments-some text is centered, some left, some right-but it is messy and gives an unprofessional appearance.
A. Look at the heading on her Bad Design page. Notice that it is flush left.
How do you think it would look if she had centered the title?
B. Look at this page to see an example of things lining up:
C. Do you notice how the graphic at the top (ColumbiaUniversity) lines up with the menu going down the page? This is an example of left alignment.
D. Robin Williams strongly urges beginners not to align all text to the center. Take a look at this page to see what she means:
The Sea Monkey Worship Page
E. Besides the background being a little noisy, do you notice that the text is centered all the way down? This makes the right and left edges have no definition. It is hard to read.
Based on what you've learned thus far, what would you do to make this page easier to read?
a.
b.
c.
F. Ms. William also suggests picking one alignment and sticking to it for the whole page. Here's a page that mixes alignments:
G. Do you notice how "Teacher Resources" doesn't line up with "Workshops"?
Where else is the alignment off on this page?
H. Read the rest of Robin William's Bad Design Page ( She gives many more ideas for what to design on your page. Writedown three ideas that stand out for you as Bad Design:
a.
b.
c.
7. Repetition
Repetition is a design concept where you repeat common elements throughout a site to make the pages unite. There is a link at the bottom of her page that says, "ratz". Click on it to get to her main page.
A.On the main page, she uses a repetitive element, what is it?
B. By the way, do you notice that strong left alignment on her main page? Looks great, doesn't it?
C.Repetition can also be used throughout a site to make people aware that all your pages go together. Take a look at this site to get see this idea:
Port Washington Schools k-12 Technology Conference
D. Click on the various links at this site.There are a few repetitive elements on this site.Name two of them:
a.
b.
8. Contrast
The lastbasic design concept Robin discusses in her books is Contrast. This is what draws your eye to a page. Contrast could be using bold or bigger type on headings as you go down a page.
Look at this page to see an idea of this concept:
A. Do you see how the color and boldness of the headings creates contrast? Explain:
B. Click the back button in your browser.
C. Look at the Museum of Modern Art's Web Site (. (Don't get sidetracked by the fabulous collection they have.... you have work to do!)
D.How does MOMA's front page use the concept of contrast?
9. Putting it all together
What could you do to your pages to incorporate some of the things you've learned? (How can you make your pages look better?)
a.
b.
c.