This is perhaps the most difficult chapter, because not only are there many stunning personal sites on the Web, but there are also sites with elements that might make a designer's eye cringe. You'll find both within this group.
One need only look past bad design, or respond in awe to non-designers creating brilliance in both visual and human content, to understand how personal pages can be used as inspiration for the Web designer. The Web is a place of self-expression and, as
such, offers more opportunities for professionals to learn about people—who they are, what they want, and what they need.
The lessons in this chapter are as diverse as the people within. I begin with a discussion of humor and parody, and how important a tool that is for day-to-day enjoyment as well as within the commercial realm. This is summed up by the Squeegee Guy, who
appears to want to help us all have clearer Web viewing by washing the insides of our monitors. Mat Cooper then offers up a nice use of frames for navigation. Here, you'll look at some of what it takes to create simple framed sites that work, both in form
and function.
You will also look at the use of the horizontal rule with a page from Jennifer Ringley. Fresh treatments for old ideas (such as pets on the Net) are served up by the very creative Amy Martin. Kim Scott helps teach how designers can keep up-to-date with
the ever-changing Web technologies. Adrienne Dailey's Web explorations fuel a discussion for creating and working with background images. Typography is the issue of the day with Heather and Selene, a site that inspires a discussion of the elements of font
control.
Shoel Perelman shows off the streets of New York as the learning leans toward a more philosophical view of the humanization of the Web. Closely following Perelman's site is a look at text alignment, and the need to move away from centered text, which
the Web seems to have so much of. This can be seen on Eve Andersson's pi page. Finally, landing in Los Angeles, get in Roberto Ocha's Low Rider and cruise the streets checking out graffiti, Latino Hip Hop and Rap Music, and Chicano slang. The learning here
is how to set images free from table borders and look at other ways to organize information that separates it intelligently without jarring the eye.
Most importantly, you'll meet people here. And, hopefully, that will encourage you to use the Web to meet other people. The world is truly small, and the Web is, literally, a backdrop for humanity's many faces.
Figure 9.1. The Internet Squeegee Guy.
Home pages have to catch the eye, the heart, or some aspect of humanity in order to be a lasting experience and not just another stop along the virtual roadway. The Internet Squeegee Guy captures the funny bone, wrestles it down to the ground, and
leaves visitors chuckling at the simple but effective humor.
Using the road metaphor, the Internet Squeegee Guy site visually accosts you, the visitor, with squeegee in hand, ready to clean your monitor for some of that spare change hanging out on the desk. Of course, you can choose to push him away, as seen in
Figure 9.2. It's such a clever idea, rendered in a witty fashion, that the site stands as a perfect example of how humor can be a major part of both personal pages, and, when thought about in detail, can be an effective part of commercial media as well.
Figure 9.2. The Internet Squeegee Guy rebuffed.
Parody and humor are extremely effective devices, and are used in advertising, sometimes to great success. Conversely, they can also be easily misinterpreted or perceived as a cruel trick, and some media masters have used both to throw mud in
competitor's faces.
Learning the art of parody and humor is a good thing for a Web designer who seeks to create pages that have diverse approaches. However, humor is not to be taken lightly in the professional world. It's one thing to create a personal home page using
mimicry, but a professional advertising campaign that seeks to be funny must be very well thought out.
One example of effective application where parody and humor is used effectively is in Web publishing. With more and more Web designers becoming involved with the emergence of magazines and newspapers on the Internet, learning to design comical visual
and content treatments is becoming part of the daily job.
The following are some thoughts for Web designers looking at humor as a design tool:
Figure 09.3. Mathew Cooper's home page.
This terrific site is a combination of personal art, "shameless" self-promotion, and a fish-eye view of what it's like to be a modern escape artist.
This is no joke! Mat Cooper regularly ties himself up in chains and dislocates his shoulders to get out of the chains—whether he's submerged in a fish tank or locked in a Houdini-style crate. "I may not be as good as Houdini" he says,
"but at least I'm not dead."
Mat's site is really exceptional in quite a lot of ways. The concept is fun, he's an interesting guy with a great style, he's obviously a top-notch artist—there's a gallery of some of his oil paintings (see Figure 9.4)—and he's done a very
fine job of designing a Web site that truly sizzles.
Figure 9.4. A painting by Mat Cooper. I am particularly fond of the fact that he chose to use frames as a navigational method on the site. He does so in a very logical fashion, not impinging upon the space
necessary to express his art, but, in fact, defining that space.
The left frame is used for navigation, and the information loads into the right frame. This is a common use of frames, but remains one of the more intelligent uses. Some sites, even really great ones, can go overboard with frames, almost as if the
designers are trying to break up the space as much as possible without taking into account design sensibility. Very rarely does more equal less in a situation such as this, and, in fact, it's a good rule of thumb to avoid using frames unless the design you
have in mind really will be enhanced by this technique rather than distracted by it.
Frames tend to be fairly complicated. For a simple set up, like what you see throughout this Web site, it's a bit more straight-forward. You'll need to create three primary files for a framed home page. The first primary file is the frame's file. This
file will hold the commands for the frame creation, as well as the opportunity to offer a no-frames option for those unfortunates with browsers that do not support frames, or for people who simply dislike them (and many do).
Next on the list is the HTML that controls the data to appear in the left frame. I tend to call this the "menu" file, and in this example (as in most instances), it is the file for the navigation. Then, there's the HTML for the data in the
right frame, which, for your main page purpose, is the index file.
The following shows the general syntax for each of these items:
If you get all entangled in this, might I suggest an e-mail to Mat for advice on how to escape?
Figure 9.5. Jennifer Ringley's home page.
Jennifer Ringley has created a warm and intimate journey through her life and art. Her artistic talents are quite obvious in the varied and attractive pages she has placed on the Web. A particular treat is her portfolio section, with a collection of her
artwork for viewing. Another favorite section is Anatomy One-Oh-One, which is a humorous and poignant look at human anatomy through Jennifer's experience of her own body.
Jennifer's home page is very sophisticated, with pastel swatches coloring the navigation options. The one confusing element is the use of horizontal rules at the top of the page. This is such a common oddity that I felt it would be beneficial to discuss
it from a design perspective.
Horizontal rules are easily created with the <hr> tag, which places a rule across the page. I'm sure you've seen them—they are used to death, and rather inappropriately. Horizontal rules have actually come a long way in terms of the arguments
available. I'll look a little more closely at the horizontal rule tag in a bit, first I'd like to talk about when to use them effectively.
Basically, a designer will want to use horizontal rules rarely, if ever. It's that simple! A very skilled designer will be able to employ the horizontal rule and control its elements with the following arguments, but most of the time, horizontal lines
within text create unnatural breaks. This is especially true when a line comes immediately under a title and between the body of text:
MY HOME PAGE_________________________________________________
Sed tamen sine me loqui apud misericordiam tuam, me terram et cinerem, sine tamen loqui, quoniam ecce misericordia tua est, non homo, inrisormeus, cui loquor.
et tu fortasse inrides me, sed conversus misereberismei.
The horizontal rule between the title and the body of text breaks up the natural flow of title to contents. The following treatment, without the rule between the title and contents, is more appropriate:
MY HOME PAGE
Sed tamen sine me loqui apud misericordiam tuam, me terram et cinerem, sine tamen loqui, quoniam ecce misericordia tua est, non homo, inrisormeus, cui loquor.
et tu fortasse inrides me, sed conversus misereberismei.
I think that the apparent rule convention became popular on the Web because people were using it as a way of underlining a title before underline tags were widely available. Whatever the reason, the long line break is unnatural.
But, this type of line break is much less a Web no-no than the use of horizontal rules to break up every paragraph on a page. This is not only unattractive, it is unnecessary, and in a word, boring. When I see multiple horizontal rules on what is
supposed to be a professional site, I'm tempted to just bail out and leave the page thinking, "amateur!"
So, the simple tip is don't use the horizontal rules unless you're absolutely sure you know how to integrate them well into a design, or the desire to use them overrides any wisdom I have to offer! Or, be inspired by Jennifer Ringley, and use graphic
images or horizontal rules that are used as part of the design work, rather than only to break up space. (See Figure 9.6.)
Figure 9.6. Horizontal Elements Provided by Graphics.
Here are some arguments to play with to see if you can disprove my point:
Note that Netscape and Internet Explorer treat rules differently—another argument that using them very judiciously is in order.
Figure 9.7. United Kitty Front
The lesson here is that old ideas can be injected with new treatments. Amy Martin has done just that with her very well-designed site. But instead of the tired "this is a picture of my pet" page, Amy offers an entire environment based on her
cat, Mina (or maybe Mina has based the site on Amy?), including a personal home page, from which Mina, among other things, runs the official United Kitty Front terrorist page.
The challenge to designers and, in fact, to the hobbyist home page creator is if you're going to fall into the traps that other people fall into, such as talking about hobbies, habits, and pets, fall with unique style.
For some, this might come easily. For others, departing from a norm is a little bit difficult. But, here's the crux of the Web: There's room for all kinds of things. Both the professional and hobbyist should approach the Web as a dare. What do you offer
that no one else does? What do you know about yourself or your product that no one else does, but that is unusual or interesting?
Most people have unusual interests or habits, and sometimes these come in different ways. I have studied biology, particularly genetics, with great enthusiasm for many years, and have always been academically oriented. So, imagine the shock when people
come to visit me at home and I'm watching a soap opera on TV instead of playing with a microscope! I believe that the celebration of dichotomies is very potent; in a global arena such as the Web, what could be more appropriate?
This is a strong message for corporate image because many large companies are thought of as destructive, or even evil. Many people hate Microsoft and Bill Gates, but, whatever the reasons, the fact that Microsoft employs people world-over and has
boosted global economy while being profitable for its CEO is important!
Use the pet model as an example, but extend that to your product. For instance, many people like cats and dogs, and I for one want to share my cat's antics with the world. I think she's unique and special, and she is. But instead of choosing to say
"here's a picture of my cat," like so many do (and, trust me, once upon a time in Web history I did just that—and it's still out there on a server for the unsuspecting to stumble upon), ask yourself what way can I approach this that is
completely different from what others have done?
Amy Martin might not be attempting to create a major Web industry like Bill Gates has, but Mina the Cat certainly reigns her domain like a corporate magnate, in full control of her corner of the Web.. (See Figure 9.8.)
Figure 9.8. Mina the Cat's home page.
Figure 9.9. The 4 Iguanas home page.
Following in the paw-prints of Mina the Cat comes the tales (tails?) of four iguanas: Guana, Hopper, Brownie, and Bumpy. Vital statistics on these unusual critters are provided, along with biographies, how-to care for iguanas, and a nice list of online
resources about reptiles from Kim Scott's home page.
Especially impressive is the overall design and clarity of Kim's work. (See Figure 9.10.) It's no surprise that she is a graphic designer by trade, although this personal home page entry into the Web comes off looking like a design that came right out
of one of the best new media groups going. A good graphic designer does not always make a good Web designer, for a number of reasons. One such reason is because graphic designers are typically used to working with large, high resolution images, which are
not appropriate in size or graphic quality for the Web. Also, Web graphic optimization is a technical skill that must be learned, not assumed.
Figure 9.10. Note the precision and clarity of Kim's design.
I had the chance to chat in e-mail with Kim about the challenges faced by a traditional graphic designer who seeks to work in the Web medium., I asked her how she was able to incorporate such sophisticated design elements into her first personal Web
project successfully. Her response was that she read several important books, as well as asking people that have done Web projects just how they did the work. Most interestingly, she discussed how she had been surfing the Web for a time before beginning to
work on a design.
This speaks to an important element of Web design: The study of the Web itself. I cannot impress the importance of this lesson on Web designers enough, and that is that you must spend time every working day simply surfing the Web. Seeing what is
out there, what has been successful from both a design and popular perspective, and, as Kim puts it, knowing "what people expect, what they hate," puts the designer in a much better position to compete and excel at the art.
Another interesting point is where to go for information. There are several excellent Web sites, as well as countless books, magazines, newsgroups and other resources that Web designers need to be aware of. Obviously, it is impossible to keep up with
everything, or for me to list every resource available to you here. Appendix D, "Resource Cross Reference," includes a detailed listing of resources for the Web designer, and you can pick and choose what works for you.
There are specific Web sites that must be on a designer's daily routine, and they include
And, I'll say it once again—surf the Web. That's the best teacher of all!
Figure 9.11. Adrienne Dailey's home page.
Adrienne is an artist who shows a lot of promise as a Web designer. Her resume page is especially well laid out with good use of space, interesting GIF animations, and links to more information about her and her various projects. Some of those projects
include other Web design offerings, many of them are quite strong and impressive.
Although her best work is definitely found deeper in the site, her initial pages don't show off her more mature artistry. In fact, some of the backgrounds she uses don't mesh well with other graphic elements, and they are entirely too dark, even if they
are original and interesting. (See Figure 9.12.)
Figure 9.12. Adrienne Dailey's backgrounds.
It is extremely important that Web designers understand that the viewing area of a Web page must be visually treated as a whole. Graphics, text, and other elements should have a natural flow, not be separate elements that are randomly placed without
regard to other objects in the space. This is integration, and it can begin with background images.
I want to again blame the evolution of the Web, because I really think this is why people don't have a better grasp of how things should blend. Background image support didn't come along until it was introduced by Netscape in late 1995. So, it really
hasn't been very long that this image support has been around. As such, Web sites often began with a gray background. Then, along comes background support and wow! Everyone had to go get a background just to enjoy the textures and colors.
But now, all designers need to move toward a more sophisticated touch. Whether they have been doing this for a while or for a short while, the integration of backgrounds is important. This integration shouldn't be random textures or designs, too dark or
too light, and it's time to put away those repeating watermark style backgrounds.
Figure 9.13. Heather and Selene's Mystical Realm.
Here's another example of a home page that offers something unique and fun to visitors. Become one with their Web site, or so they tells us, in a tongue-in-cheek fashion. They serve virtual donuts and snugly teddy bears, too, so how can you miss?
I enjoy Heather and Selene's personalities; they have boldly state that they are out to have some fun. They have created a colorful, wacky page. However, I'm having a hard time reading their stuff, even with Netscape 3.0. Why? Font mixing!
The <font> tag and its arguments in HTML 3.0 are wonderful things, and I'm really happy that fonts and some font control have finally been introduced to the Web. It's long overdue, and has an even longer way to go. I'm not qualified to tell you
how to mix fonts appropriately, but I am qualified to tell you that using every font face available on one single page is a bad choice for Web designers seeking to create commercially viable sites.
Certainly Heather and Selene have had a great time playing with fonts (see Figure 9.14), but for the serious commercial designer, fonts are a major part of artistry. Font mixing is itself an art. It's so much an art that graphic designers and
typographers spend major chunks of their lives in an effort to esthetically create, use, and mix, fonts.
Figure 9.14. Heather and Selene have had fun mixing fonts, but for commercial design, font mixing is best left in the hands of pros.
I'll examine three font elements that designers can use to begin playing with type, again with a reminder that for commercial development, knowing how to use these elements is a key ingredient in creating successfully rendered typography on the Web.
Figure 9.15. Shoel Perelman's home page.
The most fascinating aspect of Shoel's page are the links from it to his work as a photographer. The New York street scenes photographs (see Figure 9.16.) are a testament to the Web as a free space for artists. Philosophically speaking, the recording of
history has, as a result, become increasingly easier. And, if the ether-based space of the Web lasts, it will be, among an advertising or marketing venue, a vast time capsule of human experience.
Figure 9.16. Shoel Perelman's New York street scenes.
Even for the commercial Web designer, the heart-based message of humanity cannot be overlooked. I remember as a child hearing about the glories of technology. Oddly, my schoolteachers, the books I read, the comments I heard from adults all around me
regarding the advancement of computers and related technologies, although optimistic, were also tinged with fear. It was a paradoxical message for a young mind, and I believe that many of my generation share that fascination and fear of technology.
The fear, I believe, comes from the feeling that humanity will be lost in the vast fiber and impulses that make up technology. Jobs will be taken away from people and given to computers. A greater split between those that have, and those that have not,
will be seen throughout the world. In some ways, the negatives have indeed come to light.
But what few could foresee, , was the way that communications and computer science would blend. That this technology would be combined with telephony was perhaps anticipated by some, but never really expressed as a future enhancement to life and living.
Instead, the general sense was always that computers were separate—either functional tools or machines that could think on their own.
What now exists is quite different. There is, in fact, an unequaled opportunity for people to express themselves, for information exchange, and for rapid, intimate global communication. Certainly these things can be used (and are sometimes) for less
than altruistic purposes. But, in these early days of the Web, there still persists a sense of optimism about how the tool can be used as a place for personal expression.
What Shoel Perlman's page shows us is not only a glimpse into an individual, but into the art of that individual and what that art expresses. The street scenes of New York series allows an unadulterated, non-commercial, human view of life beyond the
screen. The one comment I have to make it more effective is to focus on the power of the photography, and place it in a forward section of the site, perhaps adding thumbnail options. (See Chapter 4, "Sites that Teach: Arts,
Culture, and the Humanities," for details).
An incredible opportunity exists for designers to continue to stretch the possibilities of the Web, creating much more than hard data. The quest is to be able to take a personal story and make it global, take a global issue and make it personal, take a
product and make it important and necessary.
Practically speaking, though, you need to consider when it is appropriate and powerful to add a sense of people to Web sites. Staff pages, biographies of industry leaders, humorous stories from salespeople, and pictures of real human beings in
action are all examples of how to add a sense of individuals to Web sites. The humanization of the Internet is an important tool to keeping the Internet interesting. This provides a fantastic, effective way of providing something worthy to the expansive
collage of individual expression.
Figure 9.17. Eve Andersson's home page.
She did it for the love of pi. Not cherry, not blueberry, not homemade apple cinnamon with vanilla ice cream on top, but pi, that 3.14159, and so on, line of digits that, according to Eve, is "absolute beauty."
There are several poems to pi, and a pi trivia game (which I was almost completely unable to play due to a personal fear of pi). Eve is famous, too. Magazines, newspapers, and Web watchers are all familiar with her homage paid to pi and her page's
long-term residence on the Web.
People interested in math should have no problem catching on to the following, simple equation, and the professional Web designer should study this one very hard. There will be a test later for design folk. This is a pop quiz, when least you expect it.
I promise not to ask any questions about pi, though. But, I do hope you will learn and remember the following:
Text that is centered without
any real purpose = a design problem
It seems perfectly natural to want to center text. It seems to look better, at first glance. (See Figure 9.17.) Centered text feels like a departure from the dominant left-aligned written page. There's a perfectly natural desire to want to center text,
but unless it's being done as part of a sophisticated, flowing design, it doesn't function well, and is actually more difficult to read and follow.
Figure 9.18. Centered text does not make pi.
Text alignment is also part of the graphic designer and typographer's domain. Lessons taken home from the best designers will teach that there are four types of alignment: left, where each line of text begins flush left; right, with each line of text
ending on the right margin; centered text, where both edges are ragged; and justified text, which forces text to expand or contract to meet a flush left and right.
For the purposes of Web design, understand the first three. Justified text is generally used in print and has an entire set of problems all its own. But left aligned, right aligned, and centered text all play important roles in designing Web sites, and
should be studied carefully.
Creating pages that use a variety of alignments can aid in creating an elegant, high-style look, as well as providing some white space, which is needed to rest and lead the eye. Centered text should be used minimally. After playing with alignments, you
will begin to get a feel for when and why it will be necessary to use.
There are three common ways to force justification of text. The opening and closing <p> </p> paragraph tag (which is still rarely used because of the way that browsers handle the pre-HTML 3.0 revision usage of paragraphs) comes in
especially handy for this design feature. Here is the syntax:
<p align=left> Will left justify any text </p> <p align=right> will right justify any text </p>
The same thing can be done with the <div> tag, which is used to create individual divisions and to center text.
<div align=left> Left justifies the text </div> <div align=right> right justifies the text </div> <div align=center> Centers the text, just as using the <center> tag </center> would </div>
Finally, tables can be used to break up text areas, and alignment arguments are placed within the table data <td> fields. For example, the following syntax would render a table with two columns, the first column text will be left aligned, the
second, right.
<table border=1 cellpadding=10 cellspacing=10 width=500>
<tr>
<td align=left>
Here is the left aligned text.
</td>
<td align=right>
Here is the right aligned text.
</td>
</tr>
</table>
You will find that using a variety of text alignments, rather than continually centering text, adds to a page's visual texture, readability, and attractive look.
Figure 9.19. Roberto Ochoa's home page.
As with Shoel Perelman's look into New York life, Roberto Ochoa's page is a glimpse into the world of Los Angeles's graffiti, low riders, Latino Rap music, and slang speech. "I did the hunting and searchin' and to my disappointment I found we were
hardly represented on tha net" Roberto states, regarding Chicano presence on the Web.
Roberto's site is housed at Stanford, where he's a student in Electrical Engineering and Software Design. He's put together a site that expresses personality and pride, with no apologies. There is a bold assertion that the Internet is a good place for
the growth of the individual, as well as cultural self-esteem.
The site is simply designed, with some choice links and excellent pictures of posters, graffiti, people, and tattoo art. Many of the pictures are placed within a padded table to create a framed area around it. This is very commonly seen on personal home
pages as well as commercial sites. Although it seems to be a popular way of separating elements, it is contrary to a natural visual flow.
This constraint of elements, in order to create visual separation, is an interesting phenomenon; I've noticed that many clients respond well to information that fits within a table that has cell padding. I think that it really does help organize
information—when other forms of doing so are not obvious to the designer who is not yet completely aware that breaking up Web space must be done very thoughtfully.
With effective use of white space, justification of text, use of fonts, and the sizing and treatment of photographs and art, the organization of information becomes clear, without the need to draw literal dividing lines.
I took elements from one of Roberto's pages and re-arranged them to show how a natural separation of elements could be easily created to enhance the visual experience as well as better feature the important and creative expression of the content. (See
Figure 9.20.) I did this very carefully, not changing the words or the graphics. However, if I had a free hand with the elements, I would have matted the graphics, resized most of them (the center color graphic is simply too big), and optimized them for
better load times.
Figure 9.20. A rearrangement of elements enhances the information.
Here are the steps I took:
Web designers and home page hobbyists can use these simple tricks to improve the layout of their designs. Stay away from breaking up space with non-design elements, such as the table border, even if it feels necessary. With a sophisticated layout, the
effect of separating elements is achieved, but to a much better visual effect.
I want to thank all of the people involved in this chapter for candid accounts of lives and experiences. I want to also thank them for allowing me to go in to their art with a critical eye, to take the offerings they have given the world and use that as
an angle for teaching the following elements of Web design:
Now I'll move from the realm of the personal, to the personally joyous: sites for kids!
