ArcGIS StoryMaps

Blurring the boundaries of your stories

Ever finish a story and sit back to marvel at all you’ve achieved, only to feel like there’s just something missing? Well, you’re not alone. It happens to me all the time. I’m here to tell you that there are things you can do to level up your story design and add that final polish to any story. I keep these techniques, and many more, in my back pocket on any project. There are even enough tips & tricks that if we’re lucky, we may get a sequel!

Today I’ll be sharing some techniques for manipulating boundaries. It’s subtle, but the premise is that not every visual element within a story, cartographic or otherwise, needs to fit perfectly against the edges of its container. In the same way that a cartographer may allow an errant peninsula to playfully break the neatline, constituting a delicious design choice, we too can boldly play with boundaries when adding visual elements to our stories.

August Chevalier's up to date map of San Francisco that features several portions of the shoreline that protrude across the neatline bounding the map.
Neatlines are meant to be broken. August Chevalier's map of San Francisco features several places where the shoreline is permitted to break through the neatline surrounding the map.

Conforming to structured boundaries, brazenly ignoring, or cleverly hiding them are all conscious design decisions that determine the look and feel of your story. This design language can set the story’s tone before the first sentence is read and build an immersive reading experience. So, let’s look at some of my favourite ways the seams can be manipulated in stories and how they can influence the reading experience.

As we dive into this first series of techniques, know that there are some blurry boundaries between them. You could use many different approaches to perform each, and many work in conjunction with each other. Therefore, I don’t intend to be prescriptive with any specific method. Instead, I seek to inspire and toss out wild ideas beyond everyday use that may be useful for spicing up your next story.

Erasing

First up is visually erasing the seams with your story. As you can guess, this is about hiding or disguising the boundaries within your story. This technique aims to seamlessly integrate maps and graphics so that they visually support the narrative in an understated fashion. Unintended errant borders and high-contrast boundaries can visually detract from the appearance of the story and disrupt a smooth reading experience.

In my experience, playing with layout, shapes, and transparency or colour can be used to craft some visual trickery that makes those pesky seams magically disappear.

For instance, in the Digging up Dinosaurs story, I wanted to create the illusion that as the reader scrolled beyond the cover, they were being transported below the surface and viewing a cross-section of a fossil excavation.

Overview image of the Digging up Dinosaurs story that features a pair of archeologists excavating the fossilized skeleton of a Tyrannosaurus rex. The majority of the skeleton seemingly remains below the surface as the reader scrolls through the story.
Some novel visual effects can be achieved by hiding the seams between elements of your story. The fossilized skeleton creates an illusion that the reader is scrolling into a cross-section of a dinosaur dig site.

“How’d you do that?!” you ask. Well, that’s why we’re here, all learning together. In this case, it was a matter of hiding the boundary between the cover image and the rest of the story below. To achieve this effect, I ensured the bottom of my cover illustration had an adequately wide strip of colour that matched the background colour I selected for my story. This created the perception that there was no perceivable boundary between where my illustration ended, and the body of the story began.

To add to the illusion, I floated the rest of the fossilized skeleton to the story’s right. I created this illustration as a PNG with generous transparent background, but colour-matching the story background would achieve the same result. Admittedly, in this case, the alignment took a little experimentation, but sometimes that design experimentation can make all the difference.

Schematic representation Digging up Dinosaurs story. This diagram depicts the arrangement of the cover image and the floating image used to create the fossil skeleton illusion.
To prove there's no magic behind the scenes, this diagram illustrates how the elements were arranged to create the illusion of a dinosaur fossil underground.

Applying the design language throughout your story is important for consistency. To continue the stratigraphic illusion and reinforce the buried fossil theme in this story, a Stegosaurus fossil appeared later in another section.

While floating prehistoric fossils in your story might be fun, image transparency can be applied to more practical uses for improving the visual design of your story. For instance, when including images and graphics, any time the pixels surrounding your subject distract or contrast too much with the background of your story, it might be worth seeing if you can modify the image. Removing or replacing the pixels surrounding your subject using the image cropper or your favourite image software can direct readers to the focal point of your image and create a more seamless viewing experience.

