Colors - How to use them - How Not to Use Them

Okay, let's first begin our discussion of how to truly become a web artist by examining what you need to do in order to create artistically designed web pages - color, consistency, cohesiveness. The three essential C's these babies are the keystones to site professionalism. The correct comprehension (man I am whipping out "C's" all over the place) of these concepts (yet, another C!) will allow you to add a professional and easily navigated site. The first one that is essential to site development is color. Mainly some rules about color are that you should use the same "pallette" - yes, like the artist who paints paintings, web designers have a color pallette - throughout the site. Just understanding the concept of a pallette, and using that will make your sites more consistent. A pallette is simply the array of colors that is used throughout the site. Everysite has one, because every site displays colors, but not every web designer is aware of the site's pallette, or simply the colors used in the sites pages, so when he goes to add or append new pages to the site, he adds differently colors which make the site look aesthetically awkward, instead of choosing pre-used colors from the color pallette to integrate new information into the site. Color consistency makes your site much more easily navigated as well, because web-surfers, usually don't really want to think about the site design when they browse your site (hence the liesurely and appropriately chosen diction of "browse"). Instead they want to find what they came for, get in, get out, and move on. So simple, comprehendable navigation is essential. If your navbar and/or links within the page are color-based the site's navigation is much more easily understood and can be comprehended from much more subtle - easily ovserved - levels. The home page link, for example should always be in the same, easily, identifiable place -- but it also should contain some color to make it stand out. For example, having a link back to the home page from another page always surrounded in a green background or border, will become a visual navigational clue for any web-surfer on your site. Then using color schemes different from the sub-pages when the user finally arrives to your home page, allows the user to know if he is on your home page, or sub pages merely by the background color! So color remains extremely important, but is many times overlooked by the casual web designer. To become a web artist -- or should I say "artiste" - one must weigh color options, understand color consistency, and utilize its subtle recognition provocation in all areas of one's site. Dreamweaver can be used to create consisten color schemes by using its "Color Scheme" Command. Go to Commands ¬ Set Color Scheme to pull up the sophisticated Color Scheme box displayed here:

Now, you'll notice by reading the body little note that the colors offered through this Color Scheme pallette are all web safe. Web safe colors are colors that browsers can display. Just as the publisher pringing off illustrations has to spend countless hours tweaking with CYMK and RGB color values on screen versus what the printer will print out, web designers have to toy and experiment extensively with what colors their editor - Dreamweaver - their browser, and their screen displays versus what other browsers will display. Some colors such as "Hue of Sunset Yellow in Late August", for example, cannot be displayed by browsers. Browsers define and transfer colors based on RGB 6 digit hexadeicimal values. For example, I won't go into full detail, but since you are beginning to work with color, you should know the basics. The Link Color Green in the about "Set Color Scheme Command" Dialog box is green, but it is a different shade of green than the "Text Color" green which is #339933, or a value of hexadecimal 33 Red, 99 Green and, 33 Blue. Whereas the "Link Color" Green doesn't use any "Blue" in its shade or hue of green. If you really want to get into hues, saturations, and tones, I'd invest some money in photoshop and visit LINK, which is an excellent resource for image design and photoshop color manipulation. Like Dreamweaver, there is a lot of information and tools to be used in that program. To apply your page with a blue Color Scheme, for example:

1. Click on Blue from the Background Column, which you will notice will open up new color options from the Text and Links Column, for obvious reasons of color clashing. You can't have your background being the same color as the hyperlinks. It would be chaos, and defeat the entire purpose of using color to your site's advantage!

2. Click on Blue and White,e from the Text and Links Column.

3. Finally, Click Apply andexit the dialog box by hitting "OK".

Now your page is all decked out with a sky blue background and matching blue links. This what the form, used in Edition four of the Dreamweaver tutorial looks like with this color scheme:

You kind of have to have a keen eye to see the links, but the style and consistency is very easily identified and you can use this process of going to the "Color Scheme" window with all of your sites and all of you pages within those sites. An interesting, and ideal, process would be to have all of you subsites from you main site have similar color schemes. For example, have all of you "Contact Us" pages green, and all of your "News" pages yellow, and your "Information" sites white. This way the preferred, or returning, browser of your site will be familiar with the color schemes of each sub-site within your entire site. Planning out entire"site" design and page composition to form a full-fledged site is enough for an entire edition of its own!

Consistent Sites - The Creative Component to Web Page Construction

