You are on page 1of 44

HCI 201 Multimedia and the www

Multimedia & The World Wide Web

winny

HCI 201 Multimedia and the www

What is important in web design? • • • • Color Layout Content Text – Important to know that the font you intend may not be fonts in user’s browsers.

winny

HCI 201 Multimedia and the www

What is COLOR?

Color is commonly referred to as a property of things:
The sky is blue,

blood is red,
bananas yellow. Color, though, exists only in the brain. It is a neural process, triggered by retinal responses to wavelengths of light.

winny

HCI 201 Multimedia and the www

COLOR
cosmic rays gamma rays x-rays ultra-violet ultra-violet visible light visible light infra-red microwaves television radio electricity
3100 miles 1 foot 700 nanometers 1 nanometer ..00001 nanometer 400 nanometers

electromagnetic spectrum
winny

HCI 201 Multimedia and the www COLOR Artists. designers and other visual communicators define the structural patterns of color by means of hue. saturation and value. winny .

HCI 201 Multimedia and the www COLOR HUE: the dimension of color determined by the light wave grouping of the color. winny . white or gray. The saturation of a color decreases as it moves to black. VALUE: the lightness or darkness of a color. SATURATION: the amount of hue in a color. measured as a level of gray.

HCI 201 Multimedia and the www COLOR Space LIGHTNESS winny .

HCI 201 Multimedia and the www COLOR additive yellow subtractive yellow red green red green magenta cyan magenta cyan blue blue winny .

HCI 201 Multimedia and the www HUE Temperature winny .

colors must be used consistently throughout the design.HCI 201 Multimedia and the www Colors in web design • Color is a powerful component in web design. colors create visual boundaries that give a web site a feeling of place. • Plan the use of colors carefully. • It defines a web site's environment and influences the mood and emotion. • No matter which colors are chosen. If used that way. winny .

• Use a limited palette • Readability winny . • understand how colors complement and interact with each other.HCI 201 Multimedia and the www Choose Colors • Color makes you feel. so select the color support your message • Understand the basics of color theory.

HCI 201 Multimedia and the www Color Associations • • • • • • Red Blue Green Yellow Orange Black winny .

HCI 201 Multimedia and the www winny .

and raises blood pressure. war. winny . • It enhances human metabolism. and love • Red is a very emotionally intense color.HCI 201 Multimedia and the www Red • Red is the color of fire and blood • It is associated with energy. and fire equipment are usually painted red. desire. increases respiration rate. danger. • It has very high visibility. power. which is why stop signs. determination as well as passion. stoplights. strength.

• Light red represents joy. passion. and love winny .HCI 201 Multimedia and the www Red Red brings text and images to the foreground • Use it as an accent color to stimulate people to make quick decisions • it is a perfect color for 'Buy Now' or 'Click Here' buttons on Internet banners and websites. sensitivity. sexuality.

courage. rage. It denotes feminine qualities and passiveness • Dark red – is associated with vigor. malice. willpower. and friendship. leadership. longing. and wrath • Brown – suggests stability and denotes masculine qualities • Reddish-brown – is associated with harvest and fall winny . love.HCI 201 Multimedia and the www Red • Pink – signifies romance. anger.

HCI 201 Multimedia and the www winny .

It's associated with joy. happiness. intellect. and energy • Yellow produces a warming effect. and generates muscle energy • Bright. stimulates mental activity.cabs are painted this color winny .HCI 201 Multimedia and the www Yellow • Yellow is the color of sunshine. pure yellow is an attention getter. which is the reason taxi. arouses cheerfulness.

yellow may have a disturbing effect.HCI 201 Multimedia and the www Yellow • When overused. it is known that babies cry more in yellow rooms • Yellow is seen before other colors when placed against black. this combination is often used to issue a warning winny .

and joy winny . sickness. decay.HCI 201 Multimedia and the www Yellow • Dull (dingy) yellow – represents caution. freshness. and jealousy • Light yellow – is associated with intellect.

HCI 201 Multimedia and the www winny .

HCI 201 Multimedia and the www winny .

fascination.HCI 201 Multimedia and the www Orange • Orange represents enthusiasm. happiness. orange is a very hot color. attraction. determination. success. so it gives the sensation of heat winny . and stimulation • To the human eye. creativity. encouragement.

HCI 201 Multimedia and the www Orange • Orange increases oxygen supply to the brain. It is highly accepted among young people. Orange is very effective for promoting food products and toys winny . • Orange is the color of fall and harvest • Orange has very high visibility. As a citrus color. produces an invigorating effect. so you can use it to catch attention and highlight the most important elements of your design. orange is associated with healthy food and stimulates appetite. and stimulates mental activity.

