Activity: Creating Mobile Friendly Seating Arrangements

Creating Mobile Friendly Seating Arrangements

Click to Enlarge Graphic

Users: Workshop participants include university faculty and professional staff with little to no familiarity with an iPad. Users may have used other mobile devices like phones, e-readers or tablets in the past. Reading level and diagram reading skills should be ranked as high.

Solution: This graphic was created as an example for a workshop activity in which participants will design their own “mobile friendly” classroom layouts. Some activities that participants might want to consider includes: game show activities, group activities and lab-style activities. Reflecting on the concepts of white space introduced in Chapter 11, I used the principle of symmetry (p. 275) to create a sense of organization and cohesion and white space (p. 275) to illustrate items such as desks, seating, and iPads.

User-Test: After having a friend review the graphic, he shared that overall he felt clean and well-organized. One item he thought be beneficial to clarify is what the long rectangles and small rectangles represented (tables and chairs.)

Changes I’ll Make: I’ll add a “key” to this diagram that includes labels for iPads, tables and chairs.

 

Inside the Box- What’s Included with Your iPad

Making Sense of the App Store- Chargers-01

Click graphic to enlarge

Making Sense of the App Store- Standard Apps-01

Click graphic to enlarge

Users: Workshop participants include university faculty and professional staff with little to no familiarity with an iPad. Users may have used other mobile devices like phones, e-readers or tablets in the past. Reading level and diagram reading skills should be ranked as high.

Solution: These graphics were created to provide to first time iPad Users when they initially receive their device. Providing these graphics will help to break down what’s included with the device (a USB cable, charger, and a set of standard apps.)

The organization of the “Standard Apps” graphic proved to be a bit tricky. Users should walk away with the sense that all of the apps are equally important and separate from each other. Using the concept of chunking (as discussed on page 148), I arranged the app icons so that they were evenly spaced and recognizable. I also used chunking in the first graphic, separating the charger and USB cable so that they were close enough that they appeared related, but far enough apart that it apparent that they were two separate items. I also think labeling the two items helps to explain that they are separate.

User-Test: After having a friend review the graphic, he shared that overall he felt the design was strong and minimalistic. One suggestion that he had was to further increase the size of the app icons and move their labels underneath the graphics.

Changes I’ll Make: If I were to make any changes, I would increase the size of the app icons.

Optional Accessories for the iPad

Optional Accessories for the i

Click graphic to enlarge

Users: Workshop participants include university faculty and professional staff with little to no familiarity with an iPad. Users may have used other mobile devices like phones, e-readers or tablets in the past. Reading level and diagram reading skills should be ranked as high.

Solution: This graphic was created to be used in a class discussion regarding optional accessories for the iPad. Workshop participants will use this grid to help create an informational sheet about accessories they might like to use with their device. In creating the graphic, I selected colors that were of similar hues and saturation and a mix of primary and secondary colors (p. 264, p. 271). I selected white for the text and icons inside each box to maximize contrast and legibility. Eventually, a guide for third-party accessories may be created by the instructor for this course and she would use the colors portrayed here to categorize and highlight different items.

User-Test: After having a friend review the graphic, he shared that he enjoyed the simplistic design of this graphic. One piece of feedback he provided was  to consider making the text in each box a bit larger and change it to bold.

Changes I’ll Make: The idea to increase the legibility of the text will help to improve legibility and is something I’ll add in my next rendition of the graphic.

Finding a Great App

Finding a Great App-01

Click graphic to enlarge

Users: Workshop participants include university faculty and professional staff with little to no familiarity with an iPad. Users may have used other mobile devices like phones, e-readers or tablets in the past. Reading level and diagram reading skills should be ranked as high.

Solution: This graphic was created for a self-guided activity on finding the right apps for your classroom. The experience of finding the right app for an assignment can be overwhelming, especially for first time iPad users. Using the principles of “concentrated” (steps highlighted in red) and “concise” (short explanations), I created a step-by-step set of instructions (p. 102). While I tried adding screen shots or small icons to help with the “concreteness” of this graphic, they all felt too distracting and I decided to err on the side of “conciseness.”

