Picture Superiority Effect
People remember pictures easier than words. In advertising, an ad with a picture and words will help consumers to recall a product when they have seen it associated with a picture. I think of this like signs for McDonalds and Wendy’s and Burger King. The same pictures (emblems) are associated with the name of the restaurants on their signs. Children recognize these establishements long before they can actually read the words.
Recognition over Recall
It is easier to recognize something than it is to recall it. That is why children (and adults) cry when teachers give them essay and fill in the answers tests as opposed to multiple choice. In multiple choice, you might not be able to scream out the answer, but may recognize it once you see it as a choice. Kind of like an agh ha moment.
Serial Position Effects
This is when people try to recall items from a list and how it is easier to recall the items at the beginning and also the ones at the end. Kind of like the middle child syndrome. (I am the oldest and my sister used to cry about this all the time growing up). It was interesting to learn that if you are teaching something visual, you should present the most important facts at the beginning and the opposite if you are teaching something auditory.
Monday, June 30, 2008
Friday, June 27, 2008
Website Review Assignment -
Search engine - http://www.google.com/
Google has a non distracting white background, a very simple design. Google needs to portray simplicity because they want users to choose their site with the idea that is it easier to use than other search engines. They need the site to be free of distraction and other non essential hoopla and unnecessary items on the screen to focus on the reason for the website, searching for other websites. The idea is to not spend a lot of time on the website, it is to keep people coming back over and over again. The designers also use the primary colors. I think that this too has users feeling at ease and is associated with feelings of youth and familiarity connected with elementary school. Google will also sometimes change the colors on their logo to coincide with the seasons. I have seen red and green at Christmas and pastel colors around Easter.
The menu bar is at the top left and uses a simple blue lettering. If you choose to click on the different pages of the website, the pages follow the simplistic design of the Home page. The Google Logo is in primary colors and there is very little else on the page. The Map and News tabs are an exception because their function is a little different than the search screens. On the Map page, the background of the map is a lighter blue color that is soothing on the eye, not distracting in any way almost inviting you to use the map. The lettering on the Map is a gray which is cool and calming. Maps can be overwhelming and scary to some (myself included) and I think that the softness says to the viewer, do not be afraid to try it out. The news page is a little busier and is a new addition to the site. The top of the page has the signature Google Logo in its primary colors and a white background. This is underlined by a red line signifying authority. The top of the screen mirrors the tranquility of the other pages. Under the red line there is a lot more text and it not as calm as you would expect from a news site. This particular area of the site is not designed like the rest of the site because its function is different. Overall, I think that Google site was designed with the above ideas in mind and were very successful in doing so.
College Website - http://www.kent.edu/index.cfm
Kent uses its school colors to portray a sense of school spirit. I also nicely uses different tints of the colors by adding white to compliment each other instead of the hue of the color which would deeply contrast each other. White lettering is also used in the top block of the website as a subtle contrast (in the darkest of the three choices of backgrounds). The letters stand out, but are not offending. Another feature that was nice for someone that might have sensitive eyes or poor vision, is that there is an option available to change the color combinations on the website. There is also an option for a text version of the site that removes all of the images and only has a white background with blue text. The text is bright blue and easy to read. This too is an option to help viewers with special needs. I prefer the color combination of the darker blue top with the light blue and yellow. I am not sure what about this combination is more attractive to me. I have been starring at it for several minutes trying to figure this out. I think because in the light blue version there is no contrast on the screen in the top to the bottom and in the yellow version, I am just not a big fan of that tint of yellow (which I want to call a shade automatically but a shade is actually adding black to the hue which would be incorrect!). It is more of a color preference than a design flaw I would say.
It was smart for the designers not to use the pure hue of yellow, as yellow is the hottest color and this would have portrayed a different atmosphere to the website. I believe that the feel that the creators are going for is Prestige and Classical. Using muted colors helps create the targeted atmosphere. Overall, I say that this website was very nicely created.
The web designers also did a very good job of consistently carrying over the same color scheme throughout the website. This applies to the different pages and the sub pages on these pages. An exception to this rule, I found is the Kent’s Sport’s page. I think that it is appropriate to use the bold natural hues of the school’s colors for this section of the website. The yellow signifies the hotness of the Golden Flashes and the bold blue is a great contrast to the yellow. It gives a feeling of boldness or fearless fighting to victory. (this unfortunately does not always carry over into the actual field!). I think that the designers of the Kent State website also did a great job in their design.
Online Retail Website - http://www.anntaylor.com/home.jsp
I love the Ann Taylor clothing store. I do not get to if often because the mall is about 25 minutes from my house and with having two kids, a full time job, a husband and taking graduate classes, I do not have a lot of spare time to drive to the mall. Online shopping at anntaylor.com is the next best thing. I happen to partake of this fun more often than getting to the real brick and mortar store. Before I start evaluating the website with the criteria from required reading article at http://www.colormatters.com/des_ecom.html, I must say that I am not pleased with the sites choice of background color for what is probably its summer look. They chose a bright yellow. I am sure that it is supposed to signify the hot summer months ahead, but I do not think that it goes with Ann Taylor’s conservative look of their clothes. They did not change anything else about the site, just slapped up a bright yellow background. It just does not go with the subtle colors in the rest of the website.
According to the article there are four formulas for success in an online retail store. The first consideration is whether the images are converted into the correct formatting which allows the images to open quickly and also delivers the best color quality. I do not know a lot about the different choices of formatting for pictures on the internet but I can say that the images of the clothes opened in less than two seconds. I think that this is a pretty fast response time and I would say that the site passes the test on the first part of the criteria. The images are also nice and crisp and clear. They are not blurry in any way.
The second part of the evaluation of retail websites is selecting the appropriate colors after analyzing the store’s products and target market. If you omit the awful background color of the site, the main part of the site follows this rule of thumb. The colors are conservative. Light colors, medium gray lettering on top of a mostly gray and some white background. The designer pulls out a dominant color in the clothing of Rose and uses this to contrast items that are on sale and also for some of the sub categories like types of clothing. Again, meeting the second criteria for evaluation.
The third part of the evaluation is using color to move the viewer through the page in the correct sequence. Where they should look first, go next and so forth. When first looking on the Home page my eye is drawn to the bright Rose type telling me about the new June line of clothing. From there I look down to the categories of clothing that I want to look at. I select the appropriate page and then begin browsing the new clothing line. As I move through the new clothes, my eye is brought to some sale items that are highlighted with the rose type. I enjoy a good sale. After I am done browsing and I select my choices, my eye is taken to the top of the page where in the rose color again, I notice the banner that tells me that the shipping on every order is only six dollars. (this color is a nice contrast with the otherwise gray and white type on the site). If I was not going to purchase anything, I think that the sale in shipping would sway my decision. From there I would move to the check out screen and proceed with my purchases. I am not sure how if this is exactly what the designers of the website had planned, but it worked just fine for me. I did not run into any snags and did not have trouble navigating through the site. I would say that they did a great job on this section of criteria too.
The last piece of evaluation suggests that the color should create harmony along all of the pieces of the website (navigation, type, images, merchandise). All of the parts of the website should work together. As I stated earlier all but the background color of this site, which is not a permanent fixture, work together in harmony. The contrasting rose colored type is pulled out from the color that is dominant this season’s clothing in the same rose color. The light gray background with white works in harmony of the darker gray type. Overall, this site was designed very nicely except for the BADLY contrasted hot yellow that they have added for the summer months. I hope this is not a permanent fixture on the site.
Food - http://www.mcdonalds.com/corp.html
I was very surprised at how unexciting McDonald’s website was when I looked it up. The background is black and on the Homepage, the only yellow on the page is one Golden Arch. There are few colors on the website. Black, white, red and then the yellow from the Golden Arch are the only present. There is one tiny picture on the Homepage and it is sort of blurry. I would have expected the McDonald’s website to have the familiar Golden Arc all over its pages and the colors of McDonald’s predominant throughout the website. If you removed the one Arch on the Home page, one would not know they were looking at the McDonald’s website.
There is a nice contrast at the top of the page in the red banner. The designer uses white type in the red banner. This is appealing to the eye. The combination is flipped on the right side of the Homepage, red type in a white box. This is not as pleasing to the eye and frankly hard on the eyes. This theme is carried out throughout the various pages. The designer at least does a good job of using the same repetition of color throughout the site, sticking with the same layout.
The Franchising page is the most pleasing page to the eye and should have been the model of how the whole site was designed. There are various pictures of McDonalds in the middle of the page. The pages accent the Golden Arches and this is pulled out and brings out the yellow in the Arch at the top of the page. This gives you the feel of being a child and eating at McDonalds. This caused an emotional reaction in me and this page would make me want to eat at McDonald’s.
Overall, I have to say that this was a very unprofessional looking website. I am disappointed. As I said above, had the designers used the Franchise page as a guide, the site would have been so much nicer.
Electronics - http://www.bestbuy.com/
When you look at the Best Buy site, you know you where you are. The color alone holds the theme of Best Buy. The designer uses different shades and tones of the Best Buy Blue throughout the site. There is a nice Best Buy Banner in the upper left hand corner of the site and then they carry that color in type throughout the site.
The designers of this site use saturation in the pictures and type. Which is a nice touch since most things on the site are metallic or in the black and gray family already. They use the same colors in the type and it just gives the website a nice crisp feel. Another nice use of color on the site is when you put your cursor over the headings of the different pages, it highlights them in the Best Buy yellow. This is very appealing to the eye.
Best Buy, like all of the other sites reviewed, does a nice job of carrying the repetition of color combinations into the other pages of the site. The top blue bar at the top of the Home Page is exactly the same in each of the different pages.
One last thing that I noticed about the Best Buy site was they had an option to select Spanish as the primary language on the site. They managed to create an identical site by replacing the English language with Spanish. Not technically a special need, but something very helpful to those who do not speak English. This was a very smart move for the designers. This site gets my two thumbs up! I would pick the Best Buy site as the best designed out of the five that I reviewed.
Google has a non distracting white background, a very simple design. Google needs to portray simplicity because they want users to choose their site with the idea that is it easier to use than other search engines. They need the site to be free of distraction and other non essential hoopla and unnecessary items on the screen to focus on the reason for the website, searching for other websites. The idea is to not spend a lot of time on the website, it is to keep people coming back over and over again. The designers also use the primary colors. I think that this too has users feeling at ease and is associated with feelings of youth and familiarity connected with elementary school. Google will also sometimes change the colors on their logo to coincide with the seasons. I have seen red and green at Christmas and pastel colors around Easter.
The menu bar is at the top left and uses a simple blue lettering. If you choose to click on the different pages of the website, the pages follow the simplistic design of the Home page. The Google Logo is in primary colors and there is very little else on the page. The Map and News tabs are an exception because their function is a little different than the search screens. On the Map page, the background of the map is a lighter blue color that is soothing on the eye, not distracting in any way almost inviting you to use the map. The lettering on the Map is a gray which is cool and calming. Maps can be overwhelming and scary to some (myself included) and I think that the softness says to the viewer, do not be afraid to try it out. The news page is a little busier and is a new addition to the site. The top of the page has the signature Google Logo in its primary colors and a white background. This is underlined by a red line signifying authority. The top of the screen mirrors the tranquility of the other pages. Under the red line there is a lot more text and it not as calm as you would expect from a news site. This particular area of the site is not designed like the rest of the site because its function is different. Overall, I think that Google site was designed with the above ideas in mind and were very successful in doing so.
College Website - http://www.kent.edu/index.cfm
Kent uses its school colors to portray a sense of school spirit. I also nicely uses different tints of the colors by adding white to compliment each other instead of the hue of the color which would deeply contrast each other. White lettering is also used in the top block of the website as a subtle contrast (in the darkest of the three choices of backgrounds). The letters stand out, but are not offending. Another feature that was nice for someone that might have sensitive eyes or poor vision, is that there is an option available to change the color combinations on the website. There is also an option for a text version of the site that removes all of the images and only has a white background with blue text. The text is bright blue and easy to read. This too is an option to help viewers with special needs. I prefer the color combination of the darker blue top with the light blue and yellow. I am not sure what about this combination is more attractive to me. I have been starring at it for several minutes trying to figure this out. I think because in the light blue version there is no contrast on the screen in the top to the bottom and in the yellow version, I am just not a big fan of that tint of yellow (which I want to call a shade automatically but a shade is actually adding black to the hue which would be incorrect!). It is more of a color preference than a design flaw I would say.
It was smart for the designers not to use the pure hue of yellow, as yellow is the hottest color and this would have portrayed a different atmosphere to the website. I believe that the feel that the creators are going for is Prestige and Classical. Using muted colors helps create the targeted atmosphere. Overall, I say that this website was very nicely created.
The web designers also did a very good job of consistently carrying over the same color scheme throughout the website. This applies to the different pages and the sub pages on these pages. An exception to this rule, I found is the Kent’s Sport’s page. I think that it is appropriate to use the bold natural hues of the school’s colors for this section of the website. The yellow signifies the hotness of the Golden Flashes and the bold blue is a great contrast to the yellow. It gives a feeling of boldness or fearless fighting to victory. (this unfortunately does not always carry over into the actual field!). I think that the designers of the Kent State website also did a great job in their design.
Online Retail Website - http://www.anntaylor.com/home.jsp
I love the Ann Taylor clothing store. I do not get to if often because the mall is about 25 minutes from my house and with having two kids, a full time job, a husband and taking graduate classes, I do not have a lot of spare time to drive to the mall. Online shopping at anntaylor.com is the next best thing. I happen to partake of this fun more often than getting to the real brick and mortar store. Before I start evaluating the website with the criteria from required reading article at http://www.colormatters.com/des_ecom.html, I must say that I am not pleased with the sites choice of background color for what is probably its summer look. They chose a bright yellow. I am sure that it is supposed to signify the hot summer months ahead, but I do not think that it goes with Ann Taylor’s conservative look of their clothes. They did not change anything else about the site, just slapped up a bright yellow background. It just does not go with the subtle colors in the rest of the website.
According to the article there are four formulas for success in an online retail store. The first consideration is whether the images are converted into the correct formatting which allows the images to open quickly and also delivers the best color quality. I do not know a lot about the different choices of formatting for pictures on the internet but I can say that the images of the clothes opened in less than two seconds. I think that this is a pretty fast response time and I would say that the site passes the test on the first part of the criteria. The images are also nice and crisp and clear. They are not blurry in any way.
The second part of the evaluation of retail websites is selecting the appropriate colors after analyzing the store’s products and target market. If you omit the awful background color of the site, the main part of the site follows this rule of thumb. The colors are conservative. Light colors, medium gray lettering on top of a mostly gray and some white background. The designer pulls out a dominant color in the clothing of Rose and uses this to contrast items that are on sale and also for some of the sub categories like types of clothing. Again, meeting the second criteria for evaluation.
The third part of the evaluation is using color to move the viewer through the page in the correct sequence. Where they should look first, go next and so forth. When first looking on the Home page my eye is drawn to the bright Rose type telling me about the new June line of clothing. From there I look down to the categories of clothing that I want to look at. I select the appropriate page and then begin browsing the new clothing line. As I move through the new clothes, my eye is brought to some sale items that are highlighted with the rose type. I enjoy a good sale. After I am done browsing and I select my choices, my eye is taken to the top of the page where in the rose color again, I notice the banner that tells me that the shipping on every order is only six dollars. (this color is a nice contrast with the otherwise gray and white type on the site). If I was not going to purchase anything, I think that the sale in shipping would sway my decision. From there I would move to the check out screen and proceed with my purchases. I am not sure how if this is exactly what the designers of the website had planned, but it worked just fine for me. I did not run into any snags and did not have trouble navigating through the site. I would say that they did a great job on this section of criteria too.
The last piece of evaluation suggests that the color should create harmony along all of the pieces of the website (navigation, type, images, merchandise). All of the parts of the website should work together. As I stated earlier all but the background color of this site, which is not a permanent fixture, work together in harmony. The contrasting rose colored type is pulled out from the color that is dominant this season’s clothing in the same rose color. The light gray background with white works in harmony of the darker gray type. Overall, this site was designed very nicely except for the BADLY contrasted hot yellow that they have added for the summer months. I hope this is not a permanent fixture on the site.
Food - http://www.mcdonalds.com/corp.html
I was very surprised at how unexciting McDonald’s website was when I looked it up. The background is black and on the Homepage, the only yellow on the page is one Golden Arch. There are few colors on the website. Black, white, red and then the yellow from the Golden Arch are the only present. There is one tiny picture on the Homepage and it is sort of blurry. I would have expected the McDonald’s website to have the familiar Golden Arc all over its pages and the colors of McDonald’s predominant throughout the website. If you removed the one Arch on the Home page, one would not know they were looking at the McDonald’s website.
There is a nice contrast at the top of the page in the red banner. The designer uses white type in the red banner. This is appealing to the eye. The combination is flipped on the right side of the Homepage, red type in a white box. This is not as pleasing to the eye and frankly hard on the eyes. This theme is carried out throughout the various pages. The designer at least does a good job of using the same repetition of color throughout the site, sticking with the same layout.
The Franchising page is the most pleasing page to the eye and should have been the model of how the whole site was designed. There are various pictures of McDonalds in the middle of the page. The pages accent the Golden Arches and this is pulled out and brings out the yellow in the Arch at the top of the page. This gives you the feel of being a child and eating at McDonalds. This caused an emotional reaction in me and this page would make me want to eat at McDonald’s.
Overall, I have to say that this was a very unprofessional looking website. I am disappointed. As I said above, had the designers used the Franchise page as a guide, the site would have been so much nicer.
Electronics - http://www.bestbuy.com/
When you look at the Best Buy site, you know you where you are. The color alone holds the theme of Best Buy. The designer uses different shades and tones of the Best Buy Blue throughout the site. There is a nice Best Buy Banner in the upper left hand corner of the site and then they carry that color in type throughout the site.
The designers of this site use saturation in the pictures and type. Which is a nice touch since most things on the site are metallic or in the black and gray family already. They use the same colors in the type and it just gives the website a nice crisp feel. Another nice use of color on the site is when you put your cursor over the headings of the different pages, it highlights them in the Best Buy yellow. This is very appealing to the eye.
Best Buy, like all of the other sites reviewed, does a nice job of carrying the repetition of color combinations into the other pages of the site. The top blue bar at the top of the Home Page is exactly the same in each of the different pages.
One last thing that I noticed about the Best Buy site was they had an option to select Spanish as the primary language on the site. They managed to create an identical site by replacing the English language with Spanish. Not technically a special need, but something very helpful to those who do not speak English. This was a very smart move for the designers. This site gets my two thumbs up! I would pick the Best Buy site as the best designed out of the five that I reviewed.
Tuesday, June 24, 2008
Color according to Williams
Man.. I should have read her book first.. She has such a great way of simplifying things for the not so savvy designer.... I was able to understand for the first time the Color Wheel. I like the way that she started with the three primary colors and went on to explain where the rest of the color wheel came from and also about white (absence of all color) and black (the combo of all color).
In the color category I think this might be my Wimpiest area!!! I could never see mixing orange and blue.. and then when you get into the crazy triads and split compliment triads. It will probably take me a while to work up to that. I tend to be very conservative. Something that I hope to work through.....
In the color category I think this might be my Wimpiest area!!! I could never see mixing orange and blue.. and then when you get into the crazy triads and split compliment triads. It will probably take me a while to work up to that. I tend to be very conservative. Something that I hope to work through.....
Monday, June 23, 2008
Attractiveness Bias
You see this all the time in advertisement. A pretty, skinny lady is going to sell more bottled water than an over weight unattractive lady. A buff man is going to see a gym membership easier than a man with a potbelly. You even notice good looking people in TV ads and print when the product has nothing to do with exercise or fitness.
I found it very fascinating that babies looked longer at attractive people regardless of their gender, age and race. Though I do question the theory of "Beauty is in the Eye of the Beholder". I wonder how this comes into play in the Attractiveness Bias. Who's idea of attractiveness are we talking about?
I found it very fascinating that babies looked longer at attractive people regardless of their gender, age and race. Though I do question the theory of "Beauty is in the Eye of the Beholder". I wonder how this comes into play in the Attractiveness Bias. Who's idea of attractiveness are we talking about?
Alignment
Wow.. I know, I use this term a lot. What a great example of how important alignment is using the ballot from 2000. It is sad that something so poorly designed is associated with something as important as a Presidential election. That image was almost as powerful as the one on pg 33 with the poor girl that was hit by the drunk driver symbolizing Classical Conditioning.
I tried to use diagonal alignment on my Visual Timeline. This was hard to do. I am not sure what angle mine was at. I did note that if trying to use diagonal alignment in the future, that I should use the 30 degree rule.
I tried to use diagonal alignment on my Visual Timeline. This was hard to do. I am not sure what angle mine was at. I did note that if trying to use diagonal alignment in the future, that I should use the 30 degree rule.
My thoughts and observations on the articles for this week
First article
http://www2.peterli.com/spm/resources/articles/archive.php?article_id=551 – Color in Education
I found in interesting to think about using faux chrome in an automotive vocation classroom, or using colors of race cars to enhance the learning environment. Another thing that I found interesting was to think about using different colors in classrooms in different areas of the country. For example using orange in a sunny state might over stimulate the learners as using grays in classrooms in the northern states where winters are gray is not a good choice either.
I really liked the idea of using paint as a cheap alternative to updating schools. My favorite idea was to get the children involved in the paint selection process.
http://www.colormatters.com/computers.html - Color Matters
I realized the importance of a good monitor after reading this article. Interesting that even if you have a good video card, good operating system and also good application software, the color can be distorted by a cheap monitor. It was crazy to see the differences in color that a different viewer sees depending on the computer components.
I had no idea the amount of effort that went into creating colors and getting colors to our computers. I made my head spin. I often think about things like this and think how in the world did someone come up with that sequence to make it happen?
Another interesting fact that as color technology in video improved, it switched from digital to analog. I liked how the article went on the explain how all the components worked together and it also suggested if you are in the market for a new monitor, to actually bring your PC in to test out the different monitors and how compatible they are with your particular components.
http://www.colormatters.com/culturematters.html - Green trivia..
Very interesting tidbits about green. I am glad that in the US we wear white wedding gowns.. though my bridesmaids did wear green.
http://www2.peterli.com/spm/resources/articles/archive.php?article_id=551 – Color in Education
I found in interesting to think about using faux chrome in an automotive vocation classroom, or using colors of race cars to enhance the learning environment. Another thing that I found interesting was to think about using different colors in classrooms in different areas of the country. For example using orange in a sunny state might over stimulate the learners as using grays in classrooms in the northern states where winters are gray is not a good choice either.
I really liked the idea of using paint as a cheap alternative to updating schools. My favorite idea was to get the children involved in the paint selection process.
http://www.colormatters.com/computers.html - Color Matters
I realized the importance of a good monitor after reading this article. Interesting that even if you have a good video card, good operating system and also good application software, the color can be distorted by a cheap monitor. It was crazy to see the differences in color that a different viewer sees depending on the computer components.
I had no idea the amount of effort that went into creating colors and getting colors to our computers. I made my head spin. I often think about things like this and think how in the world did someone come up with that sequence to make it happen?
Another interesting fact that as color technology in video improved, it switched from digital to analog. I liked how the article went on the explain how all the components worked together and it also suggested if you are in the market for a new monitor, to actually bring your PC in to test out the different monitors and how compatible they are with your particular components.
http://www.colormatters.com/culturematters.html - Green trivia..
Very interesting tidbits about green. I am glad that in the US we wear white wedding gowns.. though my bridesmaids did wear green.
Thursday, June 19, 2008
Aesthetic-Usability Effect
The basic of this concept is.. the better the item looks, the easier it is to operate. Though sometimes something that is not as aesthetically appealing could in fact be easier to use.. but, people are more apt to try the aesthetically pleasing item.
It also stated that aesthetically pleasing items are used more frequently, more readily accepted and more tolerable to users.
The book gives an example of Nokia creating colorful skins for their phones to help hide their flaws, making the trouble of lost signals and interference more tolerable.
It also stated that aesthetically pleasing items are used more frequently, more readily accepted and more tolerable to users.
The book gives an example of Nokia creating colorful skins for their phones to help hide their flaws, making the trouble of lost signals and interference more tolerable.
Chapter 14
All I have to say about this chapter is WOW.. I can not believe how many Typefaces are available!!
Blows my mind!!
My favorite are the Ornaments.. I do not think that I have these available in any of my software. One of these days I am going to have to take an Abobe class.
Blows my mind!!
My favorite are the Ornaments.. I do not think that I have these available in any of my software. One of these days I am going to have to take an Abobe class.
Chapter 11 – Type Contrast
It is amazing what you can do by changing the elements of the type cast. There are 5 ways to Contrast using type cast. Size, Weight, Structure, Form, Direction and Color.
Size.. the thing that stuck out for me the most is if you are going to use different fonts for Contrast.. make it noticeable.. do not just go up one size.. make the change very noticeable. She uses her famous “do not be a Wimp” line to sum it up.
Weight …. Emphasize the difference in the boldness .. again.. do not be a wimp.. (I think she likes that saying!)
Structure .. use two families with different structures.. she emphasizes that this is where you need to make sure that you learned the principles in the last chapter about the different families and make your self very familiar.
Form … try to stay away from using all Caps as it takes up more space and also the form of the letters are all the same.
Direction.. I found using a thin column with few words very visually appealing and will try to remember this trick.
Color… using black and white to show color is still a little confusing to me. From what I am understanding it is more like shades of gray… I did pick up the tip that warm colors take notice.
I do find it interesting that she keeps saying that you should invest in this type of typeface and that. My question is.. how?
Size.. the thing that stuck out for me the most is if you are going to use different fonts for Contrast.. make it noticeable.. do not just go up one size.. make the change very noticeable. She uses her famous “do not be a Wimp” line to sum it up.
Weight …. Emphasize the difference in the boldness .. again.. do not be a wimp.. (I think she likes that saying!)
Structure .. use two families with different structures.. she emphasizes that this is where you need to make sure that you learned the principles in the last chapter about the different families and make your self very familiar.
Form … try to stay away from using all Caps as it takes up more space and also the form of the letters are all the same.
Direction.. I found using a thin column with few words very visually appealing and will try to remember this trick.
Color… using black and white to show color is still a little confusing to me. From what I am understanding it is more like shades of gray… I did pick up the tip that warm colors take notice.
I do find it interesting that she keeps saying that you should invest in this type of typeface and that. My question is.. how?
Wednesday, June 18, 2008
Depth of Processing
I relate this to blogging. I am not one that likes to blog (no offense) but I really feel that writing about what I am learning is helping me to process the reading at a higher level than if I were just reading the chapters (elaborative rehearsal). Also, then taking it one step further and putting everything together while completing projects really “kicks it up a notch” as Emeril would say.
Ok.. so, I thought that I would be proactive this week by starting the reading before the assignment was posted in Moodle and low and behold.. I started reading the wrong section (that is what I get for trying to be proactive) anyways.. I wanted to talk about this subject because it was one that really stuck out at me!
Ok.. so, I thought that I would be proactive this week by starting the reading before the assignment was posted in Moodle and low and behold.. I started reading the wrong section (that is what I get for trying to be proactive) anyways.. I wanted to talk about this subject because it was one that really stuck out at me!
Tuesday, June 17, 2008
Verbal explanation of the Visual Timeline
Visual Literacy Timeline Verbal Explanation
Visual Literacy to me is using images and symbols to communicate an idea as a form of language.
Circa 29000 – The earliest known cave drawings were discovered in Europe and dated back to 32000 years ago.
1968 – John Debes coins the phrase Visual Literacy.
1969 – The first International Visual Literacy Association meeting takes place
1989 – Joel Benedict establishes the Visual Literacy Collection at the Arizona State University
2001 – Triennial Conferences are established Internationally
2008 – Modern day Scholars continue to study Visual Literacy
Visual Literacy to me is using images and symbols to communicate an idea as a form of language.
Circa 29000 – The earliest known cave drawings were discovered in Europe and dated back to 32000 years ago.
1968 – John Debes coins the phrase Visual Literacy.
1969 – The first International Visual Literacy Association meeting takes place
1989 – Joel Benedict establishes the Visual Literacy Collection at the Arizona State University
2001 – Triennial Conferences are established Internationally
2008 – Modern day Scholars continue to study Visual Literacy
Monday, June 16, 2008
Williams reading… Chapters 9 and 10
3 Relationships of Type
Concordance – using one type family without much variety in style, size and weight. Williams gives the example of using a larger letter for the first letter in a word or using the italic version of the font. Your design can seem dull if you use this type of relationship and this would be the safest route to take in design.
Conflicting – using typefaces that are different families but have similar qualities. They are not quite the same, but also a little different and it causes conflict with the observer. This relationship should be avoided.
Contrasting – using two different typefaces that have elements that are clearly different. It makes the design visually appealing and exciting say Williams. Williams also states that using contrast can be fun. (this is still a little overwhelming for me right now and I am hoping that after I start to “get it” more.. it will actually be fun!! )
Categories of Type (jotting down notes)
Old Style – Serifs are a an angle on lowercase. Curved shapes are thick/thin transition (kind of thin to kind of thinner).
Modern- very thin, horizontal serif and radial thick/thin transitions. Not a good typeface for large amounts of type.
Slab serif – little or no thick/thin transition. The serifs are horizontal and thick. This type is often used in Children’s books.
San Serif – No serif – (this one is the easiest for me to remember)little or no thick/thin transitions, the same thickness throughout.
Script – appears to be handwritten with a calligraphy pen or brush.
Decorative – this just looks very distinct like it is telling story with letters.
I fiddled through the quizzes.. shewww.. these are hard. I have been practicing a little trying to figure what type is what… this will be something that I am going to have to read over and over. I am going to quit for tonight and look this over again tomorrow before reading the next few chapters.
Concordance – using one type family without much variety in style, size and weight. Williams gives the example of using a larger letter for the first letter in a word or using the italic version of the font. Your design can seem dull if you use this type of relationship and this would be the safest route to take in design.
Conflicting – using typefaces that are different families but have similar qualities. They are not quite the same, but also a little different and it causes conflict with the observer. This relationship should be avoided.
Contrasting – using two different typefaces that have elements that are clearly different. It makes the design visually appealing and exciting say Williams. Williams also states that using contrast can be fun. (this is still a little overwhelming for me right now and I am hoping that after I start to “get it” more.. it will actually be fun!! )
Categories of Type (jotting down notes)
Old Style – Serifs are a an angle on lowercase. Curved shapes are thick/thin transition (kind of thin to kind of thinner).
Modern- very thin, horizontal serif and radial thick/thin transitions. Not a good typeface for large amounts of type.
Slab serif – little or no thick/thin transition. The serifs are horizontal and thick. This type is often used in Children’s books.
San Serif – No serif – (this one is the easiest for me to remember)little or no thick/thin transitions, the same thickness throughout.
Script – appears to be handwritten with a calligraphy pen or brush.
Decorative – this just looks very distinct like it is telling story with letters.
I fiddled through the quizzes.. shewww.. these are hard. I have been practicing a little trying to figure what type is what… this will be something that I am going to have to read over and over. I am going to quit for tonight and look this over again tomorrow before reading the next few chapters.
After reading the first three articles recommended for this week, I was left uncertain of the difference between typeface and font. As I probably said before, I need things spelled out for me (some of the reason why this class is going to be challenging to me as I have a hard time thinking outside the box). I found three more articles doing a Google search and I think that it is becoming a little clearer than mud about the difference between the two. It is my understanding that typeface is the creative style of the letters (or symbols) and font is the different size, or aspect of the typeface including bold, italic and underline. I am hoping that I have this somewhat under control before I start reading the required selections of reading for this week… and maybe the reading will help cement these differences. I am hoping!
Three articles in case others are challenged like I am..
http://desktoppub.about.com/cs/typography/qt/fonttype.htm
http://www.inspirationbit.com/when-is-it-wrong-to-call-a-typeface-font/
http://www.webopedia.com/quick_ref/fonts.asp
Let me also add that it does not help that all Microsoft products call both FONT..
Three articles in case others are challenged like I am..
http://desktoppub.about.com/cs/typography/qt/fonttype.htm
http://www.inspirationbit.com/when-is-it-wrong-to-call-a-typeface-font/
http://www.webopedia.com/quick_ref/fonts.asp
Let me also add that it does not help that all Microsoft products call both FONT..
Friday, June 13, 2008
Face-ism Ratio
Just a short comment on Face-ism Ratio..
I did not know if when I posted the picture of myself.. that this high facism ratio picture of me focuses on my intellect and personality. I hope it makes me look smart! :) (I also learned in my reading that the smiley face is called the Law of Pragnanz).
The real reason I posted a high facism ratio picture as opposed to a low ratio is that it was the only picture I had with me by myself.
I did find in interesting that males and females as typically portrayed in opposite face-ism ratios in print ads and such!
I did not know if when I posted the picture of myself.. that this high facism ratio picture of me focuses on my intellect and personality. I hope it makes me look smart! :) (I also learned in my reading that the smiley face is called the Law of Pragnanz).
The real reason I posted a high facism ratio picture as opposed to a low ratio is that it was the only picture I had with me by myself.
I did find in interesting that males and females as typically portrayed in opposite face-ism ratios in print ads and such!
Lidell Book Continued
Wow, this book is a little harder to understand than the Williams book and a little over my head at times. I must admit that I have read over the Common Fate section several times and it is not making much sense to me. Here is a chance for someone to shine and get extra points in the class by popping a comment in my blog trying to explain in layman’s term Common Fate to me..
I had an easier time understanding Consistency and I can see the benefits. I like the example of the Bob Evans Restaurants explaining Aesthetic consistency. The example of the buttons on the tape recorder helped me to understand Functional consistency. These two are suggested to be used in all designs.
I had an easier time understanding Consistency and I can see the benefits. I like the example of the Bob Evans Restaurants explaining Aesthetic consistency. The example of the buttons on the tape recorder helped me to understand Functional consistency. These two are suggested to be used in all designs.
Thursday, June 12, 2008
Universal Principles of Design pg 38 Color
Colors – I must say that color really intimidates me and I wish that I could say that I understood everything that I read on page 38 about colors. I am glad that we there is a whole session dedicated to color because I certainly need to help. I have a hard time even distinguishing between warms and cools.
I learned that you should not use more than 5 colors on a design. I also learned that you have to be careful when combining saturated colors, because they can interfere with one another and increase eye fatigue.
The most interesting bit of information that I took from this reading is that there is no clear evidence supporting general effects of color on emotion or mood. This is a myth that I have heard over and over.
I learned that you should not use more than 5 colors on a design. I also learned that you have to be careful when combining saturated colors, because they can interfere with one another and increase eye fatigue.
The most interesting bit of information that I took from this reading is that there is no clear evidence supporting general effects of color on emotion or mood. This is a myth that I have heard over and over.
Wednesday, June 11, 2008
Chapter 6 - The Review
Chapter 6 was as it was titled, a review of the 4 principles and the introduction to the book. This Chapter takes one example and applies all of the principles to the design and creates a new striking design. There are also sample questions to do at the end of this Chapter that I will have to address at a different time.
Chapter 5 - Contrast
Chapter 5 – Contrast
The biggest thing to remember when thinking about Contrast is… do not be a wimp. Robin states that if two items are not the same, then make them different. Really different.
Contrasting can be done using colors, font, lines. This chapter stresses that a designer rarely uses only one principle in design and that you should use all 4 of the principles.
I have to express again that I love these examples. It is amazing to me how a few simple changes can enhance the whole design.
Robin also stresses that when doing Contrast do it BIG. Do not try to emphasize things that are somewhat similar like a sort of heavy line with a sort of heavier line. Use a thin line with a thick line. Dark colors with white.
The biggest thing to remember when thinking about Contrast is… do not be a wimp. Robin states that if two items are not the same, then make them different. Really different.
Contrasting can be done using colors, font, lines. This chapter stresses that a designer rarely uses only one principle in design and that you should use all 4 of the principles.
I have to express again that I love these examples. It is amazing to me how a few simple changes can enhance the whole design.
Robin also stresses that when doing Contrast do it BIG. Do not try to emphasize things that are somewhat similar like a sort of heavy line with a sort of heavier line. Use a thin line with a thick line. Dark colors with white.
Tuesday, June 10, 2008
Repetition
The idea of repetition is to repeat some element throughout the whole desgin. This could include a bold font, a thick line, a certain bullet, color or even spacial relationships. Most already use this concept in their designs but Robin stated that you have to learn to push the idea further. She also refers to the aspect of repetition as consistancy throughout the design. This concept should be carried on especially when you are doing a muliple page production. The designer should make sure that the repetition carries through throughout the whole publication.
I really like the idea of pulling ot some part of the repetition on a design and using it in related designs like in a resume and cover letter or an invitation and the envelope in which is will go. I also really liked how the repetitive circle was used on page 61 on the Mom & Pop stationary. The repetitive dot was used in a larger dot with a picture of mom in the bottom left hand corner and then creatively made very large in the middle of the piece with its colors changed. Robin called this “unity with variety”.
I am so amazed at all of the different things that have been done thus far. My head is starting to spin (it does not help that it is almost 11 pm and way past my bedtime again!) One last style of repetition that peaked my interest was using the same type face, but varying the colors. Good night for now! Onto Chapter 5 on Contrast tomorrow.
I really like the idea of pulling ot some part of the repetition on a design and using it in related designs like in a resume and cover letter or an invitation and the envelope in which is will go. I also really liked how the repetitive circle was used on page 61 on the Mom & Pop stationary. The repetitive dot was used in a larger dot with a picture of mom in the bottom left hand corner and then creatively made very large in the middle of the piece with its colors changed. Robin called this “unity with variety”.
I am so amazed at all of the different things that have been done thus far. My head is starting to spin (it does not help that it is almost 11 pm and way past my bedtime again!) One last style of repetition that peaked my interest was using the same type face, but varying the colors. Good night for now! Onto Chapter 5 on Contrast tomorrow.
Moving on to Chapter 3 on Alignment
Robin’s principle of alignment (as she refers to herself in the book) states , “nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.” She further goes on to say that you must make a conscious decision on where to place every item on the page. Even when iteams are seperated, an invisible line connects them in your eye and in your mind.
Centering is the most formal of the forms of alignment and one that most novice desginers seem to default in design. I did not know this about center alignment. She says that even though it is the most natural and comfortable that you need to break away from it and in most cases use the left alignment and the right alignment. The right alignment is harder for new designers to use and is more uncomfortable.
She does go into some ways to use center alignment that does not make the design look stale. She uses different type face and fonts.
She stresses that you should use the same type of alignment in one design and there are only few occasions where you can use both left and right alignment and in my opinion, it should be reserved for when you have more practice in design.
It is pretty cool that I am starting to be able to look at the examples and decide what needs to be adjusted in regards to the alignment and spacing. I like the little tips about breaking the rules and doing it intentionally to create a daring statement in the design.
The last point to be stressed about alignment its purpuse is to unify and organize. ( as I am checking over my post to see what kind of alignment I am using - Left flush alignment)
Centering is the most formal of the forms of alignment and one that most novice desginers seem to default in design. I did not know this about center alignment. She says that even though it is the most natural and comfortable that you need to break away from it and in most cases use the left alignment and the right alignment. The right alignment is harder for new designers to use and is more uncomfortable.
She does go into some ways to use center alignment that does not make the design look stale. She uses different type face and fonts.
She stresses that you should use the same type of alignment in one design and there are only few occasions where you can use both left and right alignment and in my opinion, it should be reserved for when you have more practice in design.
It is pretty cool that I am starting to be able to look at the examples and decide what needs to be adjusted in regards to the alignment and spacing. I like the little tips about breaking the rules and doing it intentionally to create a daring statement in the design.
The last point to be stressed about alignment its purpuse is to unify and organize. ( as I am checking over my post to see what kind of alignment I am using - Left flush alignment)
My thoughts and observations on Chapter 2 Proximity
The first thing that I learned was that physical closeness in Design implies that the objects have a relationship. Therefore, grouping like elements together shows that relationship. The opposite of that notion is that if elements are not related, do not group them together. Another key fact that I learned was often designers are afraid of empty space and will fill in corners and this will make the design appear to be scattered. Grouping like elements will make things appear to be more organized. It was very neat to see how just making a change in grouping of the like elements could create clarity in the design. It is amazing how our brains work and automatically arrange things in our minds.
Another profound lesson that I learned was that it was ok to use different fonts in one design and how doing this can also change the whole look and feel of the design. I am starting to see how all of the principles must work together even though we are focusing on one at a time in these next few chapters. The main theme that I took away from the chapter on proximity is that it is used to organize your design.
One last note about this chapter, the term White Space was used a lot but not clearly defined. I believe that it is in fact the areas in white there are not print or graphics. I however did look for a definition in Wikipedia and found that it was “In page layout, illustration and sculpture, white space is often referred to as negative space. It is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted.”
Another profound lesson that I learned was that it was ok to use different fonts in one design and how doing this can also change the whole look and feel of the design. I am starting to see how all of the principles must work together even though we are focusing on one at a time in these next few chapters. The main theme that I took away from the chapter on proximity is that it is used to organize your design.
One last note about this chapter, the term White Space was used a lot but not clearly defined. I believe that it is in fact the areas in white there are not print or graphics. I however did look for a definition in Wikipedia and found that it was “In page layout, illustration and sculpture, white space is often referred to as negative space. It is that portion of a page left unmarked: the space between graphics, margins, gutters, space between columns, space between lines of type or figures and objects drawn or depicted.”
Spelling errors
I finished up my entry last night without running spell check .. Please excuse the misspelled words as I have not figured out how to go back and edit a post.
Monday, June 9, 2008
Design Principles - Is this book for you?
I read the first sentence of the Introduction and immediately knew that I was going to like this book. The first sentence described me. I have no experience in Design and know nothing about its principles. (I also must add that this is my first blogging experience) Frankly, the whole subject kind of scares me. I am not the most creative person and also not very artistic. This first sentence started to put my mind at ease as I am always completely uptight for the first two weeks of a new class as it is..
I love the concept Williams uses that if you do not know what is wrong with an image, how can you fix it. I am very excited and motivated that I will be able to create more professional and creative looking designs after learing these basic principles.
I will work on Chapter One tonight and then I am calling it a night as I have to get up for work very early (5 am).
Chapter 1 - The Joshua Tree Epiphany -
I am very familar with this Phenomenon. I find myself walking through life busy taking the kids to ball practice, running to church, work and the grocery and being in such a hurry and not noticing things that are right in front of me. I am really looking forward to learning these 4 principles and taking time to "smell the roses" and start noticing Visual Designs that are all around me.
A Good Design is Easy as 1-2-3
1. Learn the Principles
Contrast - I have obviously heard of this term before and know what it means in general. I did have trouble summarizing the definition from the books brief blurb in regards to Desgin, so I went to Wikipedia to get a more clear definition. The best that I can describe contrast right now before really diving into it in the next few chapters is as opposites. For examples using light colors with dark colors or thin lines next to thick lines.
Repetition - This was easier to undestand. This principle is telling us to repeats the elements in the piece that we are desiging, be it colors, shapes, textures, or what have you.
Alignment - This is basically saying that there should be nothing random about placing your visuals on the piece. There should be a reason and a connection to the other elements on the page.
Proximity - Proximity is the organization of the elemets. Groupings should be done in a matter where the items closest to each other should be related in some manner.
2. Recognizing when you are not using them.
3. Applying the principles .
The above two steps will be worked in a later post, I am sure!
It is getting late and I must get some sleep. More reading and blogging tomorrow.
I read the first sentence of the Introduction and immediately knew that I was going to like this book. The first sentence described me. I have no experience in Design and know nothing about its principles. (I also must add that this is my first blogging experience) Frankly, the whole subject kind of scares me. I am not the most creative person and also not very artistic. This first sentence started to put my mind at ease as I am always completely uptight for the first two weeks of a new class as it is..
I love the concept Williams uses that if you do not know what is wrong with an image, how can you fix it. I am very excited and motivated that I will be able to create more professional and creative looking designs after learing these basic principles.
I will work on Chapter One tonight and then I am calling it a night as I have to get up for work very early (5 am).
Chapter 1 - The Joshua Tree Epiphany -
I am very familar with this Phenomenon. I find myself walking through life busy taking the kids to ball practice, running to church, work and the grocery and being in such a hurry and not noticing things that are right in front of me. I am really looking forward to learning these 4 principles and taking time to "smell the roses" and start noticing Visual Designs that are all around me.
A Good Design is Easy as 1-2-3
1. Learn the Principles
Contrast - I have obviously heard of this term before and know what it means in general. I did have trouble summarizing the definition from the books brief blurb in regards to Desgin, so I went to Wikipedia to get a more clear definition. The best that I can describe contrast right now before really diving into it in the next few chapters is as opposites. For examples using light colors with dark colors or thin lines next to thick lines.
Repetition - This was easier to undestand. This principle is telling us to repeats the elements in the piece that we are desiging, be it colors, shapes, textures, or what have you.
Alignment - This is basically saying that there should be nothing random about placing your visuals on the piece. There should be a reason and a connection to the other elements on the page.
Proximity - Proximity is the organization of the elemets. Groupings should be done in a matter where the items closest to each other should be related in some manner.
2. Recognizing when you are not using them.
3. Applying the principles .
The above two steps will be worked in a later post, I am sure!
It is getting late and I must get some sleep. More reading and blogging tomorrow.
Monday, June 2, 2008
June 2, 2008 - Introduction for Visual Design Class
Hello! My name is Denise Wahoff. I am married with two beautiful little boys (ages 7 and 4). I live in Pickerington, Ohio (a burb of Columbus) and I work for a large Computer Contracting Company on a government contract as an Information Systems Training Specialist. I am originally from Akron, Ohio and moved to the Columbus area in 1997 after graduating from Kent State University. I have Bachelors of Science in Education (Early Childhood Education K-3). I am currently back at Kent State in the Masters program for Instructional Technology.
Subscribe to:
Posts (Atom)