Image containing multiple screenshots of stories that feature prominent examples of the "erasing boundaries" technique.
Here are some other great examples of the "erasing technique" (clockwise from top-left: An Introduction to Sea Ice, Aerial odysseys: bird migration in the Americas, Living in the Age of Humans, America's mental health crisis, mapped).

Erasing examples

Blurring

Completely hiding the boundaries between elements can be a valuable tool for creating a seamless reading experience. However, there are times when we can’t, or we don’t want to, make them completely disappear. In these cases, if our goal is to flow smoothly from one element to another in our story, we need to minimize these visual speed bumps, where our readers might be jolted out of the intended experience.

One example where we can blur the transition between elements in our story is within an embedded web map. Unfortunately, we don’t have the same pixel-level control here as we do with images, so if we want to minimize this speed bump, we’ll need to get creative cartographically.

Vignettes are the answer! Vignettes offer a powerful solution for hiding the boundary between the body of our story and the map. When the mask matches our story background, the reader can scroll into a web map and barely notice the transition. In addition, vignettes do double duty by creating a focal point in our map, drawing the reader’s eye toward the data or feature we want to highlight.

My talented colleague Cooper Thomas demonstrated an excellent example of vignettes in this story. The application of a vignette in this map obscures irrelevant geography and draws the reader to the focal point of the map. A bonus is that since the vignette matches the background colour of the story, the visual speedbump is greatly reduced between the preceding text and the map.

Screenshot of a web map feature a vignette effect that masks the surrounding geography and focuses the readers eye.
Vignettes are a handy cartographic technique for drawing the viewers eye. Hiding irrelevant portions of maps and graphics allows your visuals to communicate clearly. As an added bonus they can also blur the boundaries between sections of your story.

If you’re itching to get to work applying this technique to your web maps my cartographic compatriot John Nelson has assembled a helpful tutorial covering this technique.

So how might we blur the boundaries of other content types? Well, vignettes aren’t just for web maps! We could apply the same feathered edge to images to ease the transition from text to image or reverse. This is especially relevant if you create static maps using ArcGIS Maps for Adobe Creative Cloud. In combination with a healthy dose of PNG transparency, a subtle feathered edge can be used to gradually transition a reader from a full-width map back to the story and avoid the sensation that the map abruptly stops.

Image containing multiple screenshots of stories that feature prominent examples of the "blurring boundaries" technique.
Here are some other great examples of the "blurring technique" (clockwise from top-left: Sounds of the Wild West, Sacred Places, Sacred Ways, Sacred Places, Sacred Ways, Julie's Improbable Flight).

Blurring examples

Breaking

The final technique I’d like to cover is breaking the boundaries. This technique is like our map neatline example and involves having our maps and graphics boldly extend beyond or reinforce established visual borders. This technique can generate visual interest and can also greatly influence the reading experience. Distinct boundaries can be used as a narrative tool in a story, creating a pause for emphasis or helping readers parse content.

One method to defy the boundaries within your story is to emphasize them with dynamic edges. A little graphic editing, in the form of cropping, can give you creative control over where the boundary falls, adding a unique flavour to the transitions in your story.

Screenshot of the Off-roading through risk and reward story. The cover image of this story features a car ascending a logging road and the bottom edge of the photo has been creatively cropped to appear as if it was torn.
Creative cropping and dynamic edges between elements of your story can be used to reinforce and emphasize boundaries within your story. This can be used as a narrative tool to influence how a reader experiences the story or to create visual interest.

In the example above, my incredible colleague Gustavo Cardenas creatively cropped the bottom portion of his photo using a torn edge, adding dynamism and texture to the cover of his story. This kind of cropping can also be used to emphasize transitions between sections within your story. Applying subtle geometric decorators can draw attention to the transition to the next section of your story and encourage the reader onwards.

A screenshot mockup of a StoryMaps Immersive Sidecar block that features an image that has a geometric notch cropped out of the top edge.
Adding cropping images using geometric decorators can "break" the boundary between sections of your story and even visually encourage your reader onwards.

As opposed to manufacturing a new boundary in your graphics, this creative cropping can be applied to photos with a natural break, such as the horizon. For instance, using a little image editing, the sky could be made transparent to create a bold dynamic boundary between the graphic and other elements in your story.

A screenshot mockup of a StoryMaps Immersive Sidecar block that features an image of a farm tractor. The horizon of the image has been erased using image editing software.
Natural edges within your imagery can be used to create bold and dynamic transitions between elements of your story.

Additionally, colour can be used as a tool to emphasize the boundaries throughout your story. Drawing upon the accent colours of your story in bold graphics, imagery, or background can visually partition sections of your story.  These sections can facilitate a deep dive into the analysis of a dataset or elaborate on a related narrative arc within your story. Regardless of the content within, the clear division of content can punctuate the reading experience.

Image containing multiple screenshots of stories that feature prominent examples of the "breaking boundaries" technique.
Here are some other great examples of the "breaking technique" (clockwise from top-left: Sacred Places, Sacred Ways, A homecoming for Gonarezhou's Black Rhinos, Great Wetlands of the World, Sounds of the Wild West).

Examples

Summary

To wrap things up, there are many ways that you, as an author, can craft your story for maximum visual effect. While I’ve only covered a few methods here, there are likely many more out there, so experiment and perhaps even combine techniques together for variety.

Whether you want readers to effortlessly travel through each section of your story or want to punctuate the narrative with dramatic emphasis, know that the design language of your story can help influence this reading experience

Hopefully, these novel tips & tricks have sparked some new creative ideas that you can apply to your next story. I’d look forward to seeing what you create!

About the author

I have all sorts of fun creating engaging maps and graphics and then sharing the process. I work from Kitchener, Canada on Esri’s StoryMaps team where those visuals sometimes make their way into immersive place-based stories. When not digging into vectors and pixels, I can generally be found riding around town on two wheels with toddlers in tow.

Connect:
0 Comments
Inline Feedbacks
View all comments

Next Article

Drawing a Blank? Understanding Drawing Alerts in ArcGIS Pro

Read this article