Colors and infographics

Colors in Infographics

Kumar SourabhRanju K RavindranDushyant Palriwal

Colors in Infographics

Colors and Infographics

Color is an element of visual design


Color is the visual perceptual property corresponding in humans to the categories called red, blue, yellow, green and others. Color derives from the spectrum of light (distribution of light power versus wavelength) interacting in the eye with the spectral sensitivities of the light receptors. Color categories and physical specifications of color are also associated with objects, materials, light sources, etc., based on their physical properties such as light absorption, reflection, or emission spectra. By defining a color space, colors can be identified numerically by their coordinates.Color is a powerful and important communication tool, and it is tied to religious, cultural, political and social influences. By stopping to consider what each color represents and is linked to in the ‘real world’ we can make informed design decisions that ensure we appeal to our target audience. Without this consideration we run the risk of offending the very people were are designing for.



Color is the visual perceptual property corresponding in humans to the categories called red, blue, yellow, green and others. Color derives from the spectrum of light (distribution of light power versus wavelength) interacting in the eye with the spectral sensitivities of the light receptors. Color categories and physical specifications of color are also associated with objects, materials, light sources, etc., based on their physical properties such as light absorption, reflection, or emission spectra. By defining a color space, colors can be identified numerically by their coordinates.Color is a powerful and important communication tool, and it is tied to religious, cultural, political and social influences. By stopping to consider what each color represents and is linked to in the ‘real world’ we can make informed design decisions that ensure we appeal to our target audience. Without this consideration we run the risk of offending the very people were are designing for.




Color can convey a message.It can change or emphasize the meaning of a word or an image

Image source: http://stuffpoint.com/fruit/image/169742-fruit-fruits.jpg


Image source: http://stuffpoint.com/fruit/image/169742-fruit-fruits.jpg



Red: Excitement, energy, passion, love, desire, speed, strength, power, heat, aggression, etc.

Yellow : joy, gold happiness, hope, illness, betrayal, optimism, Rich, idealism, imagination, etc.

Green: Nature, environment, healthy, good luck, renewal, youth, spring, generosity, etc.

Purple: Royalty, nobility, Wisdom, spirituality, ceremony, mysterious, transformation,


Blue: Peace, tranquility, cold, calm, stability, harmony, unity, trust, truth, confidence, etc

Orange: Energy, balance, enthusiasm, warmth, vibrant, expansive, flamboyant, etc

Pink symbolizes love and romance, caring, tenderness, acceptance and calm.

The meanings of color and the emotions conveyed vary according to culture.

Image source: http://www.flagcentral.org/images/Globe.jpgColor has Cultural Significance


Colors have message.


http://www.stevenedson.com/data/photos/380_108_monks_sep3120.jpg

INFOGRAPHICSis INFORMATION GRAPHICS



VISUAL CONTENT KNOWLEDGE



VISUAL CONTENT KNOWLEDGE


1. Color Coding2. Graphics3. Reference Icons

1. Time Frames2. Statistics3. References

1. Facts2. Deductions

Data source: http://censusindia.gov.in/


Image source: http://www.indiaonlinepages.com/population/population-map-of-india.html


The Digestive Process:The start of the process - the mouth: The digestive process begins in the mouth. Food is partly broken down by the process of chewing and by the chemical action of salivary enzymes (these enzymes are produced by the salivary glands and break down starches into smaller molecules). On the way to the stomach: the esophagus - After being chewed and swallowed, the food enters the esophagus. The esophagus is a long tube that runs from the mouth to the stomach. It uses rhythmic, wave-like muscle movements (called peristalsis) to force food from the throat into the stomach. This muscle movement gives us the ability to eat or drink even when we're upside-down. In the stomach - The stomach is a large, sack-like organ that churns the food and bathes it in a very strong acid (gastric acid). Food in the stomach that is partly digested and mixed with stomach acids is called chyme. In the small intestine - After being in the stomach, food enters the duodenum, the first part of the small intestine. It then enters the jejunum and then the ileum (the final part of the small intestine). In the small intestine, bile (produced in the liver and stored in the gall bladder), pancreatic enzymes, and other digestive enzymes produced by the inner wall of the small intestine help in the breakdown of food. In the large intestine - After passing through the small intestine, food passes into the large intestine. In the large intestine, some of the water and electrolytes (chemicals like sodium) are removed from the food. Many microbes (bacteria like Bacteroides, Lactobacillus acidophilus, Escherichia coli, and Klebsiella) in the large intestine help in the digestion process. The first part of the large intestine is called the cecum (the appendix is connected to the cecum). Food then travels upward in the ascending colon. The food travels across the abdomen in the transverse colon, goes back down the other side of the body in the descending colon, and then through the sigmoid colon. The end of the process - Solid waste is then stored in the rectum until it is excreted via the anus.

