Documenting Interactive Work

Sample documentation strategies

Strategies for creating assets

Screenshots

Notice how in many of the examples we look at, the screenshots are treated with care and aren’t just screenshots showcasing a myriad of tabs and widgets in your browser. Here are a few ideas for creating cleaner screenshots:

  • Use Safari and hide + customize the toolbar.
  • Turn off the default drop shadows in Terminal.
  • Using a program like Photoshop, create a template for yourself that has a cleaned up browser window, and place your screenshots within it. You might have an additional colored background or textures setup behind your browser window.

How to take a screenshot on a Mac

How to take a screenshot on a PC

Make sure you save your designed screenshot optimized for its size (max 1.5-2x the intended width for retina screens.) The default screenshot may be too heavy or large to use on your website. Remember to keep your images responsive.

Screen Recordings

There’s a few different ways of creating videos. One way is to use Quicktime, an application already installed on your computer, and create a screen grab there.

To do this, open it up and then select it from File > New Screen Recording.

This produces a .mov file. These are often very heavy and cannot be used for web documentation. To use it on a website, you’ll need to convert it to an .mp4 file format. You can use something like https://cloudconvert.com/mov-to-mp4 or https://www.freeconvert.com/mov-to-mp4 to do that. You should try to keep your file sizes to a minimum.

For smaller file sizes, you can use Adobe Media Encoder, which is part of Adobe CC.

Once optimized, you can embed the video as an HTML5 video

Tools

Alternatively, you can use a third party software.

  • Go Full Page is a Chrome Extension that allows you to take a screenshot of the full web page.
  • I’ve used Loom for screen recordings in the past — this also allows you to record your system audio. If you use your .edu account to sign up, it should give you free access.
  • Veed.io could be useful for compressing and editing video.
  • You can also use templates, like ones on The Brand Identity but keep in mind that mockups of devices can quickly begin to look outdated.

Activity

  1. Revisit your Elastic Collections project (or open your current project.)
  2. Take note of your project description. Make sure you have articulated your design concept.
  3. With your concept in mind, consider what the most compelling parts of your project are. Is it the typography? The animations? The layout? Understand that most people only have a couple minutes to look at something. How can you focus your project to a few key features, rather than showing every last detail? List / sketch out your streamlined "shot list" of with the most important aspects of your project. Documeent your project using one or more of the methods outlined above.
  4. Create a webpage that presents the project as though it were a case study. You must include the name of the project, a link to view it, and additional metadata as you see fit. Consider the design of the page overall, and use captions as a way to support your documentation.
  5. (As with other activities) link and upload your documentation to your class homepage.
<>