CREATING A WEB INTERFACE THAT TELLS YOUR STORY

An interface provides access to the contents of your project, allowing your visitors to move through your information--thing menus, links, and web pages. A platform provides the technology to design and deliver your information--think Wordpress or Dreamweaver. Interfaces and platforms have a symbiotic relationship, in this case coming together to create a website. This website may present something you've developed in another platform (like a map, timeline, or network analysis) and provide scholarly context that outlines more about your research project, or it could simply BE your digital humanities project (for a close looking project, as an example). 

Steps for Making a Website

Step 1: Site Mapping

Before diving into creating a website, it is essential that you determine an organizational structure for the site that outlines what pages will be included in your site and what the relationship between pages will be. The structure you've created will allow you to properly organize your content in folders on your computer AND create a website with a logical flow. This process is called site mapping. Site mapping helps you manage the "back end" of your website, or its contents.  A secondary benefit of site mapping is that it can help you better understand and clarify how parts of your research relate to the whole. To learn more about site mapping, watch this DAHL tutorial on the topic!

Step 2: Designing an Interface 

Site maps help create the overall structure of your website. Interfaces serve as the front-end of your website by structuring the way your content is accessed directly by those using your site. A good interface helps to guide the visitors using your project site, and in this sense reflects and creates the project narrative you would like your users to experience. An interface needs to be designed in order to be effective, a process that involves developing use-case scenarios (imagining how the site will be used); mocking up interface designs; and user-testing. An interface typically includes the following components:

Structural components: 

Navigation: We are all familiar with top or side bar menus. These menus reveal what contents are on the site, and show us how to use it at a high level. The primary navigation menu should be accessible on all pages of your site. 

Menus: Menus that drop-down or collapse provide access to more detailed contents in your site, and can be organized in multiple ways (alphabetically, thematically like a table of contents, etc.)

Activity components:

Links: Links allow us to access pages within a website, or to link out to external content. 

Buttons: Buttons are active forms of navigation that you can click on, guiding people to specific things on your site that may be of interest. 

Search Boxes: Search boxes are typical only of data-base drive websites, and should only be used when your content includes searchable terminology. 

Step 3: Select your platform (you can also select it before designing your interface, as all platforms require the above steps to be utilized effectively)

Common interface and delivery platforms for digital art history projects include:

Wordpress

Wordpress allows you to create websites without the knowledge of HTML. These websites can be greatly augmented by plug-ins that enhance functionality. There are many pre-existing themes available for Wordpress sites that minimize the need for you to design the appearance of your site yourself. The downside of this is that changing the theme in even minor ways can be very difficult and often requires knowledge of how to edit the CSS (cascading style sheets).  

One nice attribute of Wordpress is that it provides hosting for your website on a server, including a limited amount of space with the free version. However, if you want to utilize the full-range of plug-ins or customize your site in any way, it is likely you'll need to upgrade your Wordpress license to "premium" or beyond.  

Adobe Dreamweaver
Dreamweaver is more a classic website development and editing tool. You can use Dreamweaver to develop a relatively simple but attractive website with little or no coding knowledge. Because Dreamweaver isn't theme-based like Wordpress, it can be a good choice for developing a customized design from scratch.  However, ou will need to identify a hosting service or server on which to publish and deliver a Dreamweaver website. 

Omeka

Omeka is a web-publishing platform developed for scholars, libraries and archives, and is excellent for sharing online collections and creating online exhibits. Omeka Classic is available for free to individual users, but like Dreamweaver, You will need to identify a hosting service or server on which to publish and delivery your site. 

 

 

---

 

 

NARRATIVE PROJECTS AND DIGITAL STORYTELLING
 

Storytelling using digital tools can not only make for interesting and instructive ways to communicate art history—it can also enhance and transform your scholarship. Trying to effectively communicate your research and ideas using narrative technology platforms will help you consider your audience; reduce complicated concepts into easily digestible pieces; develop new ways to structure and think about narrative, including taking advantage of the non-linear capabilities of digital narrative platforms; utilize media such as music to enhance your narrative; and develop and draw upon your powers of evocative description.  
 

Fundamentals of storytelling
 

Regardless of the platform for your story (website, podcast, film, etc), you can learn from the simple techniques deployed by all great storytellers. To begin the process of writing your art historical story, follow the advice of the great storyteller Ira Glass (from This American Life) and start by amusing yourself as a point of entry to amusing others. What initially got me excited about this topic? What excites me you about it now? Has that changed over time and why? What might others find exciting about it?
 

