CARP

For this week we use the ideas of CARP: Contrast, Alignment, Repetition and Proximity. Below is my image and justification. The image I created is a flash player which can be found at my project website here.

One of my design goals for this course was to learn to use most of the Adobe suite software. It is amazingly powerful and I hate feeling inept when trying to use this expensive tool. For this activity, I used Illustrator to create the images, Catalyst to make the Flash player and Dreamweaver to put it together. 

I believe my solution will work because it uses a simple design and adds interactivity with the user. Instead of listing each of the lesson steps, I wanted to have students consciously locate the information. I did this by creating a reel-to-reel spool that sort of rolls as the information changes in the screen. I used contrast by making the title word white in correlation with the information in the box and put the two pieces of information close together. Lohr highlights this by citing Chandler and Sweller (1991), “Students learn better when corresponding words and pictures are presented near rather than far from each other on the page or screen” (2008, p. 199). Contrast was also used throughout to give the appearance of depth and highlighting important elements like buttons and the topic reel (Lohr, 2008, p.207).

Users mostly liked what I accomplished with this page and had nothing of note to offer. However, I am not satisfied with the end product as some of my early design mistakes came back to haunt me when the visual started to move. Much of this takes endless hours to go back through and correct so already being late with my assignment, I have decided to submit and work with it more later.

Things I plan to change include the buttons. I used the stock buttons in Catalyst but I plan to make my own. I will also recreate the reel so that the rolling effect doesn’t distort. Also, the display film area needs to match the color of the reel so that will be changed as well. I will fix the minor grammar mistakes in the lesson descriptions. And finally and much of why this is late, I will attempt to solve the missing video issue.

Lohr, L. (2008). Creating graphics for learning and performance: Lessons in visual literacy. Upper Saddle River, N.J: Pearson/Merrill/Prentice Hall.

Fullscreen capture 20032013 231845.bmp

Advertisements

ACE/PAT

In chapter 4 of our book, we look at ‘Ace it with Principles, Actions, and Tools” (Lohr, 2008, p.71). We are asked to analyze, create, and evaluate a design that can be used within our project. Below is my design and the justification.

ACE/PAT
This graphic is intended as the home page for my unit of instruction. In the analyze phase of this week’s assignment, I had to determine how best to draw the students in and organize the information logically. To accomplish this, I chose to create an image that somewhat mimics a movie poster.

The creation phase was long and tedious with countless hours spent watching Lynda.com tutorials and coming to better understand how to use Adobe Illustrator. This was one of the challenges I set for myself this semester so the labor was one of love. To achieve my goal of creating the movie poster home page, I looked for inspiration anywhere I could think of (Lohr, 2008, p.77). In the end I found a template in Adobe Illustrator that helped me organize the page. I mimic some of the special organization, but created everything from scratch. I let the template get me started, but in the end, the image you see is very different indeed (Lohr, 2008, p.77)

However, the 80/20 principle did not apply in this case as it was more like 95/5. I think I created a 12 foot tall snowman with at least 10 rounds. I fully agree that “there are as many cycles as time and resources permit” (Lohr, 2008, p.89). In the end, I had to just stop tweaking. And the image is still not exactly as I thought would evolve from the process.

User Test/Changes
Luckily, two of my wife’s friends were over today for lunch and provide very reasonable and useful feedback. The original image was even darker and more foreboding than what I present now. A dark black and white image displayed a city silhouetted below ominous circling clouds. The two seated individuals in this image were also present in that. The lovely ladies at my aid said it gave the impression of a psychologist’s office. They were initially quite standoffish and suggested I brighten the image. Without prompting they asked me why I made it look like a movie poster if it was about role-playing. This is good. I explained that the role-plays will be video productions (which was written on the screen). They  then said the black back ground makes sense as it made them think of being in a movie theater. They like the image (which was very, very different at that time) but wanted more color. “They’re not making horror movies, are they?” One asked. “They could if they like.” I replied. But she was right. It was too dark. What you see here is my attempt to lighten the image and still create the effect of seeing a movie.