HCI 201 Multimedia and the www Orange • Dark orange – can mean deceit and distrust • Red-orange – corresponds to desire. Gold often symbolizes high quality winny . The meaning of gold is illumination. aggression. sexual passion. wisdom. pleasure. and thirst for action • Gold – evokes the feeling of prestige. and wealth. domination.

HCI 201 Multimedia and the www winny .

harmony. freshness. Green has strong emotional correspondence with safety • Green has great healing power.HCI 201 Multimedia and the www Example Green • Green is the color of nature. It symbolizes growth. and fertility. Sometimes green denotes lack of experience winny . It is the most restful color for the human eye • Green suggests stability and endurance.

the financial world. and Wall Street http://www. so you can use it to promote 'green' products • Dull.org/international_en/ winny . darker green is commonly associated with money.HCI 201 Multimedia and the www Green • Use green to indicate safety when advertising drugs and medical products • Green is directly related to nature. banking.greenpeace.

discord. and jealousy • Aqua – is associated with emotional healing and protection • Olive green – is the traditional color of peace winny . greed. cowardice. and jealousy • Yellow-green – can indicate sickness.HCI 201 Multimedia and the www Green • Dark green – is associated with ambition.

HCI 201 Multimedia and the www winny .

HCI 201 Multimedia and the www winny .

truth. confidence. loyalty.united.HCI 201 Multimedia and the www Blue • Blue is often associated with depth and stability. • Blue is strongly associated with tranquility and calmness http://www. • It symbolizes trust.com/ winny . faith. and heaven • Blue is considered beneficial to the mind and body. wisdom. intelligence. It slows human metabolism and produces a calming effect.

vodka). blue is linked to consciousness and intellect.HCI 201 Multimedia and the www Blue • You can use blue to promote products and services related to cleanliness (water purification filters. Use blue to suggest precision when promoting high-tech products winny . air and sky (airlines. airports. water and sea (sea voyages. mineral water) • As opposed to emotionally warm colors like red. orange. cleaning liquids. air conditioners). and yellow.

blue can create high-impact. because blue suppresses appetite. blue-yellow-red is a perfect color scheme for a superhero winny . vibrant designs. • it is a preferred color for corporate America • Avoid using blue when promoting food and cooking. expertise. it is highly accepted among males. Dark blue is associated with depth. for example. • When used together with warm colors like yellow or red. and stability. according to studies.HCI 201 Multimedia and the www Blue • Blue is a masculine color.

and seriousness winny . integrity. understanding. tranquility. power.HCI 201 Multimedia and the www Blue • Light blue – is associated with health. and softness • Dark blue – represents knowledge. healing.

HCI 201 Multimedia and the www winny .

gov.HCI 201 Multimedia and the www Purple • Purple combines the stability of blue and the energy of red. and ambition.asp winny . independence. dignity. It conveys wealth and extravagance • Purple is associated with wisdom. creativity. nobility.royal. Purple is associated with royalty • It symbolizes power. mystery.uk/output/Page1. luxury. and magic http://www.

• Purple is a very rare color in nature. almost 75 percent of pre-adolescent children prefer purple to all other colors. You can use bright purple when promoting children's products winny . some people consider it to be artificial • Light purple is a good choice for a feminine design.HCI 201 Multimedia and the www Purple • According to surveys.

It can cause frustration winny .HCI 201 Multimedia and the www Purple • Light purple – evokes romantic and nostalgic feelings • Dark purple – evokes gloom and sad feelings.

HCI 201 Multimedia and the www winny .

• You can use white to suggest simplicity in hightech products • White is an appropriate color for charitable organizations. purity. purity. and cleanliness. innocence. • White means safety. goodness. angels are usually imagined wearing white clothes winny .HCI 201 Multimedia and the www White • White is associated with light. and virginity • It is considered to be the color of perfection.

HCI 201 Multimedia and the www winny .

HCI 201 Multimedia and the www winny .

it is considered to be a very formal. and prestigious color (black tie.other very powerful colors black gives a very aggressive color scheme winny . evil. Combined with red or orange . formality.HCI 201 Multimedia and the www Black • Black is associated with power. elegant. death. and mystery • Black is a mysterious color associated with fear and the unknown (black holes) • Black denotes strength and authority. elegance. black Mercedes) • Black contrasts well with bright colors.