By: Rene Pe Benito, Extreme Graphics Philippines

What is the main reason for the explosive popularity of the Web?

Sure the Internet, of which the World Wide Web is only a part, has been in use among scientists and researchers, long before the current interest on the Web. But what’s the difference between the lack of interest before and the phenomenal growth of the Internet now? Most agree because of beautifully designed sites!

What do I mean by that? By that I mean good-looking web sites and compelling content working together to attract and communicate with a visitor. There is a third element: Interactivity. But let’s take only what we can chew and leave interactivity for now.

Attraction to things of beauty is a basic human tendency! Whether you are conscious about it or not, you have an inherent sense for it. In truth, we all have it!

What can I say about content? Well, it is even more obvious. You surf the Net for information, information and information. If you mix aesthetics and content, what do you have? Not pure, boring information but one that appeals to the left and right sides of the brain. Information that you enjoy reading!

Your passion for beauty can be applied to your site
 

When you wake up in the morning, what do you usually do? Look at yourself in the mirror, of course, and make every effort to make yourself beautiful. You want to attract everyone’s attention. Your spouse. Your friends. Even people you don’t even know.

And good-looking persons and things captivate you too!

You web site is no different. If you want to get attention, dress it up like you would yourself or the people you admire.

What are you to do to make your web site appealing?

Would you do it yourself or hire professional help? Both! Good-looking web sites result from team effort--you and another person or persons. The risk of doing it yourself or one person alone is personal bias. You will turn up web pages only you or your polite friends would admire. It maybe an exaggeration, but you see a lot of it with personal sites.

Personal choices must be allowed to happen in business only when necessary or logical. After all, it’s your business that is at stake here. If you are to make your first million bucks you need to discipline yourself to make informed decisions and calculated actions.

Learn and unlearn the ropes now!

Web site design is a very broad subject. One article does not do justice to the importance and depth of this topic. But as with many entrepreneur or corporate executive just starting to learn the ropes, you simply don’t have the luxury of time. You have to be in Internet business now. You are itching to apply what you can learn or unlearn now to redesign an already standing Web shop.

Ten ways you can do now to set up a good-looking Web shop

What I have done is pick out from my experience and from others only the most essential things you can do now to set up a good-looking shop.

The first three steps involve ways you must do before the actual work of designing the web site of your dreams. The effort you spend on these preliminaries will give you a firm foundation from which to make decisions about the look of your site:

1. Start with your audience.

Begin by thinking about your audience--not any kind of audience. Would you want to invite everyone to your party? Decide whom to invite and keep.
 

Know what kind of persons they are, their wants or dislikes, what they are looking for.

If you target middle-aged male executives, know what clothes they wear, what colors they like, what sports they are engaged in. In what industry are they in sufficient number?

In short, profile your would-be web guests. It gives you some idea on what look your web pages would attract them.

2. Examine your company, product or service
 

How is your product packaged? With what colors, marks and symbols? What is the shape of the bottle or container? What typefaces or fonts are used? What are your corporate colors and the look of your logo?

For service companies, look at your portfolio and corporate visuals. You might have “packaged” your services using a particular look in a brochure, folder, slide or multimedia CD-ROM.
 

The idea here is to use the visual identity that has won you a big number of customer offline that can be duplicated or adapted to the Web. If your offline image is not appealing, chances are it will not be attractive to visitors on the Web as well.
 

Analyze and then draw a rough image of your web site

3. Analyze your competitors or others in the same industry
 

Your competitors might already be on the Web. Visit their sites and, if they are drawing a lot of clients, hopefully not from you, learn from them. You can’t duplicate what they have done but you can either improve on their weaknesses or offer a more compelling option.
 

Then, see how they present themselves, their products or services offline. Draw conclusions on what make them winners or losers.

4. Make a mental picture or draw a rough image

Having done the first three steps, the creative juice will start to flow. If not, go back to #1 to #3 above and review what you have done. You can then draw a mental and rough image of how you would like your home page to look like.

