Color And Text. Color Blindness Red Green Blue United States Results:

Color And Text

Color Blindness

• Red

• Green

• Blue

United States Results:

http://www.diacenter.org/km/usa/favcol.html

Psychology of Color

•Red

Raises blood pressure

Stimulates aggressive behavior

Stimulates appetite

Encourages conversation

Psychology of Color

•Blue: Lowers blood pressure Calming effect Provides sense of security Appetite suppressant

Psychology of Color

Green Easiest color for the eye to

focus on for long periods of time Soothes pain Strength Safety

Psychology of Color

Orange Stimulates appetite Happiness Confident Adventure Slight elevation in Blood

Pressure

Psychology of Color

•Yellow Satisfying Optimistic Wisdom Not to be trusted – Western

Cultures

Color wheel according to Michel-Eugène Chevreul. Adjacent colors should all show the same difference to each other.

Triadic color scheme

• Pros: Offers high contrast while retaining harmony.

• Cons: Complementary scheme. • Tips:

– Choose one color to be used in larger amounts than others.

– If the colors look gaudy, try to subdue them.

Color wheel according to Ewald Hering.

Tetradic Color Scheme

• Pros: The tetradic scheme offers more color variety than any other scheme.

• Cons: This scheme is the hardest scheme to balance.

• Tips:– If the scheme looks unbalanced, try to

subdue one or more colors.– Avoid using primary colors in equal amounts.

http://www.toledo-bend.com/colorblind/Ishihara.html

http://tjshome.com/selftest.php

http://tjshome.com/selftest.php

Issues of ColorText

Text

Text

Text

http://www.colormatters.com/

Red/Green

Yellow-/Blue

Black/White

Blue/Green

Text

Text

Text

Text

Color Design Remedies

1. Exaggerate differences between foreground

and background colors

2. Avoid using colors of similar lightness

adjacent to one another

3. Design for maximum contrast Test your pages by printing in black and white.

<html><head>

<title>Data</title></head><body> This is a paragraph. Copy and paste this paragraph into your document three times. Thiswill allow you to work with the tags displayed on theprevious screen. Good luck!!!Jetaway Travel

</body></html>

Opening Tag Closing Tag Purpose _________________________________________________ Marks the end of a

paragraph -- doublespacing

 (closing Single space -- tag not used) carriage return

<blockquote> </blockquote> Indented paragraph

<html><head><title>my title</title></head><body> Jetaway Travel is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be!

Call now for special pricing! 

1-800-555-1234</body></html>

<html><head><title>my title</title></head><body> <blockquote> Jetaway Travel is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be!</blockquote>

Call now for special pricing! 

1-800-555-1234</body></html>

<html><head><title>my title</title></head><body> <h1>Jetaway Travel </h1>is your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! 

Call now for special pricing! 

1-800-555-1234</body></html>

Opening Tag Closing Tag Purpose _________________________________________________ <h1> </h1> Largest Size Heading

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6> Smallest Size Heading

Heading Font Size

Text Alignment

Opening Closing Purpose Tag Tag_________________________________________________ <div align=“alignment> </div> Left, Center, Middle,

and Right

Opening Tag Closing Tag Purpose _________________________________________________ Bold

 Bold

Opening Tag Closing Tag Purpose _________________________________________________ Italics

 Italics

<cite> </cite> Italics

<address> </address> Italics with line breaks

Opening Tag Closing Tag Purpose _________________________________________________ <strike> </strike> TEXT

 UNDERLINE

<blink> </blink> MonzillaBLINKING

 SUBSCRIPT

<code> </code> FIXED WIDTHFONT

<HTML><HEAD><TITLE>My title</TITLE></HEAD><BODY> Jetaway Travelis your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! Call now for special pricing! 1-800-555-1234</BODY></HTML>

Space Maintaining Tags

• - line break

• <pre> - preformatted (registrar and shows carriage returns)

• - paragraph

• <ul></ul> - indent

• - non-breaking space

Text Size

Opening Closing Purpose Tag Tag_________________________________________________ Relative to

default text-2 to +4

<big> </big>

 



Absolute value 1 2 3 4 5 6 7

Relative value -2 -1 - +1 +2 +3 +4

Advantage - control over font size

Disadvantage - overrides viewer wants and needs

<html><head><title>my title</title></head><body>  Jetaway Travelis your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! Call now for special pricing! 1-800-555-1234Thesepages are copyright 2000 by Jetaway Travel, Inc.</body></html>

Name of Color Attributes

Opening Closing Purpose Tag Tag_________________________________________________ State

Color 

Colored Text

HEX Color HEX Color _________________________________________________ FFFFFF White 008000 Green000000 Black 00FF00 LimeC0C0C0 Silver FFFF00 Yellow808080 Grey 808000 OliveFF0000 Red 000080 Navy800000 Maroon 0000FF Blue800080 Purple 008080 TealFF00FF Fuchsia 00FFFF Aquahttp://www.w3schools.com/css/css_colornames.asp

http://www.w3schools.com/css/css_colornames.asp

<html><head><title>my title</title></head><body> Jetaway Travelis your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! Call now for special pricing! 1-800-555-1234Thesepages are copyright 2000 by Jetaway Trove, Inc.</body></html>

call now for 

special pricing! 

Fonts• Avoid decorative

Fonts• Avoid decorative

B

Special Characters

Symbol Example HTM Code _________________________________________________ Copyright c © or ©

Trademark TM &#153

Registered r ®Trademark

Non-breaking @ Space

<html><head><title>my title</title></head><body> Jetaway Travelis your one source for all your travel needs. From tickets to travel information, we can help make your vacation the best it can be! Call now for special pricing! 1-800-555-1234Thesepages are copyright © 2000 by Jetaway Trove, Inc.</body></html>

Optimal Line Length

• Min 3.6 inches

• Max 4 inches– Standard is base on normal size font (12) – CSS pix 14-16

<html>

<head>

<script>

function changeFontSize(element,step)

{

step = parseInt(step,10);

var el = document.getElementById(element);

var curFont = parseInt(el.style.fontSize,10);

el.style.fontSize = (curFont+step) + 'px';

return;

}

</script>

</head>

<body>



<a href="javascript:void(0);" onclick="changeFontSize('content','2');">Increase font</a>

<a href="javascript:void(0);" onclick="changeFontSize('content',-2);">Decrease font</a>





My name is Sherlock Holmes. It is my business to know what other people don't know.



</body>

</html>

http://www.vijayjoshi.org/2009/04/02/changing-font-size-on-a-page-with-javascript-for-better-user-experience/

* WWW References:

Dutton, Frank. “Ishihara Test for Color Blindness” < http://www.toledo-bend.com/colorblind/Ishihara.asp > (8, Aug. 2009).

“Factors influencing the design and layout of manuals and other published material.” <http://www.rightwords.co.nz/layout.html> (4, Feb. 2007).

Georgia Tech Research Corporation.” GVU's 10th WWW User Survey.”<http://www.gvu.gatech.edu/user_surveys/survey-1998-10/>

(5, Dec. 2004).

“Komar & Melamid: The Most Wanted Paintings on the Web.”<http://www.diacenter.org/km/usa/favcol.html >

(21, June 2009).

http://www.gvu.gatech.edu/user_surveys/survey-1998-10/

Documents

Color And Text. Color Blindness Red Green Blue United States Results: