Strategies for Visual Storytelling

This article will demonstrate the use of researched imagery in communicating interactive stories. It uses the storyboard of the Studio Project One article.

From my visual research, I have a 1948 world fair futuristic interior that is shaped like a circle, and thus shares the heritage of Buckminster Fuller's geodesic domes--as well as the architecture of Epcot Center and of previous World Fairs. I also have an image of a 1895 world's fair exhibit of MIT. The first aesthetic strategy that I am using here is the use of interior images for exterior architectural structures. These source images form a regular rectangular building structure and cap it with a globe.

The globe references the architecture of the future through the lens of the past. As recent architecture is informed by computing issues, I use a computational cube done in Illustrator (vector graphics) as the architecture of the future, as we speculate on the future now that the future of the past has passed.

What this interior/exterior flipping does, among other things is to let me establish the theme of this imaginary world's fair, the role of the fair in taking an historical point of view while focusing on the notion of form and structure--anything from advanced plastics to new architecture.

This theme is a framework for the the use of other historical views taken in the use of the enigma machine for musical compositions at the end of the story, to reduce existing racial tensions 55 years after the war--if they do indeed exist. Because the story involves several historical events, it is good to establish this theme early on.

Now as the narrative progresses, we reveal that IBM and AT&T are presenters at this worlds fair. To tell this story and represent it, I chose to make the following image, where the computing companies form exterior structures that were previously formed by the interior structures.

A relationship is established as one of futuristic architecture. Futuristic architecture is operative in the IBM/AT&T image, as well as the opening page's image. What is the content? In the first, it identifies the worlds fair with actual spaces for exhibits; in the second it merely repeats the structure of the first, and also indicates that these two companies might be players in the exhibit displays.

The next step is to indicate the mystery presenter, or unknown presenter. If we show the above image again, and place a rollover in the box, third from the left we can do this within the conventions of web pages, while adding interactivity.

To position the rollover, I used DHTML or Dynamic HTML. How to do this procedure.

Move the mouse over the third box from the left on the top row of rounded squares. You should see a silhouette with a question mark. You will notice the hand icon appearing in the cursor which indicates that the rollover can also be a link. You may link to the page via the rollover.

Finally, we need an image of a keynote speaker meeting the unknown speaker, or the storytelling montage of the event:

The globe of the architecture of world's fairs is used to link the two speakers and a symbolic handshake graphic is put between them also. The half globe suggests a common interior for the event and the red hand clasp suggest a connection of sorts.

The benefits of research: Sometimes source material directly leads to image creation and innovation. Take for example this image of the enigma machine with a square note in its cover. this can easily be replaced with a screen for notes etc.