This .jpg is a screenshot of an in-progress Adobe Illustrator “inspiration workspace,” a kind of personal brainstorming pinboard draft created in the process of redesigning the Arcane Gallery of Gadgetry (AGOG) site. AGOG is an educational narrative alternate reality game (ARG) with steampunk, Civil War, and time travel thematics[fn]Read more about the game itself in Beth Bonsignore's contribution to this cluster here: http://mediacommons.futureofthebook.org/tne/pieces/birth-april-g[/fn]; the redesign attempts to more obviously separate visitors seeking an entry into the ARG from those wishing to read about the research study behind the ARG—in ARG parlance, drawing a line between the TINAG (“This Is Not A Game”) and the TIAG.

For web design projects that draw strongly on some sort of literary narrative for inspiration, I like to use Illustrator to pull all my digital inspiration resources into one workspace[fn]AGOG was developed by an academic research team, so I had the advantage of not only designing web and other graphic properties for the ARG but also being part of the game design. For a site where I wasn't part of the main project, I'd use a client questionnaire to gain the same insight into thematically appropriate design (e.g. "What do you want visitors to feel when they reach your site? Are there images or themes central to your project I should invoke?").[/fn]. This both situates the images on a single viewing plane and has them readily linked for when I do want to use them in a final graphic property such as a website or sticker design. I didn’t intend this .ai file to turn into a wireframe or mock-up, and under ordinary circumstances I’d never share it with anyone else; it’s simply a step between the process of doodling notes in a sketchbook and creating a mock-up of the final site to share with design clients. An amalgamation of inspirational sources like this generally never sees an audience, whereas the next step mock-ups are produced with an audience in mind, even as they’re at the same time technically drafts.

This file is as much a space defined by absence as by presence. Sketches and list of keywords framing the site’s eventual look exist separately, on a large sketchpad propped on the wall behind my desk. My paper sketches deal more with the macro (e.g. layout blocking) or micro (e.g. logos) levels of design meriting their own .ai files; the inspiration workspace pulls together just those design elements that are difficult to plan using paper and pencil. It usually isn’t worthwhile to type my pencilled notes into the workspace file, since I’m now at the stage of playing around with those ideas in visual form; for example, “looks like an actual shelf or desk with appropriate objects on it” is translated here into the inclusion of reference images for objects and shelves. In addition to such beginning-state drafts, absent also is anything in the “artboard,” the bordered space at the workspace’s center. For this kind of design work, I like to keep that area free for experimenting with pulling different images together, and later pull the site wireframe that exists in a separate .ai file into this space.

Whether it uses Adobe Illustrator or not, gathering web design inspiration is a curatorial process: think of it as choosing the items in an exhibit to create a desired visual effect. There’s even a dark archive component! In this stage of the process, I pull in everything relevant, from creative-commons-licensed photographs to screenshots to closely copyrighted images; these latter have a place in the creation of the site’s mood, though they’re not used in the final public product.

Although I almost always visually chunk Illustrator space into themed areas (e.g. color palettes and font examples are separate from possible featured images), I usually don’t go quite as far as dividing inspirational images into thematic areas, as I did with this workspace. Most projects don’t require so many irreconcilable inspirational sources (e.g. I didn’t plan to include all the maps, or all the photographs of historical figures). In the case of AGOG, it was clear I couldn’t use everything I’d flagged as a possible inspirational image, and separating my workspace into categories helped me make certain I included something from each area:

1. Background material (bottom of screenshot included above). Textures, frames, and visual organizational ideas such as shelves.

2. Collage objects (left side of screenshot). One design possibility was to create a page that replicates a physical space such as a desk or shelf. While the main images here would be illustrations of AGOG’s key artifacts (such as the “kairograph,” a spiritual telegraph), in the workspace I started to collect relevant items that might make the space look more real (e.g. compasses).

3. Historical inspiration (top). This area includes images of historical characters who have a place in the game’s narrative (Clara Barton, Ellis Spear, Benjamin Franklin, and Walt Whitman) as well as resources relating to the game’s steampunk/invention motif (e.g. the patent for a mechanical duck).

4. Images from the first season of the ARG (right). These serve as a reminder of the game’s narrative and also may be worked into the current design.

This workspace helped me keep the new design in line with the previous one; I pulled from inspirational images used in other AGOG sites, such as Victorian etchings, and I tried to hold inspirational images to a color palette that works well with antiqued paper (since AGOG uses aged historical documents such as patents and maps as major game components). I continued to add and remove images until the effect of the amassed visuals felt correct, regardless of which of the pieces would actually be used in the final work: the goal was to create a rough visual expression of the ideas behind the game, before translating that expression into a final site mock-up.

As I mentioned, this design draws on a literary narrative for inspiration: the mythology of AGOG. I’m both a web designer and a literature scholar with interests in textual scholarship, so I’m keenly interested in how narratives are translated into web design, whether that means choices about the structure of an online scholarly edition, archive[fn]E.g. the design of my Digital Dos Passos site (digitaldospassos.com) draws from both the thematics and form of the novels it references.[/fn], e-lit, or (as here) the look of a site based on a textual artifact. Too often, the web design of a digital scholarly production is treated as a post-critical activity, when in fact visual rhetoric makes a huge impact on how we interpret written data.

Drawing an analogy between textual editing and literary web design processes is tricky; where the underpinnings of the textual side of an editorial project are often part of a publicly released methodology, editors release the arguments and decisions feeding into the visual design of a scholarly edition far less often. Perhaps introducing a clearer drafting process for narrative-based web design, one that moves from inspirational sources to the final visual product and results in a written design methodology, might be a path toward witnessing connections between design elements and their textual inspiration. I suspect it’s in middle-state artifacts like this workspace, where the connection between a pile of inspirational images and the final graphic product is obvious, that we might begin to trace and prove a methodology of narrative-based web design.