roleplay-01-01

Shapes

Shape is a necessary element of any instructional visual. This week I used simple shapes to create my graphic. In my unit of instruction, students will create role-play videos. A vital step in this production will matching video and audio recordings. I believe my solution works as it contains four primary elements. First, the words top and bottom enclose the graphic and directly relate to the visual. This creates a rectangular display shape and helps the viewer hierarchically (Lohr, 2008, p. 250). Second, the graphic uses simple circles to contain the important information. This provides unity and focuses attention to the alignment of the vital data (Lohr, 2008, p. 250).

When presented with this image, I received a number of helpful ideas that will be incorporated into the graphic soon. My colleague who knows the goals of the project, quickly understood the message. He commented that the words were necessary to understand the graphic but also stated that the ideas were difficult to express but though I had achieved my goal. A second colleague took longer to form his ideas which suggests that the message may not be clearly evident. He commented that the audio element looked like a heart rate graph and seemed puzzled in general. After providing context for the graphic, he understood easily but said the contextual reference was critical. A third colleague first asked for context and commented that he saw only the audio side of the image. He suggested using a different image for the video element.

In the end, I changed the alignment of the wording but left the image mostly as is because I believe it achieves its goal.

play_button

Typography

We look at typography and its affect on learning and message delivery. I chose to do the second Challenge in our course book. The activity asks us to created images using typography. The hardest part of this challenge was deciding on the words to use. I wanted to use words that applied to each lesson plan of my unit. However, finding words that would work to introduce each lesson proved too difficult. Instead, I focused on parts of my first and second lessons as many of the ideas will need a visual representation.

Creating role-play videos that are interesting, creative and well produced is the goal for my unit. My university EFL students will be coming to class with varying levels of English proficiency. The average level falls at about the intermediate range. From my experience, these students will likely enjoy and understand the images created for this week’s assignment.

Keeping with the same color scheme as the previous week, I wanted to create four images that can almost portray their meaning without reading the words.

The first image, ‘Video Terms,’ is a bit of a gamble. The words do not directly mean the ‘picture’ they create. Instead, the term they represent is ‘action’ which is a video term. However, I chose these two words and this design as I think it will be a great image to start my unit. The typeface is Ariel, which gives a very blocky appearance and adds to the board look. My test audience said, “That thing you did there… Yeah, I see what you did there.”  He understood immediately and said that even though it didn’t directly represent the meaning, it worked.

terms

The second image, ‘Close Up,’ was intended to fill the space. I initially imagined using a more ‘bubble’ like typeface and came across Cooper Std. On page 215 of our book, the idea of using proximity to represent relationship is discussed (Lohr, 2008). I overlap each character to show the closeness of the proximity and I used a bit of glow behindeach letter to give the appearance that the ‘o’ is closer to the viewer, almost like a nose. Also, ‘close’ is in the up position. My tester also pointed out that the ‘o’ is popping out and does look closer.

closeup

For ‘Long Shot,’ I wanted to give the appearance of standing next to a wall. I used a sans serif (Haettersweiler) typeface and which uses very narrow counters. On page 235, our book states, “All in all, narrow counters are hard to read” (Lohr, 2008). By using narrow counters, I want my audience to see that things get harder to distinguish as they get farther away. My Test audience didn’t have much to comment, but did say they thought the graphic worked.

longshot_2

The last image, ‘Sound,’ has gone through five iterations. The question was whether to put the ‘s’ inside or outside the ‘o.’ My tester agreed that the ‘s’ belongs in the ‘o’ because otherwise, it would look like so   und.  By putting the ‘s’ inside, the ‘o’ looks like a speaker and und look like sound waves. In all honesty, I’m not sure this one works as well as I intended and may not be as universal as intended.

soundnoshadow

Unit Proposal