Another way to generate ideas is to try to fill in these simple statements:  I want to tell a story about X, and what’s interesting about it is Y (and that’s your story).  If you can’t come up with Y, this is probably not the topic you need to be pursuing for your research, let alone for digital storytelling!
 

Once you’ve identified your story of interest, you craft it. Stories have a literary structure, with a narrative arc that isn’t found in most scholarly writing. There are many different ways to tell a story, but never forget the elements of a good story: Character, plot, and a structure that begins with a hook, proceeds with a well-paced middle, and ends wit a satisfying or cliffhanger are your friends.
 

The beginning of a story is often called the hook. It’s the thing that draws people in and gives them something to identify with. A hook could be the first step or even the last step in a sequence of events. It could introduce a character that gives people something to identify with, noting that a character in an art historical story could just as much be a work of art or historical event like the French Revolution or an anonymous illustrious man or a mythological figure as a known person.

The middle is when the plot unfolds, typically through the sequencing of a series events or anecdotes (chronological is fine, provided that each event or anecdote is followed by reflections or questions that propel the narrative forward)

And finally, the end, which can resolve your story, or, depending on whether or not you are creating a serialized story, leave people hanging.
 

 If you want to learn more about good storytelling practices, I highly recommend Out on the Wire by Jessica Abel, which details how NPR’s This American Life writers develop their stories. Come borrow it from the DAHL!

 

 

---

 

 

PUTTING IT ALL TOGETHER: STORY, MEET PLATFORM!

 

There are many different types of digital storytelling approachs (Podcasting! Games! Films!), but no matter the platform, successful digital storytelling is always the product of some common elements: a well-developed narrative, and a mastery of the technology used to deliver the story. We'll use the steps for developing a film project as an example, noting that many of these steps can be extrapolated to the use of other digital storytelling platforms. 

 

Digital Storytelling with Video Basics

 

(For inspiration, you might look at PhD Candidate Emily Thompson’s video on Bezores here, or MA student Elizabeth Mangone's slow-looking video on Chinese porcelain here.)

Some steps and tips for a successful video project include:

Step 1: Scripting and Storyboarding
 

You should always initiate your video projects by first writing a script that you will use for your video’s voiceover. You can then transform that script into a storyboard that will allow you to “outline” your film (something we’re all familiar with) and therefore assist you in envisioning how the visual, spoken, and other aspects (such as musical interludes) of your video will come together.  Read this article to learn more about the storyboarding process!
 

Step 2: Developing your video content
 

Once you have determined the sequencing of your film it’s time to develop the video content. To do this:

• Digitally capture any images you would like to include at an adequate resolution (1024x768 minimum, or ideally higher for images on which you’d like to Zoom)
• If you’re incorporating outside videos from YouTube or Vimeo, extract them using a program like Mac YouTube downloader.
• Create any enhancements such as Knight Lab timelines or Juxtapose images and animations or animated GIFS. Then, record them using screen capture technology like QuickTime so that they can be incorporated as features in your video. 

Step 3: Develop your audio content
 

To develop your audio content, you should:

1. Record your script. Consider borrowing the podcasting microphone from the DAHL or at minimum use a headset for recording, which will allow you to better control your vocal input. To record, utilize audio capture software like Audacity or Garage Band.
2. Make any necessary edits to your audio recording in your chosen platform. To save time while optimizing your audio, consider using the MEE approach taken by many podcasters.
3. Find additional music to create the frame around your content. For example, after presenting an idea, allow music to play for 6-7 second so that your audience can ponder it. And also consider weaving music throughout to lend resonance to your words. Read this article to locate royalty-free and copyright compliant music to use!

Step 4: Putting it all together

1. Pick your video editing platform. Adobe Premier Pro is available in the DAHL, but IMovie (bundled on all Apple devices) is an excellent and free choice.

2. Learn how to use your platform-WUSTL's LinkedIn Learning has excellent tutorials!
3. Import your audio and video elements (note: some recommend placing your recorded audio first, then placing your images and other recorded video elements, then adding additional music, but whatever process works for you!) and make that movie!

 

---

 

 

OTHER DIGITAL STORYTELLING PLATFORMS
 

In addition to the film and video platforms mentioned above (including QuickTime for screen recording), there are several other (free!) digital storytelling platforms that may be of interest if you want to pursue non-video storytelling projects. Many of the techniques suggested above--particularly scripting and storyboarding--will also apply to the use of these technologies, which include:

 

ArcGIS Online (particularly Story Maps)

Knight Lab Tools, including Storymaps and Scene

Twine (allows you to create narrative based, non-linear stories and games)