User-Test: After having a friend review the graphic, he said that he liked the bold titles and the indentation of “example.” One suggestion he shared was to add something to show a flow or a sequence, perhaps numbers, to help indicate to reader that they should work top to bottom.

Changes I’ll Make: The suggestion to add “a flow” to this graphic was very helpful and I’m considering adding either number or curved arrows to indicated a path.

 

10 Best Classroom Apps

Top 10 apps for the classroom-01

Users: Workshop participants include university faculty and professional staff with little to no familiarity with an iPad. Users may have used other mobile devices like phones, e-readers or tablets in the past. Reading level and diagram reading skills should be ranked as high.

Solution: This graphic was created to for a discussion activity on apps for use with students. Participants will download each of the listed apps and then practice using them within their group. At the end of the activity, each participant will create a learning activity that incorporates at least 2-3 of the apps on this list. I wanted to create a sheet that would serve as an easy to use reference, so I incorporated the concepts of alignment (all text and icons are aligned) and repetition (the same format is used for each app.)

User-Test: After having a friend review the graphic, she said that she liked being seeing the app icon because it will make it easier for the user to find. One suggestion she had was to make the icons hyperlinks so that users will be able to click-through to download the app.

Changes I’ll Make: I like the suggestion from my friend to make it easy to download the apps, so I will add this element. Also, I will consider making more top 10 lists in the future (like Best Apps for Photography and Best Apps for Productivity) and will maintain this format.

Unit Organizer

Getting Started with Your iPad-01

Users: Workshop participants include university faculty and professional staff with little to no familiarity with an iPad. Users may have used other mobile devices like phones, e-readers or tablets in the past. Reading level and diagram reading skills should be ranked as high.

Solution: This graphic was created to help divide the workshop into two sections: “Getting Started with Your iPad” and “Using iPads in the Classroom.” Playing off the shape of app icons on the iPad, I created each module box to look like an app. Modules 1-3 are related to each other, so they are listed next to each other in the suggested order. Additionally, I changed the hue of blue in each shape to indicate progression.   I applied a drop-shadow effect to the “app icons” to add depth (p. 86) and used the alignment tools (p. 84) to make sure the icons and text were aligned.

User-Test: After having a friend review the graphic, he didn’t see the modules as apps at first. He suggested that I possibly add an icon and a gradient to each box to give it more of an “app-feel.”

Changes I’ll Make: While I agree that at first glance the icons may not look like iOS app entirely, I don’t know that adding icons would convey the simplistic feel I was going for. I will add a few more stylistic elements to the apps like a gradient and a colored background.

Anatomy of an iPad (Exterior)

Anatomy of an iPad (Exterior)

Users: University faculty and professional staff with little to no familiarity with the iPad. Users may have used other mobile devices like phones, ereaders or tablets in the past. Reading level and diagram reading skills should be ranked as high.

Solution: This vector graphic was designed to fit the resolution of the iPad and is something that I can load on to faculty iPads before attending the workshop. I used elongated rectangles both to mimic the shape of the iPad and to fit the display (as mentioned on page 255.) I used simple shapes (page 250) such as circles, lines and boxes to create the front, back, and side profile of the iPad and maintained the same grey color to indicate the body of the device.

User-Test: After having a friend view this diagram, he indicated that he would like to see the numbers lead to a further explanation of the tool.

Changes I’ll Make: Based on this feedback, I’ll add a separate column to this page or a separate page with a box that contains a short explanation of each number on this diagram.

Week Four: Typography

Assignment 4- Typography

For my EDTECH 506 final project, I’ll be creating a professional development unit for faculty and staff at a university. To get the project started, we were told to select four words that deal with our selected topic and create “word visuals.” For a unique twist with typography, our word themes needed to be visually conveyed through the text itself.

This assignment was challenging for two reasons: we were only able to use black and white, and I had hard time narrowing down the themes to display! However, for my first time creating these “word visuals,” I do feel like the words convey their theme.

