Skip to main content

Prototyping & Wireframing Temporal Projects

For temporal projects, you are likely to need both a wireframe and prototype for different parts of your project, but each is often fairly simple in itself.

Published onOct 14, 2019
Prototyping & Wireframing Temporal Projects

For temporal projects, you are likely to need both a wireframe and prototype for different parts of your project, but each is often fairly simple in itself. You will use the wireframe to consider aspects of presentation or layout, while the prototype can be used to test the technological aspects of your project.

You should draw a wireframe very early in your project, probably during the planning process, and then amend it and show its features more explicitly once you have selected a tool to use. At the beginning, focus on the overall content types and amounts you need to show and how they are laid out on the screen for your audience. Try to show the answers to the following questions:

  • Is there a timeline or time ribbon visible on the screen? How much time is included in it and how is that time divided up? You may also want to sketch out concepts like separate temporal strains that are superimposed and the kinds of top-level titles or details that show on the timeline ribbon itself.

  • What does the main panel or event detail include? Does it need to have media like images or video? How much text will you typically have? What if your content varies considerably in length or format?

  • Are there other navigation features or detail panels visible at the same time? For example, for some timelines you might have an image, a map, and a text panel all showing at once; for other projects, you might want a way to show related events that aren’t temporally sequential.

Once you’ve selected a tool, you can add detail to this wireframe, or if you are using an off-the-shelf project with minimal customization, you can skip directly to creating a prototype working within the tool. If you are planning to develop a custom timeline or a major modification of an existing tool, you will probably want to draw an additional detailed wireframe before you start customizing your technological tools. Either way, however, you want this stage to capture how the technological capabilities and limitations of your tool or application affect how your project shows up for viewers. This includes elements like:

  • What does the navigation look like and how does it function? Can users click on events in the timeline ribbon or only move through the temporal project in a sequence (like with arrows or “next” buttons)? If you have something like a map, can users click on the map to move around in time?

  • How is media shown or embedded in the page? Do images have captions, and where do these appear? Are maps shown as images, or are you loading navigable map tiles from an outside source?

  • What kinds of layout functions will you use? Consider elements like header size, color, borders or boxes to set off content, and other details that help users understand your material.

If you are working with existing application, you can use the program itself to start showing the answers to these questions and working out the functional details. This is the first stage of building the project itself, but you may be working with sample content or placeholder data rather than your completed content. Because technological limitations can change elements like the length of headers, legends and icons, the size of text, and other visual features that have a significant effect on viewer interaction, you want to make a prototype before you edit the final version of your content. This will also help you develop a structure for organizing and formatting the content you will include. You may also find that this initial prototype shows you that a tool you expected to use doesn’t meet your needs. You can then decide whether to alter your wireframe to work within the tool’s limitations, or whether you need to consider a different tool or custom design before you have invested too much time putting detailed content into the timeline.

If you are building a more complex custom application, you may continue working with wireframe sketches up until this point, because you will have more control over the final implementation. However, if you expect to make minor customizations to an open-source application like TimelineJS, it is a good idea to build a prototype within the current version in addition to creating a wireframe sketch of your desired end result. This will help you and/or the developers you’re working with figure out how many things need to be changed and how to change them without compromising features from the original version that you want to keep.

If you are customizing an application or building an entirely new timeline, you will likely need several prototype iterations after you have made your wireframe(s) to make sure you’ve created a system that works. During this process, try to include several representative content samples that show the full variety of the things you need to include, including media types, length of content, and special formatting or attribution details.

Continue Reading: Teams & Expertise for Temporal Projects

No comments here
Why not start the discussion?