expresses the way I am feeling about design and especially fonts this week. I understand that the main goal is to learn how to communicate more effectively, and along with that I can accept a little cognitive dissonance. This week I’ve learned 1) When you combine two fonts from the same family of typestyle without much variety in style, size, weight, structure, direction, form, or color, it’s o.k. and safe but sorta wishy-washy and dull - So why do it? 2) Combinations of two similar fonts should be avoided because they conflict and make you twitch. 3) When you combine fonts on a page, go for the gusto (don’t be a wimp) - push it a little further and really emphasize the contrasting elements. 4) There are thousands of fonts to choose from.
Today I had the thought that perhaps visual design is like fashion. You know, like looking at clothes in your closet and deciding which go together. Which colors work and which clash? Is it ever ok to mix plaids and pinstripes? We all wear clothes, but some people take more risks and are smarter dressers than others are. For me, give me Garanimals - “the clothes that are easy to pair and fun to wear!” We all use fonts, but some of us do a better job of combining them than others. I know that simply by becoming more aware of fonts, I will do a better job in future projects - maybe not every time, but most times.
I am looking at font combinations everywhere now and am getting a sense of what I like and don‘t like, and I can usually say why. The Cincinnati Zoo magazine does a much better job at visual design than the Township newsletter - which is probably a matter of hiring professional designers. I was surprised by all the variety in size, weight, texture and font contrasts on the Cincinnati Enquirer editorial page. I guess that is because with the popularity of Internet news, the newspaper readership is declining, and newspapers are trying to look fresh, more up-to-date and more like magazines.
It is incredible how many typestyles are out there. Perhaps I should “challenge” myself to use a different one each day in order to get to know its personality and how it translates into my writing. I have always been one to accept the default fonts - feeling words could stand on their own, but I might be wrong. Will friends notice if I experiment with different fonts? Will they say anything? People develop their own fragrances - why not develop your own typeface that expresses your unique personality at a weekend retreat?
Sometimes it does pay to be more traditional. When I was researching resumes on the Internet, I ran across the advice that when you upload a resume, stick to standard font that you know the receiving computer will have, so your margins and other formatted features won’t be blown away in translation.
Here is one last analogy. Typestyles are like musical instruments - each has a different range, a different pitch, a different sound, and each makes you feel a different way. Some carry the melody while some are decorative accents (like the triangle). Some are like the old style fonts with transitions from narrow to thick, and then there is the trombone - thick and solid like the modern font. The composer (designer) works for a harmonious balance. Concordance is o.k. Avoid conflict. Contrast is great and makes itself heard - then the piece is noticed and memorable.
The Lidwell sections on Confirmation, Control, Cost-benefit, Errors, Forgiveness, Progressive Disclosure, Readability, and Recognition over Recall all reminded me of my experience programming educational software in the early 1980s and teaching BASIC at a community college in Virginia. Back then one had to know the programming commands – how to spell them and their associated syntax. Spacing and punctuation all counted – one goof and the program crashed. Then as now, effective educational programming had to present students with clear directions, offer choices of permissible actions, and anticipate user errors and circumvent them.
The principle of Recognition over Recall which states that it is easier for students to pick a response off a menu than to pull it out of thin air makes sense to me. We don’t want students cramming facts, instead we want to facilitate meaningful learning, enabling students to develop the ability to use information to solve problems.
The Readability chart was interesting. In a class I took last semester, we figured grade level of text with the Adapted Fry Method. You can do this by counting the number of syllables in the words in the first ten sentences of a passage. Then to find the average number of syllables per sentence, take the total and divide by ten. Compare your answer to the chart:
Grade 1 – less than 8.4; Grade 2: 8.5-11.8; Grade 3 11.9-14.5; Grade 4: 14.6-16.3; Grade 5: 16.4-18.1; Grade 6: 18.2-21.9; Grade 7:22.0-26.7.
Computer software can do the same thing. After a spell/grammar check, Microsoft Word displays the reading level of the document and readability according to Flesch Reading Ease and Flesch-Kincaid Grade Level tests. The Readibility grade level of this bog entry is 8.2. One shoots for about 8th grade level in standard writing.
When I read about the 80-20 rule, as a long-time community volunteer and past PTO president, I had to think of the oft-discussed corollary – 20 percent of the volunteers do 80 percent of the work.
Monday, June 23, 2008
Tuesday, June 17, 2008
Visual Literacy Timeline
Here is a link to my Visual Literacy Timeline:
Visual literacy involves both interpreting meaning from images and also creating images which effectively communicate a message to an audience. I focused on this dual modality as I attempted to identify major communication breakthroughs which have impacted the way society has viewed the world and which also provide significant historical contextual information that students need in order to be visually literate. My timeline begins with one of the first recorded visual designs - the drawings from Cave of Lascaux in France. This is followed by the drawings and written literacy symbols of Egyptian hieroglyphs. Greek architecture stands as a testament to the classical views of this civilization. By the time of Leonardo Da Vinci, sketches, charts, maps and visual diagrams were juxtaposed with words in books and papers to explain complex concepts. Paintings and sculpture have reflected the customs and values of society since early times. Newspapers with illustrations and later with photographs spread common images to many people over a wide geographical area creating a shared basis of visual information. Cameras more objectively captured images of people and events. In the early 1900s Randolph Caldecott’s illustrations in children’s books revolutionized publishing; billboard advertising influenced perceptions of the good life; sequential drawings and comics involved the reader in the story. Movies, newsreels, and all forms of animation convey messages about life and the state of the world to millions. TV entertains and educates providing instantaneous images of current events to people around the world. Then in 1968, John Debes, at Kodak coined the phrase “visual literacy”. The Internet allows millions around the globe to share the same visual images. The advent of the Internet, computers, digital cameras, desktop publishing software, and affordable color printers enable many people to have the capability to create effective design visuals.
Visual literacy involves both interpreting meaning from images and also creating images which effectively communicate a message to an audience. I focused on this dual modality as I attempted to identify major communication breakthroughs which have impacted the way society has viewed the world and which also provide significant historical contextual information that students need in order to be visually literate. My timeline begins with one of the first recorded visual designs - the drawings from Cave of Lascaux in France. This is followed by the drawings and written literacy symbols of Egyptian hieroglyphs. Greek architecture stands as a testament to the classical views of this civilization. By the time of Leonardo Da Vinci, sketches, charts, maps and visual diagrams were juxtaposed with words in books and papers to explain complex concepts. Paintings and sculpture have reflected the customs and values of society since early times. Newspapers with illustrations and later with photographs spread common images to many people over a wide geographical area creating a shared basis of visual information. Cameras more objectively captured images of people and events. In the early 1900s Randolph Caldecott’s illustrations in children’s books revolutionized publishing; billboard advertising influenced perceptions of the good life; sequential drawings and comics involved the reader in the story. Movies, newsreels, and all forms of animation convey messages about life and the state of the world to millions. TV entertains and educates providing instantaneous images of current events to people around the world. Then in 1968, John Debes, at Kodak coined the phrase “visual literacy”. The Internet allows millions around the globe to share the same visual images. The advent of the Internet, computers, digital cameras, desktop publishing software, and affordable color printers enable many people to have the capability to create effective design visuals.
Monday, June 16, 2008
Be Bold! Be Brave!
Be Bold! Be Brave! That’s going to be my new desktop publishing mantra reminding me to implement the principles and techniques I’m learning and to experiment with creating more daring and varied flyers, worksheets, and newsletters. I’m certain that my future visuals will be more effective because now I know about Robin’s rules of Contrast, Repetition, Alignment and Proximity. And since I know these concepts, I’ll be able to put them to good use by practicing and applying them.. I’m ready for this long overdue change – my personal electronic publishing make-over.
I realize, I’ve got a lot of work to do. After all, I took typing in school on a manual typewriter during the LBJ administration. I’ve always put two spaces after the period at the end of sentences, defaulted to Times Roman or Helvetica type, underlined text, used stupid quotes, centered headings and indented paragraphs five spaces. But NO MORE! Starting today all that is going to change. It’s time I stopped treating the PC like a typewriter. I realize that the rewards, though they may go unspoken, will be great. If I apply these principles, my documents will be more sophisticated; readers will take notice and pay more attention to the content; students will understand, comprehend, and remember the material better.
Through Robin William’s straight-forward, practical approach to design. I’m gaining a sense of what looks good and effective techniques to get these results. I’ve started a paper file with sample newsletters and brochures that incorporate strong alignment and contrast so I can refer to them as I do my own publishing. I felt I learned so much from the Gertrude’s Piano Bar menu example on page 29 that I’ve Xeroxed it and will keep it handy and review it.
Like others in this day and age, I have dabbled with design. In the 1980s I owned a computer business in Virginia, and I created the store’s newspaper ads, did some desktop publishing projects, and even taught Harvard Graphics seminars. For years I’ve prepared flyers, newsletters, cookbooks and brochures for PTO and volunteer groups I’ve belonged to. Although some of the ideas in the chapters were familiar, I have never put it all together into a cohesive, unified whole. I thought mixing fonts on the same page was taboo and have not been vigilant enough in leaving white space around text, I may even have been guilty of using dorky borders. I was a psychology major in college, and I am surprised how many design principles make perfect sense once you are introduced to them and how many (like closure, figure-ground relationship, and Law of Pragnanz) are based on Gestalt theories of perception.
I'd like to share some of the highlights that I’ve learned about four principles of design:
Proximity
- Related items on the page should be logically grouped together in physically close proximity, so at a glance, they are seen as one cohesive group.
- The goal is clear communication.
- One should not be afraid of allowing white space in the text.
- If two elements are not related, separate them.
- Changing headings from all caps to lowercase with appropriate capitals makes room to allow for a bigger, stronger header font size.
- Body copy does not have to be 12 point. Even 7 or 8 point font is ok for subsidiary text. You can alter text size within the line to deemphasize something.
- When you look at a page of text, your eyes should stop 3-5 times. If this is not the case, make adjustments.
Alignment:
- Nothing should ever be placed on the page arbitrarily. When you place other items on the page, make sure each has a connection or visual alignment with another item on the page.
- Centered text is sedate and tired looking – try other alternatives like aligning to the left or right side of the page.
- Never center headlines over flush left body copy or text that has an indent. Don’t center illustrations, rather align them with an edge or baseline.
Repetition
- Repeat some aspect of the design (bold font, thick rule, bullet, color, spatial relationship, etc.) throughout the entire piece. This consistency unifies all parts of the design.
- To add visual interest, find existing repetitions and then strengthen them with a consistent element. For instance, take headlines on the page and put them in a stronger, bigger, different font.
Contrast
- If two elements are not exactly the same, then make the different, really different i.e. match large type with small type; thin lines with thick lines; warm colors with cool colors.
- The reader should be able to glance at the page and know what’s going on. Create headline to catch eye, and use lines short enough to easily read through. Pull out key phrases to set in bold type, so that the visual contrast catches the readers’ eyes and pulls them through the page.
I was amazed that visual literacy cuts across so many disciplines including philosophy, psychology, visual arts, art history, perceptual physiology, sociology, cultural studies, media studies, instructional design, semiotics, communications, and educational tech (Adobe White Paper), Today it is important that children learn to interpret and read visuals, to discern meaning and to create effective visuals themselves in order to be able to communicate successfully. Educators must assume the responsibility to model and help students gain these abilities. Teachers in all content areas must provide good design examples and encourage students to try different design combinations and approaches and then help students to step back and evaluate which results are most effective.
I was fascinated with the cross-disciplinary design principles in the Lidwell book. For each of the topics I found that I was drawn to the right-hand page with the visuals first – which shows the compelling nature of illustrations, graphics and small amounts of text.
I was especially interested in the engineering design examples of affordance and mapping. Affordance is described as a property in which the physical characteristics of an object or environment influence its function - like round wheels afford rolling. An efficient design matches the affordance of an object or environment with its intended function. For instance, when designing a website, one should use graphics that will help users will intuitively know what to do – like incorporating buttons to push or slidebars for volume control or trashcans for throwing away garbage. Underlined text had come to signal hyperlinks, but perhaps some felt it created too much "noise" by breaking up the text, so the different color text roll over hyperlink emerged.
This week I experienced first-hand a conflicting door affordance at a Subway restaurant. On the way out, I was prepared to push the door open, but then I saw a handle, so instead I pulled, but the door didn’t budge. That handle sent the wrong message and should be removed. My son said that he has experienced similar conflict with glass doors on the new theater at his college.
Mapping is the relationship between controls and their movements or effects. In effective designs, the outcomes are predictable and can be anticipated by the user. The book explains that it is more effective for a car's automatic window opener to be mounted on the car door itself rather than on the armrest or console because not only is it in closer proximity to the window, but it operated more intuitively because you push the lever down to make the window go down and up to make the window go up. My car’s automatic window opener is on the armrest, and I have to push forward to open and backward to close the window. Still after years of driving this car, I sometimes rock the switch the wrong way. This week I thought about it and noticed that there is a bump where I push to open the window and a depression in the control rocker to close the window. This probably was intended to make it easier to operate while keeping your eyes on the road or in the dark. The cruise control on the steering wheel has a corresponding bump and depression – you press the bump to turn on or increase the cruise speed; and press the concave depressed area to decrease the speed.
I think that the Nintendo wii controllers would be a good example of mapping. In various games, you move the controller in an analogous way to movement you would make in real life like when swinging a tennis racket, casting a fishing line and reeling in a fish, turning a steering wheel to drive. The wii controller is so much more intuitive than moving characters or driving cars with the arrow controls on the computer keyboard.
I also noticed that the controls on my VCR and DVD player use mapping by conforming to the Western standards of reading from left to right. The button to advance the media forward is on the right side of the machine, while the button to rewind the media backward is located on the left side of the machine and the play is in the middle. This matches the user’s expectations. When creating visuals or website controls, designers should use these types of conventions. Though, as the book points out, not all conventions cross cultures (In England you turn a light on by pressing the switch down. But come to think of it, in my house I have some confusing light switches oriented sideways on the wall, and I cannot for the life of me tell you which way is on – poor mapping design.)
The time I spent learning about design principles this week has been invaluable. I never realized how big a role visual design plays in our lives – it’s everywhere!
- Karen
I realize, I’ve got a lot of work to do. After all, I took typing in school on a manual typewriter during the LBJ administration. I’ve always put two spaces after the period at the end of sentences, defaulted to Times Roman or Helvetica type, underlined text, used stupid quotes, centered headings and indented paragraphs five spaces. But NO MORE! Starting today all that is going to change. It’s time I stopped treating the PC like a typewriter. I realize that the rewards, though they may go unspoken, will be great. If I apply these principles, my documents will be more sophisticated; readers will take notice and pay more attention to the content; students will understand, comprehend, and remember the material better.
Through Robin William’s straight-forward, practical approach to design. I’m gaining a sense of what looks good and effective techniques to get these results. I’ve started a paper file with sample newsletters and brochures that incorporate strong alignment and contrast so I can refer to them as I do my own publishing. I felt I learned so much from the Gertrude’s Piano Bar menu example on page 29 that I’ve Xeroxed it and will keep it handy and review it.
Like others in this day and age, I have dabbled with design. In the 1980s I owned a computer business in Virginia, and I created the store’s newspaper ads, did some desktop publishing projects, and even taught Harvard Graphics seminars. For years I’ve prepared flyers, newsletters, cookbooks and brochures for PTO and volunteer groups I’ve belonged to. Although some of the ideas in the chapters were familiar, I have never put it all together into a cohesive, unified whole. I thought mixing fonts on the same page was taboo and have not been vigilant enough in leaving white space around text, I may even have been guilty of using dorky borders. I was a psychology major in college, and I am surprised how many design principles make perfect sense once you are introduced to them and how many (like closure, figure-ground relationship, and Law of Pragnanz) are based on Gestalt theories of perception.
I'd like to share some of the highlights that I’ve learned about four principles of design:
Proximity
- Related items on the page should be logically grouped together in physically close proximity, so at a glance, they are seen as one cohesive group.
- The goal is clear communication.
- One should not be afraid of allowing white space in the text.
- If two elements are not related, separate them.
- Changing headings from all caps to lowercase with appropriate capitals makes room to allow for a bigger, stronger header font size.
- Body copy does not have to be 12 point. Even 7 or 8 point font is ok for subsidiary text. You can alter text size within the line to deemphasize something.
- When you look at a page of text, your eyes should stop 3-5 times. If this is not the case, make adjustments.
Alignment:
- Nothing should ever be placed on the page arbitrarily. When you place other items on the page, make sure each has a connection or visual alignment with another item on the page.
- Centered text is sedate and tired looking – try other alternatives like aligning to the left or right side of the page.
- Never center headlines over flush left body copy or text that has an indent. Don’t center illustrations, rather align them with an edge or baseline.
Repetition
- Repeat some aspect of the design (bold font, thick rule, bullet, color, spatial relationship, etc.) throughout the entire piece. This consistency unifies all parts of the design.
- To add visual interest, find existing repetitions and then strengthen them with a consistent element. For instance, take headlines on the page and put them in a stronger, bigger, different font.
Contrast
- If two elements are not exactly the same, then make the different, really different i.e. match large type with small type; thin lines with thick lines; warm colors with cool colors.
- The reader should be able to glance at the page and know what’s going on. Create headline to catch eye, and use lines short enough to easily read through. Pull out key phrases to set in bold type, so that the visual contrast catches the readers’ eyes and pulls them through the page.
I was amazed that visual literacy cuts across so many disciplines including philosophy, psychology, visual arts, art history, perceptual physiology, sociology, cultural studies, media studies, instructional design, semiotics, communications, and educational tech (Adobe White Paper), Today it is important that children learn to interpret and read visuals, to discern meaning and to create effective visuals themselves in order to be able to communicate successfully. Educators must assume the responsibility to model and help students gain these abilities. Teachers in all content areas must provide good design examples and encourage students to try different design combinations and approaches and then help students to step back and evaluate which results are most effective.
I was fascinated with the cross-disciplinary design principles in the Lidwell book. For each of the topics I found that I was drawn to the right-hand page with the visuals first – which shows the compelling nature of illustrations, graphics and small amounts of text.
I was especially interested in the engineering design examples of affordance and mapping. Affordance is described as a property in which the physical characteristics of an object or environment influence its function - like round wheels afford rolling. An efficient design matches the affordance of an object or environment with its intended function. For instance, when designing a website, one should use graphics that will help users will intuitively know what to do – like incorporating buttons to push or slidebars for volume control or trashcans for throwing away garbage. Underlined text had come to signal hyperlinks, but perhaps some felt it created too much "noise" by breaking up the text, so the different color text roll over hyperlink emerged.
This week I experienced first-hand a conflicting door affordance at a Subway restaurant. On the way out, I was prepared to push the door open, but then I saw a handle, so instead I pulled, but the door didn’t budge. That handle sent the wrong message and should be removed. My son said that he has experienced similar conflict with glass doors on the new theater at his college.
Mapping is the relationship between controls and their movements or effects. In effective designs, the outcomes are predictable and can be anticipated by the user. The book explains that it is more effective for a car's automatic window opener to be mounted on the car door itself rather than on the armrest or console because not only is it in closer proximity to the window, but it operated more intuitively because you push the lever down to make the window go down and up to make the window go up. My car’s automatic window opener is on the armrest, and I have to push forward to open and backward to close the window. Still after years of driving this car, I sometimes rock the switch the wrong way. This week I thought about it and noticed that there is a bump where I push to open the window and a depression in the control rocker to close the window. This probably was intended to make it easier to operate while keeping your eyes on the road or in the dark. The cruise control on the steering wheel has a corresponding bump and depression – you press the bump to turn on or increase the cruise speed; and press the concave depressed area to decrease the speed.
I think that the Nintendo wii controllers would be a good example of mapping. In various games, you move the controller in an analogous way to movement you would make in real life like when swinging a tennis racket, casting a fishing line and reeling in a fish, turning a steering wheel to drive. The wii controller is so much more intuitive than moving characters or driving cars with the arrow controls on the computer keyboard.
I also noticed that the controls on my VCR and DVD player use mapping by conforming to the Western standards of reading from left to right. The button to advance the media forward is on the right side of the machine, while the button to rewind the media backward is located on the left side of the machine and the play is in the middle. This matches the user’s expectations. When creating visuals or website controls, designers should use these types of conventions. Though, as the book points out, not all conventions cross cultures (In England you turn a light on by pressing the switch down. But come to think of it, in my house I have some confusing light switches oriented sideways on the wall, and I cannot for the life of me tell you which way is on – poor mapping design.)
The time I spent learning about design principles this week has been invaluable. I never realized how big a role visual design plays in our lives – it’s everywhere!
- Karen
Subscribe to:
Posts (Atom)
