Saturday, July 25, 2009

Unit 5 - Justification



Section 1: Project Description
For the visual activity in Chapter 6 I chose to do the Independent Activity and picked my own project. Because the College is currently working towards re-accreditation, I have been asked to complete an organizational chart outlining the hierarchy of the College to present to the site visit team in October. My learner description would be for an accrediting body site team. After several revisions I chose to leave the rectangles white and outline them in a specific color which groups the elements by campus. I thought this would improve readability. I chose to incorporate the College into the top rectangle and did not add a separate title.
Comments from my partner included correcting a horizontal alignment among the Deans and reducing the size of the subordinate positions shown with a bent line. After completing these revisions I thought that the image was much stronger and created a clear hierarchy.



Section 2: Revised Image



Section 3: Usability comments from team partner
Jenni said...
Great job on this image. It is very complex but it works! My suggestions would be to make all 3 of the deans on the same level, the purple one is lower. Unless the Davenport Dean is supposed to be less important. Also, the boxes that come down with bent lines (2 purple, 1 orange), I think that they are supposed to be a lower position than what they are branching from. Therefore, they are a lower position than the rest of the positions in the list below them. Maybe by making their boxes smaller it would show more hierarchy. However, I could be completely wrong, as I have not even heard of some of these positions!!! Other than that I like how everything else is. I would keep the boxes just outlined. I think that colored it would be too much color and distract from the information. Great Job!!!



Section 4: Original Image


Section 5: Justification
In chapter 6, page 122, the book states that to understand hierarchy to think of an outline. I applied this to the organizational chart of the College. I created four separate outlines before constructing the image: one for each of the three campuses and one for the College including the campuses but without the positions. This made for a clear visual of all of the levels needed to complete the organizational chart and that each of the campuses would require an identifying tool to discriminate it from the others. I chose to use a different color for each campus but to keep the shapes the same for the entire chart so that the intrinsic load would be reduced. The different color denoting different campuses also clusters information into related groups chunking (page 125). Additionally I chose to use vertical alignment to improve the hierarchical organization to suggest that the positions placed towards the top of the image are higher and therefore more powerful (page 128). I incorporated the horizontal alignment as well to show that some positions were equal.

Thursday, July 23, 2009

Unit 5 version 1


For the visual activity in Chapter 6 I chose to do the Independent Activity and picked my own project. Because the College is currently working towards re-accreditation, I have been asked to complete an organizational chart outlining the hierarchy of the College to present to the site visit team in October. My learner description would be for an accrediting body site team. After several revisions I chose to leave the rectangles white and outline them in a specific color which groups the elements by campus. I thought this would improve readability. Does this work or should the rectangles be solid colors? I also incorporated the College into the top rectangle and did not add a separate title. Do you think this way conveys a clear message that this is the organizational chart of the College? Thank you for your comments!

Monday, July 20, 2009

Unit 4 - Justification

Section 1: Project Description
I have chosen to complete the activity from Chapter 11 taking an image and revising it using color, depth and space. The image is intended for learners at the college level, specifically to those who are beginning their career at a chiropractic college. The cross section of the spinal cord is the first image they are presented with in their first spinal anatomy course. Altering the original black and white image I used color to separate the anatomy in order for each part to stand out distinctly from the others. I used the same color for both the anatomy and the text naming the anatomy so that it would be easily relatable and identifiable. In colorizing the image I chose not to color in the image completely but to let the texture of the original image show through the color.
Comments from my partner included the incorporation of a title for the image so that the viewer would know what they were looking at (concentrated), removal of the smaller green print (concise) and allowing for more white space in the image.

Section 2: Revised Image






Section 3: Usability comments from team partner
Jenni said...
I love that the colors correspond with the parts; it makes it very easy to read and understand. I think that maybe you should give the image a title, so that users know what they are looking at. I cannot read the small green font. I would either make it larger, or just delete it, being that none of the other images have an explanation. I would also try to make the image have more white space, or background just by making the box bigger. Otherwise the text seems to be scrunched into the small space. Good job!!!

Section 4: Original Image







Section 5: Justification
In chapter 5, page 102, the book states that there are three characteristics – concentrated, concise and concrete – that relate to the cognitive task of selection. Although each visual must not contain all three, I applied each to my revised image. Concentrated is the emphasis of the title, spinal cord cross section. Concise is the emphasis of the specific anatomical parts and nothing extra. Concrete is the emphasis of corresponding color between the anatomy and the text making it easy to visualize.
In chapter 11, page 267, the book states that color makes important information stand out and improve learner selection (figure/ground). By facilitating the use of contrast, color can help the learner differentiate information. Using this I chose to identify each anatomical part through the use of a different color and label each part in the same color to make for easier viewer identification.
In chapter 11, page 272, the book states that the use of white space or negative space is a frequently overlooked design element. I chose to incorporate additional white space in my revised image to help clarify the text by not making it so cramped.

Tuesday, July 14, 2009

