Color_And_Text_--_Chap_4_10

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 Issues of Color Red/Green Text Text Yellow-/Blue Text Text Blue/Green Text Text Black/White Text Text http://www.colormatters.com/ 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. This will allow you to work with the tags displayed on the previous screen. Good luck!!!  Jetaway Travel </body> </html> Opening Tag Closing Tag Purpose _________________________________________________ Marks the end of a paragraph -- double spacing (closing tag not used) <blockquote> </blockquote> Single space -carriage return 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> Heading Font Size Opening Tag Closing Tag Purpose _________________________________________________ <h1> </h1> Largest Size Heading <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Smallest Size Heading 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> Monzilla BLINKING SUBSCRIPT <code> </code> FIXED WIDTH FONT <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 7 Relative value -2 1 2 3 4 5 6 -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-1234 These pages 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 Green 000000 Black 00FF00 Lime C0C0C0 Silver FFFF00 Yellow 808080 Grey 808000 Olive FF0000 Red 000080 Navy 800000 Maroon 0000FF Blue 800080 Purple 008080 Teal FF00FF Fuchsia 00FFFF Aqua 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-1234 These pages are copyright 2000 by Jetaway Trove, Inc. </body> </html> call now for special pricing! Fonts • Avoid decorative Fonts • Avoid decorative Special Characters Symbol Example HTM Code _________________________________________________ Copyright c © or © Trademark TM Registered Trademark r ® Non-breaking Space @   &#153 <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 These pages 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).

Color_And_Text_--_Chap_4_10

Related documents

Products

Support

Color_And_Text_--_Chap_4_10

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib