Thinking: Aesthetics, Architecture and Ambience
Here is the point that I have arrived at in my thinking about hypermedia design. Putting down these notes on my process gives me a chance to stop and think about a process that developed in the heat and confusion of endless deadlines. Two themes surface, one is, "what makes cultural Web design different than commercial/corporate design?" the other is, "Is design ultimately a means for create meanings? Cuzí itís not just pretty pictures"
You will note the absence of a linear argument and stated conclusions. Instead, here are a collection of ideas which, taken together, reveal something of my vision of hypermedia design. Like a good Web site, the effect is accumulative; it is all put together in the mind, requiring intuition as much as reason.
Not surprisingly, perhaps, forfeiting the imperative to convince you of anything, saying "screw it" to all those things I learned about writing essays, permits breadth of though; many traps that limit thinking are narrowly avoided.
Web design has taught me many lessons, one of the most significant is to consider all as process. A process has steps that one must pass through in order to arrive at that which one imagines to be the desired state (your ideals). In other words, the ideal of arriving at perfection in one leap of genius may not only result in burnout, but limits your future to the present. Process. Process. Process is the answer.
The three "A"s
Architecture, Aesthetics and Ambience are the Web designerís stock and trade. I am unable to describe how much importance I accord to these three guides.
We design the intelligent and stimulating flow of information through solid architecture, creative navigation and appropriate design. We work the aesthetics of screen layouts, formal composition, color, light, space, fonts, all the visual elements for their evocative potential as well as their inherent symbolism to create an ambience for the information embedded in the architecture. We create context for content. Then we set the contexts in relation to one another. We design transitions that move us from one screen to the next. We deploy content in time and space. Everything we do falls into the realm of meaning. Our work is to create a meaningful experience in the navigation window.
At several moments, when building a hypermedia application, such as a Web site or virtual exhibition, you are called upon to imagine the whole.
It is impossible to do this imagining in one step.
There is too much to imagine: like, what is the content to be presented, how will this content be organized, how will it be given form, how will all the nodes of information relate to one another within a conceptual architecture, how will they relate in a navigation architecture, how will the nodes be laid out differently to make them interesting?
Everyone must articulate their imaginings as things progress, and carry out their work rigorously, for all builds and evolves from what came before.
When I work on a Web project, I come with a methodology--a series of steps for designing hypermedia applications.
I never studied hypermedia design. But, cognitive lessons learned from ten years of critical writing on contemporary visual art came in handy. And, I learned a lot just by working with others. We never stopped to talk about the process we just did it. We were in the field, making sites, working with stimulating and knowledgeable collaborators. I am thinking here especially of my partner Anne Marie Léger, and the folks with whom I worked on Haida Spirits of the Sea: Keith Paddington, Ingrid Hein and Bruno Schmidt of Slant Productions, exhibition curators Nathalie McFarland and Lucille Bell, and project coordinator Jennifer Baird.
I always thought of our working method as being rather artisan like, hand made, if you will--which, by the way, I think was a good thing.
My advice. In the process of Web design be as abstract as possible.
Recently, came across theoretical writings on hypermedia design methodology. I am indebted to my colleague, Rabah Djanati for introducing me to this stimulating body of thought: Relationship Management Methodology (RMM) and Scenario-Based Object-Oriented Methodology for Developing Hypermedia Information Systems.
I donít pretend to yet fully understand these, so I wonít attempt to explain them. I flag them to designers who wish to incorporate into their work more complex visioning tools and a more refined process. Also, you will find that they aid in better understanding of how back end concerns (i.e. server and database) and front end concerns (i.e. look and feel, design metaphors, navigation and page design, and media integration) can become part of the same integrated process.
These theories help push oneís process further.
The first error that I notice happening all the time: the content people, curators, experts or chief editors have their whole script written and revised within an inch of its life without having given a thought to the fact that they werenít writing a book but a hypermedia application.
As soon as content is identified, begin the discussion about how it might best be written up and organized to make it happen on the Web. Consider preliminary navigation options right away. This is the first step in imagining your site. Donít blow it.
This is the second error I notice happening all the time: print publications are used as models, not a metaphors, but models for web sites. Encyclopedias, or worse magazines abound on the web.
Web design can mine these print models for metaphors, which can be mixed up with other metaphors in interesting ways to make a hypermedia application. But it serves no one to faithfully replicate these forms on the Web.
At risk of being obvious, realize that the Web does not benefit from the same physicality of a print publication--that is, no pages to be held and turned in oneís hands. Thus, it canít be structured in the same way. Well it can, but thatís obviously a huge loss. Model your hypermedia application using the complexities of hypermedia.
Revel in the fact that the Web isnít subject to the same power abuses that perpetuate the restricting conventions so present in print publication. Donít cater to transposed conventions. They donít even exist. Just go crazy.
Donít ever loose your users unless itís intentional. Chaos is a good thing, when it is intentional.
Donít frustrate users. Be consistent where you need to be consistent. People come to your site to have an experience and/or to find something they want. Donít let bad information design get in their way, unless you want it to.
Rosenfeld & Morville in their 1998 textbook Information Architecture for the World Wide Web (p.11-13) define the job of the information architect as including:
Structure architecture rigorously. It is the syntax of your site.
The machineís limits are boundless; computers and networks can take in and give out enormous quantities of information. The stop is in the human organism and its social orders. Flesh and bone and human consciousness can only offer so much concentration, there are cognitive limits. Respect these things.
Once the syntax is under control, however, once the architecture is solid, then the human organism can take in more. Meaningful statements can be uttered. Variety is welcome and understood. Tangents and random events can surprise, delight, stimulate and seduce. All fits into a larger plan, the siteís architecture.
Celebrate architecture design, sweat over it, get into it and use it to the maximum to create potentially meaningful experiences.
Another way to see architecture is as relationships. Envisioning and articulating relationships between the different components of a Web site is one of the most challenging tasks confronting those creating hypermedia applications.
Here is the task then:
articulatE the nature of the different components of the application (texts, images, media, applications, navigation, design elements, etc.). Define their character as best you can, in abstract and concrete terms.
ANALYSE the optimum articulation of these components, how they might best be put in relation to one another
CREATE the content and build architecture so they articulate the relationships between nodes of information.
With simple Web sites, designing relationships can come almost without thinking. For a complex cultural sites it is a different story. A clear vision of the ensemble, how the different parts will exist in relation to one another is imperative.
Web design can do without a lot, money, great technical knowledge and good compression, but it cannot do without vision. Design Vision, Editorial Vision, and Technical Vision. I donít know why I have to say this, but I do. I have seen projects floundering so often without one. Without a vision intelligent decision making cannot begin.
What ever it is in this great soup of human uttering throughout time that you want to put on-line, look deep and figure out WHY!?!?! Your Web site presents your knowledge and passions. It is what you want to give away. Write your vision.
Web design is an articulate response to the siteís content. The goal is to create a context (architecture, aesthetic, and ambience) in which the content SHINES. When making design decisions, you must always consult with the content. It all has to make sense.
What is a Design Metaphor?
The METAPHOR is a guiding image used to put together content in a Web site. It is a reference point, like the Vision, for making coherent decisions concerning a siteís aesthetics, its architecture, its navigation and ultimately its content, as well as for establishing relationships between different parts of a site.
The metaphor can be a concrete image or it can be very abstract. The Web itself has developed a pervasive self-referential abstract metaphor that might be called the "Corporate Web Site Metaphor": top and side navigation, the integral basics of what HTML has to offer. This metaphor adapts so well to presenting commercial content. As for cultural sites, avoid it. It belongs to a world with which we do not share values and objectives.
Here is an example of an abstract metaphor that I developed for a Web site on Canadian History for the NFB where I work. It is a site which plans to be very large, developed over a four year period.
I would ask you to think very abstractly here. The objective not being to recreate the metaphor literally, but rather to use it as a structure for articulating a complex emotive/intellectual experience in time and cyber space.
Okay, pretend you are on a trip, a voyage, maybe to a different country or to a town near where you live. Imagine doing a bunch of things on your trip. Be inclusive in the type of experiences you imagine: some are exciting, others slow you down and are contemplative, and others you find just dull and you move on quickly. Some experiences are didactic, some are artistic, others are entertaining, and some are even functional. At times you wander aimlessly, following your whims, other times you are lead along a predetermined itinerary. What makes a "good" trip is the ensemble of these experiences.
So, here might be one scenario: You will have walked through the back alleys from the bus depot to get to a multiplex movie theatre, you talk to the stranger sitting beside you before the film begins, the film is not to your liking so you change cinemas and find one you do like. After the show, you walk towards the edge of town, to a park and sit in the moonlight by the water, whereupon you discover the ruins of an old factory site that you explore. Graffiti artists have painted the walls with impressive murals. You take pictures then return to your hotel to send an email home about your trip.
I reiterate that the Look and Feel Metaphor has no aspirations towards representing space and time in a Cartesian, one-point-perspective way. Itís not intended as a recreation of a world. The goal is to mine the image of life experience on a voyage for its evocative potential and NOT as a 3-D representation. The L&F Metaphor dictates that when moving from one section to another in the hypermedia application, there is a different feel, a different atmosphere, a different drama, a different sense of possibilities.
Ultimately, the look-and-feel metaphor proposes a conceptual parallel between life experience and the very notion of history (events/people/places/signification in time/context past) as well as the process of acquiring historic knowledge.
Because the metaphor is abstract, it remains adaptable, permitting very different content to be articulated within it. Itís a metaphor which encourages/permits sensitivity to the visual and text content of the site. Yet, at the same time, it is able to let the Web design pursue tangents to create strong juxtapositions with the text and visual content.
Donít be a slave to the dictates of the siteís design metaphor, but rather use it to articulate decisions around. For example, the metaphor can be contradicted in a specific place if this contributes to the optimum articulation of the siteís content. Once a main metaphor is clearly established, secondary metaphors can comfortably be introduced into a web site.
Please note that one metaphor is not considered BETTER than another but one is probably more APPROPRIATE than is another.
Now, if I had the choice between, a Web designer who has done graphic design or done HTML
for sites numbers 1 to 373 of the corporate variety, AND one who reads contemporary fictionthe selection is a snap decision.
For cultural web sites, hire generalists.
Everyone should display cultural interests and knowledge.
Designers must possess talent and technical knowledge (the more HTML they know the betterÖthey donít have to write Pearl scripts or other programs, but have to know that they exist and that they can be manipulated).
Give Web designers who have talent and drive a stimulating environment, and full team support, and they will create to the edges of their technical knowledge and artistic abilities. Designing at the edge of technical and aesthetic limits is what cultural Web designers must be qualified to do.
For cultural web sites, hire generalists.
Commercial Web design favors specialists, because their design process is generally based on a production line. Graphic designers create graphics, which are cut up and put in HTML tables by coders. Methodology isnít important, production is.
Web Designer 1 has design talent, heís got a good eye. He wants to write science fiction, and likes alternative music. Heís able to quickly learn technical things he doesnít know . He has a sense of irony and social criticism. His personal Web site has a lot of smart and cool ideas. His code is solid.
Web Designer 2 has design talent, she is an artist, with a sensibility with respect to textures. Sheís a computer graphic designer for web sites, who can always come up with interesting solutions. She is the Photoshop queen. She has confidence, can problem solve and can concentrate. She doesnít hand code, but knows HTML.
Web Designer 3 has design talent, he is a graphic artist, really, just out of school. His personal projects show that he is hip to new breakthroughs in technologies and visual design. Heís ambitious in his work. His portfolio shows that he is able to do problem solve. He has energy.
HTML coder 1 went to university in literary studies before taking a variety of courses in programming. She has a solid theoretical understanding of W3 HTML standards. She doesnít have design talent, but values good design and likes a challenge. She has great research skills.
Programmer 1 knows his languages, Pearl, Java, etc, etcÖ He has incredible research skills. He understands the beauty of code, its aesthetics and thus is able to use it creatively. He is generous with his knowledge. He likes problem solving and will go at it until he finds a solution.
The foundations of my production dream team.
I always try to design with people who believe that designs must be resizableÖthey will look good at 800x600 and wonít be stuck in the corner at 1024x768. Scalability is a challenge, but a nice one.
The trend is away from resizable designs. The present standard is to create fixed-size graphics, cut them into little pieces and throwing the totality in a table. For the sake of integrated process and true design, cultural Web sites should attempt to buck this trend and become involved in higher level design.
One of the foundations of design work is the constant articulation of design decisions within the team--the analysis of ones own and others work.
When you come together with your team (or your sounding board), everyone is called upon to articulate their analysis of design materials. As the process advances, more and more ideas are brought into the analysis. They can be concrete design ideas, color, light, layout, they can be the editorial and artistic Visions, or audience profiles. There are all kinds of things that can be used as points of reference for the design. Points of reference are established and decisions are made. As much as possible, visual ideas should be put on the screen, concepts and principals put on paper .
At its worst, design analysis sessions can overwhelm, degrading into a random expression of subjective reactions. "I like that color!" "No, I like this background." To avoid this, always work backwards, asking, "Why do you like it?"--does the response support the design objectives established previously? Does it establish a new design principal for the site? How does it relate to the siteís visions and its metaphors.
In other words, all analysis builds on previous analysis.
When designing you need time alone to concentrate, because there are usually so many things to keep in mind at once. And there are so many decisions to be made.
Work alone and in groups, in doses.
Design takes time. Anticipate this. Itís a creative process. A journey of trial and error.
In any Web site, there is much to assimilate, and this takes time. Donít be surprised.
If you want good design, cut your Designers slack, give them the time to assimilate, and then to develop sound navigational design and compelling visuals.
I recommend reading if you havenít:
Rosenfeld, Louis & Morville, Peter (1998). Information Architecture for the World Wide Web. Cambridge: OíReilly.
Lynch, P.J. & Horton, S. (1999). Web Style Guide: Basic Principals for Creating Web Sites. New Haven: Yale University Press. (http://info.med.yale.edu/caim/manual/)
As for software, I mention one application for STORYBOARDING, that is, drawing up what the pages will look like. For me this is the most significant imagining stage for the designers. I seek a tool that will permit us to work and evolve page layout and navigation design in an instantaneous and fluid visual display.
Corel Xara is my tool of preference (in conjunction with Photoshop, of course).
This little known vector tool is the most fluid page layout tool I have used to date. It allows maximum creativity in the process of imagining Web page design. It takes little effort to try out radically different design ideas. You can push and pull. Turn things around. And when all is said and done, you can export your graphics with optimum compression. I love Xara.
For flow charts or "site diagrams", Visio is okay. Tell me if you know anything better.
Imitation over Innovation
It always takes me aback, when I hear the word "Modern", while sitting around a boardroom table, looking at designs or talking about a Web site to be. "We want something different, something that will stand out, something Modern," a director might say.
The "quest for the new" ultimately is a confused driving impulse for contemporary creators and contemporary designers. It puts you in the wrong headspace. Why? Because, we just lived through more than a hundred years of constant claims of innovation. New doesnít really mean New anymore. There are multitudes of modern currents, many of which possess a long and venerable history. Itís best to consider oneself in this lineage rather than being somehow magically above it.
After hearing a talk by art historian Mark Cheetham, I am more inspired with an idea that lost credibility with the rise of Modernism, IMITATION.
Imitation is not copying. The later is what it says it is, a copy of a single work.
Imitation, on the other hand, is a tool for creative problem solving. When we surf the Web, we get ideas, seeing things we like and donít likeÖ A designer absorbs the essence of this body of work, not a particular work. You assimilate other peoplesí design sensibilities and you make them your own. In this way you achieve new levels of creative potential. Seek to synthesize and create. Donít bother seeking to create something new.
Control is an issue that keeps coming up when you are making hypermedia applications, especially with cultural institutions. Actually, control is often only implied. Itís behind false-ringing but familiar expressions like, "We want to give users choices." or "This is an interactive site, where users make their own decisions on the outcome" All of us like the idea of relinquishing control to the user; it seems soÖcontemporary! But letís be honest about two things.
1. Political Control
The PRIMARY objective of a cultural Web site, especially an institutional one, is seldom to push the idea of giving users choices. The true intention is more often to present a body of information that someone has identified as significant. Putting it online is a kind of proof of this importance.
As for choices, the choice given, for example, is which masterpiece from the collection you can see.
So, most producers or institutions are not willing to REALLY loosen up control of their content. They donít want to radically offer maximum freedom of exploration for their users--e.g. showing the worst shit in their collection if users want to see it. My God! What would that do to the reputation of the institution.
2. Design Control
Often Designersí Control issues are in conflict with Political Control issues. Designers GOOD, institutions BAD. :-)
How do I keep the design work moving forward in an environment that attempts to maximize creative potential, is based on analysis, seeks to be abstract?
Deadlines. Yes, that helps.
Also, change the focus regularly. When you get bogged down on one aspect of the site, whether it be navigation design, information architecture or page composition, shift your focus to another level of navigation design, a new page composition, go surfing the Web and comeback a fresh or add a new element.
Keep putting things down, things that are only imagined in your head, put them on the screen.
Try things that you donít think are possible.
This helps in keeping moving forward.
Cultural institutions, and cultural producers, because of the present ebb and flow of social forces find themselves confronted my the ethical obligation to explore mental models, to be creative when producing hypermedia applications, to think and act using cultural models.
Why? Because, since the 1980ís, the push to adopt a corporate model has been absorbed by museums, cultural periodicals and publishers, arts councils, and other cultural institution. The language and values of business are integrated even into the consciousness of artists and academics themselves. This change is made.
The Web medium, as much as any other, is fueled by corporate and commercial interests. It is a frenzy, as governments try to secure the future of e-commerce to ensure that their perceived hopes of perpetuating economic growth and privilege in the first world. The pressures are great to step into place in the global economy. It is undeniable, then, that the pressures to think corporate are felt right down to the act of modeling a virtual exhibition. It is insipid.
If the cultural sector does not design with the intent of deploying its own cultural models, it will relinquish control of its own sector to the commercial interest, which rule so many aspects of contemporary life already. What does this mean?
Take your inspiration from contemporary literature, visual art, dance, etc. and not from corporate models.
Our foundations are the history of knowledge, aesthetics, systems, philosophy, analysis...
Take your cues from the margins, whether they are from the realm of popular culture or highbrow culture.
Be inclusive and complex in your thinking.
As much as possible hire artists to create for your hypermedia applications: written scripts, visuals, sound scapes, HTML, navigation design, animationsÖ All cultural web sites should include original work by contemporary artists.
Build hybrids. Take chances that people whose raison díêtre is to make $$$ canít take.
It is the opposite of fundamentalism.
Push oneís ability to think in my Body and Mind.
Embrace complexity, doubt and ambiguity.
Better yet, articulate complexity, doubt and ambiguity.
Jam on complexity, doubt and ambiguity.
Put minds together to attain a collective expansion of creative potential.