Assignments, Readings and Grading
INFO424 Information Visualization and Aesthetics
Readings     Grading     Students

Assignments:

Everyone does ten assignments. Put them on your Web page. The list below details the deliverables for each exercise. Please locate any explanation, defense or critique of your design on a separate page. If you place a "mailto" link on this page, I will send you comments.

  • 1     (1) Design a "better" web page for this course, (2) Explain why yours is a better design.


  • 2     (1) For each of the four sets, describe elements of their common aesthetic, (2a) Design a gun association web page for women and (2b) Explain why your page would attract women, (3a) Design a petroleum web page for children and (3b) Explain why your page would attract children, and (4a) Design a web page for fathers who seek computer games for their children, and (4b) Explain why your page would attract men.


  • 3     (1) Create an eyechart with one more character, (2) How is the chevron sign different from the other signs, (3) Interpret the truck tilting sign and explain how it is different from the other signs, (4) Create a sign for the Red Square garage and explain your design in terms of the other warning signs, (5) Create an upper campus UW map that uses the aesthetic of Broadway Boogie Woogie.


  • 4     Create a webpage for the poem about the grasshopper (you can type out the poem and place on the webpage if you like), and on the same webpage add a widget (i.e., button, link, roll-over image) that communicates "Next", another one that communicates "Previous" and an image of a grasshopper. You are at liberty to design these widgets in any manner you like. The end result, however, should model the concept of a vertical axis of stability. Explain how your design achieves stability.


  • 5     Create a webpage for Shotgun Weddings PLC. All the text and visual elements must be present on the page. You can re-arrange the text, manipulate font and colors, etc. Use the country buttons, the decoration and the image of the couple as is. Arrange all these elements in a balanced design. Explain how your design achieves stability.


  • 6     Create a web page for Le Monde Interactif that is warm, flowery, projects light and evokes Claude Monet, yet contains the 'polar/gun' content. Try to make the result less gadget heavy. You may use the gadgets on the page, redesign them or eliminate them. The other content has to stay, but you may redesign it. Explain the rationale for your design.


  • 7     Create a web page for the Long Island Expressway. It has to be a map with color-coded stretches that indicate the various miles per hours of the vehicles (You can invent all these data). Redesign the East and West travel time indicators so that they are easily comprehended, and finally add a photo of the Mayor himself. Since the Mayor gave you the "I Love NY" button, it would probably be a good thing to add that as well. Explain the strategy of your design, especially your use of the background page color, foreground colors, color widgets, and the colors used on the maps. The end result should be instantly comprehensible by someone speeding down a highway at 60 mph.


  • 8     Create a web page for Amazon.com. It must have the Amazon logo in the upper left corner and must be structured using the armature that Benton used for his painting "City Activities." Create or find appropriate material to reflect the many different kinds of products sold by Amazon and arrange them so that the viewer's eye coils, rise, slants and dwells. Each dwell should be a anchor to further information on other Web pages (you don't have to create these pages). Explain how your design has all the design structures of Benton's painting.


  • 9     Part one: Design a one-word logo that reads as a word and also illustrates its meaning. Part two: Design a website with the nonverbal directional icons.

  • 10     Write a review or critique of a source discussing some aspect of aesthetics or visualization of information. If the works listed on the web pages of this course are not to your taste, you may suggest other readings.
    OR
    Write a review or critique of a punk-aesthetic web site.


Some Readings:

Andres, Clay, Great Web Architecture. Foster City, CA: IDG Books WorldWide, 1999

The Best Informational Diagrams. Tokyo, Japan: PIE Books, 1999.

Card, Stuart, Mackinlay, Jock and Shneiderman, Ben. Readings in information visualization: Using vision to think. San Francisco, CA: Morgan Kaufman, 1999.

Del Bimbo, Alberto. Visual Information Retrieval. San Francisco, CA: Morgan Kaufmann, 1999.

