Its Like Print, Only Different
- Have you ever priced 4 color printing? - Color
is free on the web.
- Have you ever found a typo in your phone number
after having 10,000 copies of a mailer printed? You can fix
it immediately at no cost on the web.
- Is the cost of mailing your monthly newsletter
bigger than your rent? Distribution is much cheaper on the
In short, the web offers the potential for enormous
cost savings in advertising, sales and customer service compared to
print. It can also include features, like movies and sound, that are
impossible in print.
Putting those advantages to work for you, however,
requires a design that makes it easy for visitors to quickly find the
information that they need to make buying decisions. The key design
elements that go into developing an effective web site are described
below. Some, like the choice of fonts, are similar to the kind of decisions
that you may already make in designing printed material. In some cases,
like the use of color, the costs will be very different usually
much lower on the web versus print. Many factors, however, are
unique to the web and must be included in the overall design of your
Your On-line Identity
Thousands of new sites are added to the web
every day how will your site stand out from the crowd? You probably
do not have a budget large enough for a site that is so innovative that
people will come just to see the really cool Flash movie or 3-D world
that youve created (Even if you did, those sites attract mostly
tourists, not customers).
There are several things that you can do to
create a unique identity that do not add to the cost of your site:
- Pick a domain name (the something.com
that people enter to go to your site) that identifies you. It could
be "joeshardware.com", or "bills-sushi-on-main.com",
- If you have a logo or other unique identifier,
use it on you site. People that already know you will recognize that
its your site and new visitors will remember it when they come
- The most important thing that can differentiate
your site from the rest is a clean and simple design that provides
easy access to the information that visitors are looking for.
▲ Return to Top
Design and Layout
The title of one of the most popular books on
web site design sums it up nicely: "Dont Make Me Think."
People have short attention spans and very little patience when they
visit a web site, especially for the first time.
- They want to find useful information on every
page, with clear directions showing where to go for more.
- They want to be able to make choices about
where they go and in what order.
- They want to know what they need to do at
every step, especially when the site asks them to do something, like
fill out a form.
- They dont want to get lost or be led
down a path with no easy way to get back to where they started.
- They want to be able to jump from one place
to another, not re-trace their steps one-at-a-time.
- They dont want to wait forever (more
than about 10 seconds) for a new page to appear once theyve
made a choice.
In other words, entering your web site should
be a lot like walking into a store: the aisles should be logically arranged
and clearly marked, the shelves stocked with products they want, and
they should feel welcome to be there.
▲ Return to Top
Around Your Site
Print media is mostly linear. You read brochures and
books from front to back (at least if they are written in English or
European languages). Newspaper articles generally run from the top to
the bottom of a page, perhaps with a clearly marked jump to a second
page if its a long story.
The web is different it is non-linear. That
is, users can move from page to page in whatever order they choose (you
could design a site that restricted them to a single order, but that
would frustrate most of your visitors - see Overall
Design and Layout). The ability to make those leaps from one place
to another is what makes the web a web.
You decide how users will be able to move around you
site by creating the links between pages. On a small site, every page
might have links to every other page, making navigation easy. Laying
out navigation for larger sites requires more care. There are three
basic designs that you can use:
Large sites will probably combine all three designs:
hierarchical at the top, with networks, hierarchies and linear links
at lower levels, depending upon how you want the user to move. For example,
while you would not use linear links where you want the user to explore
your site, they are appropriate where the user is filling out pages
in an order form.
The important thing is to understand and plan how
you want the user to move about in your site and develop a design that
accommodates that plan.
▲ Return to Top
Text and Fonts
Anyone who has used a computer to prepare a flyer
or a brochure is used to having dozens of creative fonts, in any size
that you might want, to chose from. You have absolute control
from size and spacing, to position on the page - over how they will
be displayed on the page.
Preparing text for the web is different in a couple
of very important ways. First, you no longer have complete control over
how the page will be displayed on the visitors screen. This is
because each web browser program, even different versions of the same
program, will display pages slightly differently. Also, the user has
choices that they can make regarding size and font that will be used
to display text. The size of their screen and resolution of the "window"
in which they view your page will also have an affect on how the text
The second difference is the limited number of fonts
that can be used to display text. The web is designed to be used by
people anywhere, using any kind of computer. In order to achieve that
universal access, the developers of the web and the browsers that are
used to view it, limited the basic set of fonts that would be supported
everywhere to two basic styles:
Serif: Times New Roman, Times, Georgia and generic
Sans-serif: Arial, Helvetica, Geneva, Verdana, and
If you use a font that is not supported, and
is not on the users computer, then the page will be displayed
using the browsers default font. This can really affect how your
page looks, so the best thing is to stick with the list of supported
fonts for all of your text.
But, you say, youve seen plenty of web
sites that use fancy fonts how do they get around this problem?
Its simple they create graphics using whatever fonts they
choose and place them on their pages like pictures. Thats why
you mostly see non-standard fonts used for things like headings, buttons,
captions on pictures, etc. The body of the text will almost always be
one of the standard fonts.
If you really like a particular font, couldnt
you just make the whole page a graphic? Sure, but there are a number
of downsides to that:
- Graphics take a lot more file space than
text and take can much longer to be displayed more
information about graphics.
- Graphic images have a fixed size they
cant expand or contract to fit in the browser window.
- The quality of the graphic text may not be
as crisp or clear as text that is displayed by the browser using a
- The large search engines, like Google and
Yahoo, cannot read text that is in a graphic image. As a result, they
may not show your site when users enter search terms that include
words that your site uses (see our section on promoting
your site for more information on search engines).
Serif or Sans-serif Which to Choose?
When it comes to picking between the standard
fonts, a general rule of thumb is to use serif styles for the body of
your text: it makes it easier for your eye to follow lines of text across
the page. It does look more formal, though, so you might want to use
a sans-serif font if the overall design of your site is casual or modern.
You might compensate by making the text a little larger.
Sans-serif fonts, with their clean, simple shape,
tend to be more legible than serif fonts when used for short blocks
of type. This means that they work well for headings and other places
where you want to get an idea across very quickly. They are also commonly
used for captions on buttons or navigation bars.
Color is Free
But Use it Wisely!
Adding even a second color to a printed brochure
is outside of the budget for many businesses. With the web you can have
all of the colors you want at no extra cost.
But, like free ice cream, its easy to
overindulge in free color if you are not careful. Here are some things
to keep in mind:
- Be sure that a colored background doesnt
make it hard to read your message.
enough contrast between the text and background or the text will
be hard to read.
text against a light background
text against a dark background
careful of too much contrast or the text might appear to "shimmer."
text on red is hard on the eyes
So is red on blue.
- Select colors that complement and reinforce the
purpose or theme of your site:
Peaceful Acres Mortuary
With Dignity in Our Elegant Gardens"
The Party Place
Your One-stop Shop
Needed to Make Your
Parties Come Alive!
Hot bright colors conflict
with the dignified, calming image that the site is trying to create.
Dark subdued colors
dont say "fun."
- Dont use too many colors, or use different
colors on every page of your site; use color to create continuity
and a consistent theme.
- Some colors look better than others on the web;
stick with those that are "web-safe."
Giving Your Site A Personality
Back in the ancient times of the internet, in the
early 1990s, the web was all text. As more people became aware of it
and found more uses for it outside of the lab, the demand for more visually
interesting sites began to grow. Now it would be hard to imagine the
web without pictures.
Graphics are the spice that add flavor and a unique
look to your site. Graphics can include fancy fonts, patterns and textures,
sketches, drawings, logos, photographs, or other non-moving images (we
discuss media - graphics that move
or change, and sound - in the next section). You can use graphics as
decoration, for buttons and links, as backgrounds, or as an integral
part of your message.
Using Graphics on Your Site
However they are used, graphics can have a big
impact on the success your site. Obviously, you want people to think
that your site is attractive it has to create a positive image
and make people want to do business with you. The right pictures can
go a long way in creating that image. To make the most of your graphics,
remember the following:
- Any graphics more complicated than customized
text or basic shapes should be professionally done.
- Photographs should be well composed, with
proper lighting; they shouldnt look like birthday party snapshots.
- Consider using stock graphics; there are
many sources for free or low-cost graphics and photos on the web or
- Do not make copies of copyrighted photos
or graphics from other web sites; other sites are a great source of
ideas, but leave the material that they paid for there (the same goes
for text, by the way).
- A picture may be worth a 1,000 words, but
too many pictures can become a mob all talking at once.
- The era of spinning logos and other distracting
"clever" images is over!
Graphic Files Dont Make Me
The biggest problem with graphics, and the one that
is guaranteed to drive people from your site, is making them wait too
long for a page to load. A person on a 56K dial-up connection will download
the data needed to display your page at an average rate of about 4 kilobytes
per second. By comparison, a simple graphic file might be 6 kilobytes,
while a small photo is 10 or more kilobytes (see examples
of different kinds of graphic files). So, every graphic adds at least
1 or 2 seconds to the time required to display the page the first time.
The good news is that browsers save the files and can load them much
faster the next time the page is visited, but only if the person waited
around long enough the first time to actually see the page.
Rule of thumb:
keep pages small enough to load in less than 10 seconds on a dial-up
connection. This means that a page should be no more than about 50 kilobytes,
including the text, graphics and other related information. Of course,
if you know that most of your users have high-speed connections, then
you can ignore this limit.
In some cases it might not be possible to stay inside
that limit; you might have a page with product photographs, for example.
In that case, consider breaking the page into several pages with fewer
images on each. You might also use small "thumbnail" images
that link to separate pages with larger versions of the same image.
At least only make the user wait when the is reason is clear; they will
be more patient waiting for a catalogue page with products that they
have selected to load than for a page that said "About Us"
and winds up having a dozen photos of your store. This is especially
true for your home page; new visitors are not likely to wait very long.
Adding Sounds and Movies to Your Site
The use of sound and
movies on the web began as "cutting edge" technology,
evolved into an annoying distraction, and is now becoming a useful
element in creating an overall user experience. The wide availability
of "plug-in" players for the common web browsers has helped.
More important is the availability of high-speed broadband or DSL
access, since media files can be very large and require excessively
long download times. A 10 second video clip, for example, can be
more than a megabyte is size.
Although media can add a new dimension to your
site, the large size of the files can create problems. This doesnt
mean that you should not use media in your design just make
sure that it adds value equal to the time that it will take to display
Streaming Media Versus Downloads
Music and video
can be delivered in two forms over the web. The first is as an integral
part of a web page: music that plays while the site is loading,
or video clips that play when the user selects a link. These are
examples of what is called streaming media. In order for
a visitor to be able to experience integrated media files their
browser must have an appropriate player, often called a "plug-in."
The other form in which
media is available on the web are files that can be downloaded and
played later. Music files and movies are often delivered as downloads.
In this case, the web site only provides a link to the file that
will be downloaded.
There are three basic media types that can be
included in a web site design:
- Sound, which include sound effects added
to other elements of your site (a button "click"), music,
and vocal tracks
- Video, which may or may not include a sound
- Animated graphics, the most popular form
of which are Flash "movies." These have the advantage of
being much more compact (ie, small file size) than other media types,
and they can include pictures, sounds, text, and animations.
If you want to include media elements as a part
of your site, consider the following to minimize problems with lengthy
download times or potential distractions:
- Keep animated elements small and limited
to one or two pages. For example, a short Flash animation describing
your major products that runs the first time a visitor comes to your
home page can be quite effective.
- If you include background music or a large
introductory Flash movie when visitors first enter your site be sure
to give them the option to turn it off or skip past it.
- Dont make large video clips play automatically
when a visitor enters a page; provide a thumbnail picture or other
style link to the clip. Also, be sure to show the size of the file
so that users can decide if they want to wait for the clip to download
before clicking on the link.
▲ Return to Top