logging in or signing up JDF Color Julie Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINTLite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 332 Category: Entertainment License: All Rights Reserved Like it (0) Dislike it (0) Added: November 05, 2007 This Presentation is Public Favorites: 0 Presentation Description No description available. Comments Posting comment... By: raishahzad_khral (30 month(s) ago) please allow mw to download this file. i shall be thankful to you.... Saving..... Post Reply Close Saving..... Edit Comment Close Premium member Presentation Transcript Color: Color Acknowledgements: Acknowledgements The presentations and assignments have been develop by the Georgia Tech HCI faculty over a period of years, and continue to evolve. Contributors include: Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, Bruce Walker Feedback is most welcome!Agenda: Agenda How to characterize How? When? Why? of use Searching and highlighting Color palettes Color contrast Color associations Characterizing Color - HSV Model: Hue basic color, pigment Saturation relative purity, brightness, or intensity of a color Value lightness or darkness of a color Most commonly-used model Characterizing Color - HSV Model Image from: Adventures in HSV Space, Darrin Cardani, dcardani@buena.comHSV Color Model: Hue Wavelength (red, green, yellow, blue) Spectrum (VIBGYOR) Saturation Pastel versus strong (baby blue, sky blue, royal blue) Value amount of energy (white, light gray, dark gray, black) Usually V = 0.299*R + 0.587*G + 0.114*B HSV Color ModelHSV Color Space: HSV Color Space Typical color selection toolsColor – Reflected and Emitted: Color – Reflected and Emitted We see the world via reflected color: light strikes a surface and is reflected to our eyes – properties of surface dictate color (printers, objects) Subtractive color model - Cyan Magenta Yellow primaries Colors on CRT are emitted: light is generated by phosphors and emitted Additive color model - Red Green Blue primaries Color: Color Monitors typically work on the RGB scheme 0–255 value each red, green, blue Brightness is typically 0.299*R + 0.587*G + 0.114*B R: 170 G:43 B: 211Color: Color Use it for a purpose, not to just add some color in Your Screen?: Your Screen?Color Guidelines: Color Guidelines Use color sparingly – design in b/w then add color where appropriate Thus use color as a redundant code Helps color-blind users For monochrome displays (not too many left :) Use color to: Draw attention Facilitate searching Communicate organization Indicate status Establish relationshipsColor Guidelines: Color Guidelines Display color images on a black, white, or gray background Be sure foreground colors contrast (in both brightness and hue) with background colors Avoid using color in non-task related waysHow many small ovals?: How many small ovals? Now how many small ovals?: Now how many small ovals? Visual Exercise: Visual Exercise How many small objects? How many rectangles? How many orange objects?How Many Small objects?: How Many Small objects? How Many Rectangles?: How Many Rectangles? How Many Orange objects?: How Many Orange objects? Visual Exercise: Visual Exercise Find the red letter Find the ‘A’Find the Red Letter; Find the ‘A’ : Find the Red Letter; Find the ‘A’ V R Z M F G Q J C T D W W P K V L H I N E B S U O X Y V R Z M F G Q J C T D W A P K V L H I N E B S U O X Y R Z D K S W V S XFind the Q and Z: Find the Q and Z V R Z M F G Q J C T D W A PColor Meanings: Contextually Specific: Yellow happy, caution, joy Brown warm, fall, dirt, earth Green go, on, safe, envy, lush, pastoral Purple royal, sophisticated, Barney Color Meanings: Contextually Specific Red aggression, love hot, warning, stop, radiation Pink female, cute, cotton candy Orange warm, autumn, Halloween Blue cold, offColor Meanings: Culturally Specific: Color Meanings: Culturally Specific http://www.ricklineback.com/culture2.htmSearching and Color: Searching and Color Search for a particular item on a display Color generally faster Shapes (60%) Size (40%) Brightness (40%) Alpha characters (40%) Letters (10%) Score = Achromatic search time – color search time Achromatic search time An initial decrease in search time occurs as the first few colors are used, but then search times go up as more colors are added.Accuracy and Color Coding: Accuracy and Color Coding Color is more accurate than some alternatives for coding: Shape (202%) Size (176%) Intensity (32%) Christ, R., “Review & Analysis of Color Coding for Visual Display,” Human Factors, 17(6), 1975, pp. 542-570.Accuracy and Color Coding: Accuracy and Color Coding Redundant coding increases discrimination Red triangle Green square Viewer cues on either code, results are: Brightness & color (104%) Size & brightness & color (61%) Size & color (60%) Score = Redundant – Color Only Color Only Color Guidelines: Color Guidelines To express difference, use high contrast colors (and vice versa) Make sure colors do not “vibrate” These colors vibrate: they will give you a headache Color Palettes: Color Palettes Color palette – set of colors used on one screen Choose color palette from HSV space by varying and two of H, S, and V. Don’t vary hue, saturation and brightness at the same time. Unless want continuous tone or ‘artsy’ effect, best to use only 4-6 colors per screenColor Palettes/Suites: Color Palettes/Suites Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)Color Palettes: Color Palettes Use of pastels and primaries Varyies all of hue, saturation and valueColor Palettes: Color Palettes Redesign increased saturation of blue All colors are primaryEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Black text on white Gray text on white Yellow text on white Light yellow text on white Green text on white Light green text on white Blue text on white Pale blue text on white Dark red text on white Red text on white Rose text on whiteEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Black text on red Gray text on red Yellow text on red Light yellow text on red Green text on red Light green text on red Blue text on red Pale blue text on red Dark red text on red Red text on red Rose text on redEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Black text on dark blue Gray text on dark blue Yellow text on dark blue Light yellow text on dark blue Green text on dark blue Light green text on dark blue Blue text on dark blue Pale blue text on dark blue Dark red text on dark blue Red text on dark blue Rose text on dark blueEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Also important when colored text is shown on gray scale monitors Exact effect depends on mapping of colors to intensities. Normally is close to 0.299*R + 0.587*G + 0.114*BEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Not enough contrast between blue text and grey, textured background Inconsistency may cause user to puzzle over icons being different sizesEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Substituted black text for blue Increased contrast Match your interest, find out what’s new online, discover our most loved services, and make your time online fun and informative. Start by clicking on “A Letter from Steve”, and come back to explore the other areas featured here. You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
JDF Color Julie Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINTLite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 332 Category: Entertainment License: All Rights Reserved Like it (0) Dislike it (0) Added: November 05, 2007 This Presentation is Public Favorites: 0 Presentation Description No description available. Comments Posting comment... By: raishahzad_khral (30 month(s) ago) please allow mw to download this file. i shall be thankful to you.... Saving..... Post Reply Close Saving..... Edit Comment Close Premium member Presentation Transcript Color: Color Acknowledgements: Acknowledgements The presentations and assignments have been develop by the Georgia Tech HCI faculty over a period of years, and continue to evolve. Contributors include: Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, Bruce Walker Feedback is most welcome!Agenda: Agenda How to characterize How? When? Why? of use Searching and highlighting Color palettes Color contrast Color associations Characterizing Color - HSV Model: Hue basic color, pigment Saturation relative purity, brightness, or intensity of a color Value lightness or darkness of a color Most commonly-used model Characterizing Color - HSV Model Image from: Adventures in HSV Space, Darrin Cardani, dcardani@buena.comHSV Color Model: Hue Wavelength (red, green, yellow, blue) Spectrum (VIBGYOR) Saturation Pastel versus strong (baby blue, sky blue, royal blue) Value amount of energy (white, light gray, dark gray, black) Usually V = 0.299*R + 0.587*G + 0.114*B HSV Color ModelHSV Color Space: HSV Color Space Typical color selection toolsColor – Reflected and Emitted: Color – Reflected and Emitted We see the world via reflected color: light strikes a surface and is reflected to our eyes – properties of surface dictate color (printers, objects) Subtractive color model - Cyan Magenta Yellow primaries Colors on CRT are emitted: light is generated by phosphors and emitted Additive color model - Red Green Blue primaries Color: Color Monitors typically work on the RGB scheme 0–255 value each red, green, blue Brightness is typically 0.299*R + 0.587*G + 0.114*B R: 170 G:43 B: 211Color: Color Use it for a purpose, not to just add some color in Your Screen?: Your Screen?Color Guidelines: Color Guidelines Use color sparingly – design in b/w then add color where appropriate Thus use color as a redundant code Helps color-blind users For monochrome displays (not too many left :) Use color to: Draw attention Facilitate searching Communicate organization Indicate status Establish relationshipsColor Guidelines: Color Guidelines Display color images on a black, white, or gray background Be sure foreground colors contrast (in both brightness and hue) with background colors Avoid using color in non-task related waysHow many small ovals?: How many small ovals? Now how many small ovals?: Now how many small ovals? Visual Exercise: Visual Exercise How many small objects? How many rectangles? How many orange objects?How Many Small objects?: How Many Small objects? How Many Rectangles?: How Many Rectangles? How Many Orange objects?: How Many Orange objects? Visual Exercise: Visual Exercise Find the red letter Find the ‘A’Find the Red Letter; Find the ‘A’ : Find the Red Letter; Find the ‘A’ V R Z M F G Q J C T D W W P K V L H I N E B S U O X Y V R Z M F G Q J C T D W A P K V L H I N E B S U O X Y R Z D K S W V S XFind the Q and Z: Find the Q and Z V R Z M F G Q J C T D W A PColor Meanings: Contextually Specific: Yellow happy, caution, joy Brown warm, fall, dirt, earth Green go, on, safe, envy, lush, pastoral Purple royal, sophisticated, Barney Color Meanings: Contextually Specific Red aggression, love hot, warning, stop, radiation Pink female, cute, cotton candy Orange warm, autumn, Halloween Blue cold, offColor Meanings: Culturally Specific: Color Meanings: Culturally Specific http://www.ricklineback.com/culture2.htmSearching and Color: Searching and Color Search for a particular item on a display Color generally faster Shapes (60%) Size (40%) Brightness (40%) Alpha characters (40%) Letters (10%) Score = Achromatic search time – color search time Achromatic search time An initial decrease in search time occurs as the first few colors are used, but then search times go up as more colors are added.Accuracy and Color Coding: Accuracy and Color Coding Color is more accurate than some alternatives for coding: Shape (202%) Size (176%) Intensity (32%) Christ, R., “Review & Analysis of Color Coding for Visual Display,” Human Factors, 17(6), 1975, pp. 542-570.Accuracy and Color Coding: Accuracy and Color Coding Redundant coding increases discrimination Red triangle Green square Viewer cues on either code, results are: Brightness & color (104%) Size & brightness & color (61%) Size & color (60%) Score = Redundant – Color Only Color Only Color Guidelines: Color Guidelines To express difference, use high contrast colors (and vice versa) Make sure colors do not “vibrate” These colors vibrate: they will give you a headache Color Palettes: Color Palettes Color palette – set of colors used on one screen Choose color palette from HSV space by varying and two of H, S, and V. Don’t vary hue, saturation and brightness at the same time. Unless want continuous tone or ‘artsy’ effect, best to use only 4-6 colors per screenColor Palettes/Suites: Color Palettes/Suites Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)Color Palettes: Color Palettes Use of pastels and primaries Varyies all of hue, saturation and valueColor Palettes: Color Palettes Redesign increased saturation of blue All colors are primaryEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Black text on white Gray text on white Yellow text on white Light yellow text on white Green text on white Light green text on white Blue text on white Pale blue text on white Dark red text on white Red text on white Rose text on whiteEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Black text on red Gray text on red Yellow text on red Light yellow text on red Green text on red Light green text on red Blue text on red Pale blue text on red Dark red text on red Red text on red Rose text on redEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Black text on dark blue Gray text on dark blue Yellow text on dark blue Light yellow text on dark blue Green text on dark blue Light green text on dark blue Blue text on dark blue Pale blue text on dark blue Dark red text on dark blue Red text on dark blue Rose text on dark blueEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Also important when colored text is shown on gray scale monitors Exact effect depends on mapping of colors to intensities. Normally is close to 0.299*R + 0.587*G + 0.114*BEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Not enough contrast between blue text and grey, textured background Inconsistency may cause user to puzzle over icons being different sizesEffect of Colored Text on Colored Background: Effect of Colored Text on Colored Background Substituted black text for blue Increased contrast Match your interest, find out what’s new online, discover our most loved services, and make your time online fun and informative. Start by clicking on “A Letter from Steve”, and come back to explore the other areas featured here.