Ryan Irelan

is building Mijingo and doing limited consulting.

Making the Craft Feature Videos

Since going indie back at the end of June 2014, one of the consulting projects I worked on is a series of videos covering major features of Craft, a CMS from Pixel & Tonic.

Here’s one on Craft’s Entry Types:

The video production process was much different than what I do to create my video courses at Mijingo. I took a Craft feature that Brandon Kelly at Pixel & Tonic wants covered and figure out a way to distill it down to 59 seconds (actually a little less because of the music lead-in and the closing graphic). It has to be clear yet compact. It can’t be too detailed because 59 seconds1 isn’t enough time; but there has to be just enough detail to demonstrate the feature.

It took us more than a few tries to find a process and formula that works. But when we did, the remaining videos were a little easier.

Pre-Production

For each video, my process started by reviewing the current feature page on the Craft website so I could understand how Brandon was marketing the feature. I jotted down some notes so I could try to use the same language.

For some of the videos I had a Skype call or chat with Brandon to hear thoughts and talk through some treatment ideas.

Then I wrote out the “Problem” and the “Solution.”

The videos start identifying the problem, then mention the solution, and only afterward show the solution in a (very) mini tutorial. For my prep, I listed out the steps of the video, with brief notes about the script and action on screen.2

Photograph of notes and storyboard for Craft video

Once I knew my approach and the general sequence of how I’ll cover the feature over 59 seconds, I started writing a script in Google Docs. After I completed a solid draft, I created a Final Cut Pro X project and recorded the voiceover over the music. Using the music right away helps me tweak the script so its pacing and syncopation fits with the music, and to discover and toss out words and phrases that sound terrible when spoken aloud. Reading the script aloud will always make wordy sentences and repeated words more noticeable.

With the script draft done and the voiceover test recording done, I shared both with Brandon for his feedback and edits. He owns the voice of Craft, so it was important that the script is consistent with the website copy and how he thinks the features should be described. He’s also great at giving the script some clarity.

Next, I quickly and crudely sketched a storyboard showing the different scenes. This helped me figure out what I (or someone else) needed to prepare for the sample site and film. We were working with the same sample project (Happy Lager) for each video and I build my examples around what’s available in the site.

Production

The production process started with reviewing the storyboard. I took stock of the “scenes” and “shots” (they’re all screen-based so it feels weird to call them scenes or shots). I reviewed everything to see if I don’t have the assets (something designed in the sample site or code) to pull off the shots. Once I’m sure I do, I proceed with “filming.”

If I had animations to do, I’d work on that first in Apple Motion. The animations aren’t complex but it did require pulling in current screenshots (or PSD exports) of the sample site and creating the different views (typically a one-up, two-up, or three-up of the sample site pages we’ll talk about). I’ve found that if I have to do a lot of scrolling of a web page, the best way to get smooth scrolling is to it in Apple Motion or as an animation inside of Final Cut Pro X. Trying to do smooth scrolling by hand is a feat not worth the time. Plus, I like to drink coffee.

Filming took place with my screen resolution set down to 1920x1080 and everything is full screen or maximized. I use Screenflow for capturing the screen video and save it out as a lossless file.

All of the interactions (filling out a form, selecting a drop-down) were recorded at least three times, sometimes more if I wasn’t able to get it right. What’s right? I want it to look natural but crisp and with intent. Wishy-washy mousing and interactions make for a weaker video. You can’t edit that in to the video (oh, I’ve tried) so you want to get it right during capture.

After the animations and screen recordings were done, I moved to post-production.

Post-Production

The first step of post-production was to re-record the voiceover. Depending on the script, timing, and sometimes how I felt, this can take 3 takes or 30 takes. I’ve done as many as 40 but I’m better at it after a lot of practice.

With the voiceover in place, I then edited against it. You need one constant while producing videos like this. Choose audio or video. I hope you choose audio.

I exported the Screenflow documents and then import them all into Final Cut Pro X. One by one I dropped them in to assemble a rough edit. I wanted to see if I’m missing any clips I actually need or identify any pacing or ordering problems.

Export & Publish

I exported final video right from Final Cut up to Vimeo (via the handy export option) and then sent it off to Brandon Kelly for approval. After he approved the video, I then published it up to the Pixel & Tonic account for embedding on their website.

The Final Videos

Here’s a list of the final videos, as included on Craft’s Features pages:

  1. The music we chose was 59 seconds long and wanted to time it perfectly for a crisp beginning and end. 

  2. Since working for myself I’ve been using paper notes and documents a lot more. My main repository of ideas and thoughts is a stack of white, blank index cards I keep on my desk. 

Want to share your thoughts? @Reply to me on Twitter.

There’s more to read in the archive.