Design Process Model

This week, we read about the ACE model (Analyze, Create, Evaluate) and how it can be used to guide the design process. Lohr (2008) recommends that the designer begin by considering the instructional context for the visual, and end by critically editing the visual. Of course, this is an iterative process, and can go through many revisions and stages of development.

My task this week was to create a "map" of my tutorial website, using the ACE model of design. I plan to use the visual I created on the home page of my website, so that students (and teachers) may orient themselves and preview what they are about to do throughout the three lessons. Additionally, I plan to carry the theme (colors and icons) throughout the website.

I struggled a bit getting started, I think because I was trying to make my visual very graphics-heavy. I really wanted to come up with icons that would "say it all", but in the end, text is needed to convey the finer points of each lesson. The students that will be using my website are high school age, so they should respond to the bold and repeated icons, but will also appreciate having the chance to read the details of each lesson. Students of this age appreciate knowing what they are about to learn, and how. I tried to answer those questions very succinctly, using the format of "new information", "practice", and "extension activities" for each lesson.

I also made the decision to write this menu/map in English, keeping in mind that, although this is a tutorial for Spanish students, they are beginning learners, and wouldn't find the text as useful if it were presented in Spanish. There will be places for that elsewhere on the website.

I think my visual will work because its instructional function is to provide organization for users of the website. Lohr recommends that this type of visual "make information easier to understand" (2008, p. 75). In clarifying ideas for the viewer, I put the principles of CARP to work (Lohr, 2008, pp. 80-85):

• Contrast is used to clearly separate the three lessons from the background and from each other. Bold headlines and icons are meant to grab the viewer's attention.
• Alignment shows ordinate and subordinate ideas, as well as the order in which a user would progress through the tutorial activities.
• Repetition of content, organization, and icons "increases the simplicity of the design and increases the sense of relationship between the elements" (Lohr, 2008, p. 84).
• Proximity shows how elements are grouped.

For the user-test, I showed this image to my husband. He provided the following comments and feedback:

• He thought the layout was very organized, obvious, and consistent. It reminded him of an outline (with I, II, III and A, B, C).
• He could see the pedagogy within each lesson.
• He liked the "soft, pleasing colors".
• He thought the icon guide provided at the bottom was a good idea. The "information" icon is obvious, but the other two icons are less obvious, so it was good to clarify their meaning.

Based on this initial user-test, I don't plan on any further revisions.

Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.

"Brain" icon created by Vlad Marin, and used with permission.  
"Information" and "Star" icons created by Yankoa, and used with permission under Creative Commons License.

Shape

For this week's "shape" assignment, I created a graphic that I plan to use as a section header in my website tutorial on prepositions. (Reminder: I'm introducing Spanish prepositions to high school students in their first year of Spanish studies.) For the last several years, I've noticed that my students have pretty good recall of something that I assume they are learning in elementary school: "A preposition is anywhere a mouse can go." When I teach prepositions in the classroom setting, this "definition" invariably comes up when I ask students to explain prepositions to me. I think it's a decent definition, but only if students understand that the mouse's location needs to be described in relation to something else.  (For example, a mouse can go to Alaska, but Alaska is not a preposition.)

With this in mind, I used Fireworks to create this visual, hoping to stimulate students' prior knowledge, and then use the image and concept as a point of discussion. After viewing this image in the "Introduction to Prepositions" part of my tutorial, students will be asked to narrate the path of the mouse. ("The mouse goes up the P, over the top of the P, across the r and e", etc.) In doing so, students will use a number of prepositions in context, reinforcing their function and their more "complete" definition.

Shape figured heavily in the creation of this image. Initially, I knew I wanted a wide and short display shape, so as to use the image to head a section on my website. In this way, the rectangle shape will contain information and focus attention towards the content of the text that will follow (Lohr, 2008, p. 252). I did struggle a little while trying to make this image the appropriate size and shape, while also maintaining legibility of all the text. I think with a million more hours of work, I could probably fine-tune the kerning of the word "Prepositions" a little more so as to save space, bumping up the text size for all the little words... but I'm pretty satisfied with how it turned out. I am still a novice when it comes to Fireworks, and this little picture turned out to be a big undertaking!

The mouse silhouette was an important shape to find and include, since it references the metaphor for my students, and also makes the image more engaging (Lohr, 2008, p. 250). I was lucky to finally find a suitable mouse image in the Creative Commons: http://commons.wikimedia.org/wiki/File:Silhouette_of_a_mouse.jpg

And, of course, line is an important shape element in this image. I created a path through the word "Prepositions" and then aligned the smaller text to this path, showing motion and direction (Lohr, 2008, p. 250).

When I asked my husband to give his feedback (as a "user test"), he made the following remarks: This image is good for demonstrating what a preposition is, and it also provides quite a few clear examples. It's easy to focus on one of the two "depths" in the image (either the black or the blue). He is also a Spanish teacher, and he said he'd like a version in Spanish for his classroom. He also thinks it would be good for primary teachers (in English, or whatever the language of instruction may be).

Based on the user test, I don't plan to make any changes at this point. As I said before, I'd like to have the image sized a little differently (not quite so wide and short), but I've done what I can with my time (and sanity!) at this point.

One thing I've struggled with in Fireworks is how to best export images and not lose resolution. It seems that no matter what I do (jpeg, png, 100%, etc.), nothing looks as good as it did in the original Fireworks file (when open in Fireworks). I included two different exports in this week's post hoping to see what they look like side-by-side. I think that in this case, the first image (the gif) looks a little better. Does anyone have advice?  Thank you in advance for your comments.

Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.

Typography Assignment

For this week's assignment, we were asked to design words, using typography, to express their meaning. I decided to illustrate some common English prepositions, preparing a graphic that I will be using in my final web-tutorial project.

I designed the image for high-school students, with the assumption that the underlying concept will be fairly easy for most of them. These are familiar words, and can rather easily be represented with pictures. But rather than introducing prepositions through these graphics, I was hoping to introduce the assignment that students will be doing at this point in the tutorial. Students will be asked to create their own images, similar to mine, but using the Spanish words for the prepositions. I am hoping that the design decisions I made, coupled with the textual instructions I will write for the website, are clear to students.

Among the many design decisions that I made while working on this project, the most important concepts that I applied might be font choice (or typeface) and alignment. I played around quite a bit to find fonts that were easy to read (legible), while also complementing the meaning of the words. In particular, the flowing script-like font for "around" conveys a sense of motion, while the serifs in the font for "under" make it look a little like it's bulging under the weight of the word "over". I also tried not to get too crazy with "creative" fonts, based on the advice from our textbook, reminding us that "it may be wiser to stick to conventional and familiar typefaces than to employ idiosyncratic ones" (Lohr, 2008, p. 225).

The concept of alignment was very important for illustrating "around" and "to the right". For these images, I aligned the text to the edges of shapes, designing written words to also convey their related meaning. In this way, I used shape to enhance the instructional message (Lohr, 2008, p. 242).

Before posting this, I had my husband look at the images I created. He said that the words definitely represent their meanings, and that the result looks "hip but timeless and kind of retro". (Hopefully this will help appeal to finicky students that are used to nice websites.) He also said that the images are "punny", which can be an insult coming from him (he hates puns!), but was totally unavoidable for this assignment. So I am happy with my work, and didn't make any changes based on the user-test.


Lohr, L.L. (2008). Creating graphics for learning and performance: Lessons in visual literacy (2nd ed.). Upper Saddle River, NJ: Pearson.