What is art? Every individual will have a unique definition, and in a place as content-rich and culturally diverse as the Web, many interpretations of art will exist. The unifying theme between various disciplines of art is that art is human expression.
It seeks to answer questions, or to convey a belief or emotion, sometimes to motivate, still other times to unify.
The Web is becoming an artistic medium and cultural mien unto itself. It's interesting to search through the many art resources that exist. There are numerous human expressions on the Web, and some very good art indices, but it comes as a surprise that
many art sites severely lack an understanding of the Web medium! This can especially be seen with various museums, which bring the marvelous experience of global expressions to the desktop. Although the viewing of the actual artwork or the reading of
cultural narratives are undeniably enriching, the fashion in which they are displayed almost unanimously fails.
There are, of course, some very significant exceptions to the way art is handled on the Web. Many of these exceptions can be found on individual artist's pages; perhaps these individuals see the Web as an artistic medium (which it is), rather than a
service more akin to data delivery. I have tried to give a few of these individual artists attention, but my hopes here have been, rather, to find and use more universally accessible art and culture resources.
The first lesson comes from the Smithsonian Native American Indian Museum. This colorful and enriching Web site is among the better designed of the Smithsonian collection online, which is quite extensive and well worth many visits. Here, I examine the
use of splash pages, their effectiveness, and how to use them successfully.
I will never forget my first physical visit to New York's Museum of Modern Art (MOMA) as an adult. I remember standing in front of Vincent Van Gogh's "Starry Night" and thinking how small a painting it really is, yet how incredibly large the
impact of those swirls and colors are.
The exhibits at MOMA are always interesting, and MOMA's collections are downright breathtaking. They also have one of the most sophisticated museums online, helping me to relive the experience of seeing that Van Gogh in person. I hope you will enjoy
examining the tasteful way MOMA has presented thumbnail sketches—making physically small expressions large in terms of emotional impact, with constant respect to borders, space, and shape along the way.
Shapes are critical to the study of art—how they are used, what various shapes symbolize, and what emotions they can evoke in people. ArtNet's "I am Free" exhibit uses shape very succinctly. Frank Lloyd Wright had a visionary sense of
shape as well as space. A visit to "The Wright Place" demonstrates a beautiful use of pull quotes to effectively communicate ideas while breaking up Web space in an attractive, almost architecturally precise, fashion.
Space is important to dancers, too, and the Alvin Ailey American Dance Theater has a pleasant Web site that gives the viewer a chance to explore the effective uses of framed space. Keeping cohesion between objects on a page can be achieved with the
<NOBR> tag, and the HTML 3.0 extension, which is well demonstrated on the Urban Artifacts site. Across the Atlantic is the Maison Europe[as]enne de Photographie, a great place to enjoy European photographic works as well as think about various ways
to generate HTML effectively.
Artist Suza Scalora provides another look at interactivity, creating a complete sensory experience for the visitor with Color Therapy. A visit to Ellis Island teaches not only about a significant door to North American culture, but the <UL> tag,
which helps unify and organize information. Finally, art can move humanity toward unity and compassion as is beautifully expressed in the contrasting colors and symbolic words on the Aids Quilt Web site.
Although I've been careful to use examples that can be viewed by people of all sensibilities, art—and the philosophical journeys of humankind—can sometimes be controversial, unusual, challenging, or even shocking. All of the screen shot examples in this chapter and the accompanying information on the CD-ROM should be comfortably viewed by all people; however, I do recommend that while surfing individual sites, people are aware that not all art or ideas may be appropriate for their particular beliefs and tastes.
Figure 4.1. The Native American Indian Museum's first splash page.
Using warm yellow, maroon, and black as the primary colors for this Web site, the Native American Indian Museum also makes excellent use of object artifacts from the collection itself. The information on this site is significant. It's an important site
to spend time at for students, teachers, parents, and Native American art and history buffs, as well as the Web designer.
The page found at the preceding address (see Figure 4.1) brings the visitor to a single image placed against the background (often referred to as splashed, hence the name splash page), and hotlinked to the second page of the site (see
Figure 4.2), which is where the top-level navigation is found.
Figure 4.2. The Native American Indian Museum's second page.
You'll note that the pages are extremely similar, although the navigation page is more functional than the first page. It brings up an interesting question for Web designers: How effective are splash pages?
The answer isn't a simple yes or no. Splash pages can serve in different capacities, both in design and function. First and foremost, they can identify the site. Next, the splash page can visually fix a site's design elements in the visitor's mind,
creating a foundation for design continuity. The Native American Indian Museum's splash page functions well in both of these fashions. Finally, a splash page can establish the user interface, setting up the navigation elements and site logic.
With the museum's example here, the second page achieves the user interface, but on close examination, it also fulfills the first two elements described! Essentially, the museum has two splash pages.
Designers are wise to avoid too many layers of information. It becomes confusing, time-consuming, and wasteful of resources. What has happened here at this Smithsonian site is a natural phenomenon for designers, because whether aware or not, the site
follows a very familiar tradition—that of a printed book. First there's a cover, as represented by a splash page, and then a table of contents, and so forth.
in Chapter 3, "Sites that Speak: Newspapers and Magazines." Although interface has been successfully created , it doesn't start until the second page. My recommendation would be to use the second page as a splash page,
discarding the first.
The first step in creating a successful splash page is to determine if one is needed at all. I personally like them, especially when the design and function have been equally addressed. I think a well-designed splash page sets the tone and pace of a
site. However, not every site will require a splash page. Typically, large sites, or very visual sites, make good candidates for this technique.
Designers should then consider the following concepts:
Now, think about these practical techniques:
By removing the first, awkward splash page, the Smithsonian's Native American Museum is more quickly accessed and the intended effect of that first screen is fully achieved. The remainder of the site flows well, with superb layout of information (see
Figure 4.3). The site also provides an exemplary job of subtle-yet-effective design, meeting the needs of a very broad audience.
Figure 4.3. Layout of information on an internal page.
Figure 4.4. Museum of Modern Art's home page.
Museum curators (as well as the Web designer) seeking to provide thumbnail options for clients would do well to take heed from the designers of the MOMA Web site. The thumbnail is a very effective mode of allowing the user to see a small version of a
given object before clicking on the larger, higher-bandwidth version. This technique is used extensively, and unfortunately, very poorly, all over the Web.
MOMA's approach has been to follow refined concepts and allow the design to dictate where and how thumbnails are placed. The first round of kudos goes to the designer who used the border=0 argument in the images. There are few things more unattractive
than borders around thumbnails; they not only contain elements that should have a natural relationship with the design space, but borders can also detract from the small, detailed content within.
It is precisely this graphic element-to-space relationship that adds to the sophistication of the MOMA site. Figure 4.5 shows a series of thumbnails. Figure 4.6 is my adulterated version of the page with the borders turned on. Note how MOMA's thumbnails
are integrated into the space; there is a flow of visual energy in Figure 4.5 that my boxed-in version with borders does not have.
Figure 4.5. Thumbnail sketches on MOMA.
Figure 4.6. Thumbnails with the borders on are constrained.
But how will a visitor know that a thumbnail is hotlinked, you might ask? Well, that's very simple. First, mouse over will change the pointer to a hand, which visually alerts the visitor to point, and then click. If this is too subtle for your tastes,
try a brief description above the thumbnails, explaining to your audience that the following images are, in fact, hyperlinks to larger versions. My preference is to avoid explanation and give visitors the credit of being intelligent and intuitive enough to
figure the experience out for themselves.
The next round of applause is for the designer who keeps backgrounds consistent between a thumbnail and its larger version. (See Figure 4.7 and Figure 4.8.) Note the consistent background, information, and navigational elements in Figure 4.8. How many
sites have you visited where a click on a thumbnail takes you to a flat gray page with a really large graphic and nothing else on it? It's all-too-common, and it amounts to non-design. Maintaining the background keeps the continuity of the site intact, and
designers using the thumbnail technique should take heed.
Figure 4.7. More thumbnail graphics.
Figure 4.8. The large version.
Finally, my hat is off to MOMA for not leaving me out to dry on the image pages. They have expertly used the space to provide extended information, and there's no need for me to resort to my browser's "back" button, because navigation is
included on the page.
The following is a distillation of effective thumbnail technique:
<img src="my.gif" border=0>
The end result of these concepts has helped MOMA contribute a stunning Web site that flows visually on its individual and impressive pages. The visitor can then move flawlessly through the site, enjoying a well-planned, virtual museum with wonderful
surprises and extraordinary art.
Figure 4.9. IAMfree's home page. Note the triangles!
Shape is one of the hallmark foundations of culture: Every visual extension of culture, be it science, language, religion, architecture, even the way food is prepared and presented, revolves around shape.
Rectangles have dominated the Web, and it is high time that other shapes become incorporated into Web design! Circles, triangles, and combinations of each can add a great deal to a design, moving it from the realm of the expected to the domain of the
creative.
ARTnet's IAMfree (The Internet Arts Museum for free) exhibit is a wonderful blend of music, art, and literature donated to the Web in the spirit of maintaining cultural expression in the realm of technology. The acknowledged meeting of creativity and
science always invigorates me, and I am particularly excited when these ideas join together with great design. The impact is quite effective, and the relationship of these concepts to shape is inherent.
In the fascinating book The Beginner's Guide to Constructing the Universe: The Mathematical Archetypes of Nature, Art, and Science, author Michael Schneider studies the relationship of numbers and shapes to human expression. Interesting
commentary on the symbolic and archetypal importance of shape as communication is available throughout the book.
For creators of media, particularly designers who use shape on a daily basis as part of communication, these symbolic relationships are potent, and their study extremely important. Creators of effective and lasting logos understand this relationship
intimately. The Web designer can be especially enabled by such archetypes as he or she seeks to visually express detailed and often universal information in a small amount of space. Consider the following geometric shapes and their symbolic significance
when designing Web sites:
The Circle. This shape typically relates to wholeness, community, and the universe, eternity ever-lasting. The circle is emotionally appealing, often reminiscent of expressive qualities attributed to women, including warmth, comfort, sensuality, and
love.
The Triangle. Alert and captivating, the triangle suggests power, balance, law, science, and religion (think about the scales of justice or the Star of David). Triangles are more related to masculine attributes such as strength, aggression, and dynamic
motion.
The Rectangle. Rectangles typically suggest containment, and throughout this book you'll become familiar with my concerns regarding the constraint that rectangles cause, especially in the form of borders on graphics or frames. But, other symbolic
relationships involved with the rectangle are important components of design, in particular the sense of protection, order, and logic. Interestingly, the addition of a fourth geometric point begins the foundation of three-dimensional objects. This fourth
point suggests mass, volume, anything that is solid, secure, and in the most strict sense, real. That said, it's no accident that rectangles dominate the Web's visual space; there is a constant need to bring its non-linear reality down to earth, so to
speak.
When using shapes, be aware of these ideas! They will make your designs inevitably more powerful and concise, and help move you away from the constraints caused by rectangular objects. This in no way suggests that rectangles are inappropriate, instead,
my hope is that you will think carefully about the use of each individual shape.
The ARTnet IAMfree home page as captured in Figure 4.9, shows a generous use of triangles.
Figure 4.10. Frank Lloyd Wright home page.
James Miller has created a small but very effective Web site about architect Frank Lloyd Wright. There are ample links to other sites showcasing the architect's life and work, but I feel that Miller has captured something intriguing and important in his
expression.
Wright had an obvious and lasting relationship to shape and line, and Miller has used both as a means of designing his appreciation of Wright's legacy.
Of particular note is the use of quotes, along with squares and lines, to draw the visitor's eye to important ideas that compliment the text. Note pull quotes along the left margin in Figure 4.10. This technique has long been used in print to accentuate
ideas within a body of work, or many times to actually pull significant ideas out of the text and point the reader to them.
Aside from the more obvious advantage of giving fast access to concise ideas, the use of pull quotes helps visually break up space and create dynamic texture. This texture and focus can also be achieved by placing certain short passage in bold text.
Again, by using alternative shapes, as discussed earlier in this chapter, this texture and focus draw attention out of typically rectangular blocks of text and graphics.
Miller has effectively pulled attention to main concepts using pull quotes with shapes and patterns. These geometric relationships available in his design (see Figure 4.11) are then again reflected (and probably inspired) by the impeccable understanding
of design concepts available in Wright's own work.
Figure 4.11. Geometrics and flow of Miller's tribute to Wright.
Figure 4.12. The Alvin Ailey American Dance Theater home page.
With the focus of much of this chapter steeped in the importance of shape and space, it seems natural to introduce a discussion of frames.
Frames are becoming more and more flexible in terms of what can be done with them as a tool to control layout on a Web page. Frames are becoming the companion piece to tables as a layout control,, although tables are inherently much more stable because
of browser compatibility.
Many designers hate frames, and visitors to Web sites complain frequently about them, even if the understanding of why they complain is not clear. Simply put, frames take a small space and break it up into smaller spaces. The technique can be
visually frustrating; if used intelligently, though, it can be visually, as well as functionally, powerful.
The Alvin Ailey site has achieved the most important issue involved with the use of frames: Be very specific in the use of each space. In other words, be consistent—if you choose one frame section for navigation, another for a title bar, and
another for data, you need to keep that specificity consistent throughout the site. Frames will fail miserably in design if each page uses a different series of frame layout.
The designers of the Alvin Ailey Web site were quite savvy in keeping the navigation to the left, the title bar to the top right, and the main data in the right-central target frame. This works very nicely as an interface concept.
There is a less-than-satisfactory use of the data space, in terms of the framed interface. The home page, as shown in Figure 4.12, is very well done; however, as I progress through the site, I end up with pages that only have a few hypertext options
(see Figure 4.13) and too much wasted space! Here, the designer has delineated this area for data, and hasn't always succeeded in using the area to its full potential.
Figure 4.13. Note wasted space in the main frame.
An entire book could be written on the use of frames as an evolving interface tool, so I'll avoid the teaching of the technique and instead focus on some basic design thoughts that will help you in using frames well.
Figure 4.14. Urban Artifacts: hear, speak, see no evil.
This subtle Web site created in pastels is the online version of a Houston, Texas craft gallery featuring various media, including clay, jewelry, blown glass, sculpture, and fiber. The site makes excellent use of color, typography, and humor, as
pictured in a contemporary hear/speak/see no evil theme shown in Figure 4.14.
In order to be sure that the design created will be consistent across various browsers, screen resolutions, and browser sizing, the designers have used a very handy HTML 3.0 extension known as the "no break," represented by the <NOBR>
tag and its companion closing tag, </NOBR>.
This feature should be used any time a series of graphic elements need to remain together, side by side, without the re-sizing of a browser affecting the end results. The <NOBR> tag is as easy to understand as its name; it simply means that the
information within it should not break, regardless of what externals might influence it.
Notice that in Figure 4.14, the words (actually graphic images) "Past, Present, Future" appear together on the same horizon line. If I decrease the size of my browser, the information remains together. Now, if I take the <NOBR> tags out,
the information (viewed in most browsers other than Netscape and Internet Explorer 3.0 and above)will stack awkwardly, losing the fine balance and intent of the design.
This technique is very helpful in maintaining a design's integrity. It is supported by any browser that is up-to-date with HTML 3.0 and above.
Figure 4.15. European Museum of Photography home page.
Although there's a perfectly good English version of the site available, I prefer to cruise around it in French, even though I don't understand the language very well. The French version lends a certain bit of worldly flavor, as well as challenging me
to remember my lessons and figure out what the various links are taking me to!
The European Museum of Photography is a nice representation of a Web site with sophistication and style that is effective because it is understated. The theme is black, white, and red, in subtle, almost translucent hues, until you reach the actual
exhibitions, which can be quite colorful in contrast. Thumbnails are also used effectively, without borders, larger versions are on consistent pages, and there is a way off the larger version page without having to resort to that "back" button.
The site was created using Microsoft's FrontPage 1.1 package, as noted in the source code in Figure 4.16. Upon seeing the notation, I thought about offering up some assistance regarding HTML coding and the onslaught of packages that are becoming
available seemingly overnight.
Figure 4.16. Source code for the Maison Europeenne de La Photographie.
As I see it, there are three ways to put together HTML:
I'm not in a position to endorse a product, and besides, I believe that there is something for everyone. You will find out what works best for you personally, or, if you are in a company situation, what is most effective there. For now, look at simple
pros and cons of each of the preceding ways.
All that said, I still maintain that at least one person, whether it is you, or if you have a staff member that the task can be delegated to, should be able to code by hand. I make the comparison of the acoustic versus electric guitar player. An
acoustic guitar is harder and more precise to play. As such, learning it well will make an electric guitarist that much better in terms of technique. Generating fast code might be enthralling, but if the learning doesn't support it, potential problems can,
and almost always do, arise.
Figure 4.17. Suza Scalora's Color Therapy.
As has been mentioned several times in this book already, and as I'm sure you will read again, interactivity is the heart and soul of the Web medium. It is user choice and involvement that make the Web unique as a form of widely accessible media as well
as particularly engaging and potentially empowering from the educational standpoint.
Artist and photographer Suza Scalora has created several interactive media pieces at myth.com that are excellent demonstrations of the Web's interactive form, and Color Therapy is among the best.
Nothing happens without the visitor. This could be said of any Web site, but even if a visitor clicked once and read most Web sites, he or she might come away with some information about a product, the activities of a given organization, or a multimedia
experience that allowed them to be passive. This is hardly true of any Scalora site, even though the individual pages might please or stimulate curiosity, their personalities invite you to continue pointing, clicking, and exploring your way through her
colorful maze.
Thematically, the goal of Color Therapy is to have visitors explore their own relationship to color, as well as describe the meanings of color, provide a meditation, and allow a journey through a gallery of Scalora's exquisite and unusually colorized
photographic works.
Much like shape, color has powerful impact on the human psyche. Designers learn about which colors give people a sense of security, which calm them, perk them up, excite them, make them nervous and tense, or bring them joy.
After the main splash screen, an animated and very colorful GIF allows me to pick a color from Scalora's bright palette. This visit, I selected "color meanings" and then chose the color blue. I ended up on a blue page with a swirling
background and the significance of the color, which induces tranquillity, expresses intuition, and projects trustworthiness.
Visitors can follow the color meditation series, which is quite interesting in that instead of selecting a color, you select an emotion or state of being. Then you are brought to the color corresponding to that emotion. Your job is to "Zone
Out" on the color for two minutes, after which you may open the journal along the bottom and write about what you saw and felt during the color meditation. You can e-mail these directly to yourself and reflect on your personal experience of color.
The Color Therapy site is not only a great example of how individual and interactive a Web site can be, it is also a great place for designers to learn about the significance of color, think about how it affects them as individuals, and more
importantly, how its symbolic concepts can be used in design.
Figure 4.18. Page from Ellis Island.
Immigrants to this country come through a variety of ports and passages. Ellis Island is among the most famous of landmarks for immigrant families to the United States, my own included. I was moved to learn not only about the Island's history and
museum, but the marvelous project known as The American Immigrant Wall of Honor.
This project is one of the highlights of the Web site. It doesn't matter if a family came to the United States through Ellis Island or another entry, or settled here long before the U.S. became an immigrant nation. The Wall of Honor is an opportunity to
remember families, acknowledge their struggles and triumphs in the journey to achieve freedom, to remember those families who were forced to migrate here and whose legacy and contribution to this nation endure, and to honor the indigenous people to this
land. No one who has participated in the building of the American Dream goes unacknowledged here, and membership information is available via a handy feedback form.
One method of organizing information on Web sites in a clear and concise fashion is to use bulleted lists, which is managed by the <ul> tag. (Note bulleted lists in Figure 4.18.) I'm very fond of this technique as it, like the pull quote technique
mentioned previously, points visitors to key ideas in an orderly and efficient fashion.
To create an unordered (meaning no numbers), bulleted list, two tags are necessary. There's the already mentioned <ul> tag, and its closing partner </ul>. Each bullet is handled by the <li> tag, which requires no closing tag. Here is
an example of such a list:
<ul> <li>This is the first idea. <li>This idea follows. <li>This is the final idea in the series. </ul>
There are some Netscape extensions to <li>, which can change the bullet type. Here are two styles:
<li type="circle"> creates a circle bullet. <li type="square"> creates a square bullet.
Other additions to the list can include breaking up the individual lines with a <br> or <p> tag to get a little white space in between the list items. Use your visual judgment, always keep in mind that lists of this nature are very helpful
to visitors who need quick information delivered in a succinct and easy-to-access fashion.
Figure 4.19. Aids Quilt Home Page.
One of the most emotional Web sites I've ever visited, the Aids Quilt Project is literally the largest ongoing community art project in the world. It is a testament both off and on the Web as to how art can be used to unify people from all walks of
life.
Finding common threads is an important theme in helping build and maintain communities. And, as technology becomes more and more prevalent in daily life, there can be a tendency for people to withdraw into the fascination that computers can invite.
Scholars and analysts such as Nicholas Negroponte have looked at the issues surrounding what is known as "the personalization" of modern technology. Typically, such ideas refer to the creation of interfaces, in that the visual and navigational
aspects of a given form of media, in this case, the Web, should be geared toward people.
I like to take that concept a step further and say that not only should interfaces be personalized, but the interaction that takes place on the Internet is naturally humanistic. In this way, there is a global body of people from a variety of
philosophies, religions, and cultural environments. As the technology becomes more accessible and widespread, this concept becomes even more variegated.
The AIDS Quilt shows us in inarguable terms how community can be built and maintained on the Web. Yes, it is tragedy that brings individuals together in this particular instance. However, it is also hope and optimism, for the end goal is to help others
survive this devastating illness that can no longer be viewed as a problem of specific geographical areas or sub-cultures. This is a world-wide epidemic, and as seen here, people respond with the best part of their hearts.
From a design standpoint, the site is subtle with a lot of details regarding various activities, detailed information about the project and how individuals can become involved, and extensive AIDS-related information. Each section has a header, and what
is particularly impressive from a design standpoint is the use (this will come as no surprise to the reader, as shown already in this chapter) of shape and color.
Note in Figure 4.19 how the main header incorporates a circle. As you move through the site, different shapes and colors, such as triangles and purples (see Figure 4.20), can be seen. Each header incorporates different shapes and colors. This gentle yet
effective approach stands as a perfect example of integrated issues regarding the use of shape and color on Web sites.
Figure 4.20. The color purple and the triangular shape of this header add subtle and effective contrast.
Another point of interest regarding this site is the use of words within the graphics, creating layers of meaning and textures. Never forget that words are symbols too, and can be used as design elements that have great impact.
Powerful and moving, this Web site is worth a visit. Perhaps its a rather sobering place to leave you, yet I hope it also serves as inspiration, both through its intelligent graphics and sincere, dedicated, and humanistic expression.
Before moving on to the next chapter, I'm going to leave you with an ordered list of lessons and concepts from this chapter.
The next exhibit includes fashion shows, cosmetics, health, and lifestyle information. If you'll follow the curator, she'll be happy to lead you to the entry way to the next stop.
