Alia Al-Abdulkarim and Afnan Al-Subaihin

 Colors:

Color Theory. Color Schemes. Color Contrast. Web Safe Colors.

Alia Al-Abdulkarim and Afnan Al-Subaihin

 Although

bare-bones Web Architectures has Accessibility and Usability merits, most Web designers want to add their special signature touch to their sites. They can do so using colors, baring in mind not to lose the accessibility and usability features.

Alia Al-Abdulkarim and Afnan Al-Subaihin

 Colors

are divided into primary, secondary and tertiary colors.

Primary Colors: Red, Yellow, and Blue Secondary Colors: Orange, Green, and Violet Tertiary Colors: are mixed from the secondary colors

Alia Al-Abdulkarim and Afnan Al-Subaihin

Alia Al-Abdulkarim and Afnan Al-Subaihin

 Tint

The resulting color when white is added Tone The resulting color when gray is added Shade The resulting color when black is added

Alia Al-Abdulkarim and Afnan Al-Subaihin

 Monochromatic

color scheme. Complementary color scheme. Triadic color scheme. Tetradic color scheme. Analogic color scheme. Accented analogic color scheme. http://colorschemedesigner.com/

Alia Al-Abdulkarim and Afnan Al-Subaihin

monochromatic color scheme:

One color and all its tints, tones and shades. Easiest to use. Doesnt provide much excitement.

Alia Al-Abdulkarim and Afnan Al-Subaihin

Alia Al-Abdulkarim and Afnan Al-Subaihin

 Choose

two opposite colors in the color

wheel. Including all the tints, tones and shades of both colors. Very common, great to use in many websites.

Alia Al-Abdulkarim and Afnan Al-Subaihin

10

Alia Al-Abdulkarim and Afnan Al-Subaihin

11

 Pick

one color and then pick two other colors that lie equidistant from each other around the circle.

Alia Al-Abdulkarim and Afnan Al-Subaihin

12

Alia Al-Abdulkarim and Afnan Al-Subaihin

13

 This

scheme is just like the complementary scheme, only you use two complementaries that are equidistant. Used by few sites.

Alia Al-Abdulkarim and Afnan Al-Subaihin

14

Alia Al-Abdulkarim and Afnan Al-Subaihin

15

 Pick

three adjacent colors in the color wheel. Provide an elegant and warm look.

Alia Al-Abdulkarim and Afnan Al-Subaihin

16

Alia Al-Abdulkarim and Afnan Al-Subaihin

17

 This

is the Analogic model with complementary (contrast) color added.

Alia Al-Abdulkarim and Afnan Al-Subaihin

18

Alia Al-Abdulkarim and Afnan Al-Subaihin

19

Alia Al-Abdulkarim and Afnan Al-Subaihin

20

When you pick the colors of your website:

Color s of logo, images, etc. Colors of headings, paragraphs, links, and other textual content. Color of the background.

The color of the background must have high contrast with the colors of other page elements.

Contrast is the difference between two colors. Black and white create the highest contrast possible.

Alia Al-Abdulkarim and Afnan Al-Subaihin

21

Contrast in color depends on the three factors:

1. 2.

3.

Hue: which is another way to say color. Lightness (Value): which is the lightness or darkness of a color. Saturation: which is the intensity or purity of a color.

Alia Al-Abdulkarim and Afnan Al-Subaihin

22

Alia Al-Abdulkarim and Afnan Al-Subaihin

23

three basic guidelines for making effective color choices that work for nearly everyone:
1. Exaggerate lightness differences between foreground and background colors.

Alia Al-Abdulkarim and Afnan Al-Subaihin

24

2. lighten the light colors and darken the dark colors in your design to increase its visual accessibility.

Alia Al-Abdulkarim and Afnan Al-Subaihin

25

3. Avoid contrasting hues from adjacent parts of the hue circle, especially if the colors do not contrast sharply in lightness.

Alia Al-Abdulkarim and Afnan Al-Subaihin

26

tool that helps you choose effective color contrast:

http://www.dasplankton.de/ContrastA/

Alia Al-Abdulkarim and Afnan Al-Subaihin

27

Alia Al-Abdulkarim and Afnan Al-Subaihin

28

Alia Al-Abdulkarim and Afnan Al-Subaihin

29

 Enhance

the identity of your website using

favicons. Can help people identify your website in a list of bookmarks (especially sighted people)

Afnan A. Al-Subaihin

Dimensions: 16x16 pixels. Difficult to design something is such small space. Start with 32x32 then downsample it. Use high contrast and very simple design elements. The image format should be .ico but it is not supported in Photoshop. Use an online converting tool: www.convertico.com Name the file favicon and place it in the root folder.

Afnan A. Al-Subaihin

http://dev.opera.com/articles/view/10-colour-schemes-anddesign-mockups/ http://dev.opera.com/articles/view/8-colour-theory/ http://www.orangeinks.com/design/the-color-scheme-designer/ http://colors.napcsweb.com/colorschemer/color_wheel.html http://colorschemedesigner.com/previous/colorscheme2/helpen.html http://www.lighthouse.org/accessibility/effective-color-contrast http://coe.sdsu.edu/eet/articles/ColorContrast/start.htm http://www.colorsontheweb.com/colorcontrasts.asp http://www.wellstyled.com/tools/colorscheme2/index-en.html http://www.answers.com/topic/bare-bones-system

Alia Al-Abdulkarim and Afnan Al-Subaihin

32