http://www.enchantedlearning.com/subjects/anatomy/digestive/


http://methiscool.files.wordpress.com/2012/04/21_04bhumandigestivesys-l.jpg


Friday, August 16th: The US dollar hit a fresh record against the Indian rupee of 61.71364.Thursday, August 15th: The pair declined slightly, to 61.31985.Monday, August 12th - Wednesday, August 14th: Three consecutive increases brought the USD/INR currency pair to 61.44378.Friday, August 9th: A second consecutive depreciation brought the US dollar to Indian rupee exchange rate to 60.79713.Thursday, August 8th: The US dollar started to depreciate again against the Indian currency, the quote falling to 60.86153.Wednesday, August 7th: The USD/INR currency pair moved up to 61.25216.Tuesday, August 6th: A second consecutive depreciation brought the pair to 60.80873.Monday, August 5th: The US dollar started to depreciate again against the Indian rupee, the USD/INR quote going down to 60.87501.Thursday, August 1st - Friday, August 2nd: The went up for two consecutive trading days, reaching the level of 61.10505 Indian rupees to the US dollar on Friday, August 2nd.Wednesday, July 31st: The US dollar to Indian rupee quotation decreased to 60.40527.Monday, July 29th - Tuesday, July 30th: The USD/INR cross went up for two trading days in a row, reaching 60.48479.Friday, July 26th: The quotation declined to 59.04223. This was the lowest in five weeks.Thursday, July 25th: The USD/INR cross rose by 0.02875, from 59.07972 to 59.10847.Wednesday, July 24th: The exchange dipped from 59.72534 to 59.07972.Tuesday, July 23rd: The quote increased again, by 0.00181.Monday, July 22nd: The US dollar started to appreciate again against the Indian currency; the rate went up to 59.72353, from 59.50469.Friday, July 19th: The quotation decreased to 59.50469.Wednesday, July 17th - Thursday, July 18th: The USD/INR exchange rate rose from 59.14469 to 59.65019.

USD to INR Exchange Rates of Last 30 Days

http://www.tititudorancea.com/z/usd_to_inr_exchange_rates_american_indian_rupee.htm


59.0422

59.5765

60.1108

60.6451

61.1794

61.7136

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

16 July-16 August 2013

USD to INR Exchange Rates of Last 30 Days

http://www.tititudorancea.com/z/usd_to_inr_exchange_rates_american_indian_rupee.htm


An infographic (information graphic) is a representation of information in a graphic format designed to make the data easily understandable at a glance. People use infographics to quickly communicate a message, to simplify the presentation of large amounts of data, to see data patterns and relationships, and to monitor changes in variables over time.


in Infographics


Color coding is a way to convey information quickly, which facilitates visual search. In this Washington D.C. metro map, as with most schematic subway maps, color coded lines represent the different rail lines. Visual searching occurs when we actively scan the environment to locate a specific feature among many distractors. In this case, color makes it easier to visually follow the path of a rail line, speeding up the search process.


Reasons to Use Color in Infographics

1. Use color to speed visual search

Reasons to Use Color in Infographics

1. Use color to speed visual search

Image Source: http://upload.wikimedia.org/wikipedia/commons/9/9c/Wash-dc-metro-map.png


We recognize objects more quickly when their colors reflect what we see in the physical world.

Image source: http://www.jonevaristo.com/whams/wp-content/uploads/2011/11/16_animal_illustrations_complte.jpg


2. Use color to improve object recognition

Image source: http://www.jonevaristo.com/whams/wp-content/uploads/2011/11/16_animal_illustrations_complte.jpg


2. Use color to improve object recognition