As mentioned in the site coloring scheme section, you should try to have subsites have consitent color schemes. If, for example, you have a common navigation bar (or navbar, in webspeak) you should always have it located in an easily accessible area, and with a consisten color scheme. The same navbar, with the same links, and even same positioning can look like an entirely different set of links if a different coloring scheme is a pplied to it. You don't want your web-surfers navigation your pages to become lost within them. You want them to have the simplest, easiest trip throughout your site. Think of airports, for example, they wouldn't suddenly chage walkways and terminals to different colors! No, the customers, even the frequent fliers, would begin probably focusing on the colors, forget what gate they were going to, and worse - miss their plane! Of course, the impact of color design isn't as detrimental as it can be in airports, but you can get the picture. So placing a navbar always in a frame would be great, or some other place - the top, bottom, left, and/or possibly right - on you pages is essential. But maintaining the placement of that navigation table is even more essential so your site-viewers can rely on it.

Your fellow Webmaster Comrades

Here are some sample sites that use excellent color schemes and consistency throughout their entire site. When examining the site's take special note of the bulk of the information on the site, and the contrasting ease of navigation that exists throughou the site. Tons of information and the ability for a newbie to find their information on the site, is a sign of an extremely well-designed, cohesive site. By cohesiveness, I mean a site that doesn't suddenly have a bright puple page randomly pop in the middle of a series of grey pages. The color scheme on a site is cohesive, if all the links in a sub-site or the entire site have a similar scheme and the background colors and look and feel of the images can be recognized themselves as components of the site.

Apple Computer. Take Apple's website. I had to choose apple's site, being the die-hard mac fan that I am. They have, all within the same site, a subsite devoted to Apple - the company, the products, the people - a sub-site devoted to the Quicktime and graphics capabilities of Apple, a huge Support section, a Mac OS subsite, a sub-site for the ".Mac" online services, heck, even an entire on-line store! All within the same site - same domain - apple.com. I may sound like I am a covert advertiser and promoter for Apple Computer (and, in a way, I guess I kind of am) but pointing out the intense organization of information, services, and products could not be passed up on Apple's site. The navbar, I'd like to point out, is equally innovative. As you click on a subsite, the 6 or so, links within that sub-site seem to pour out from underneath that link as shown with the "Switch" to Mac link:

Under the "Switch" section you are given the options to link to "Why Switch", "Questions", "TV Ads", "Real Stories", "Press", "How to Switch", and "How to Buy". The information to be displayed on these sub-catebory sites are pretty self-explanatory. You are presented with a plethora of top-ten lists explaining in detail explaining the benefits of an apple platform, and then are slowly progressed towards the actual purchasing of a macintosh computer! But becuase this same exact navbar is bluntly used at the top of every sub-site and page, you always know where to go if you get lost. But it is nearly impossible to get lost on this site because of the color scheme, green, in this case, and the way the "Switch" link, or any of the sub-category links stand out. The "Store" part of the site, shown here:

Has a grey, easily identifiable color scheme. And, of course, the sub-links to this part of the site - "Account", "Education", etc - all relate to the "Store" category of the site. Overall, Apple's easily identifiable usage of simplistic color and the complex organization of information make this site stand out!

Another site with excellent design is Amazon's web site:

As with Apple's site the color scheme - a goldish hue, in this case - as well as the actual buttons throughout the site become almost a trademark of the site. After you leave you should be able to hold up one single button, out of context, and have a web-surfer identify which site it came from. Apple's site certainly boasts a unique button style design and color scheme.

Navigation - Everything From A to Z

The main thing about color cohesiveness, and site navigation to remeber is that the web-surfer should feel at home within you site. Just as you always know how your daily paper is organized, a web-surfer should always know where to look for Support, Searches, or, in the case of some of the on-line store sites - their Account! A newspaper is an excellent analogy for a website, because they both have ordered structure and the same "types" of information in the same places, but it changes everyday and is dynamic. For example, the Wall Street Journal lists certain types of articles in certain columns on its front page. Similarly, your website should house its daily news in the same place, and locate support, contact informatin, and other commonly used links in easily remembered and consistently accessible places throughout the site. In later editions you'll learn how to put the whole thing together by integrating your individual pages into a binding, full site, as well as how to create java-rollover buttons, and graphic detailing affects that can really put the icing on your site! As for now, practice the color schemes, experiment with different pallettes, and have fun experimenting and building with you knowledge of forms, tables, frames, colors, links, and navigation to build your own web site!

• Basic Pages •

• Tables •

• Frames •

• Forms •

Cascading Style Sheets

• Buttons •

• The Whole Sha-Bang! •

For Questions, Commetns, and Conerns Contact the Webmaster SpyderByte Corp. Colorado Springs, CO 80903