For this weeks whitespace assignment, I wanted to start to really dig into some of the more difficult design challenges I am having in the unit. One assignment I have success with during the Google Slides unit is creating a Choose Your Own Adventure (CYOA) story. During this assignment, students are to brainstorm their stories on paper first. I’ve used this assignment only twice so far and both times I’ve given students their choice of a wide selection of outline organizers I found on the internet to use. I’ve found that the nature of the organizer, lots and lots of information, makes the outline templates tough to use. For this reason, I’ve been kicking around some ideas of how to not only make what I have been using better graphically, but to also custom make the organizer to better match the objectives of my course.
My biggest challenge is creating usable white space while organizing large amounts of data in a fairly compact space. I really wanted to keep the organizer to 2 pages for convenience and I needed to include at least 2 levels of the story. Sylvia Duckworth has created some really good flow chart templates but the general inspiration to my approach came from this presentation. I chose to use Google Slides to create the document and the page dimensions are letter sized. The image here is a composite of both pages. (open in Google Slides)
As you can see, and what you would expect, there is quite a bit of whitespace in the document. Since I have very limited space to work with, I tried to optimize the usable space by left-aligning the headings minimized as much of the provided text as possible. The coloring of the boxes is to help students identify at a glance each individual slide. Since many students tend to get lost in the mapping of the slides, I felt that in addition to the colors, the flow of the document should follow a logical order. The symmetry of the layout helps create order to something that can be quite overwhelming (Lohr 275). With other organizers, I’ve found that space for students to actually fill with their ideas is so limited in the final slides, that they often need to use additional paper. I wanted to avoid this and spent a bit of time figuring out how to maximize the space for these slides. I feel like I was successful as I was able to fit a full sentence or two in each box during my testing.
This weeks assignment is a bit different for me than the others in that I’ve been thinking about tackling this problem for a while now. I am grateful to have the opportunity to work on my ideas. That said, for this assignment, I also have ample testing subjects. Since we’ve already done our CYOA lesson last quarter, I was able to show this outline to students and get informal feedback on if they felt it would enhance the storytelling process. I had a couple students give valuable proofreading feedback as typos seemed to multiply on their own (they love finding my errors). Overall the feedback I received was positive but I could tell they were so over it and even my excited enthusiasm wasn’t enough to keep their interest. So.. I look forward to your feedback.. and most of all, I look forward to actually using this next year!
For our EDTECH506 wk10 assignment we are tasked with creating an image that represents strategies in organization. I chose to use Pictochart for this assignment because I really wanted to demonstrate order and organization in a clear way and that is something Pictochart does well.
I used consistent coloring and shapes as with the rest of the unit. The only thing I varied was the background pattern. I’m not sure I like it, I tend to like white backgrounds but wanted to try something new (for me). As far as organization, I used a solid path with numbering to indicate order. The eye is led down the page and presented with content at each section.
For this week, I began to really dig into the “meat” of my project by working on a draft for my tutorials. I have re-used elements from past assignments to create consistency throughout the unit. Elements such as the header, font choice, and colors are all part of the overall style. While the content of this image will change and become more involved, the basic “style guide” is developed.
Color is being used to create consistency with the headings and text. I have found with tutorials that students respond better when the instructions are simple and the verbs are highlighted. This is what I have done with the highlighted words. Every time there is an expected action, the word is bolded and blued. I have also purposely distributed each section paying close attention to the white-space of the page, making sure everything has a place and nothing is crowded.
Reflecting on this image has me wondering if the left/right format of the tutorial is how I really want to proceed. I really like this format as it allows for several steps to be described in a single image. What I wonder is if a more vertical format will allow for screenshots with more information showing. Or perhaps I need to consider a mix of both formats. I will know better as I build it out.
This week we were tasked with using a design cycle to solve our graphic problems. Interesting enough I seem to be in a ‘design cycle’ cycle as I’ve just finished covering it in two of my classes that I teach and we’ve just done cycles in my other EDTECH class. Generally speaking a design cycle first figures out what a problem is, then brainstorms possible solutions, followed by putting those solutions into action and finally evaluating what worked or didn’t. Chapter 4 in our textbook uses a 3 step cycle called ACE; Analyze, Create, and Evaluate. The introduction image I chose to work on this week had many design challenges and I worked through this cycle a few times, completely switching directions at one point.
The image I created is an introduction image to the unit. My class (HS GenTech students) has an established procedure where we analyze any materials we have in the upcoming unit and we come up with the unit’s vocabulary words as a class. For this assignment, I created a graphic organizer for students to use during the process. They will use this handout during other vocab assignments (assuming they do not lose it) as their word bank.
For the design, I am using the same header as last week to keep consistency in my design and create flow throughout the unit. Since this is a worksheet that will get collected, graded, and returned, there is a section for student info in the upper right corner. I am also using a similar layout format with the rounded rectangles to chunk info. Based on class feedback, this time I’ve included numbers to indicate order. The trickiest part for me was laying out the two input sections. The final vocab table needed 10 cells for words which make it an awkward size and the brainstorm table needed a bit of instruction making that arrangement awkward. I’m mostly happy with how the pieces settled into place. While I would prefer the sections to be flipped do to order of use but I feel like the students will be ok with it since they are already familiar with the procedure. The awkward spacing of these sections provided a funny gap that I filled with a superfluous clipart image. While I don’t feel that the image is needed, the worksheet does seem to lack something without it.
This week we are tasked with creating instructional materials focusing on the use of shapes. Here is my project:
The students using this “at a glance” guide are high school technology students. They have already learned about Google Drive, Docs, and Sheets and are familiar with the Google layout. This handout is meant to provide a quick snapshot of the concept of Themes and Masters. Many students have used Google Slides often but do not know about Master pages and the ones who do know, don’t seem to take advantage of the tool. I feel this handout (poster?) provides a quick reminder.
The use of shapes in this handout is throughout the document. The header uses simple shapes to define a heading and title area. These shapes provide for a clean look (Lohr, 2008, p. 250) and tie together with the overall theme of the unit. The arrows bring attention to the main point of each image. I chose the overall display shape based on how many points I wanted to make. (Lohr, 2008, p. 255) In this case, I kept it simple with 4 squares as I didn’t want it to get too busy and move away from an “at a glance” tool.
The person I had test my design gave feedback on the graphic aspect vs the instructional one. Based on this person’s feedback, I can see areas where the spacing could be tightened up, for example between the header and first squares as well as the very bottom of the page. It was also suggested to add a footer similar to the header, I agree that would be a nice touch.
Lohr, L. (2008). Creating graphics for learning and performance: Lessons in visual literacy(2nd ed.). Upper Saddle River, N.J: Pearson/Merrill/Prentice Hall.
This WebQuest follows the model developed by Bernie Dodge and Tom March. It is used to explore the design process in developing logos. The quest guides students through gathering information, brainstorming, refining, and delivery.
For the HTML portion of the program, I opted to use a home-grown template. I had issues with some of the other pages I made from pre-made templates. When working with a template, there is a lot of time spent getting familiar with the code and how it works. Sometimes it takes you a while to figure out the template isn’t going to work for what you wanted it for. So to spare myself all that time and energy, I wrote the code myself. I am happy with the results. The site is flexible, has responsive elements, and looks good.
Take a look…
This EDTECH 502 assignment expanded on the HTML/CSS skills learned so far in the course. The main requirement is to be a multi-paged website that uses consistent navigation and styles. I chose to use Bootstrap again, like I did last week with the Wood Types M-Learning Activity. This week though I did run into coding issues with the templates. When working with templates, this is a common problem to come across. I opted early on to make a fresh start which corrected the problem but I still wasted a lot of time troubleshooting. I overcame the coding issues and was able to focus o the virtual field trip around the wood shop. Going in the order the students are introduced to the machinery, the virtual field trip visits most machines in the shop. There is plenty of room for growth down the road when I want to add machines.
Check it out…