This blog entry is intended to be a resource for designers working on user experience (UX) or interaction (IxD) storyboards for website applications. The storyboard template files within the downloadable archive are intended to be printed out and sketched on. The browser frames provide a context for the application interface, and they help the project stakeholders visualize the end-user experience. The image on the right shows the template within InDesign. Read on to learn how to seamlessly integrate your sketches into the template.
Files contained in the archive are compatible with Adobe InDesignCS3 or higher and Adobe Illustrator CS or higher. The templates are in Tabloid format (17" x 11").
From my experience, when storyboard panels get too large, it seems the quality of the sketch is reduced or too much time is spent drawing out minute details just to fill up the frame. Therefore, I made the panels in the template not too large, but not too small. Their size gives ample space for quick gestures when sketching out the composition of graphical user interfaces, and also provides room for adding detail when needed. With this storyboard template, a UX designer can work with ten panels which is typically enough to communicate a few interactions and interface state changes.
Before initiating any sketchwork, it's useful to have developed a scenario-of-use narrative that outlines a workflow for accomplishing specific tasks. The narrative is usually based on a sets of requirements gathered early in the design process.Section 1 | Storyboarding in Adobe InDesign
Follow the steps below to create a deliverable storyboard by using Adobe InDesign. The general idea is to sketch on printed panel frames, scan the sketches, crop out individual sketches from the original scan, and link those individual sketched graphics to objects within the InDesign document.
Print multiple pages of blank panels of the individual panels by printing out the PDF file included in the archive. You should get pages as seen in the image on the right.1.2
With a pencil, sketch out the application's interface in each panel according to a user's scenario-of-use. Ink over specific pencil lines if necessary. Some scanners have a difficult time picking up pencil.1.3
Scan the pages of your sketchwork into Adobe Photoshop. Ensure the scanning resolution for the storyboards is at 300dpi.
Save these original scans to your drive.
Color correct the original scans in order to
accentuate the sketched lines. First, Invoke the
command from the application menu.
Adjust contrast with
If using pencil for sketchwork, use the mid-range
slider for best results. Save the changes to the file.
Now, duplicate the color corrected canvas in order to alter a new image. Use.
Crop the duplicate image to the edges of the first panel sketch. The browser frame should be cropped out as shown in the screenshot. Save the cropped image as a Photoshop file. Repeat steps c and d for each panel until all of the panels have been cropped and saved into individual files. Use a naming convention, for example:
panel01.psd,panel02.psd, panel03.psd, . . .
Open the Adobe InDesign storyboard template file included in the archive. Ensure the document is set to . The edges around all graphical objects will be dotted. This means that those objects are linked to the A-Master page which is essentially a template layout. Changing the objects on the first page requires detaching its objects from the Master Page. Within the Pages panel, select the first page icon, and invoke its contextual menu. Click on the command. After doing this, the edges around all graphic objects will switch from dotted to solid lines.
Those objects are now editable.
With the Direct Selection Tool, select the red picture frame object in the first panel. Once selected, invoke the command from the main menu. Find the corresponding Photoshop file that you created earlier in Step 1.5. Your sketch should now appear within the storyboard frame. Repeat this step for all picture frame objects on the page.1.8
Using the text tool, select the various text boxes to change the labels and narrative.1.9
If you need more pages for your storyboard, simply drag the A-Master
page icon in the Pages palette to the
area directly after the Page 1 icon. Then repeat the steps above.
Once all graphic files are loaded into their corresponding frames, export the document to PDF format for delivery.
Adobe Illustrator has the capability to help you produce storyboards as well, but as an application it is geared more towards illustration rather than publishing. If you only have access to Adobe Illustrator, you can follow the steps below to create a deliverable storyboard in Adobe Illustrator. The following assumes that steps 1.1
through 1.5 were performed by the user.
Open the Adobe Illustrator storyboard template included in the archive.
Choose , then select the first graphic file created from step 1.5 in which the scans were duplicated, cropped, and saved. The sketch will appear atop the document.
Choosefrom the main menu to see the objects in their structural form. Outline mode only shows the anchor points and paths of the graphical objects. Moving objects in this view eases the task of selecting, moving, and aligning anchor points.2.3
Ensure that Smart Guides are enabled by selecting themenu and verifying that a check mark is next to the Smart Guides command. Using the Direct Selection Tool, click and hold the graphic's upper left anchor point when the Smart Guide reads "anchor". Then drag the mouse until the object's upper left achor point is aligned with its frame's upper left anchor point. See the images on the right for display information.
Repeat placing and aligning the
remainder of the panels as in
step 2.1 and 2.3. This is the bulk of
the work, so save often.
If you need another page for your Adobe Illustrator storyboard create a new empty
template and repeat the steps above. Once you have completed placing and aligning
the graphic files, export the document to PDF format for delivery.