Audience: Online instructors
Roles: Instructional design, subject matter expert, storyboarding, video editing, visual design.
Tools: Figma, Adobe Premiere Pro, Adobe Audition, Adobe After Effects
Instructors of online courses typically need to create documents, but few give much thought to the fonts and typefaces they use. Because of this, many documents are poorly designed, not digitally accessible for some students, or just plain boring.
To help faculty members improve this skill, I created a short self-paced faculty development course that would be offered through my office at the major university where I work. This brief series of videos was created as the instructional content for this course.
Through my work with dozens of faculty members, I noticed that many of them didn’t use best practices when using fonts in their documents. Many didn’t follow digital accessibility best practices: their text had poor color contrast and they didn’t use heading styles. Furthermore, the fonts selected weren’t always appropriate. Some used stylized display typefaces as their body text, which made large portions of the content difficult to read. Many used default fonts, which is fine, but I suspected they did so out of lack of direction or imagination.
I determined that a brief course on font and typeface best practices, both in terms of digital accessibility and design, would lead to better faculty-created documents at the university. To that end, I established the following outcomes for the course and outlined them in the course’s intro video:
I storyboarded most of the course’s videos in Figma. Designing with Figma allowed me to quickly sketch out ideas and then refine them to match (or sometimes become) the final product in the video.
I used frames in Figma to design what would be shown on screen in the videos. I organized the design of the videos by creating a new row of frames for each new section. For example, in the second video of the course, “What is a font? And why should I care?,” there were five sections: introduction, aesthetics, structure, legibility, and conclusion. Each of these sections had its own row and as many columns needed to illustrate the points of that section.
As part of my storyboarding process, I recorded myself with OBS while storyboarding and developing the first two videos of the course. You can watch me design in Figma in real time on my YouTube channel:
In addition to the visuals designed in Figma, the videos include my voiceover explanations. The scripts for these voiceovers were created simultaneously with the storyboards in an interative manner. While scripting, I would realize that a new slide would be needed. Or, while storyboarding, I would realize that an additional transition or explanation would need to be scripted.
Because I intended these videos to be short, quick, and informative, the scripting would need to reflect that pacing and intent. I edited the script to make sure that sentences were as short and clear as possible.
Recording and post-production were done in Adobe Audition. I used Audition to normalize volume, filter the audio with an equalizer, trim out mistakes, noises, and dead air.
The motion-graphics heavy intro video was made in Adobe After Effects. The other, more content-heavy videos were made in Adobe Premiere Pro. Content for the videos was storyboarded in Figma, and Figma frames were exported as visuals for the videos themselves. Additional images were found online and added when an example was beneficial for instruction.
As part of my editing process, I recorded myself with OBS while creating and editing the first two videos of the course. You can watch me design in After Effects and Premiere Pro in real time on my YouTube channel:
View the Typography Course Videos