Online Studies: Blog

Creative Considerations for Course Design

Incorporating Images

Have you ever looked at a website with very little color or imagery and decided to click around to something better? Or how about a course with images that don't seem related to anything useful - inspirational poster anyone? That's a challenge we face as we design courses, similar to how website developers take careful consideration of their graphic design. Cyr, Head, Larios, & Bing Pan (2009) findings support how images can shine a positive or negative light on website content, specifically advising to include diversity and human elements and to avoid seemly random clip art or stock imagery. This makes even more sense as you begin to think of your online course shell as less a repository of static files but a storytelling journey through your subject matter.  Baldwin and Ching (2017) emphasize designing with the narrative in mind when deciding the size, placement, and overall presentation of your media. There are two graphics that you may want to consider for your future course designs.

Banners & Video Thumbnails

Let's start with an opening image - the banner. Banners are usually the opening act for your content so, in many cases, they are what draws the eye to your text, video, or activities. To follow the design research considerations, banners shouldn't be too involved, but rather a visual representation of your content that can spark interest and connections for your students. 

Next, let's think about all the new video content being created. You take great care with your scripting and screencasting, one last polishing step is adding a thumbnail once you've uploaded it to your hosting service (YouTube, Stream, etc.) You may wonder, what is a thumbnail and why is it so important? A thumbnail is a static image that shows while a video is embedded on a webpage. This is a much cleaner look than a frozen image of you talking during the video.

Templates and Tools

Canva is an easy tool to start creating simple banners and thumbnails. You can create a free account and search from many different templates - remember, you don't have to be a graphic designer - then adjust to fit your style. Wondering how easy it is to edit these templates? The short tutorial videos below will give you insight into how quick and painless the process can be.

Canva Editing Ease

YouTube Video Thumbnails

Adding a Banner to a Falcon Online using an HTML Template

Pro Tips

I've also picked up a few tips and tricks that may help you along the way. Here are a few pro tips to keep in mind:

• Size
  • With the free account, this is important to get right at the beginning because you can't resize afterward.
  • Banners are best with a wider width but short height so you don't take up too much scrolling space from your content. A custom-size banner I've had success with, especially in the Table of Contents widget, is around 1275 x 400 px.
  • Using dimensions in pixels (px) instead of inches (in) may load better since pixels are meant for screens instead of print.
• Templates
  • Banners - LinkedIn banner (1584 × 396 px) or Twitter header (1500 x 500 px).
  • Video thumbnails - YouTube thumbnail size (1280 720 px) as the standard.
• Color
  • Accessibility is important here - remember to have high contrast between your background color and text color (opposite shades - light on dark and vice versa).

Jasmine Checchi
Instructional Designer, Division of Online Studies
jasmine.checchi@daytonastate.edu | 386-506-4278
Online Studies | Faculty Innovation Center (FIC)