Presentation color (kelompok 12)


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Presentation color (kelompok 12)

  1. 1. Choose the Proper ColorAfdhal Dinilhak G64124026Dody Prasetya G64124034Erlangga Adinegoro G64124042Novi Indra G64124069
  2. 2. Whats is it? Wavelengths of light themselves are notcolored. What is perceived as actual color resultsfrom the stimulation of the properreceptor in the eye by a received lightwave.2
  3. 3. Color The Visible Spectrum3
  4. 4. ColorTo describe a color, it is useful to refer to the three properties itpossesses: Hue : Spectral wavelength composition of a color. chroma or saturation : Purity of a color in a scale from gray to themost vivid version of the color. value or intensity : Relative light-ness or darkness of a color in arange from black to white.4
  5. 5. ColorRGB Many color monitors use the three primary colors of light, invarious combinations, to create the many colors we see onscreens. By adjusting the amounts of red, green, and blue light presentedin a pixel, millions of colors can be generated. Hence, colorpalette editors exist with labels R, G, and B (or the words spelledout).5
  6. 6. ColorHSV Some palette editors use a convention based on the Munsellmethod of color notation called HSV, for hue, saturation, andvalue (or HSL for hue, saturation, and lightness). Again, variouscombinations produce different colors.6
  7. 7. Color Uses Color as a Formating Aid Color as a Visual Code Other Color Uses7
  8. 8. Possible Problems with Color High Attention-Getting Capacity Interference with Use of Other Screens Varying Sensitivity of the Eye to Different Colors Color-Viewing Deficiencies Color Connotations Cross-Disciplinary and Cross-Cultural Differences8
  9. 9. Color — What the Research Shows To illustrate, on a positive note, color has been shown toimprove performance (Kopala, 1981; Nagy and Sanchez,1992; Sidorsky, 1982) To improve visual search time (Christ, 1975; Carter, 1982) To be useful for organizing information (Engel, 1980) To aid memory (Marcus, 1986b) To demarcate a portion of a screen (as opposed to lines ortype font, Wopking et al., 1985).9
  10. 10. Color — What the Research ShowsImprove visual search time with colorTo aid memory with color10
  11. 11. Color and Human Vision The Lens Focus received wavelengths of light on the retina The lens itself is not color corrected The Retina Light-sensitive surface of the eye Comprises two kinds of receptors, rods and cones11
  12. 12. Choosing ColorsOne must consider the following factors : The human visual system The possible problems that the colors use may cause The viewing environment in which the display is used The task of the user How the colors will be used The hardware on which the colors will be displayed12
  13. 13. Choosing Colors Requires a clear understanding of how the information will be used Use color as a redundant screen code.Categories : color chosen to organize information or data on a screenmust aid the transfer of information from the display to the user.Redundancy : never rely on color as the only way of identifying ascreen element or process. Choosing Colors for Categories of Information13
  14. 14. Choosing Colors Colors are subject to contextual effects. The size of a coloredimage, the color of images adjacent to it, and the ambientillumination all exert an influence on what is actually perceived. Adjacent images can influence the perceived color. A color on a darkbackground will look lighter and brighter than the same color on alight background Colors in Context14
  15. 15. Choosing Colors Design for monochrome first, or in shades of black, white and gray. Use colors conservatively. Do not use color where other identification techniques, such aslocation, are available. Usage15
  16. 16. Choosing Colors For best absolute discrimination, select no more than four or five colorswidely spaced on the color spectrum. Good colors: red, yellow, green, blue, and brown For best comparative discrimination, select no more than six or sevencolors widely spaced on the color spectrum Other acceptable colors: orange, yellow-green, cyan, violet, andmagenta Choose harmonious colors One color plus two colors on either side of its complement. Three colors at equidistant points around the color circle. For extended viewing or older viewers, use brighter colors Discrimination and Harmony16
  17. 17. Choosing Colors To draw attention or to emphasize elements, use bright or highlightedcolors. To deemphasize elements, use less bright colors. The perceived brightness of colors from most to least iswhite, yellow, green, red, blue. To emphasize separation, use contrasting colors. Red and green, blue and yellow. To convey similarity, use similar colors. Orange and yellow, blue and violet. Emphasis17
  18. 18. Choosing Colors To indicate that actions are necessary, use warm colors. Red, orange, yellow. To provide status or background information, use cool colors. Green, blue, violet, purple. Conform to human expectations. In the job. In the world at large Common Meanings18
  19. 19. Choosing Colors In the center of the visual field, use red and green. For peripheral viewing, use blue, yellow, black, and white. Use adjacent colors that differ by hue and value or lightness Location19
  20. 20. Choosing Colors Order colors by their spectral position. Red, orange, yellow, green, blue, indigo, violet Ordering20
  21. 21. Choosing Colors Foregrounds: Use colors that highly contrast with the background color. For text or data, use Black Desaturated or spectrum center colors such as white, yellow,or green. Warmer more active colors. Use colors that possess the same saturation and lightness. To emphasize an element, highlight it in a light value of the foregroundcolor, pure white, or yellow. To deemphasize an element, lowlight it in a dark value of theforeground color. Foregrounds and Backgrounds21
  22. 22. Choosing Colors Backgrounds: Use a background color to organize a group of elements into a unifiedwhole. Use colors that do not compete with the foreground. Use• Light-colored backgrounds of low intensity: off-white or light gray.• Desaturated colors.• Cool, dark colors such as blue or black.• Colors on the spectral extremes Foregrounds and Backgrounds22
  23. 23. Choosing Colors Use at least five colors or color values to create a 3-D look on a screen. Background: the control itself and the window on which it appears. Foreground: captions and lines for buttons, icons, and other objects.• Usually black or white. Selected mode: the color used when the item is selected. Top shadow: the bezel on the top and left of the control. Bottom shadow: the bezel on the bottom and right of the control Three-Dimensional Look23
  24. 24. Color Palette, Defaults, and Customization Permit users to customize their colors. Provide a default set of colors for all screen components. Provide a palette of six or seven foreground colors.• Provide two to five values or lightness shades for eachforeground color. Provide a palette of six or seven background colors. Never refer to a screen element by its color.24
  25. 25. Customization Because color preference is subjective. Compared were displayed color combinations that were judged tobe “good” or “poor.” When color customization is permitted, whenever possible allowusers to see the results of their color choices before they areapplied. Include a sample screen in a preview function within thecustomization process.25
  26. 26. Default set Both the Macintosh and Microsoft Windows provide standard, well-thought-out color schemes. Do not provide the color spectrum; limit the number of choicesavailable. A maximum of six or seven foreground and background colors willprovide the necessary variety. With these palettes, however, some sort of guidance concerningmaximum number of colors to use and what are good and poorcombinations should be provided.26
  27. 27. Grayscale For fine discriminations use a black-gray-white scale. Recommended values are white, light gray, medium gray, darkgray, black. The eye resolves fine detail much better on a black-white scale. Marcus (1986b) recommends five tonal values for black andwhite, higher-resolution screens: black, dark gray, mediumgray, light gray, and white.27
  28. 28. Text in ColorWhen switching text from black to color, Double the width of lines. Use bold or larger type.• If originally 8 to 12 points, increase by 1 to 2 points.• If originally 14 to 24 points, increase by 2 to 4 points.Check legibility by squinting at text. Too-light type will recede or even disappear.28
  29. 29. Monochromatic Screens At the standard viewing distance, white, orange, or green areacceptable colors. At a far viewing distance, white is the best choice. Over all viewing distances, from near to far, white is the bestchoice29
  30. 30. Considerations for People with Color-Viewing Deficiencies Use color combinations that canbe easily discriminated. Ensure that the lightness contrastbetween foreground colors is high.30 Use color combinations that can be easily discriminated. Ensure that the lightness contrast between foreground colors ishigh.
  31. 31. Cultural, Disciplinary, and Accessibility ConsiderationsConsider the impact of specific colors on : Users of various cultures. Users of various disciplines. Users relying on accessibility utilities.31
  32. 32. Choosing Colors for Textual Graphic Screens Use effective foreground/background combinations. Use effective foreground combinations. Choose the background color first. Display no more than four colors at one time. Use colors in toolbars sparingly. Test the chosen colors.32
  33. 33. Use effective foreground/background combinations33
  34. 34. Choosing Colors for Statistical Graphics Screens Emphasis Number of Colors Backgrounds Size Status34
  35. 35. Choosing Colors for Statistical Graphics Screens Measurements and Area-Fill Patterns Physical Impressions Size Weight Distance Height Depth Concentration Level Magnitude of Change Action Order Neutrality35
  36. 36. Choosing Colors for Web PagesPurpose: Color must always have a meaningful purpose.Palette: Use the browser 216-color palette.Presentation: Minimize the number of presented colors. Always consider color in context. Use similar or the same color schemes throughout. For foregrounds: Use black or strong colors for text andheadings. For backgrounds: Use weaker contrasting colors such as off-whiteor light gray.36
  37. 37. 37
  38. 38. Choosing Colors for Web Pages Relying exclusively on color. Too many colors at one time. Highly saturated, spectrally extreme colors together: Red and blue, yellow and purple. Low-brightness colors for extended viewing or older viewers. Colors of equal brightness.38
  39. 39. Uses of Color to AvoidLinks: Use default colors for links. Make unselected/unvisited links blue. Make selected/visited links purple. Do not display non-link text in link colors.Testing: Test all colors.39
  40. 40. Uses of Color to Avoid Colors lacking contrast. Fully saturated colors for text or other frequently-read screencomponents. Pure blue for text, thin lines, and small shapes. Colors in small areas. Color for fine details.40
  41. 41. Uses of Color to Avoid Non-opponent colors. Red and green in the periphery of large-scale displays. Adjacent colors that only differ in the amount of blue they possess. Single-color distinctions for color-deficient users. Using colors in unexpected ways. Using color to improve legibility of densely packed text.41
  42. 42. THANK YOU42