Colors in a website varies in range and can help you create the look and feel you’re looking at using for your web site.When we work with color in web site html template design we restrict this to using a color from the 256 web colors pallet.

By working with the 256 web color pallet you’re making sure that your webpage color will work exactly the way you want it in all of the web browsers.

256 Color Pallet in Adobe Photoshop

The above screen shot image is an example of the color pallet Adobe Photoshop/Elements has available in its software program in which you can choose colors in a website you will end up using. As you can see the only web colors tick box is selected.

If the background of the image needs to blend with the background of a table or webpage color-scheme then choose the image background from one of the 256 web colors and erase the background of the image so it blends in.

Most web site designing software will have this color pallet available along with the million plus color-pallet found in software programs like Paint Shop Pro or Adobe Photoshop.

So when choosing colors in a website stay safe by working with the standard 256 color pallet.

Color Meanings

Red the color that represents love, desire and passion and can be associated with danger, energy and strength.

Blue is the cool color of colors. It symbolizes trust, loyalty, wisdom, confidence, faith, intelligence and truth.

Green is the calming color of colors and is the color of nature. It symbolizes growth, harmony, freshness, and fertility. The darker shade of green is also commonly associated with money.

Black is associated with Power, death, elegance and mystery

Purple is known as a royal color. Purple is highly associated with creativity and spontaneity and it can effect people by offering a sense of spirituality and calm.

White is associated with peace, purity and truth.

When building a web site stick with simple colors. If your web site has a specific them for example:

• A spiritual web site you would use whites and purples
• For a corporate web site you would use a mix of black and blue
• If you’re selling products that calm people you would use greens
• If you had a product that many people were passionate about yo can
  use the color red.

Don’t forget to also have fun with your colors when using color in a website and make sure the color scheme works well together.

Webpage layout is about creating the perfect layout for your web pages. One method you will need to use is to have your structure identical throughout your web site. This is a great technique to make browsing your web site an enjoyable experience.

The web page layout elements include:

Background image - make sure you don’t use a background image that stands out. Don’t use one because you have purchased new software and it is a novelty to try and play with and do something different.

Color - use the correct shades for your web site and don’t use colors that really stand out unless you want to frighten away your visitors.

Navigation Links - My advice for you is to place these in the one area of your webpage layout and not to move them from that location. Traditionally the best place to have the navigation links are on the top of a webpage layout or the left hand side.

With my experience I found that the navigation links should never be located on the right hand side of a web page layout because your web site visitors have all different screen resolution settings and if you do this your navigation links might not be visible unless your website visitors scroll across the webpage.

Lets take a look at an example. Imagine that your table on a web page layout has been designed at 950 pixels by 950 pixels and your screen resolution is set at 1280 pixels x 1024 pixels.

You stand in awe how wonderful your webpage layout looks and how you think you have out smarted everyone by being different because your navigation links are on the right hand side and are visible.

On your computer it looks wonderful however imagine you have a visitor to your web site and that  visitors screen resolution is set at 800 pixels by 600 pixels.

Can you view your web site correctly with your current layout?

No- because your navigation links are hidden (remember the visitorsscreen resolution is set at 800 pixels wide which means 150 pixels of your web site is hidden which appears on the far right hand side and contains the navigation links).

For your visitors to see the navigation links they needto scroll the webpage across towards the right so your navigation linkscan become visible.

You might be thinking ah we are in the new millennium surely Technology has changed and there is scripting to detect and change the layout for my visitors. Yes there is scripting that can do this however scripting relies on a persons web browser to work properly so it’s a chance and a risk I would not personally take with my layout.

When you design a web site your target should be the majority of people searching online hence always keep your web site design simple with a great layout.

White space in a web page basically means parts of your web page that needs to ‘breathe’ and does not appear to be cluttered with text.

How many web page’s have you visited that were bombarded with content with no white-space? Your initial reaction would probably be like mine - what a mess and where do I start reading..

