Introduction to Web Design Using Microsoft Expression Studio

Introduction to Web Design Using Microsoft® Expression® Studio

Introduction to
Web Design Using
Microsoft® Expression® Studio

Chapter 3/Module 3

Chapter 3/Module 3

Communication: The End Result of Web Design

Communication is something that we do every day. It is the transfer of information from one individual to another. One individual sends the information with the expectation that another individual or group will receive the information. Many times you will see these individuals defined as a sender and a receiver.

From infancy, people use communication in their daily lives. Since communication is used daily, you might expect that it would be easy for everyone. This isn’t the case. Many times through our communication, we can send mixed messages. Two individuals may get completely different messages from the same statement.

This section will provide you with ideas on how to make your Web message a little less misleading for the receiver. In this section, you will learn:

• The basic mechanics of the human eye;
• How the human brain processes the information that is received from the eye;
• The basics of design elements;
• How design principles are used in a Web design.

The first half of this section will cover the mechanics of how the human body receives and processes information. We will look at how the human eye processes the light that it receives and then how that information is processed by the brain. The second half of this section will delve into the basics of design elements and principles. We will explore the elements of color, shape, line, texture, and typography. We will also explore the principles of movement, balance, proximity, repetition, and unity.

How Can Communication Be So Misleading?

Have you ever made a statement to a friend, only to find that he or she interpreted the statement in an entirely different way than you meant it? Have you sent an e-mail message, only to have the message misunderstood? What about color? What does the use of a specific color say to different people? These are all questions that must be considered in Web design. The main purpose of a Web site is to communicate information to the receiver about the topic that is being presented. A Web designer must consider all the possible interpretations of the material to ensure that the proper idea is conveyed by the site.

A concern that a Web designer must consider is the audience for whom the Web site is being created. Who will be viewing, or receiving, the Web site? Is the Web site primarily for a local, national or worldwide audience? Culture also plays an important role in Web site design. Wording, images,and color that maybe acceptable in one culture can be completely unacceptable in another. To avoid these problems, always keep your audience in mind when creating a Web site.

Vision: How Does the Human Body Process Communication?

The Human Eye

If we are concerned with designing a Web site for communication, then why devote a section on the human eye? Stop and think about this question for a minute: “How does most of the information that your brain processes enter your body?” Nearly 80 percent of the information that the human body processes comes from the eye. The human eye is a small and very complex organ that is essential to information flow to the human brain. Understanding how the eye works will help you understand how information is obtained and transferred to the brain.

When the human eye looks at an object, light is bounced off the object and the light then enters the eye through the cornea (the clear outer covering of the eye). Once the light has passed through the cornea, it continues onward through the black center of the eye called the pupil. The pupil serves as the opening to allow the light to enter the eye. A muscle that surrounds the pupil, called the iris, controls the opening and closing of the pupil depending on the amount of light that is entering. In bright conditions, the iris contracts to close the pupil, allowing smaller amounts of light to enter the eye. In darker conditions, the iris releases and opens the pupil to allow in more light. The iris can easily be identified as the part of the eye that gives it its color. Common iris colors are blue, green, and brown.

Once light has entered the eye, it travels to the back of the eye through the lens. It is the responsibility of the lens to focus the image on the back of the eye called the retina. The retina has two types of nerve cells lining it, which are called rods and cones. The rods are used in low- light situations such as nighttime, and they process the white, black, and grays as they enter the eye. Rods are also used to perceive distinctions between light and dark, as well as changes in shape and movement. The human eye contains many more rods than cones. Cones process all the colors that are brought into the eye and are most sensitive to the colors red, green, and blue.

The light that enters the eye belongs to a range of radiation called the electromagnetic spectrum. Radiation in the electromagnetic spectrum moves in a series of waves. The length from one wave to the next gives these waves their classification and is called wavelength. The small part of the electromagnetic spectrum that humans are able to see is called the visible spectrum. The colors in the visible spectrum range from violet, with a wavelength of 380–450 nm, to red, with a wavelength of 620–750 nm. If you have seen a rainbow, then you have seen the visible spectrum. Another way to view the visible spectrum is to pass white light through a prism. White light is the combination of all the colors of the visible spectrum. As the light passes through the prism, the waves of different wavelengths are bent in different amounts, allowing the colors of the visible spectrum to be seen. In a rainbow, raindrops act as prisms to bend the light.

