We all love a story. We like stories so much that we’ll even make up a narrative where none exist. We're hard-wired for it: narratives shape information into patterns, making the information easier to understand and remember. Narratives engage our emotions as well as our thoughts, exiting our dual nature as thinking and feeling creatures. And narratives engage more of our brains, activating not just those brain cells that decode words into meaning but also every part of our brains that would have been involved had we experienced the events of the story ourselves. Our brains interpret that kind of activity as an experience, and we’re much more engaged with experiences than with data and language.
“People will forget what you said, people will forget what you did, but people will never forget how you made them feel.” —Maya Angelou
We also love pictures. Our brains process visual information faster and with more recall than when the information is presented in text. It takes milliseconds for us to grasp visual information compared to minutes for text. Pictures don’t require translation and they can communicate concepts and ideas that might otherwise defy description. Talking about a child exhausted after a day of sightseeing is one thing; seeing a photograph of an exhausted child is something else altogether.
“A good snapshot keeps a moment from running away.” —Eudora Welty
Combining stories with pictures is an especially powerful combination. According to psychologists, we retain very little of what we hear or read, but we retain about 80 percent of what we see and experience. This combination of stories and pictures is increasingly the language we use for communication, both in print and online. Journalism, advertising, and education all use a combination of words and pictures to communicate. Storytelling, especially visually storytelling, is now also the the dominant design trend for company websites and online marketing.
Long Form Online Narratives
Storytelling is universal and ageless, but the way we tell our stories changes with the tools we have at hand. Thousands of years ago, we would have told stories by painting on cave walls with pigments. Invention of the printing press led to reproducible stories in novels and periodicals. Then it was motion pictures and television. Now we use the internet and everything it supports—text, audio, video, and still images—to tell our stories and engage others.
For a while, we may have let online storytelling collapse into bursts of 140 characters or less, but in 2012, John Branch of the New York Times re-ignited long form storytelling with his online publication of “Snow Fall: The Avalanche at Tunnel Creek.” Branch and a team from the New York Times combined photographs, video, audio, and text on a web platform to tell the true story of sixteen skiers and snowboarders caught in an avalanche. “Snow Fall” was a storytelling sensation, earning Branch the 2013 Pulitzer Prize for feature writing. While not every story can be told in such an extraordinary fashion, “Snow Fall” has been a catalyst for a new standard of visual, online storytelling.
If you’re a photographer or videographer, you have the opportunity to use online resources to construct similar stories, whether you intend to use the stories for personal, professional, or commercial use. Magazine-type online community sites provide space for users to construct their long form narratives, using whatever combination of words and visuals suit the story and its best. Many of the sites are free, at least for trial or hobby use. For a fee, most sites will provide the infrastructure for selling your stories, if that’s what you wish to do.
In this article, we will look at Atavist, one of the early and still highly rated platforms available for long form narratives. Atavist was founded in 2011 as a long form publisher with its own online magazine. Soon after, Atavist added a self-publishing platform, Creativist, which was overhauled and relaunched earlier this year as an integrated part of Atavist. It’s this new self-publishing platform we’re going to look at.
Shaping Your Story
Begin your storytelling project by getting a feeling for what is possible with Atavist. Explore “Built With Atavist” to be inspired by examples of long form narratives. Your story could be fictional or it could be an account of something you’ve experienced, witnessed, or photographed. If you’d like to try constructing a story but don’t know where to start, consider telling a story about a vacation, a family or public event, an outing, a person, or a community interest.
You don’t need a polished story to start. Because you control when your story becomes available for public viewing, you can use Atavist as your online word processor and layout designer, experimenting with features, re-writing content, and switching out visual elements. You will, however, find it easier to construct your story if you have an outline or storyboard for your narrative. Outline your plot—the sequence of what happens—and get a clear sense of the setting—where the story takes place. Identify the visual elements you’d like to use to tell the story and pull your prepared image files into one folder for ease of use.
My Story
I have been collecting found photographs, letters, and documents for some time, and knew that I wanted to use them to construct my story. Those captured in the photographs became my characters, and the letters provided events and settings. I used a storyboard to pull it all together into a narrative with a beginning and middle. I haven’t decided how to finish the story yet, so left that open for inspiration as I move along.
My storyboard is below, and I'll show you screenshots of my story in progress as we move along. You can peek ahead here to see where I'm at with building my story.
Remember that you can create and experiment on Atavist, so don’t get stuck writing a prize-winning story before you even start!
Create Your Project
If you haven’t already created an account with Atavist, do that now.
Once you’ve created your account, you’ll have a project page where you can organize all of the projects you will create on Atavist. You can return to this project page at any time by clicking the Atavist icon in the top left corner of the window or by selecting My Projects from the menu on the Atavist home page.
On your project page, click New Project to begin your new story.
On the story page, give your project a title, then select Subtitle, author, and description to expand the Project Flap where you can add more details about your project. Be sure to Save your changes. (I suggest leaving the Title Design, Navigation, and Theme in their default settings for now.)
Quick Start from Word
Alternatively, if you have a project already started in a Microsoft Word file, you can create a new Atavist project by simply dragging the .docx file onto your project page. Images will be converted to design blocks. Page breaks in the .docx file will create new sections in your Atavist project. Although some basic text formatting will be preserved, you are best to do all of your styling and layout once you have the project in Atavist.
Design With Blocks
Users build their stories on Atavist with design blocks and sections. Blocks are individual elements of text, an image, video, slideshow, or something else. Blocks are grouped into sections, which are the equivalent to chapters or articles.
On your story page, click the Add Blocks icon (the white + in the blue button) to open the Blocks Picker, the selection of blocks available for designing your story.
There are several options in the Blocks Picker, including the expected:
Image, Video, Map, Slideshow, and Audio
A few options offer design elements typically used in text layout:
Pull Quote will highlight a section of text you’ve copied from your story by formatting the copied text in a larger font that is also marked with a design element (a solid line, for example) to set it apart from the main text.
Sidebar will add a piece of supplementary information at the edge of the page.
Text Overlay allows you to place text on top of an image.
Chart allows you to create a chart using data saved in a Google spreadsheet. Formatting and styling the chart is all done in Atavist.
There are several design blocks to add social media sources. At the time of this tutorial, these include Instagram, Flickr Gallery, SlideShare, and Twitter. There are also design blocks that allow you to customize your online story with animated elements, including Giphy, Parallax, Image Compare, and SoundCloud.
If you’re familiar with coding, you can add also blocks for JavaScript and embedded code, such as the code Facebook provides to add a Like button to a webpage.
Finally, if you’ve got a portfolio of photos or videos elsewhere on the web, take the opportunity to add a Button block that you will customize with a URL that will redirect viewers to your portfolio or website.
In all cases, clicking a block in the Blocks Picker or clicking and dragging the block will add that block to your story page. I recommend clicking and dragging for better control over placement of the design block. Once the block is on your story page, add elements to the block or customize its look or use by rolling over the block to reveal the edit options at the top of the block. The options include a delete button should you decide to remove the block.
A help page on Atavist provides simple but comprehensive information about using all of the various design blocks.
Working With Text
You don’t need to add text blocks because your story page is, itself, a text block. All other design blocks rest inside the text. To reveal the cursor for adding text, simply click in the text area, outside of a design block. To format your text, select the text and then choose from the formatting options that will appear in the options bar. Text formatting options are limited, but the nature of Atavist is to keep designs simple.
Annotations
One little surprise option you’ll find in the text formatting bar is an option for adding a pop-up annotation. Click the + button at the end of the text formatting bar. That will open a list of design blocks you can add at that point. At the bottom of the list is “pop-up annotation.” Use that to add a pop-up note, for example, about an information source. When users click the highlighted text in your story, the annotation you created will pop-up.
Design Block Placement
You have a few options for how you lay out the blocks on your story page, but in all cases you cannot simply place a block randomly in blank space on the story page. The design block must be placed in relation to text on the page.
If you want to place your visual elements before you write your text, you will need to use placeholder text to provide text anchors for your design blocks. Placeholder text is often referred to as “lorem ipsum.” Lorem ipsum is often, but not necessarily, Latin. More importantly, it is text that is not intended to have meaning. It’s used simply to provide paragraphs of text that can be formatted to show how typeface or design layout will appear. There are a number of free lorem ipsum text generators on the web. My favourites are:
Lorem Ipusum—This is the classic placeholder text generator. It’s been around for a long time. Your options are limited to specifying how much text you want (number of paragraphs, words, or lines) and in which language. It’s simple, basic, and reliable.
Loripsum.net—This generator allows you to include lists, block quotes (pull quotes), headers, and other features. Having those elements in placeholder text can make your job easier if you know that your story will eventually have some of these elements in the text.
Fillerati—If you’d like your placeholder text to inspire you while you work, visit Fillerati to get text generated from novels that are now in the public domain. Be careful if using text from this generator because you may inadvertently generate text with HTML markers, which you don’t need on Atavist.
Journo Ipsum—If your story is journalistic, be inspired by using placeholder text filled with newsroom terminology.
Once you have text on the page, you can move the blocks:
Up and down the page. Roll over the block with your mouse to reveal the placement icon at the top right corner of the block. Select and hold that icon to move the block and place it between text you’ve already written.
To the left and right. Roll over the block to reveal the the options bar for the design block. The options bar will contain buttons for the left to right placement choices available for that block. For example, a still image can be placed to occupy the full width of the page or to occupy the full width of the text, or it can be placed on the left or right with text wrapping around the image.
Your placement options for layout are limited. You can place a design block between paragraphs, or if wrapping text, you can place the design block only at the beginning, or in some cases, at the end of a paragraph. The size of each design block is also predetermined with the sizes varying only to accommodate placement. For example, a full width image will be the full width of the page and an image with wrapped text will be 60% of the page width.
Customize and Test Your Design
At some point in creating your story, you’ll want to explore options for the general look and feel of your project. To explore your options, click your story button at the top left of the page to open the Project Flap.
On the right of the Project Flap are options for changing the Title Design, Navigation, and Theme. There are multiple options—too many to describe here—so my suggestion is that you navigate your way through the selections and try out the options that appeal to you. Depending upon your choices, you may have further options for design, such as whether to use drop caps or change the space between paragraphs.
Look for title designs, layouts, fonts, colours, and navigation choices that enhance the theme of your story. My story, for example, is historical so I didn’t want a modern parallax image or animated GIF as part of the title. I wanted something classic, so chose the Simple title design. I elected to use the Fisher project theme in order to get an aged paper look for the background and a traditional serif font.
Consider testing your project as you change design options. Long form narrative projects are new to many people, so you may find that some of your design choices are not user-friendly. For example, I originally designed my project so that each letter would appear on its own page. I wanted viewers to pause and get a feeling that some time had passed between letters. However, when I tested the project, a number of my users were confused about how to navigate from one letter to another, so they lost the thread of the story. Until I sort out something better, I changed my navigation to a continuous document in order to keep my viewers engaged.
Sections
If you use Sections to break your story into smaller chunks, you will have the opportunity to design the appearance of each section and arrange the order sections will appear. Manage sections by clicking the sections icon at the bottom right of the window. Add a section with Add Section. Rearrange or delete sections with Edit Sections.
To customize the appearance of a section, click the name of the section at the top of the design page. The title designs that are available to the whole project are also available for sections.
Project Navigation
Atavist is a simple, beautiful interface for story design but navigation can be tricky. For example, to access Help, you must first click on your story button at the top left of the page, then select Subtitle, author, and description to fully open the Project Flap. Then select Help at the bottom right of that dialogue box. I bookmarked the help page so I could access that information directly in a separate tab or window.
In some cases, you exit a dialogue box by selecting Saved, Close, or Cancel. In other cases—for example, when exploring the Blocks Picker—you exit the selections by either adding a block or simply clicking back in the story design page. And yet with other options, you’ll find yourself in a new browser tab and able to return to your previous position by going back to that still open tab.
If you create Sections (or chapters) within your story, you navigate between Sections by clicking the icon at the bottom right of the story design page. Or, you can move forward or back one section at a time by selecting the hyperlink at the top or bottom of the story page.
To make changes to your project, or if you’re lost and simply cannot get back to where you need to be, click the Atavist logo at the top left of your browser window. That takes you back to your projects page where you can re-enter your project by selecting Edit, or you can customize your project options by clicking the down arrow to open a drop-down menu.
To customize how your story will appear to the public, navigate to your projects page (click the Atavist logo at the top left of your browser window) and then select your name at the top right of the window. That will open a Profile page where you can add a short bio and a logo or avatar, customize your Collection page, and choose a subdomain on Atavist for your project.
Share Your Work
I’m assuming you will want to share your finished story. At any point during your project and certainly before you share your work, take a look at how your story will appear to others by selecting Preview from the options at the top right of your story page. The preview will open in a new browser tab so you can switch back and forth to tweak your design and check the result. You will, however, have to refresh the preview page each time to see the results of your design changes.
When you’re happy with how your story looks, select Publish from the top right of your story page. Note that you can publish your story at any time while you are creating your project, then go back and make further changes or additions. Your changes will not be visible though until you publish again. This offers you an opportunity to push out a project in stages and control when you release the newest additions or changes.
When you select Publish, you will be provided with options to customize the URL for your project, add a password for access, and share the project on social media. Your project will be published on the web and free to others unless you elect to upgrade to a paid account. Upgrading to a paid account also gives you the option of publishing your story to an app or e-book. Finally, if you have a website of your own, don’t forget to add a link from your website to your Atavist project.
Go Forth and Create!
I am excited by the online evolution I’m seeing with long form narratives. There’s no question that this design approach is becoming more popular in all sectors. If you’re a commercial photographer, it’s in your business interests to explore the possibilities offered by long form narratives. If you're a journalist, this is a bold way to engage directly with your audiences. I believe the trend also suits our growing personal interests in sharing stories and experiences that are greater than will fit in a short media post. For all photographers, the interest in long form narratives provides us with an opportunity to experiment with sequencing photographs to tell stories, and to try out an additional creative outlet—writing—to build narratives.
I’d love to see what you’ve been inspired to create. Consider adding a link to your project in the comments below.