Unit 4 Version 1







I have chosen to complete the activity from Chapter 11 taking an image and revising it using color, depth and space. The image is intended for learners at the college level, specifically to those who are beginning their career at a chiropractic college; this is the first image they are presented with in their first course. The original image appears at the top and has no color. My first revision is the bottom image that has color. I used color to separate the anatomy in order for each part to stand out distinctly from the rest. I used the same color in the text as used in the anatomy to relate the text to the anatomy. Do you think these colors work and that the colorized text relates to its named image? In colorizing the image I chose not to fill the image completely but to let the texture of the original image show through the color. I felt that this aspect added depth. Finally, using space to clarify text I moved the text closer to the part of the anatomy it names. Do you think that having the text closer in proximity to its corresponding part of the anatomy helps to clarify the image?

Wednesday, July 8, 2009

Unit 3 - Justification


Section 1: Project Description

I have chosen to complete the second challenge activity and design words to express their meaning. The two designs I have done are intended for elementary school learners. For the first design I chose the word “independence” in honor of the holiday weekend. I used Garamond Bold for the “I” and Garamond for the remainder of the word so that the “I” would be emphasized. For additional emphasis the “I” is in 220 point font and noticeably separated from the remainder of the word. This was done to emphasize the meaning of independence and being self reliant. The separation of the “I” was also stressed using a different color font. My partner had a fantastic suggestion for this design which was to use a tool in Fireworks to make the text look like the American Flag (stars and stripes). Unfortunately this tool is in Photoshop and not Fireworks. Because I do not have Photoshop yet, I could not make this adjustment to the image.
For the second design I chose the word “root” in a font that was similar to handwriting so that it would have a more natural feeling. Using the pencil tool in Fireworks I drew in roots. In the original image I had the word in the bottom right corner of the text box with the roots extend to the bottom and right edges of the image to create a grounded feeling. But after receiving comments suggesting that the word be moved to the center of the design and have the roots hang, I feel that this is a much more effective image portraying the feeling of roots.





Section 2: Revised image


Section 3: Usability comments from team partner
Jenni said...
I really like both of your words, they are very unique! Here are my suggestions...For independence, I like the two colors I think that that works really well. I also like that the I is seperated, I assume that this is because I is "independent". I think that you should try to take the rest of the word and use the flag option in fireworks. Maybe this would make it look similiar to the american flag. Otherwise I think that they look great. For root, I LOVE the font. I think that it definitely looks natural. I would move it to the middle and have the "roots" hang down. I think that this will make them look even more like roots. Overall I think that you did a nice job!!
July 4, 2009 5:17 PM

Section 4: Original image or link to original image


Section 5: Justification statements
Independence
In chapter 9, page 217, the book states that Old Style typefaces are widely used in instructional materials. Garamond is listed on this page as an easy to read typeface with a slanted serif. I chose this font for the word “independence” so that it would be clearly read. It is also listed as a classic font on page 226 which I thought translated well to the historical context of Independence.
In chapter 8, page 199-201, the book states that significant contrast among elements is needed to create an image that focuses on what is important. Following the suggestion on page 201, I used a typeface that is packaged with a variety of heavy and thin fonts. I specifically chose Garamond Bold for the “I” in independence and Garamond for the remainder of the word. To create additional contrast focusing on the “I” I changed the color of the font to a bright red offsetting it from the remaining letters in blue.
In Chapter 8, page 203, the book states that working with proximity involves moving the visual elements together or apart. I chose to move the “I” apart from the rest of the remainder of the word to emphasize the meaning of independence as self-reliant or “I”.
Roots
In chapter 9, page 225, the book states that unique properties of instruction should be your guide to choosing a typeface. I chose the font Bradley Hand ITC for the word root because of it resembles handwriting, which to me feels natural and translates well to roots which are found in nature.
In chapter 8, page 203, the book states that working with proximity involves moving the visual elements together or apart. The close proximity of the letters in the Bradley Hand ITC font lead to a feeling of connection, without actually being connected. This makes the image of the word root appear to be connected, as roots typically are.

Friday, July 3, 2009

Unit 3 Version 1







I have chosen to do the second challenge activity to design words to express their meaning. The two designs that I have done are intended for elementary school learners. For the first design I chose the word "Independence" in honor of the holiday weekend. I used Garamond Bold for the "I" and Garamond for the remainder of the word so that the "I" would be emphasized. For additional emphasis it is in 220 point font. It is separated to also emphasize the meaning of the word. Do you think this works? I tried to even further emphasize it by making it a different color that the rest of the word. I am not sure that this works as it makes it somewhat difficult to read.
For the second design I chose the word "root" in a font that was similar to handwriting so that it would have a more natural feeling. Using the pencil tool I drew in roots. To make it have a more grounded feeling the roots extend to the bottom of the text box. To make it more interesting I moved the word to the left but I am not sure that this conveys the feeling of being rooted. Centered may be more appropriate in this case. What do you think?