Color Sensitivity

Color sensitivity is used to describe the range of color that the human eye can see. This sensitivity varies greatly from one human being to another. In general, females'eyes have greater color sensitivity than those of males. When developing a Web site, a Web designer must be aware of this color sensitivity and incorporate it into the site design.

Color sensitivity can provide the contrast that is needed for the receiver of the information presented in the Web site. In order for the text on the Web page to be easily read, the text color must contrast with the background. Take a look at some of the Web sites that you use daily. What are the common colors for the backgrounds? What are the common colors for the text? White and black are commonly chosen for text color and background color, but what about the use of color in a Web site?

The human eye is capable of viewing colors with the wavelengths of 380–750 nm; however, the eye is most sensitive to colors within the 500–600 nm wavelengths. What this means to you as a Web designer is that using colors within this 500–600 nm wavelength will provide the most contrast between the text and the background for your Web site. The colors within this 500–600 nm wavelength are light blues, greens, and yellows.

Deviating outside of this 500–600 nm range for color contrast may cause problems for a specific section of your audience. Colors with wavelengths below 500 nm and above 600 nm are harder for males to differentiate. Try it out on a group of your friends. When looking at clothing, a female may identify the color as dark blue, while a male may call the same color black. The reason is that the wavelengths of black and dark blue are so close that the male eye has a difficult time differentiating them. The female eye is better equipped to make this differentiation. Keep in mind the audience of your Web site. While your audience might be primarily female, you might inadvertently cause difficulties for males who might visit your site.

Photopigments

Pigment is what gives objects their color. When light hits an object, certain colors (orwavelengths) are absorbed into the object. The color that is reflected is the color that we see. So, a blade of grass absorbs the wavelengths of all colors except the wavelength of the color green that we see. The green is reflected by the grass and is then transferred to our eye.

Photopigments are a specialized type of pigment found in the eye that work with the cones of the retina to help the eye receive and process the light coming into the eye.

Now that the light has come into the eye, it must be focused by the lens. The lens is located just behind the iris and brings the light that enters the iris to a point on the retina where it can be processed by the rods and cones. As the light travels through the lens and is focused, the image that is seen becomes flipped upside down. This is due to the bending, refracting (a change in thedirection of light through the change in its speed), and focusing that happens as the light travels through the lens. Once the rods and cones have done their job, the information is passed on to the optic nerve through a series of electrical impulses. The optic nerve then passes on these impulses from the eye to the brain.

Color Deficiency or Color-Blindness

Color-blindness is a common name given to color deficiency. In color-blindness, individuals are unable to view a certain color or set of colors. Color-blindness is caused by a deficiency in the genes that provide the coding instructions to the cones in the retina. If the genes have the wrong coding information for a specific pigment, then the cones in the retina translate the light coming into the eye in the wrong way, shifting it to another color. While the percentage of humans with color-blindness is small, color-blindness occurs in men more often than women.

Trichromacy is considered to be normal vision in humans. If you try to break down the word into it parts, the definition will become clearer and help you to understand the other types of color blindness. The prefix tri- means three. The eye is most sensitive to the colors red, green, and blue. The root word chrom means color and the suffix—acy— means condition. So the word trichromacy is a condition where a human is cable of seeing the three main colors.

Dichromacy then means that the individual is capable of seeing only two colors. Dichromacy is divided into three types. Protanopia is the name of the disorder where an individual is less sensitive to red light. Individuals with deutanopiaare less sensitive to green light. The third disorder is tritanopia,in which individuals are less sensitive to blue light.

Monochromacy is a rare form of color-blindness where an individual is unable to see any color. This is considered to be total color-blindness. An individual with monochromacy sees everything in black, white, and shades of gray.

