Interactive Document Publishing

The process behind an official film site

Skills: WordPress Development, Illustration, Digital Interactivity

Tools: After Effects, InDesign, Photoshop

Thumbnail Lost In Berlin

The Project

‘Lost In Berlin’, an interactive digital journal, follows the progress of one of my projects, an official website for an independent feature film, as it moves from abstract concept toward reality. It’s an in-depth, behind the scenes record of the process of building a complex and media heavy site. The film,‘Lost In Berlin: It’s a Long Way Home’, by Rodney Martel is currently in production.

The Journal

Created with InDesign’s Digital and Online Publishing software. Includes written content, illustrations, interactive elements and animations. The journal is a dynamic way to record the process as it happens. Essentially it’s a journey that begins with the first conversations with the filmmaker. From there, stops along the way include:

  1. The process of developing and refining the concept.
  2. The rationale and technical process behind the original illustrations, including the detailed, layered photomontage of historic Berlin and the Brandenburg Gate.
  3. Incorporating vintage photographs and postcards from the filmmaker’s personal collection.
  4. Constructing a rich visual symbolism to reflect the subject matter of the film.
  5. Devising the site’s style.
  6. Detailed mockups of pages, navigation systems and animations.
  7. The advantages of a dynamic, custom themed WordPress site with a peek behind the scenes at its admin area.

  • Home Page background illustration Berlin montage

    The City Illustration

The Film

An odyssey spanning three generations and continents. Against the backdrop of monumental historic events the film weaves the strands of a family torn apart, whose bonds rise above their loss and endure despite time, distance and memory.It takes place in Berlin during the 1930’s Weimar era, Germany during World War II, post World War II in countries beyond Germany and in Contemporary America.

The Official Website

Embodies the style of the film and reflects its heart and passion.

Responsive, mobile ready, custom themed WordPress site that showcases the film with trailer, promotional elements and in-depth information. Integrates the story, characters, historical events and film production.

Media includes trailers, illustrations, animations, and client provided vintage assets.

Behind The Scenes

Working With Adobe InDesign

InDesign's Possibilities

The software has extensive components for creating interactive documents, digital and online publishing, magazines, brochures, eBooks, and InDesign's ePUB format.

Possibilities include: hyperlinks, buttons, multi-state objects, page transitions, animated elements, dynamic interactive documents, video and audio, 360 Viewer, panoramas, ZoomSlideshows, adding your own script, CSS or HTML, as well as the ability to publish books online.


The process of building a document in InDesign requires:

  1. Developing the concept.
  2. Creating and gathering assets: photographs, illustrations, video, audio, numerous bits and pieces for animated elements, and others.
  3. Preparing assets for web use: editing, color correction, special effects, post production, exporting files into different formats, sizes and resolutions, file compression and optimizing media for the web.
  4. Organizing a file system with folders and naming conventions so files are easy to find. Multi-use software like InDesign links to objects rather than embedding them so it saves time knowing where everything is.

Film Websites: Content, Features and Media Elements


Film-related information about the film’s production, director, cast and crew, reviews and awards, story and characters. This includes: behind the scenes, galleries, posters and trailers as well as extras such as additional and/or extended trailers, interviews, music, videos, games and downloadables.


The site must be able to accommodate a large amount of media, including multiple trailers both short and long, HD video, large image files, galleries, supplemental videos, audio files, music, games and downloadable items.

Animated Elements

Many film sites incorporate animated elements like character illustrations, titles, navigation, iconic objects, symbols, and page transitions.

Requirements of A Film Site

  1. Attract attention.
  2. Reflect the spirit and style of the film.
  3. Complement the style of the director’s other work.
  4. Incorporate iconic images and symbols from the film.
  5. Have a distinct film-related color palette and typography.
  6. Include must-have features.
  7. Fulfill the needs and expectations of filmmakers and producers, which requires listening and clear communication with many different people.

Film Sites: Devices and Accessibility

Film websites present unique challenges for mobile devices and accessibility.

Mobile Devices

Access to video content, high resolution images and animated elements that require Flash, as well as mobile’s portrait orientation and an aspect ratio that doesn’t match film’s.


Clear, detailed image captions, descriptions of images and other media, closed captioning, and being prepared for translation into many languages.

Failing to accomodate these needs will limit the richness of the experience for mobile users, those needing accessible accommodations, and non-English speakers, leaving potential visitors in the dark.

back to top