CROSS TARGET - WEB DESIGN TUTORIAL - RESEARCH LINKS EXPRESSION - ARTICLES

 
 
  Getting Started  
 
  Planning  
 
  Effectively of Home  
 
  Effective Navigation  
 
  Web Aesthetics  
 
  Web Content  
 
  Technical Consideration  
 
  Promoting Site  
 
  Tips for Designing  
 
  Monthly Newsletter  
Join our monthly newsletter to get Tips & tricks & our upcoming offerings & not put in mind to be a missed opportunity


 

Tutorial- 05- Web Aesthetics

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.

 

HOME | SERVICES | PACKAGE | POLICY | CONTACT | SITE TREE

© 2003-04 tweenpath studios
all rights reserved