Our brains are compelled to find meaning, whether it is intended or not. Because the eyes are attracted to bright and high-contrast colors, viewers will derive meaning from something that stands out. When you use color for emphasis, it’s like shouting that this object or element has the greatest value. At the Puma website, the red is used to prominently display logo.

http://www.hybridlava.com/wp-content/uploads/Colourful-Website-Designs18.jpg

Bright colors above represent something of value


3. Use color to enhance meaning

http://www.hybridlava.com/wp-content/uploads/Colourful-Website-Designs18.jpg


3. Use color to enhance meaning

Color is often used in technical documentation and textbooks to convey structure. Each chapter might feature a different colored heading and a block of the same color may appear on each page, making it easy to distinguish between chapters. Another approach to color structure can be found in the book, Designing for Small Screens. Each chapter is organized into three sections, denoted by vivid colors. The sections form three tracks running through the book, which is described visually in the table of contents shown above.

Image source: httppublications.msss.gouv.qc.caacrobatfdocumentation200808-289-19A.pdf


4. Use color to convey structure

Image source: httppublications.msss.gouv.qc.caacrobatfdocumentation200808-289-19A.pdf


4. Use color to convey structure

In the sphere of marketing and advertising, brand identity is the visual essence of a business or organization. Visual identity is often highly correlated with color through symbolism (see below). The chosen color, in consort with other aspects of the design, has the potential to project the entire flavor of the organization to the world.

http://blog.crowdspring.com/wp-content/uploads/2009/11/2616906744_a238697a95_b.jpg


5. Use color to establish identity

http://blog.crowdspring.com/wp-content/uploads/2009/11/2616906744_a238697a95_b.jpg


5. Use color to establish identity

Color elicits both cultural and psychological associations that are symbolic of ideas, concepts and feelings. Context plays a part in color symbolism, meaning that one color can have positive or negative connotations depending on the larger framework. For example, although blue is often associated with strength and and brown is as negativity.

Image source: http://www.exoticindia.com/oils/oq43.jpg


6. Use color for symbolism

Image source: http://www.exoticindia.com/oils/oq43.jpg


6. Use color for symbolism

The wise use of color can improve usability for everything from everyday objects to way finding. Consider the glaring red medical waste bags in a hospital, lab or doctor’s office. Different colors in traffic symbols like yellow, blue, red, green black they all have different meanings to communicate to people.

Image source: http://www.nevron.com/gallery/FullGalleries/diagram/Shapes/images/TrafficSignsShapes.png


7. Use color to improve usability

Image source: http://www.nevron.com/gallery/FullGalleries/diagram/Shapes/images/TrafficSignsShapes.png


7. Use color to improve usability

Examples

Image source: http://un.org.au/files/2013/07/MDG3_July.jpg


http://api.ning.com/files/i2O61KFpPEQXqN2oTvJiT--by5lL8BBLChy03DJ39UZ8ZfNTRJ4aWanDxmnNh*3ECJrtZWRctRYN6*qTNx7ZdoyNAtbbMUEF/rain_kumarapuram.jpg


http://www.dreamgrow.com/wp-content/uploads/2011/02/facebook-growth.jpg



http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/08/paralympicsaa.jpg

References

• http://www.hongkiat.com/blog/infographics-web-designers/

• https://www.google.co.in/search?newwindow=1&site=&source=hp&q=color+in+infographics&oq=colours+in+infograp&gs_l=hp.1.0.0i22i30l3.5778.15326.0.19522.21.18.1.2.2.0.252.2746.1j16j1.18.0....0...1c.1.25.hp..2.19.2468.7iP7kNrurIg

• http://designcrux.netfirms.com/infograph.html

• http://wilkinsondarren.wordpress.com/2013/05/24/colour-guide-for-scientific-graphs-and-illustrations/

• http://understandinggraphics.com/design/10-reasons-to-use-color/

• http://inspiredm.com/9-interesting-infographics-about-color/

• http://visual.ly/color-guide-designers

• http://www.colormatters.com/color-symbolism/color-symbolism-theories

• http://www.incredibleart.org/lessons/middle/color2.htm

• http://blog.teamtreehouse.com/how-colour-communicates-meaning


http://www.hongkiat.com/blog/infographics-web-designers/

Thank you