For week 3, we were asked to write a proposal for the unit of instruction we intend to create over the course of this semester. The excerpt below comes from my proposal, the rest of which can be read at the website I’ve designed for this class.

In EdTech 542, I designed a PBL project for the university freshmen at my school. It is called the City Project and requires that students explore their city and create a presentation that answers the question: Is Daegu a good place to live while studying at university? As part of the project, students are asked to create thematic role-play videos that utilize language studied in class. For my project in EdTech 506, I intend to create a unit of instruction that will scaffold the video creation requirement of the City Project. This unit will focus on the necessary steps in creating a quality video using Microsoft Movie Maker from the scripting stage to the final YouTube.com upload.

The City Project has been run at the small group evaluation stage and was received warmly. Students were thrilled to have the opportunity to work beyond the canned classroom environment and rose to the technological challenge presented by the project. However, feedback specifically addressed the glaring lack of technology support. By providing specific instruction regarding video production, students will be able to spend less time learning the technology and more time exploring the learned language. The primary goal for this unit of instruction is to allow for the greatest level of language improvement.

See the proposal here.

Intro Image

 

 

 

 

506_intro_notabs

My life is quite simple really. The six pictures  pretty much sum up who I am. I take these six ideas quite seriously, and dedicate myself to pursuing them passionately. As husband and father, I am guided by a sense of purpose and joy, and I try to spend as much time as I can with my four ladies. I chose the purple hued picture to represent my life as guide. My driving philosophy in teaching as well as my role in the mountain bike community in Daegu, South Korea can best be described with this idea. Bicycling has given me the greatest friends in the world and takes me places where I can frame the images of my memory in the photographs I take. Finally, I truly believe the bicycle can save the world. I chose the background image as my canvas because it shows how in everything I do, bikes permanently linger in some misty corner of my mind.

The challenge for me with this arrangement was choosing photos that work panoramically. I also wanted to practice the lessons from Lynda.com. Other than using Fireworks minimally in EdTech 502, I have no experience with visual design software so diving into the tutorials and applying the ideas was my main goal for this week. Additionally, I wanted to practice visual literacy concepts considering type, shape, color, depth and space as well as contrast, alignment, repetition and proximity.

Universal Design

BedtimeRoutinePropNEW-235x300

For this weeks assignment we were asked to find an example of visual literacy and universal design. I found this image on a site called Being Visual by Bette Fetter. The sight is mostly designed to advertise a book by the same title but also has plenty of great ideas on how to help preschoolers become more visually literate. I was particularly drawn to this image because the bedtime routine of my 5 and 3 year old. Going to bed at night can be a bit hectic pulling the kids away from their drawings or videos or crafts.

This image communicates a chronological list of instructions that need to be checked off before they are ready to sleep. By putting it in list form and giving it to the kids, they are able to take responsibility and think of the nighttime routine as a mission and hopefully put up less of a struggle when it’s bedtime. The author suggests that lists like this “empower children to act independently, lessen power struggles and discipline issues, while building a child’s confidence and sense of self” (Fetter, 2013).  The universal design can be understood by a wide range of young children because it uses both icons and words. This also helps make connections between language and objects, which builds visual literacy skills. Dr. Anne Bamford, Director of Visual Arts at Art and Design University of Technology Sydney writes, “Visual literacy levels directly determine our level of visual comprehension and the ability of the individual to be able to read images in a meaningful way” (Bamford 2003). I feel that using charts like this will foster this ability to read images in meaningful ways.

On a side note, if I was to add anything to this list, I might add an empty box to the right of each step were my children could put stickers when they have completed the item. This would improve motivation and reinforce this routine.

Bamford, A. (2003). The visual literacy white pages. Adobe Systems Pty Ltd. Australia. Retrieved from http://adobe.ly/WEUSx2

Fetter, B. (2013). Preschool activities: Bedtime Chart. Retrieved from http://bit.ly/WXfu4D