Human Cognition

The human brain is the organ that controls all parts of our bodies through a series of nerves. Cognition is the information processing that occurs in the brain. The brain takes in messages through our senses and processes the information. In Web site design, we are concerned with how the brain processes the information that is taken in through the eye to in the brain. As the light travels through the eye, it is transferred to the brain through the optical nerve in a series of electrical impulses. Let’s take a look at what happens to this information after it reaches the brain.

Memory

There are three types of memory: sensory, short-term (or working), and long-term memory. Sensory memory is the most volatile of the three. This is the memory that allows us to recognize something quickly after viewing it, but judge it to be unimportant and discard it. Here is an example of this type of memory and its volatility:You are quickly shown a series of ten numbers. After the numbers are taken away, you might not be able to remember all ten of them. You might remember a few of the numbers and will remember seeing the numbers but can’t recite all of them back.

Some information that enters sensory memory is transferred to short-term or working memory. Short-term memory allows you to remember 7 ± 2 items at a time. Through a process called chunking, we are able to increase the amount that we are able to remember. Phone numbers are a good example of chunking. A local phone number in the United Statesis seven digits long and therefore fits within the 7 ± 2 items parameter. When you add an area code to the local number, the digits now increase to 10. How can we remember the 10-digit phone number? Our brains place the information into chunks. This is why we insert dividers (parentheses, hyphens, or periods) between the parts of a phone number.This helps our brain chunk a phone number into three or four pieces of information and not 10 separate digits. Like sensory memory, information in short-term memory has a short life span.

Information that is to be stored for extended periods of time must enter long-term memory. Long-term memory is capable of storing large amounts of information for extended periods of time; some information can be stored for a lifetime. Information from short-term memory can enter long-term memory through repetition. Repeating your phone number over and over transfers this information from short-term memory to your long-term memory. When people ask for your phone number, you are able to tell them. The series of the 10 numbers that you were shown in our short-term memory example have now been stored in long-term memory. This information will stay there as long as it is needed. If you move and change your phone number, after some time, you may not be able to remember your old phone number.

Storing Memories

Repetition is how information is moved from short-term memory into long-term memory.Nowlet’s look at how memories are stored. Encoding is the process by which memories are processed and stored in long-term memory. Encoding is the way individuals memorize information. This could be focusing on how something looks, what the information means to them, how they felt at the time they encountered the information, or what sounds they heard at the time. Think back to an early childhood birthday party. What do you remember about the party? Do you remember what you saw? Do you remember how important the day was to you? Do you remember how happy you were at the party? Do you remember the sounds of your friends playing games and laughing? These are all examples of how we encode memories.

Attention also plays a significant role in the storing of memories. The environment that you are in while concentrating on information determines the amount of attention that you are able to devote to the information. If you and your friends are preparing to take a test and half of the group studies in a quiet library while the other half studies in a room with loud music playing and many other distractions, the group studying in the library will most likely be able to concentrate and devote more attention to the information. This is the group that will have a better chance to score higher on the test.

One type of encoding that is successful in storing information into memory is connecting the information to something that is already stored in memory. Making this connection will help you to recall the information. For example, memorizing the multiplication table seems like a daunting task for most children. Even with repetition, the 100 facts that must be memorized can overload the brain. One of the first things that a child learns is that any number multiplied by 0 is 0. With this one piece of information committed to memory, the child has now learned 19 of the facts on the multiplication chart. Next, the child learns and memorizes that multiplying any number by 1yields that same number. Now, the child has acquired an additional 17 facts, reducing the total number of facts from 100 to 64. The trick for memorizing 2s is to simply double the number, a skill a child learns with addition. By making this connection to information already committed to memory, the child adds another 15 facts to the ones committed to memory, and now the total number of facts in memory is 51 of theoriginal 100. By using just three pieces of information that have been recalled from memory, the child has cut inhalf the amount of information to be memorized. This process can continue by finding other patterns in the multiplication chart.