In filmmaking, storyboarding is often used to plan out a film. You hand draw pictures for various key moments in the film as a way to get an early feel for how the final film will feel. This helps with making corrections earlier, reducing overall development costs. 

While web stories are typically much simpler than a film, the concept can still be useful. Mock something up quickly, show it to other people, refine it, then get your graphic designers to spend the time to produce higher quality content when you are confident it is stable.

In this blog I describe how you can use Adobe Illustrator (or Adobe Photoshop) to create a web story storyboard. I focus on vertical web stories, although a web story can be responsive and designed to support a range of devices from mobile to desktop.

Goals

In defining the workflow below, my goals were to:

• Use tools that many people are familiar with (such as Adobe Illustrator / Photoshop)
• Make it quick to create a mock that gives an indicative feel of the complete story
• Make it quick to iterate making corrections and refining content
• Provide a useful stepping stone towards the final story creation

Workflow Overview

The following are the workflow steps.

• Write down a bullet point outline of the web story (what is the message I want to get across on each page of the story?)
• Add details to the story outline such as the text for each page, the ordering of pages, and describe (in words) what each page might look like
• Create a new Illustrator document for the story by copying a template document (see below for a download of templates I use)
• Create a rough sketch per page using Adobe Illustrator (or Photoshop), including the background color and text (these visual aspects are typically implemented later using separate web story layers) – I do this with my iPad and Apple pencil
• Export PNG files, one per page, from the Illustrator document
• Create a web story from the page images (I provide default web story files as a download below)
• Iterate, refining concepts, sketches, and text on each page until it flows well
• Create the final high quality video clips, photos, and other page graphical content for the final web story
• Move to a web story authoring tool to compose the final story incorporating the various media files, text layers, animations, and so on

Let’s look at these steps in more detail.

Creating the Outline

For the outline steps I open a new text document and write out a bullet point list. I then go back and add more detail such as the text to go on each page. I do this before working on the visuals to make sure the flow of concepts is clear in my mind.

Is this overkill for a web story? It depends on your story! If you only have 4 pages, then spending too much time on an outline might be overkill. I am personally exploring turning comic episodes into web stories, so there is a true (and potentially complex) story being told with up to 20 pages. The more pages in a web story, the more important creating an outline is.

Creating the Template Illustrator Document

I make a copy of a template document for each new story I create. I have made my template available as a download, but here is how I create it in case you want to make your own or use different dimensions for pages.

To create a new document, I select “New Document” from the Adobe Illustrator desktop menu, then click the “More Settings” button to get greater control over the dimensions and artboards. An Illustrator document can contain up to 99 artboards, where each artboard represents a page in the final story. That is, I put all of the pages of a web story in a single Illustrator document. I find this more convenient than creating a separate document per page and opening and closing documents to move through the story.

A common aspect ratio for images and videos used in web stories is 9:16, frequently 720 pixels wide by 1280 pixels high. This is a common preset available in many tools. One of the recent improvements to web stories is support for presets. For background images, these work best if the image has a 7.1% “bleed” (additional image artwork around the edge that might not be displayed) around a central “safe zone” (central image artwork that is always displayed). This allows the page to be displayed on a wide range of devices without letterboxing. So for a vertical image of 720 by 1280, adding 7.1% gives an image of 822 by 1462 pixels. I use this for each of the page artboards.

I have found with 99 artboards laid out “Grid by Row” I can put 13 on a row with a spacing of 400px. (Illustrator has maximum dimensions for a document, so you cannot put a large number of artboards left to right on a single line.) You can of course use fewer artboards if you wish. I suggest having at least 10 more than the number of planned pages in the story.

This creates a new document with a default set of artboards (more than I should ever need).

Note however, if your tools such as video creation tools support it, a better size for web stories based on examining a range of devices on the market has been found to be 760 by 1280 (868 by 1462 with the 7.1% bleed added). These dimensions combined with the background preset minimize the chance of letterboxing on the widest range of current devices.

In addition to page artboards, web stories recommend providing 3 poster images with aspect ratios of 3:4, 4:3, and 1:1 (696×928, 928×696, and 696×696). So I change the dimensions of the first three artboards appropriately (without bleed). Open the “Artboards” window and click the icon to the right of “Artboard 1”. This will open up the properties for that artboard. Change the dimensions appropriately, and I rename the first three artboards to “poster-portrait”, ‘poster-landscape”, and “poster-square”. The artboard names are used as the file names later when you export the PNG files from the artboards.

Now a painful part. I rename all the other artboards to “page-01”, “page-02”, “page-03” up to “page-96”. (Disclaimer: I am not an Adobe Illustrator expert – there may be a faster way!)

