|
AAes•thet•ics or es•thet•ics (µs-thµt“¹ks) n. 1. (used
with a sing. Verb).a. The branch of philosophy that
deals with the nature and expression of beauty, as in
the fine arts.
We define Website Aesthetics as any aspect of your site
that creates either a visual or audible impression. When
you break a web page down to its basic components, all
you really have is a compilation of text and graphics.
It's the selection and presentation of the text and
graphics that determine your website's aesthetic appeal.
What's Included
Like we things that we said, let's list the general
aspects of website/page design that affect your
website's aesthetics.
• Text
• Backgrounds
• Graphics, animations, banner ads
• General Design Concepts
o Tables
o Page Layout
o Navigation
o Consistency
Text - Can You Really Control It?
An unfortunate aspect of text is that the WYSINNWYG
(What you see is not necessarily what you get) concept
applies. Just because you've specified in your HTML that
your pages use the Arial font face, this doesn't
necessarily mean that all of your visitors will see your
site in Arial. The font your visitors see typically
depends on two things:
• Their browser's supported fonts - Each browser comes
preloaded with a set of available fonts. If the font you
specified is not included in your visitor's set of
fonts, their default font will be used, i.e., if you've
specified the Arial font for your text, and the
visitor's browser doesn't support Arial, then they will
see your site in their default font.
• Their browser's default font - The default font for
each browser is usually one of the fonts in the Times
New Roman family. However, visitors can override the
default with a font of their choosing. If you don't
specify a font in your HTML, your site will be viewed in
your visitor's default font.
To some extent, there are three ways to get around your
visitors’ browser settings. The details of all three are
beyond the scope of this newsletter, but I thought I
would mention them anyway.
• The first option is Microsoft's Web Embedding Font
Tool (WEFT). WEFT allows fonts used in the creation of a
web page to travel with that page. If you'd like more
information on this functionality, read up on
Microsoft's WEFT documentation
http://www.microsoft.com/typography/web/embedding/default.htm.
Keep in mind that WEFT is a Microsoft product and that
Netscape browsers may produce different results.
• The second option is Cascading Style Sheets (CSS). CSS
provides designers with a vehicle for specifying style
information, such as fonts, for a Web page. A good
source of CSS info can be found at Microsoft
http://www.microsoft.com/typography/web/designer/default.htm
Now that we've determined that you aren't really in
control of the font face aspect of your text, it becomes
much more critical to define the aspects of your text
that are controllable.
• Size - Make sure that your font sizes are consistent
across your entire site. Don't use a 10 point type on
some of the pages and a 12 point type on other pages.
Also, make sure that you don't use a size that is too
small to read. When choosing your font and size, keep in
mind that actual font size will vary from font to font,
i.e., a 10 point Arial will be larger than a 10 point
Times New Roman. So before you select a font and size,
do some comparisons, and make sure you're getting the
desire combination of font and size.
• Placement - For text to be visually appealing, it
should have an adequate amount of white space
surrounding it, and it should be appropriately located
on a page. Some of the don'ts that apply to text are:
o Don't crowd your text against the left edge of a page
or table
o Don't create paragraphs of text in all CAPS, bold,
italics, or any combination of these three.
o Don't underline text for emphasis. It will appear to
be a broken link.
o Don't create paragraphs of text that stretch all the
way across your page. Narrower columns are much easier
to read.
o Don't misspell words. Run a spell check on each of
your pages. Misspellings are a sign of sloppiness and a
real "turn off"
Backgrounds - Are they what they appear to be?
Most everyone is familiar with backgrounds and their
usage on web pages. We use them regularly to create a
variety of effects, everything from background colors to
background images. But did you know that backgrounds,
just like text, are affected by the WYSINNWYG concept.
Because browsers have the ability to define a default
background color, unless you specify a background color
for your pages, your website may not appear the way you
had intended it to. Let me give you an example. In an IE
browser window, click on Tools > Internet Options >
Colors. Then click on the box next to "background" and
select any color. Then keep clicking "OK" until you've
closed down all the dialog boxes.
By specifying a background color for each of your site's
pages, you can override a browser's settings. All you
need to do is add a "bgcolor" attribute to your <body>
tag. E.g., <body bgcolor="#FFFFFF"> would force a white
background on a page. Two more aspects of backgrounds
that you'll need to pay attention to are:
• Contrast - Make sure that there is enough contrast
between your background color and your text so that your
text is easily readable. i.e., don't use a black
background with navy blue text.
• Noise - Don't use busy and/or distracting backgrounds
that make your text hard to read and take away from the
focal point of the page.
Graphics, Animations and Banner Ads
Our general rule of thumb is that if a graphic does not
add value to a page, it should not be there.
Unfortunately, newcomers to web design tend to go
overboard when it comes to graphics. So very often, we
run across sites that are overloaded with blinking,
flashing, (annoying) animation and special effects that
serve no purpose other than show off a designer's
infatuation with flashiness. Assuming that you agree
with my rule of thumb, the following guidelines should
be applied to the graphics that are included in your
pages:
• Keep your graphics as small as possible. Remember,
many users still don't have broadband connections and
will get frustrated very quickly if your pages take more
than 10 or 15 seconds to download
• Optimize your graphics - Even if your graphics are not
very large to start with, it can only help to have them
optimized
• Use thumbnails - If your page contains many images,
check into using thumbnails to speed up page load time
• Use the ALT attribute - Every image should be defined
with an ALT attribute. For those visitors that are using
their browsers in text mode, the ALT attribute will
provide alternative explanatory text whenever the
graphic element cannot be rendered
• Use the height and width attributes - Using these
attributes will allow the user agents browser to
allocate space on a page for the graphics while
continuing to download text. This results in a download
sequence that maximizes usability
• Don't over use banners ads - If you do use banners
ads, make sure they are relevant in terms of your site's
content. I.e., if your site deals with computer sales,
chances are no one will click on your banner ad to Avon
Cosmetics
• Don't use "cheesy" clipart - The result is a very
amateurish looking website
General Design Concepts
In addition to all the above, there are many, many
additional aspects of web design that affect your site's
aesthetic appeal. These aspects deal with tables, page
layout, navigation and consistency. Below is a list of
do's and don'ts that you'll hopefully find useful in
your web design efforts.
• Never turn table borders on unless you're presenting a
chart.
• Never design a page where the visitor has to scroll
sideways. To be absolutely safe, your page resolution
should be no larger than 640x480. Personally, we think
that's rather small and you're pretty safe going one
resolution larger and maximizing your pages at 800x600.
• Avoid putting counters on pages. Most visitors don't
care how many visitors your site has had, and most
counters can be inflated anyway.
• Be consistent. Don't create a five page website with
five uniquely designed pages. Make sure that your
navigation, text fonts, colors, backgrounds and page
layout are consistent across your entire site.
• Make sure your links work, especially the links to
other pages within your site.
• Don't use background music. Your taste in music is
probably very different than your visitor's taste. If
you absolutely must add music to your site, make sure
you provide a prominently displayed "on/off" button.
• Limit your page length to two screens. Pages that go
on forever not only take too long to load, but also tend
to lose and confuse your visitors.
• Don't require your visitors to download rare plug-ins
in order to visit your site.
• Identify your site on every page. Put your company's
logo in the top left hand corner so that your visitors
will never wonder if they are still in your site.
• Don't change your default link colors. The default
colors are shown below. Most internet users have become
accustomed to and expect links to be in these colors.
Link Type Color
Unvisited Links Dark Blue
Visited Links Purple
Active Links Red
• Make sure that your pages are at a minimum compatible
across the more recent versions of Netscape and IE.
• Try to avoid using frames (if at all possible).
o Frames violate the page model by slicing up pages into
independent panes of content. As a result, the use of
frames may have a negative affect on basic activities
such as book marking and printing.
o They also present viewing problems, especially when
your site links to another site that uses frames.
• Don't use "Under Construction" signs for incomplete
sections of your site. If a particular page isn't
finished, don't have a link to it. Your site will always
be under construction in some way, shape or form; or
it's quickly getting very stale.
In Conclusion
We really believe that good website aesthetics is
mostly common sense. If something doesn't feel right,
chances are you shouldn't add it to your site. The
internet is loaded with many good examples of web
design. The best way for designing is to watch and
learn. The designer has the ability to browse more and
more, coz the internet is fast expanding. It’s getting
bigger day by day. Who knows when you came up to the
striking opportunity. You just have to open your eyes
and mind to grab what goodies are available on the
internet. |