Portfolio
A Kinder, Gentler Web Site

1. INTRODUCTION
2. KEEP YOUR VISITORS IN MIND
3. DESIGN YOUR SITE LIKE DISNEYLAND
4. YOU (ALMOST) CAN NEVER HAVE TOO MANY LINKS AND POINTERS
5. TAKE IT EASY ON THE EYES
6. USE METAPHORS AND EXAMPLES
7. SPACE MORE, BOLD LESS
8. YOUR VANITY, YOUR LOSS




Introduction

I consider clarity, simplicity, and a consideration for one's audience to be the most important elements in good design. As long as the message is understood, as long as the information stayed pure during its voyage, as long as the goal is met (and this usually involves the transfer of information), then I have done my job.

Everything else -- fancy colors, animation, rollovers, all these bells and whistles -- is secondary. By their nature, they cause slower downloads and more often than not, the misinterpretation of ideas.

But how, as a Web "designer", am I supposed to justify my fees if I don't include "tricks"? Aren't designers hired to "jazz up" the page, cram as much "killer design" as we can muster, just so we'll have something obviously tangible to show for the paycheck?

I like using the "umpire" defense -- notice how no one ever pays attention to a good umpire? It's only the bad umpires that people pay attention to, the ones that get in the way of the game being played. It's the same with designers, or at least I'd like to think so.

The following are some guidelines I use when designing and developing a Web site. They won't teach you anything fancy or flashy, just plain common sense. Enjoy.










Keep Your Visitors in Mind

Unless you're designing for a very small, very specific group of people, it's a good idea to keep in mind those others using different browsers and different computer setups. Not everyone has a 20" monitor set to 1024 x 768 pixels, not everyone has a T1 connection, and not everyone uses Internet Explorer for viewing.

Also, try to view your site as if it's your first time, and you don't know where everything is. Set your resolution to 640 x 480 pixels and check to see if the graphics fit. Check your site using a 56k modem and at different times of the day.










Design Your Site Like Disneyland

Notice how the most successful amusement parks let you know right at the beginning where everything is, and how easy it is to get there? Notice how you always know where the best stuff and the newest stuff is? Do the same for your Web site, especially if it contains many pages. "Lead" people to places that you are most proud of. Provide your own "tour guide" area or page that will make a good bookmark and starting point.

Without adequate links and pointers, a Web site literally becomes a maze, which may turn off some visitors, especially those who are looking for something specific that your site offers. If possible, structure your Web site "visually", as if it's a small community, where the pages are buildings, and each link is a street.

Disneyland's Main Street is a perfect example of a starting point. There are information areas, eateries, a train to take you somewhere, and a horse and buggy to take you somewhere else. Since the big attractions take up a lot of space (or their own web pages), there are signs to tell you where they are and how to get there. But no matter where you are in Disneyland, there's always something interesting to do (content), something interesting to look at (graphics).










You (Almost) Can Never Have Too Many Links and Pointers

One great advantage of the World Wide Web is the use of hypertext--use it whenever you feel that the viewer may want more information, but don't let the links get in the way of the original information. Because borders sometimes get in the way of visual harmony, if you do decide not to put a border on a linked image, include a text link next to that image.

Don't put so many links that they get in the way of reading or viewing the page. This means putting some thought on what the LINK, ALINK and VLINK colors should be, in regards to the other colors on the page, especially the background. Remember also that different computer systems may show colors differently, so be careful when choosing color combinations.

My own rule of thumb is, if in doubt, include a link, but don't get link-happy (unless, of course, it's a page devoted to links).










Take It Easy On The Eyes

Accent graphics (icons, buttons, smiley faces) should call attention to the subject matter and not to themselves. Use them sparingly.

Just as a room's wallpaper is less noticeable than the furniture, so should the background, in relation to the page's graphics and text. And just as a room's wallpaper is inescapable (wherever you look, you're always seeing a part of it), it should be the most unobtrusive aspect on the page. If there's a neat picture of a spaceship, make that an individual graphic, NOT a repeating background.

Also, take it easy on the colors. A lot of people browse the Web at the end of the working day, and their tired eyes may not take kindly to fluorescent and "hot" colors, especially if there's a lot of reading involved. Assign a separate graphics-intense page for color mayhem.










Use Metaphors and Examples

Notice how the best instructions you've ever read always provided examples, even pictures? Do the same with your Web site, especially if you're going to provide detailed information. Show at least one example, but not so much that the viewer forgets what you're talking about in the first place.

Especially with kids, the more real-life metaphors and examples you can show, the easier it will be for others to understand you and your Web site. When presenting a lengthy idea, pretend that you are telling a story, and construct your site like a storybook, complete with words and pictures. Don't worry about being "designy"; a simple but effective diagram is much better than one that looks "awesome" but is utterly confusing. Just look at a stop sign. Simple but effective, right?

If you can, include graphics, even animation, but keep them small enough so the page loads fairly quickly. And don't forget to use the ALT command, for those without graphical browsers. When in doubt, be redundant, through words, images, and links.

I say again, when in doubt, be redundant.










Space More, Bold Less

Whether it's text or graphics, don't pack too much stuff on one page, or else anything important you may want to say will get lost in the confusion.

Notice how easy it is to read this sentence?

That's because it's isolated from all the others. Try to emphasize just a few of the really important things instead of emphasizing everything. Also, move the areas of text around instead of doing everything left-justified -- it'll keep things more interesting and encourage visitors to stay a little while longer.

Use tables, alignment tags and other text formatting to call attention to certain passages, but make sure not to make everything bold, and don't CAPITALIZE EVERYTHING. Making everything bold or capitalized does the same effect as making everything un-bold or un-capitalized--everything looks the same, and the reader becomes confused as to what she is supposed to read.

Separate ideas into paragraphs. The space will let the reader know that you're either going to change the subject or take the idea into a new direction. It also provides some visual breathing room, a resting area for the eyes.










Your Vanity, Your Loss

It's tempting to fill a Web site with "awesome" graphics and use neat little tricks to have fun. Just remember to consider the viewer who may have an older computer or a really slow modem. Especially if you have information on your site that may be helpful to someone (FAQ, technical answers), you should minimize graphics and concentrate on the text. Better yet, you may want to have a text-only area that has the same information.

If you have some really good information that may help others, don't bury it somewhere down the page, or on another page. Let the viewer know immediately that this information is available, and put a link going to that information. There are a lot of pages that have valuable information that often get overlooked because they're preceded by a lot of slow graphics and too much information about the person.

Finally, ask yourself why you wanted to create a Web site in the first place. Is it merely to show off to everybody? Is it to find others with which you can communicate? Is it to provide information that may help someone else? Is it a little bit of all these things?










HOME | PORTFOLIO | SERVICES | METHODOLOGY | CONTACT
Copyright © Gerardo San Diego
gerardo@interknight.com
GSD small logo