Don’t be afraid to experiment. Good design does not happen in a single burst of creative energy. It comes from drawing the best from out of a few choices. Draw as many variations of your initial image as time would permit. Use basic forms of square, rectangle, circle, ellipse and polygons to layout the position of the headline, the photo or graphic, the body of text and navigational elements. Use colored pencils or crayons to rough out some color ideas.

If you think this part needs an outside resource, I agree. Compelling web page design is in the realm of professionals. But you still need to make a few rough sketches to give a professional graphic designer some idea of what you want. Let’s make one thing clear here. A web programmer or coder is not a graphic designer. I have nothing against the so-called web technologists but most graphic designers have the talent and the experience to communicate ideas visually. There are authoring tools in the graphic designer’s arsenal that can do the job of coding more efficiently than raw coding. Web coders can do a better job at server side scripting and coding, I must admit.

Don't overlook bandwidth, web-safe colors

5. Pay close attention to bandwidth
 

In your desire to achieve a good-looking entry page, don’t overlook the bandwidth problem. Your beautifully designed home page may take too long to open and drive away your audience. Why? Too many memory hugging graphics adorn your sites. Most graphic professionals know how to get around this problem but you have to discuss the bandwidth limit at the start.

A good rule of thumb is 40 to 60 kb web pages for most visitors and dial-up accounts. It can be higher for business-to-business web sites with faster access and robust server. If your product is for the general public and not concerned about appeal, work on 25kb and the whole Internet world is yours to invite.

6. Choose your colors wisely

There are two things you need to remember about colors: their meaning and web-safe colors.

Colors are many things to different people. The colors you choose create emotion. They can be soothing or exciting, stirring or calming. Choose colors that properly communicate your message, your product or service. Green can express optimism. Navy blue means conservatism. Red reminds us of excitement. While colors have favorable meanings, they can convey negative emotions too. Green can mean greed, blue for depression, red for aggression.
 

Did you know that there are only 216 colors that can be correctly displayed in any computer monitor? We call this web-safe colors. While it is not possible to create all your colors into this color palette, you must make sure safe colors are used on large areas of your page. For instance, your background, table and text colors will display consistently if you use web-compatible ones.

With dedicated Web graphics softwares like Adobe ImageReady or Macromedia Fireworks, you can now achieve colors as close as possible to acceptable colors. These can help you a lot on color management and consistency from page to page.

Fun or folly with fonts; going easy on graphics

7. Playing with typefaces is fun but amateurish

Fonts are fun! Nah—too many fonts are not fun on the Web and not even justified in any professional publication, if you ask me. Unless you have a fonts foundry and selling them on the Net, do not use more than the absolute maximum of three typefaces. Use one typeface for head and sub-heads and another for the body. Then use different styles (such as italics), weight (such as bold), size (such as +2 or 10 points) or color for various uses.
 

Choose typefaces that are compatible with most platforms or use one or two alternative fonts in the HTML tags. You can use Arial, which is available in most Windows operating systems, and add Helvetica for Macintosh. Better still but not on bandwidth is convert your fonts into bitmaps (gif or jpeg) to make sure they display correctly on all platforms.

Designers now use Cascading Style Sheets, which is similar to Styles on your word processor, to better control the appearance and consistency of your fonts from page to page in your entire site.
 

HTML-assembled tables and the single pixel gif lend some, however unwieldy, control over the layout of text (and other elements) on the page. This is in the domain of the web graphic designer cum coder. Basic principles in print design such as white spaces, claustrophobic pages, text contrasts, kerning, indenting and the likes can now be applied even on web pages.
 

Even if you are not a graphic designer who is usually picky about types, learn more about typography. It will help you appreciate its contribution to readability and aesthetics.
 

8. Pictures are worth a thousand words

You can reduce the number of words, and the number of eyestrain, to explain ideas using photos or illustrations. For instance, instead of just describing your new formula for hair growth and using too many word about the outcome of using it continuously for three (3) months, put “before and after” photos to show what you mean.

Using photos and illustrations is not simply a matter of pulling it out from a photo album or from your hard disk. You need to have the proper hardware, software and techniques. This process is best left to professional graphic designers with web design experience. If you don’t mind additional man-hours and financial resources, go ahead! You might just like it and make a living out of it or hate it and vow never to underestimate a professional web designer again.
 