Growth- Because this unit focuses on professional development for faculty and staff, I used this term to indicate the growth I hope to occur in this course. Growth may occur through knowledge gain, new professional relationships and through skill building. I used the same typeface for this graphic (to represent one individual) and gradually increased the size of the word to indicate an increase. Adjusting the kerning helped to separate the larger letters towards the end of the word.

Mobile- The word mobile is especially significant for this course because we will be using an iPad for the majority of the lessons. In addition, I hope that participants will meet with their colleagues outside of class and bring their devices to their own classes, creating a mobile learning environment! To illustrate the concept of mobile, I created a simple wheel using a circle and some lines. I then used the “type on a path” tool to wrap the letters around the wheel. At first the letters were bunched together, which didn’t seem to indicate motion. To give the impression of motion, I adjusted the tracking of each letter and then rotated the beginning of the word so that “mobile” appeared to have already been moving.

Visuals- I selected the word visual for two reasons: to represent the large amount of graphical resources that will be given to students, and to suggest the visual nature of interacting with the iPad. The interface of the iPad consists mostly of visual icons and gestures and tends to minimize the use of large sections of text. For this reason, I thought about the decorative typefaces described in this chapter, and the notion that they work well when used in moderation for items such as headings or labels. While I realize that one would not normally mix this many typefaces in a design, I used the different typefaces to convey the different moods that can be created through text. For example, the “V” is very elegant, yet playful, while the “S” may be perceived as formal.

Hands-On- The majority of activities in this unit will be hands-on and focus the adult learner’s interaction with the device and apps. When I thought about combining hands-on and type, I was reminded of learning to write and the lined sheets that are usually provided for practice. I selected a typeface that looked like a child’s handwriting to suggest that it had been created by an individual instead of a computer. Then, I created three lines to indicate the practice sheet the child would use.

Universal Design Activity: Organizing Your Wardrobe

Universal Design Activity: Organizing Your Wardrobe

While looking for an example of universal design, the concept of info-graphics is one of the first things that came to mind. An info-graphic is  “a single-page vehicle for detailed information, where graphics have been used to enhance the interpretation or retention of the information within it” (B2B Marketing, 2011).

I selected this particular info-graphic because it highlights some of the key terms found in this chapter:

Interpretive Visuals- The illustration of folding socks uses arrows and a hand to help illustrate how to neatly store socks. While this concept would be difficult to illustrate with words, the use of a diagram breaks the process into steps and makes the concept easier to understand.

Representative Visuals- The author of this info-graphic has created symbols to represent different types of hangers, items of clothing, as well as an organized closet. Instead of imagining if what type of jacket or dress the author would like us to purchase, we are presented with a very clear illustration.

Organizational Visuals- The setup of this info-graphic is such that the poster helps to guide the viewer from one element to the next. It is neatly organized, mirroring the concept of having an organized closet, and each section of the info-graphic uses a shape to illustrate that it is a separate component. Perhaps the most powerful visual is that of a pyramid, which helps the viewer to see that the items at the bottom should be most frequent, while the items at the top should be less frequent. (Similar to the traditional food pyramid that many users have seen before.)

The info-graphic is from Apartment Geeks and was found via the site Loveinforgraphics.com.

References

Petherick, D. (2011, December 8). How do you define an infographic? | b2bmarketing.net. B2B Marketing | The Business to Business Marketing Resource. Retrieved February 2, 2013, from http://www.b2bmarketing.net/blog/posts/2011/12/08/how-do-you-define-infographic

Personal Introduction Image

Personal Introduction image 506 Amber Hoye

For my personal introduction image, I was inspired by this chapter’s discussion of name badges. The teachers at the hiring fair mentioned that it was difficult to see the individual’s name and major without squinting. I thought about how the name tag could be improved and also wanted to include some personal information about myself. I used icons to represent my personal interests and goals, which can serve as conversation starters both in face-to-face situations and in the digital world.

The icons are from a website called the Noun Project, which has a goal to create a universal set of icons or a “global visual language that everyone can understand.” The camera represents my goal to take a least 1-2 pictures everyday, the dog represents my Boston Terrier named Greta, the couple represents my wedding on 10-11-12, and the graduation cap represents my graduation date of Spring ’13.