Workshop Four
Goals: On February 17, the home page for your site should be up and running, and ready to be critiqued. In today's lab you'll start exploring some of the variables you'll need to consider as you work toward that deadline. Rationale: In English departments, we spend a lot of time trying to assemble highly ordered texts (essays, exams, technical documents). The closest we seem to get to pure, uncommitted creativity is during brainstorming and freewriting.
But we often forget that the discovery and invention processes of creating arguments for even those sorts of texts can actually be very haphazard and non-linear. In designing for highly visual media like the Web, we need to foster that sense of uncommitted exploration and productive play. Sometimes the best design work emerges not from the ordered, rational thinking processes but from the intuition, the hunch, the experiment. Just as in poetry, the best metaphor is usually not the most obvious and literal one, but the metaphor that is barely metaphoric or may not even make sense.
Also, neither you nor I want to see you scrambling around, searching for an appropriate visual language at the last minute!
Part One
As we've discussed in class, reflecting on the interplay of form and function is THE big challenge for anyone trying to present information interestingly on the Web.
Unlike the print medium--which, generally, presumes that "content" is king and "form" will consist of a standardized, black and white string of letters on a white page--the WWW demands that form be constantly considered (and content reconsidered, in the sense that long wordy passages like this one don't translate well in a medium where the attention span is about as short as a click!).
One of the chief dangers for students developing research project Web sites is that in the attempt to utilize the technical possibilities of the Web medium, the research content gets confused and loses its focus. In this course, you'll be writing a rationale to explain your design choices; as well, you'll be critiqued by your peers--who will be trying to recover that rationale as they peruse your site. Needless to say, then, your site must take into account--even if the site is experimental--this audience. If you want the audience to experience the clarity and precision of your argument, then the site must support that kind of reading. And if you want the audience to experience disorientation and fragmentation, well, it still must WELL-PLANNED disorientation and fragmentation!
Take a look at this student's project Web site for a 4th year course in English at the University of Alberta. Make mental notes of the following and we'll discuss them in a few minutes:
How is this site organized (i.e., can you draw its structure in a diagram)?
Is there an overarching visual metaphor present?
Do the images and visual variables (colour of backgrounds, text, etc.) support the content?What is the rationale of the links (structural, additional, associative)? Are they useful or gratuitous?
Does the overall form of the site do justice to/support the content?
Does the site create credibility (e.g., through documentation, for example)?
What else do you notice?
(Here, by the way, is the course for which the site was prepared. If you're interested in what other students came up with, have a look later: http://www.ualberta.ca/~dmiall/hyperead/course.htm)
Part Two
Now that we've critiqued someone else's efforts, let's begin thinking about YOUR site. You've all submitted proposals and presumably I've ok'd them. But if I know undergraduate students, most of you have not yet thought too deeply about how you want your site to look. Unfortunately, you've only got two weeks before the home page is due: that means you have to start developing your visual language immediately.
Now, in one sense, if you haven't done much design work thus far, that isn't necessarily bad: you'll do your research first and let the form be determined by the content (i.e., text) you develop. Yet we can't presume that the medium itself has nothing to say about the way content is conceived and displayed. If you think about it, most of our class discussions have focused precisely on this problem. Interface culture is about the way media DO exert control over messages.
So let's see what you can come up with RIGHT NOW, drawing on the principle that it is at the abstract level of the composition where designers have the most freedom to explore and create. Let's try to unlock some of what you may already unconsciously "know" about how your particular site should look and function.
Exercise: Waking the Slumbering Web-Muse Within
1. AFTER you read this set of instructions, click on the "Colormaker" link at the bottom of this page and follow the instructions there.
2. Experiment with the sets of visual variables available until you discover a set that for some, quite possibly ineffable, reason attracts you (bearing in mind, of course, the broad topic of your project).
3. Copy the body tag onto a blank page in Composer or VisualPage.
4. Put a possible title for your project onto the page. (This is only to get you thinking about what you're actually doing! You can worry about the actual title later.)
5. Use the table function to create a preliminary layout for the page. Insert text in some of the cells to help you visualize the interplay of text, line, shape, and colour.
6. Change the background colours of some of those cells; are there other colours that create productive tensions with your initial visual variables, or that might be effective for other reasons?
7. Because this is your site's home page, you'll likely be sending readers to other pages from here. What kinds of links do you imagine you'll want, and where will you put them? Perhaps you might begin by thinking that this home page should act as a kind of "table of contents"; what then might be the other "chapters" in your project? Do you want readers to have a lot of choice in determining which chapter they go to next? (A menu of links...) Or do you want to ensure that they follow the "path" you set out for them? (A single link or image hotspot...)
8. The visible portion of your home page is "prime screen real estate." Small monitors (like the one you're probably using) should be your target as you make your layout. As well, the "given-new" strategy means that more expected items (menus, headings) begin at upper left, more novel stuff comes in as you move across and to the bottom right. But if you want to create tension and play with the expectations of the audience, perhaps you might rework those hierarchies.
9. Don't forget to experiment with typography. Remember that many browsers won't show the fancy fonts--you'd have to put such fonts in image files to see them. At least get a sense of how basic fonts like Arial, Verdana, Times New Roman, and Courier create different visual meanings.
Note: We'll share some of this design work as a class before the end of the period.