Week 4
Monday * Jan. 25
We will wrap up typography and move on to site navigation and color.
- LAB In-class typography exercise using Photoshop (graded)
- LECTURE 1 Usability in Web site navigation.
- LECTURE 2 Use of color in site design; Web constraints; examples.
DUE 4 p.m. Monday (in class) Exercise 3
READ Cederholm, Chapters 1 and 2 (you may have read Chapter 1 last week; review using the list below)
EXAMINE these four examples of cool CSS-styled navigation:
- 456 Berea Street
- Stu Nicholls | CSSplay
- Inverted Sliding Doors tabs
- Hybrid CSS Dropdowns (see a working example)
Be prepared to discuss the navigation used in each example. Read Cederholm, look at the examples above, and think about what they did with the navigation and HOW they did it.
- What two font-size options does Cederholm combine on pages 13-21?
- What different option does he discuss on pages 22-23?
- What does he say about using px (pixels) for all of your font-sizes?
- How does the Box Model Hack work?
- How were JPGs used on the original example in Chapter 2?
- What HTML elements are used in each of the navigation examples linked on THIS page (above, list of four)?
- How do these navigation choices affect the experience of disabled users?
- What does "float to fix" accomplish?
Notes * * *
In lab, we will do an in-class exercise with color, using Photoshop. (This will come AFTER the graded exercise.) You will be better prepared if you examine the supplemental links below. The exercise is related to your Portfolio assignment.
Supplemental * * *
Color, Contrast & Dimension in News Design: The third section of this tutorial will teach you a lot about the use of hue, light and dark, cool and warm, complements, saturation and proportion.
Color Theory Tutorial by Worqx: Similar material, but arranged so that you can choose what you want to learn. Check out the page on Proportion & Intensity -- this is why you need to learn more about color!
Kuler: A site that helps you choose a color palette.
My Delicious bookmarks for mmc4341+navigation provide some more examples of nicely designed Web site navigation.