There’s no shortage of content out there for the digital reader to peruse—our storytelling community alone is creating more than 1,000 new stories every day! If you want to cut through the noise and capture your audience’s attention, you’ll need the power of visual design on your side. Luckily, with ArcGIS StoryMaps’ design panel you have a variety of tools at your fingertips for making a story that’s sure to catch the eye.
Tour the StoryMaps design panel
For those not familiar, the design panel can be opened up from the header of the story builder. This panel is a command center of sorts, dictating all kinds of details about how content appears in your story. The design decisions you make here are broken down into a few key parts.
Think of the cover as your story’s first impression. It’s that initial view that welcomes a reader to your content and hints at what’s in store, should they keep reading. That’s a pretty important role.
We always tell people to start with a bang, something that grabs a reader by the eyeballs and immediately pulls them right in. But there are a variety of ways to kick off a story. Switch between the three available layouts in the design panel and you’ll start to see how changing from one to another can also dramatically affect a reader’s emotional response. As different as they are, each layout can be highly effective—picking the right one depends on what kind of first impression you’re after.
Full: This layout is perfect for stories where you really want your audience to feel transported to a specific location. Fill the screen by uploading some atmospheric video, or use a high-quality land- or cityscape photo to introduce the setting. Or, if your story centers around an especially artistic map, use an image of it here to preview the impressive work a reader can explore if they keep going.
Side-by-side: There are some photos and videos over which you can legibly lay text, and then there are some over which you can’t. For media that falls in this second category—think images with lots of texture or light-to-dark contrast, or a map with lots of labels—this layout lets you present your title and subtitle right alongside an unobstructed, alluring visual. It’s also better suited to display any portrait-oriented photos or videos you may be considering for your cover. If you’ve added an image to your cover, make sure you adjust the focal point in the image properties to keep the most important area of your image visible across screen sizes.
Minimal: Maybe the thing that will most interest your target audience is better conveyed through words than visuals. This can often be the case for how-to articles, thought pieces, or press-release-style updates. For all these scenarios, a descriptive headline is what matters most, and the minimal layout makes sure nothing gets in the way of your title coming across loud and clear. (You can still add a little visual flourish at the top, something abstract or textural, if you find your opening needs a little more flair.)
Or, use the minimal cover to create space for a kind of story preface, like we did in this example, inserting some introductory text immediately after the subtitle and using full-width media to separate it from the body of the story.
Story themes have the biggest impact on your story’s look and feel. A story map’s background color, accent colors, typography, express map appearance, and other visual flourishes are all determined by theme-related decisions you make here.
You want to think through theme choices carefully. Your readers will expect the visual style of a story to align with the tone of its overall narrative, so be sure you’ve considered what the colors and fonts you’ve chosen will signal to your target audience. Having some familiarity with the basics of typography and color theory, and how you can use both to shape the emotional reactions to your content, will make choosing the most appropriate theme much easier.
There are currently six themes available in ArcGIS StoryMaps (and we’ll be adding more in the future, too.)
Summit: This minimal, modern theme feels clean and approachable, making it a practical, versatile workhorse that can do justice to a wide range of story topics (like this one). For those curious, here are some theme specifics:
- Background color: #ffffff
- Title font: Avenir Next, #002625
- Body font: Noto Serif, #304e4e
- Accent colors: #087f9b, #fc3b36, #04240e
- Basemaps: Human Geography Light, Light Gray Canvas
Obsidian: Obsidian’s dark background and serif heading fonts make it feel a bit more buttoned up than easy-going Summit. It’s ideal for stories on the more serious side, or for those that are a little more edgy and dramatic. Alternatively, the near-black background is perfect for highlighting photography, as well as maps that use firefly or other seemingly glowing cartographic techniques. Here are Obsidian’s theme specs:
- Background color hex code: #0e1116
- Title font: Charter BT, #f3f3f3
- Body font: Basic Commercial, #e6f2f2
- Accent colors: #ea5b41, #4d6aff, #0ec2db
- Basemaps: Dark Gray Canvas, Human Geography Dark
Ridgeline: One of our two newest themes, Ridgeline was designed with nature in mind. Whether you’re recounting the story of your field research, sharing the history of a natural park, or researching the origins of your go-to salad, this theme’s charismatic fonts and subtle green background bring a sense of connection with the outdoors into your story. Here are Ridgeline’s specs:
- Background color hex code: #f2f6ed
- Title font: Klint, #192c36
- Body font: Real Head, #637372
- Accent colors: #31b871, #3884f4, #525868
- Basemaps: Topographic, Light Gray Canvas
Mesa: Where Ridgeline is bold and adventurous, Mesa is composed and wise. Its tan background and elegant serif fonts make it ideal for stories about history (both personal and global), culture, or a host of other digital humanities subjects. These are Mesa’s specs:
- Background color hex code: #faf2e6
- Title font: Elante, #131940
- Body font: Elante, #574237
- Accent colors: #d13e37, #5d6b8f, #ad7300
- Basemaps: Modern Antique, Human Geography Light
Tidal: Perfect for telling stories about the ocean and other vast or weighty topics, Tidal’s background gets darker as readers descend into a story, giving them feeling of diving deeper and deeper in to the topic. The theme specs, if you need them:
- Background color hex code: #113f5d at the top, moving to #082131 at the bottom
- Title font: Ocean Sans, #ffffff
- Body font: Mahsuri Sans, #bebd1
- Accent colors: #438486, #a85848, #547aa8
- Basemaps: Ocean, Streets Dark Map (also uses the Firefly basemap instead of traditional satellite imagery)
Slate: Inspired by newspapers and print media, Slate evokes a journalistic tone pairing using serif fonts with bold color tones. It’s great for stories about current events, historical explainers, or other newsy items.
- Background color hex code: #f7f7f7
- Title font: Pax, #001c1b
- Body font: Swift Neue, #585858
- Accent colors: #b03535, #2b74ca, #e0aa57
- Basemaps: Newspaper, Human Geography Dark
The one-click themes available in the builder provide excellent, reliable starting points for anyone who wants to craft a polished looking story. Of course, there will be times where you need to stray from the theme presets to better achieve your intended look and feel, or to align with specific brand guidelines. That’s where the design panel’s menu of customizable elements comes in.
Accent colors: A story’s primary accent color is applied to embellishment details like buttons, quotes, and the dot navigation in sidecar blocks. It also affects the styling of any express maps you include in your story, but we’ll cover that in greater detail momentarily.
Each theme has a primary accent color and two other recommended colors for you to choose from, but you can always specify an alternative color by providing its hex color code.
Font pairings: If you like the color palette of one theme, but the typography of another, you can always override a theme’s original fonts by choosing a different pair from the dropdown menu. Our designers worked diligently to choose font pairs that complement each other, adhere to typographic best practices, and support a wide variety of languages, so you can feel confident about whichever selection you make.
Changing the fonts can greatly alter the personality of a theme—you’ll pick up on this pretty quickly if you experiment by clicking through the different options. One thing to remember is that, once you’ve selected fonts that aren’t the theme preset pair, this custom selection will be retained when you then select a different theme. Look for the paint palette icon in the dropdown menu if you’d like to return to the original fonts for whichever theme is currently selected.
Custom logo: Last but not least, you can also add your own logo to the header of a story through the design panel. This is great for anyone making a story on behalf of a brand or organization, especially since you can add a link to your website from the logo. Making a personal story? Upload a personal logo and link it to your portfolio, or a collection of other story maps you’ve made.
How story themes affect express maps
I mentioned briefly above that your theme selection will have implications for the appearance of your express maps. If you paid close attention to the theme specs, you may have noticed some of these nuances already, but here’s a more detailed look at how themes manifest themselves in any express map you create.
Basemaps: Each theme has a recommended basemap as the reference layer for express maps in your story. You can, however, choose from two other available basemaps by navigating to the settings tab of the map designer. The World Imagery basemap is available across five themes (Tidal has the Firefly basemap instead), while the other two options have been chosen to work well with the theme’s background and accent colors.
Feature style: Any points, lines, or areas you add to an express map will inherit the story’s current accent color. However, you can also change colors at the layer level (all lines will use the same color, for example) by selecting from any of a theme’s three suggested colors. Any custom accent color you specify will become the drawing color for newly added features, and will appear as a fourth option in the list of available colors for each layer. Arrow annotations, meanwhile, will always adopt the theme’s active accent color.
Text annotations and pop-us: Both of these elements will take their typographic lead from the selected font pair, ensuring consistency in the look of text throughout your entire story.
Some parting suggestions
If you’ve made it this far, you now know just how powerful a tool the design panel can be, and how you can leverage it to make your stories more magnetic to your readers. On top of that, I’d like to leave you with two more points to keep in mind.
Strive for consistency
Like good movies, good story maps let the audience forget about whoever made the content in the first place. You want all the attention focused on the narrative or argument as it unfolds, not on the decisions that guided content creation.
Establishing a unified look and feel through all of a story’s visual components is critical to fostering this kind of immersive reading experience. Use the theme specs provided above to ensure harmony between any express maps and web maps you include in your story. And, if you’re making any original charts or infographics for the story, make sure they use colors and fonts that match or complement your chosen theme.
Be sure to avoid any graphics that look so different from the rest of your content that a reader will get pulled out of the story by such a jarring visual departure; you could lose them entirely if that happens.
Select a theme that sets the right expectation for your audience
Ok, this is basically a repetition of what I said early, but it’s too important not to repeat. Visual cues like colors and fonts do a lot of heavy lifting for online readers. These elements quickly alert someone to the kind of read they are in for.
Dark colors and serif fonts, for example, suggest a more formal or somber subject, and will emotionally prepare a reader for something more serious. They’d set the wrong emotional tone for a light-hearted story about a road trip to adopt a new puppy, for example, and this discord can make a reader feel off-balance. Off-balance readers more likely to move on to another piece of content, so let’s all agree not to make them feel that way!
When planning your story, think about the emotional and cultural connotations of colors and fonts, then pair that with your story goals to find a theme evokes the right response in someone as they go through your story map. It might take a little practice, but once you master it, the payoff is pretty powerful.