White space

This week's reading and project encouraged me to think about white space, and how this design tool can be used to help learners. Since my target audience will be secondary students in first-year Spanish (often lacking in background knowledge and patience!), I know that it's crucial to help them sort and process new information. After reading this week's assignment, I started planning and organizing the "grammar" section of my website.

Most of the lessons on my tutorial website will present prepositions in a very visual way, with pictures and embedded flashcards. As the learner progresses through the website, the lessons will incorporate prepositions in sentences, providing context and repetitive practice. At some point, though, the learners will need clarification on the grammar patterns they will (hopefully) start to observe. That is where this graphic will come in.

My "graphic" is really mostly text, organized in a way that I hope will direct and maintain learners' attention. Because "text passages that use plenty of white space... [help learners] feel less overwhelmed" (Lohr, 2008, p. 275), I tried to break the information into logical, bite-sized chunks. "Space can direct the eye to important information by chunking and separating instructional elements." (Lohr, 2008, p. 272) The space separating information and examples, as well as the clearly-defined boxes for each topic (with headings and subheadings), all contribute to the readability of this text. I also used type, shape, and color to support the design of this graphic.

My husband, also a secondary Spanish teacher, was kind enough to provide feedback on this graphic. He suggested adding a few clarifying words in the "de" example and the "del" explanation. Upon interrogation, he also admitted that the turquoise "caption" font would probably benefit from a slightly larger font. I made those changes and posted the "before" and "after" below.

My one concern about using this graphic on my tutorial website, on which I would greatly appreciate others' thoughts, is... What about making this information accessible to all learners? There's a lot of information in this "graphic". How to I make that available to people using screen-readers, for example? Thank you in advance for your feedback.


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

My project after user test (with suggested changes implemented).

My project before user test and suggested changes.