Title: Designing for Student Engagement and Comprehension by Kristina Lamour Sansone


Book Builder offers authors a flexible environment to create books for a variety of purposes.

Authors are accustomed to considering elements such as story line and illustrations in order to convey a message, but few are trained to consider each of the elements on the page as additional supports for the reader's comprehension of that message. The techniques used by graphic designers can help educators and other authors strategically manipulate each of the visual elements on the page to support learning and reading comprehension goals.

This book teaches readers how doing this can engage and direct the attention of readers, minimize confusion, distraction, and fatigue, and provide information in a clear and purposeful manner.

Meet the Coaches


Three book builder coaches

The three coaches help explain how graphic design principles can enhance learning.

Designer will help you understand the strategies being presented on each page based on his graphic design expertise.

Techie will provide you with necessary technology tips to accomplish the suggestions on each page.

Reff will provide you with references and resources to learn more about the strategies that are suggested on each page.


Arranging text to reduce distractions:


two pages of books with text under

Single words or short phrases left to sit alone at the end of a paragraph are called widows. If they are left to sit alone at the beginning of a paragraph, they are called orphans. Both draw unnecessary visual attention to themselves, which can distract the reader.

As you can see in the "before" picture, the word Emily sits on a line all by itself, potentially distracting the reader; whereas in the "after" picture, Emily is no longer left dangling to distract the reader.


Limiting line length to prevent reader exhaustion:


two storybook pages one with long lines of text and the other with short lines of text

Note how you feel when you look at the lines of text in the "before" view compared with the way you feel when you look at the lines of text in the "after" view. In the “before” view the lines of text are very long and hard to follow. In the “after" view, the compact line length is much easier to read.

Limiting the line length by breaking up lines of text can prevent reader exhaustion and loss of engagement. Sixty characters per line is optimal for print. Web design experts say fifty characters per line is optimal for the web. If text is enlarged, a twenty character line is best.


Choosing colors that help improve visibility:


two storybook pages one with light color text and the other with darker color text

You will note in the "before" view that the text is too light to be comfortably visible; whereas in the "after" view, the darker text is much easier to read.

When elements on the page are too light or dark, they can hinder the legibility of content. This can become a distraction or a barrier as some students will spend excess energy straining to SEE the text.

Consider the lightness and darkness of the elements on the page through the eyes of a reader and adjust the colors for maximum visibility.


Creating connections between picture and type style:


Note the way that the visual weight of the type style in the "before" view does not match well with the visual weight of the illustration: the type style is light  and thin while the illustration is lush and “heavy.”   The heavier, darker type style in the “after” design balances better with the image.

Matching the
type style with the image helps to visually fuse the picture and word relationship,  enhancing comprehension and reducing distraction .


Highlighting critical features in images:

three images of stream and trees

Look at the first image and the text beside it. The text focuses on the reflection of the leaves, but the picture contains extra information. For example the trees are not essential to the meaning being conveyed in the text. The second image highilghts the important part of the picture and the third image shows the image after it has been cropped. When you compare the first and third images, it becomes obvious that the trees were distractors.

Keep in mind the specific message you want to convey when you crop a picture. Ask yourself  "Which are the critical features I want to highlight in order to get my message across?" Seeing these elements as essential supports for your message will help you to see everything else as a distractor.




A Type Primer by John Kane

Interaction of Color by Josef Albers

Clear and to the Point: 8 Psychological Principles for Compelling PowerPoint Presentations by Stephen Kosslyn



Typographica: A Journal of Typography (online journal)