Next, I like showing the safe zone on the page artboards using a guide layer. Guides are not exported as a part of the PNG files later. Because I want precise sizes, I drag out a rectangle on the “page-01” artboard. I then select the rectangle and bring up the properties panel. I set the width and height to 720 and 1280 respectively (or 760 and 1280 if you use the larger size), remove the fill, set the stroke to pale blue.

I also select “Align to Artboard” from the advanced alignment drop down (shown above), then click on the horizontal and vertical center buttons so the rectangle ends up in the middle of the current artboard. 

Once you have the rectangle, copy it then from the menu select “Edit” / “Paste on All Artboards”. Delete the copies on the first three artboards (the posters). To make the rectangles guides, select “View” / “Guides” / “Make guides” from the menu. Once done, I also group all the rectangles under a “Guides” layer then lock the layer.

At this stage I save the document away as a template that I make a copy of for each new web story I created. That is, you only need to go through the above once. 

Below I provide a download of the template documents I use (one for 720 pixels wide and another for 760), so all you have to do is make a copy of the Illustrator file I provide.

Create the story

For each new story, I open the template document and save a copy of it as an Adobe Cloud document. Using Adobe Cloud allows me to do sketches on my iPad with an Apple pencil. (Just make sure you close the document on desktop first, give it a few seconds to synchronize with the cloud, then open on the iPad. Do the reverse when you have finished on the iPad. If you make changes on both at the same time, it will raise a conflict warning and create two files without the changes merged.)

Export PNG files for each page

To view your Illustrator document as a web story, use the menu selection “File” / “Export” / “Export for Screens” to kick off an export. Set the output directory to where you want the PNG files placed. I create a new directory per web story. You can select the artboards to export, or just “Select All”. I turn off the “Create Sub-Folders” checkbox and only have “x1” with “PNG” selected as scale and format.

The export will then create a new PNG file per artboard in your Illustrator document.

Create a Web Story HTML page

Next is to create a web story with a page per PNG file. I described how to create such a file in a previous post on coping with large images. You could write a script to generate the first version of the page if you wish. However, I have provided the files for a story assuming the above image dimensions and artboard names for you. Just extract those files into the directory with the exported PNG files. (You need to copy the index.html and bookend.json files.)

Note: to view a web story with the full experience, it is best to host the files via a web server. If you open the HTML file directly from the file system, you may experience some troubles due to Web Stories not liking “file:///” based URLs. Check out tools like SimpleHTTPServer if you don’t already have a local web server running to host your story under. (I frequently open the index.html file directory from the filesystem, reverting to a starting up SimpleHTTPServer only if there are unexpected problems.) You may also want to look at public site hosting services like Firebase if you want to share the web story with a remote team for feedback. (The web story is just a set of static files, so any web hosting service that allows you to host raw HTML and image files should do.)

Refine until you are happy

I repeat the edit, export as PNG, view web story cycle as many times as required to refine each page. You can iteratively increase the quality of each page as you refine your ideas. You can also show the story to others to get their feedback early in the development process.

Note: if you need to insert an additional page in your story, you can rename the artboards to get the artboards renamed in the correct order. For example, if you have a story with 20 pages, to add a page after your existing page-10, you might move page 21 (currently unused) just after page 10 using the up arrow button at the bottom of the artboards panel.

Then rename “page-21” to “page-11”, then rename the old pages 11 to 20 to be 12 to 21. This will cause the pages to be exported in the correct order, but inside the Illustrator document the new page 11 will still appear after the other pages.

To fix this, you can also then click the button in the bottom left corner of the panel and change the settings to what is shown in the following screenshot (pick left to right/top to bottom as the order, 13 columns like the original, set the spacing to the same as when the document was created, check “Move Artwork with Artboard”). This will move the artboards and the artwork on them appropriately, so the pages will again be left to right and top to bottom in the Illustrator document.

The final cut

Once you are happy with the story, you can then send it off to your graphic designers, photographers, video producers, etc. They will be able to see and understand your storyboards from the Illustrator document or web story and turn your rough mocks into higher quality media assets. 

The final story you would normally assemble with a web story editing tool. These tools allow you to add your images, videos, text layers, animations, and so on to create the final story. I recommend not embedding text directly in the images where possible – use a text layer in the story. That way the text will flow appropriately based on dimensions of the reader’s device, as well as being available for indexing by search engines.

Conclusions

Storyboarding is a popular technique in filmmaking as it allows the story line of a film to be refined and improved iteratively, reducing later changes in the project which are generally more expensive to make.

As mentioned above, I have created default web story files (index.html and bookend.json), and created a default Illustrator document you can copy while storyboarding. I suggest downloading these files as a good starting point for your own projects. The Illustrator and default web story files can be downloaded from https://github.com/alankent/web-story-storyboarding. (There “Code” button has “Download as ZIP” at the bottom to get all the files in a single ZIP file.)