YOU ARE HERE:  HOME > WEB DESIGN TUTORIAL> WEBSITE AESTHETICS

Website Aesthetics

This tutorial is now available in E-Book format. Find out more...

Merriam Webster's Collegiate Dictionary defines aesthetics as "a particular theory or conception of beauty or art : a particular taste for or approach to what is pleasing to the senses and especially sight : a pleasing appearance or effect."

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

With that 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
    • Tables
    • Page Layout
    • Navigation
    • 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 essay, 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.  Keep in mind that WEFT is a Microsoft product and that Netscape browsers may produce different results.
  • The second option is a product called FAIRY (Font Augmentation Internet Resource System) and it's being offered by BorWare AB.  FAIRY is also a font embedding tool, however BorWare guarantees FAIRY to work across all platforms and browsers.
  • The third 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

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:
    • Don't crowd your text against the left edge of a page or table
    • Don't create paragraphs of text in all CAPS, bold, italics, or any combination of these three.
    • Don't underline text for emphasis.  It will appear to be a broken link.
    • Don't create paragraphs of text that stretch all the way across your page.  Narrower columns are much easier to read.
    • 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.  Now go visit www.yahoo.com.  Because Yahoo didn't define a background color for their home page, the background color for Yahoo's home page should now be the color you specified in your browser. 

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.

If you'd like to experiment with various background colors and see (in real time) the effect of changing hex color values, check out our Color Calculator.

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

My 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, I 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.  For more information on Image Optimization, please visit our Web Design Essay Archive and do a search on "Image Optimization"
  • 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 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, I 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 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). 
    • 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 bookmarking and printing.
    • 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

I 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.  You can find many of them in our pointafter.com Gallery.  Also, many award sites (especially the 5 star sites) have their own galleries where you can view good web design.  Learn from the good ones, and you won't go wrong.

Go to: Web Content