It is important when you make your website that you add white-space into your web page’s which helps add balance and removes any clutter which helps your visitor read your content.

Lets take a look at an example. The example we will use is this actual web page. If you take a look around the web page layout you will see spaces between the small paragraphs of text. I have pointed out as an example some of the white space in my web page example.

White-Space Example

We can add white space to a web site by adding it to a web page by leaving an even amount of blank space between your content you have on your web site web page. Using this method helps your visitor to view and read your content faster.

Can you imagine web page’s being jam packed of text just like a novel or a book is written?

Do you think it would be liked by your website visitors? Honestly I don’t think there are many of us out there that would like web page’s jam packed full of text based information.

A web page should not be too long and if you need to split your pages do so as long as you provide links to your
content pages. On a web page like this one its simple to add the correct amount of spacing. If you’re designing a web site that has a colored background you can apply this technique by using transparent gif’s scattered throughout a table or its cells if you’re having trouble with the formatting.

Website images on a web site enables you to add color and flair.

If you’re creating images for the first time there are a few things you need to be aware of such as:

• You must optimize your image so its size is the smallest without too much loss of quality.
• What image file format to use when saving your image for web site use.
• If blending website images into the background you need to make sure one of the background colors chosen for your image is one of the specific web colors from the web color palette. This is so your image blends with the webpage background.

File Formats to use for web site Images

1. Graphics Interchange Format 89a
(extension file ends in .gif)

The color display is limited to 256 and you can create animation gif files using an animation software program.
This file format has been used since the introduction of the Internet. Perfect file extension to use for web site graphics.

2. Joint Photographic’s Expert Group
(extension file ends in .jpg)

The color depth of this file format is much greater than the GIF format and is an ideal file format for corporate logos and web site images that require full color depth.

You can compress your images to whatever compression rate you like. The more you compress your images the more quality you loose from your overall image quality.

There is also the PNG format which was designed to be a replacement for the gif file format however it is not the industry standard file format so its not supported by many of the older web browsers and a few of the current browsers on the market.

Which File Size Should I use?

It’s your choice really. When I create an image my objective is to create the smallest file size possible without loosing the quality so I do some testing to see which file works for the image I am working with. I do this testing in Adobe Photoshop when I am about to export the image. Both gif and jpg will work.

Tip - Select the best looking image which is the smallest size (jpg or gif) when saving the image in your favorite image editing program.

You need to target your audience correctly if your web site is going to be successful. One of the first things you need to take into consideration is the audience you want to target.

If you deliver your content to your audience in a way that is hard to view or the way its delivered people will not visit your web site because the good word about your web site won’t be spread throughout the Internet community.

Lets take a look at en example how we can do this.

I wanted to share my knowledge with you in how to build a web site. I knew my target range will be broad and I knew the Number 1 thing people will want is quality information. If I wanted to I could of built my web site using Multimedia technology that required plug-ins to view content etc

Some considerations when targeting your audience might include:

• I do have the knowledge to do this but how many of you would
  have been bothered with this concept?
• How many of you would have Flash installed?
• How many of you would have Shockwave installed?

Isn’t it easier to browse and read what you want quickly with no hassles?

The rule is to keep things simple. Just because something looks good and works for you does not mean it will be the same for your visitors.  It comes down to building a web site that will target your audience you (your web site visitors, web surfers etc) you want to visit your site.

You can do this by implementing:

• The right color
• The right look
• Adding quality content
• Adding the right images
• Is there a need for flashy menus?
• Is there a need for flashy multimedia?

Some ideas is to get you started might be to visit 5 or so competing web site’s and see the approach they might have taken. You can then visit Alexa and get a traffic report on the popularity of the web site’s. These web site’s can be found by doing a search in Google.

A word of caution never copy content - create your own.

Tip - Generally speaking the younger audience prefers multimedia based web site’s where the older generation prefers informative based content as this is one of the reasons people surf on the Internet and that is to find web site’s that has valuable content.