The Key Principles of Visual Storytelling
/
What is visual storytelling? You might think of comics or graphic novels or even animated film storyboards. More broadly, visual storytelling is used in webpage design, infographics, and book layouts. The intentional combination of colours, fonts, and images directs the eye in a sequential order across the page. If you’re an author-illustrator, you likely already know the importance of visual storytelling. Even if you aren’t, learning how it works can improve your ability to review your illustrator or designer’s files for your children’s book, cookbook, coffee table book, or textbook.
Here we’ll discuss some key principles of visual storytelling to ensure your reader absorbs your content efficiently — and remains compelled to keep turning your book’s pages.
Reading Order
For standard English language books, the natural reading order is from left to right, top to bottom. You’ll notice this most with comic books, book covers, or even websites. Your eyes jump immediately to the top, catching on the first “important” bit of information, then your eyes trail down to the next line (or paragraph) and scan across from left to right again. This is how you process text (dialogue, titles, pages), but some visual elements can interrupt or alter this reading order.
Things that are comparatively larger, brighter in colour, or more detailed beg to be looked at both first and longest. Then your eyes shift to the next-most important items and/or surrounding area. For small details or backgrounds, you’re unlikely to focus on them for long at all, merely filing them away subconsciously. This is because your brain naturally prioritizes its attention span, filtering out excessive information it deems “less important.” Visual brain teasers like stereograms or Where’s Waldo? books intentionally require you to pore over a page looking at the little details — but good visual storytelling won’t force readers to do this. Instead it optimizes the viewer’s attention span by ensuring the following elements work together.
This example uses different colours and sizes of fonts to call out specific actions and sounds. The visual elements create “panels” that direct the reading order.
This example uses two fonts to call out emphasis. The shape of the paragraphs tuck into the spot images (called a ragged edge) to break up the text and guide the eye down the page.
Colour and Mood
Colours immediately conjure up specific associations… but it’s complicated. Does green make you think of nature, wealth, or jealousy? Pair a yellow with a daisy and it evokes joy; pair it with a triangle, and suddenly it means Caution! Context matters.
Choosing an appropriate colour palette for the project should enhance the message or emotions you want your readers to take away from the book. Cool tones can convey a sense of calm while vibrant colours can invigorate. Earthy tones suit a story set in the wilderness, while pastels might best reflect a magical unicorn adventure. Colour theory can also affect how colours look together, balancing out contrasting tones, or heightening them by selecting specific shades. You might have experienced this yourself if you’ve ever tried on a certain colour shirt that made your complexion look sallow.
But then you have the setting’s lighting. Outside, lighting indicates whether the scene unfolds under the rising sun, high noon, or a full moon. Inside, it can make a room dark and scary or cast a fireplace’s warm and cozy glow. Atmospheric lighting like this affects the mood, creating mystery, revelation, or terror. Lighting can alter the way colours look quite drastically. Illustrators may need to take some artistic liberties to balance the way colours look (altering “true colours” to achieve a desired effect). If you are particular about a specific detail’s colour, you may want to discuss ways to alter the scene, lighting, or surrounding colours to best enhance that focal point.
Composition
On any given page, there should be a key focal point. This is usually created by contrast and size of elements. If everything is huge, with multiple loud fonts, bright colours, and equally placed on the page, your eyes don’t know where to start. In order to have important information to focus on, you need negative space: empty space (often white, but not always) with an absence of elements.
Within a photograph or illustration, negative space may not be blank, just look comparatively empty. In a landscape, a swath of field, sky, or even bold shadows can provide negative space so that you can focus on the tree, building, or creature.
The placement of elements is also important for composition. There are many ways to draw the eye through the scene: the rule of three, the Fibonnaci sequence, the Golden Ratio. In simplest terms, these techniques lead you on a path through the image, drawing your attention to points of interest so that you take in the full scene in an organic way.
Consider these examples: what moods do these colours evoke? What elements jump out at you first? Where does your gaze linger longest? Visual storytelling stands behind each of these factors.
This spread uses different sizes, colours, and fonts to pull the eye across and down the page, with spot elements to break up the text. The upward slant of the callout text mimics the angle of the arms of Henry on the facing page to visually link these moments together. Note the wide margins around the text to provide negative space compared with the full page illustration on the facing page.
Here, the title takes the least in large and contrasting font right at the upper centre. This cover sample balances the author and illustrator names in the bottom-right corner with the willow branches in the upper left. These elements draw the eye around in a circle, in combination with the golden wreath of leaves, bringing attention into the centre image. Within this circle, more willow branches and the curving shapes in the tree’s bark pull you further into the whippoorwill in the very centre. In effect, a spiral of lines, shapes, and contrast draws the reader in.
Here the contrasting colours (vibrant orange with darker, warm purples) balance the reader’s attention. The further contrast of negative space on the outsides of the image with the high detail of the forest scene seen through the cutout gives layers of depth that draw the eye in. Notice how the circular, almost question-mark shape of the front cutout is mirrored in the circular shape of the back cover text. Even though these wouldn’t typically be seen side by side (holding the book, the reader would flip the book over to see the back), the echo of the front cover’s design creates a cohesive design.
Depth of Field
Typically, an image has three “layers” of information: the foreground, midground, and background. Usually the background is the backdrop for the important information happening in the mid- or foreground. The further from the viewer, the hazier and less-detailed the background becomes (think of mountains fading away into the distance). This simplified sense of form enables us to focus on what’s happening closer to us.
The midground is usually the most important layer, where the action takes place. It gives us a wide enough field to see full bodies, activities, or contrast of a figure compared to their surroundings. For example, a squirrel climbing a tall tree, a big bear in a small cave, a tiny girl fighting a massive dragon. However, there’s still a bit of distance between the viewer and the subject. When the midground is the focus, items in the foreground may appear in silhouette or out of focus to keep our attention where it should be. You can see a similar effect when trying to focus your camera not on the window in front of you, but the bird beyond the glass.
When the foreground is the most important focal point, it will usually take up the majority of the scene. This creates more intimacy for conveying emotional moments, expressions, or important details we’d miss when set further back from the scene. The midground and/or background may be simplified to washes of colour or a few framing details to provide context. We don’t want to distract the viewer from connecting with this important moment. Here’s an example:
In this example, our protagonist (Squeak the Squirrel) is in the foreground carrying the action of this scene (digging). Our other main character, the grandmother, is in the midground, observing the squirrel; this gives us the contrast of outside and inside the house. In the background, the grandkids arrive, representing the reader, and take in the whole scene; they and the back walls are more simplified to give a sense of depth.
Balance all these elements and you get effective visual storytelling. While there are many factors at play, the end result shouldn’t feel cluttered or complex. The mark of a masterful illustrator or designer is an easy, fluid reading experience. After all, that’s what you want a reader to do: Keep turning the pages.