DiNucci, D., Gindice, M. & Stiles, L. Elements of Web Design. Peachpit Press, 1998.

Dondis, Dondis A. A Primer of Visual Literacy. Cambridge, MA: The MIT Press, 1973.

Fernandes, Tony. Global Interface Design. Boston, MA: AP Professional, 1995.

Fleming, J. Web Navigation: Designing the User Experience. O'Reilly, 1998.

Fry, Benjamin F. Organic Information Design. Thesis, 2000. MIT.

Heller, Steven. Design Literacy (continued): Understanding Graphic Design. New York: Allworth Press, 1999.

James J. Gibson. The Ecological Approach to Visual Perception. Boston, MA: Houghton Mifflin, 1979

Kilian, Axel. Defining Digital Space Through a Visual Language. Thesis, 2000. MIT.

Lynch, Patrick J. and Sarah Horton. Web Style Guide: Basic Design Principles for Creating Web Sites. New Haven, CT: Yale University Press, 1999

Marcus, Aaron. Graphic Design for Electronic Documents and User Interfaces. New York: ACM Press, 1992.

Pretzer, M. Creative Low-budget Publication Design. Cincinnati, OH: North Light Books, 1999.

Roberts, M. M. The Artist's Design: Probing the Hidden Order. Walnut Creek, CA: Fradema Press, 1993.

Schapiro, Meyer. Style. (pp. 81-113). In: Aesthetics Today, readings selected, edited and introduced by Morris Philipson. Cleveland, OH: World Publishing,

Spool, J.M. Web Site Usability. Morgan Kaufmann, 1999.

Stroebel, L., Todd, H. and Zakia, R. Visual concepts for photographers. London, Focal Press, 1980.

Swirnoff, Lois. Dimensional color. Boston: Birkhauser, 1988.

Tufte, Edward T. Visual Explanations: Images and Quantitites, Evidence and Narrative. Cheshire, CT: Graphics Press, 1997

Ware, C. Information Visualization: Perception for design. San Francisco, CA: Morgan Kaufman, 2000.

Wyszecki, G. and Stiles, W.S. Color Science Concepts and Methods, Quantitative Data and Formulae. Wiley, 1982.



Grading:
  • Assignments 1 - 9 are each 10% of your total grade [Total: 90%]. They will be graded on these factors:

    • Is the assignment complete in all the required parts?


    • How brilliantly creative, innovative, unexpected, astonishing and amazingly appropriate is the result.

      [Note: I will be the sole judge of these qualities, and I will be guided by the maxim of Serge Diaghilev: "Etonnez-moi!"] [Further note: Students wanting to know what I consider brilliantly creative and/or innovative and/or unexpected and/or astonishing and/or amazingly appropriate can attempt to quiz me on details, but be forewarned that this is probably futile as my judgement of what is brilliantly creative, etc., etc., changes daily.] [An extended further note: Given my enormous suggestibility, I anticipate that your critique, judgement and defense of your work will be the most important factor in convincing me that it is brilliantly creative, etc., etc.] [Moral: The insightful student will readily surmise that the explanation of a creative work is often more important for its public acceptance and understanding than the work itself.] [Further moral that could be generalized into a maxim: The artist is always misunderstood.]


  • Assignment 10 is 10% of your total grade. It will be graded on these factors:

    • How insightful and well expressed is your critique.


    • How your text is itself an excellent example of formatting text.
Scale:

If you keep track of the grades you receive for each assignment, you can figure out exactly what grade you'll receive:

Total Points Course Grade
95 - 100 4.0
90 - 94 3.9
85 - 89 3.8
80 - 84 3.7
75 - 79 3.6
70 - 74 3.5
65 - 69 3.4
60 - 64 3.3
55 - 59 3.2
50 - 54 3.1
45 - 49 3.0
40 - 44 2.9
35 - 39 2.8
30 - 34 2.7
25 - 29 2.6
20 - 24 2.5
15 - 19 2.4
10 - 14 2.3
etc. etc.


Students