The ultimate goal of processing all graphics for the Web is balancing download speed which is tied to file size and aesthetics. This process is referred to as optimization.

Optimizing graphics for the Web involves conversion to web-compatible formats such as gifs, jpegs and pngs, which formats to use for which graphics and how to compress them to an optimal file size. The physical size of your image is as important. The largest image you can display for most monitors without scrolling is 640 x 480 pixels.

A substantial speed gain can be achieved with color reduction. Instead of using all 24-bit (true-color) images, settle for 8-bit, web-safe colors except for images that have smooth gradations. And, don’t ever use more than 72 dots per inch resolution. Higher ones are only for those destined for print and other media.

One last crucial point about graphics! As with any element in your web pages, text included, use graphics (and animated gifs) sparingly--especially not for decoration and for no other purpose than to enhance your message. Why contribute to more bandwidth problem when only the most important graphics can give your page an even more professional look.

Showing a friendly site; jumping on rich media (?)

9. Make your site user-friendly

While there are yet no hard and fast rules on web page structure, which can restrict the freedom-loving net citizens of the world, site guests have subtle fondness towards certain elements.

Respect the position of the logo on the top right or the left. They have become accustomed with the left vertical margin, and now the right, to contain some form (text or button) of entry to another page or another site. When scrolling to the bottom, clickable text and copyright are all too familiar to everyone. They’ve come to expect some banner ads blinking repeatedly on the top of the home page as if it has a monopoly of that space. They know that underlined text and the cursor changing from an arrow to a hand icon suggest a hypertext or hotspot. These hypertext and hotspots are basic element of interactivity.

Are we seeing the death of creativity? Hardly! Imagine the position of your ears, eyes, nose, hands and legs. Would you want them located somewhere else?

These expectations can vary over time. In fact, a lot of sites have introduced creative uses and designs for frames. Still others have used nested tables with links alongside the body of text for “jumping” from one page or site to another.

For now, give visitors what they expect to find from your site. They will sense a friendly site and encourage return visits.

10. Must you jump into the Multimedia mania?
 

This is a hotly debated issue. While multimedia or rich media engages your audience in a variety of ways from sounds to jumping text, it does not go easy on the bandwidth, the browser and the search engines.

Despite advances in compression and streaming technologies, the long download time still invites the dreaded “back” or “stop” button click from your visitor, that is, if it does not freeze his browser. When you’ve spent hours and money submitting your web pages to search engines, the situation is even more acute. Search engines misses out indexing the text contents of rich media.

If you must employ multimedia such as Flash, Shockwave or QuickTime for product demos or presentations, provide a link to a separate page. Others use JavaScript to automatically detect the required plug-in and open the multimedia page.

Moving on...no matter what!

The next best thing to knowledge is application. I have given you some, but regrettably not all, working knowledge of how to create good-looking web sites to appeal to visitors and keep him coming back for more. Even if you don’t dirty your hands on the actual design work, you can be one that encourages the creator rather than get in the way. If you’ve decided that designing for the Web and running your business fit nicely as your cup of tea, go ahead and make your first attractive web site.

And, if you want more, I've got more design tips for you at my publicly accessible web site (I do have one and a private one too, where I mix and match crazy stuff and serious work, a lot yet unfit for public consumption) at www.exgraph.com.

What is that I hear about web surfing with wireless phones? Is it coming or has it arrived? No matter! Let’s get on with our Internet business and earn before we yearn to learn more--that is, designing web pages for yet another set of "unwired" audience.

Copyright © 2000, Rene Pe Benito, Extreme Graphics Philippines

Rene Pe Benito is a Filipino Communications and Graphic Designer for Print, the Web and Multimedia. He worked as a Marketing Manager for 10 years in a healthcare company that markets international brands. He has done marketing work for 12 years and another 7 years designing visuals for small and not-so-small corporations.

Aside from a web site accessible only to certain friends, he maintains a publicly accessible web site at http://www.geocities.com/exgraph/ where he publishes his articles and that of others. He can be reached at webmaster@exgraph.com or info@exgraph.com.