Miscellaneous Lesson #1
"Website Aesthetics"
The affect of color on a person is something often ignored. Color is interpreted differently across cultures so it's very important that you consider your audience before creating your design.
| Black: |
Most cultures have a negative view of this color because of its association with death or general "bad feelings." |
| Blue: |
Considered a universally safe color as it has a positive connotation in most cultures. |
| Green: |
It has a positive connotation everywhere except China. |
| Orange: |
The color of Autumn in western cultures. It mainly has a positive connotation. |
| Purple: |
Associated with royalty in the Western World. |
| Red: |
To the Chinese this is a lucky color and brides wear this color when they're married. In the West it's the color of strong emotion such as passion. |
| White: |
In the Eastern World it's the color of death. In the West it's the color of purity. |
| Yellow: |
In Egypt it's the color of mourning, in the West it's the color of caution and of a coward. |
There are three ways to format color values in HTML and CSS: by name, by Hexadecimal, or by RGB.
By Name: There are 140 named colors that you can use. I'm definitely not going to list them all but you can go here for a list or here for another. Example values include: red, green, chocolate, indigo, turquoise, and ivory.
By Hexadecimal: This is used most often. It's a 16 character system used for not only web colors but also for computer programming. Each pair of characters (total: 3) correspond to an RGB value and a single character ranges from 0-9 or from A-F with "0" and "A" being dark and "9" and "F" being light. When using web-safe colors, you can use a shorthand method that goes by Hex pair. For example: #FF9900 (pure orange) becomes #F90. For an interactive web-safe pallet, click here. For a list of web colors click here. There's no easy way to find the perfect color if not using the web safe pallet. I usually open up an image program (like Photoshop) and search for colors that way. It's definitely time consuming, however.
By RGB: RGB stands for "red, green, blue" and these three colors are mixed to create every color that's possible. These numbers range from 0-255 or from 0%-100%. I'm fairly sure that you can only use this method with CSS. To use this method, the value of the property should be "rgb(#,#,#)" where "#" is the red, green, and blue values. For example: "color:rgb(100,2,98);" creates a shade of the color purple and "color:rgb(0%,0%,100%);" creates pure blue. This method is probably the most time consuming of all since it's primarily experimentation and there are millions of possible colors.
These are a few basic things you should know about designing a site that is pleasing to the eye. For assistance with color schemes you can visit one of these two sites:
Color Scheme Generator and
StrangeBanana Color Scheme and Layout Randomizer.
Light To Dark and Dark To Light: On light backgrounds you should use dark text and on dark backgrounds you should use light text. On white and black backgrounds it's better to use a low contrast color for large blocks of text as your eyes will get tired if you read text in a high contrast color for too long. Lime green or white text on a black background are perfect examples of high contrast.
Have Color Uniformity: Make sure that your images match your color scheme (or vice-versa). I can't tell you how important this is for the overall harmony of your page. If there's an image that's the focal point of your design then your color scheme should use some of the colors in that image. You wouldn't decorate a room with navy wallpaper with green and pink flowered furniture so don't decorate a webpage that way.
Design With Consistency: Every page should match in layout or both color scheme and layout. This doesn't mean that your images can't change with each page, but only do this with images that are the same size and match your website's theme. If you keep the same layout on every page and change the color scheme to match the type of content on the page then this can make a site look interesting if done correctly.
Choose Link Colors Wisely: All link colors should stand out from your regular text color but still be clearly visible on your background color. This can be a difficult thing to accomplish but try using a complementary or contrast color to the background color. Since there are four types of link states (normal, visited, hover, and active) you have to at least find three different colors, but they can be varying shades of the same one. Normal and visited can be the same color, actually, just leave the underline on normal and remove it on visited. In the case of the site navigation it may be a good idea to have these links be a different color from all the rest so that they stand out.