Multimedia Design

, , , &
MeansUniversal Design LearningDigital ToolsPodcasts

Teens today spend, on average, 8.5 hours every day consuming media (Common Sense Media, 2021). Similarly, “American adults spend over 11 hours per day listening to, watching, reading or generally interacting with media” (The Nielsen Company, 2018, para. 2).

Boys looking at their smartphones

In a world where media consumption is deeply embedded into nearly everyone’s life, it is essential that your website offer the same type of multimodal learning experience. Multimedia can increase the appeal of the website, while also offering visitors different ways to connect with and explore the site content. 

Consider the Universal Design for Learning (UDL) framework, which was designed to “improve and optimize teaching and learning for all people based on scientific insights into how humans learn” (CAST, Inc., 2019, para. 1). One of the three UDL principles is Multiple Means of Representation - providing learners with more than one way to access and learn content. When you provide videos, podcasts, or images that present the text-based information in a multimodal format, you are giving the viewer a choice in deciding how to explore the information. 

Visual of different media icons, such as a camera, audio icon, and YouTube

In Chapter 3 you will find tips, resources, and tools for using media designed by others on your website without infringing on copyright. This chapter focuses on how you can create your own multimedia to enrich the way you present and communicate the information on your site.

The chapter will start with a brief overview of design techniques and then will be followed by a showcase of digital tools for creating audio, video, and images for your site. 

Multimedia Design

It's easy to design digital media with the tools available today, however, designing digital media that positively impacts learning (aka whether visitors acquire information from your site) is quite challenging. This section will provide some tips and strategies for creating effective multimedia. 

First and foremost, design with your audience in mind (see: Getting a scientific message across means taking human nature into account).

Consider any myths or misconceptions your audience might have about your topic and make sure to debunk those first! Researchers have found that students are less likely to watch a science video when they think they already know the information from the video, even if their knowledge is incorrect (Helll-ooo! Watching Videos Does Not Necessarily Lead to Learning).

Here are some more tips to creating more impactful media products:

Heath & Heath's Made to Stick Principles

The following principles provide a valuable guide to designing captivating media:

Multimedia Learning Principles

Through extensive research based on how multimedia impacted college students' learning, Richard Mayer (2009) developed 12 guiding principles for the design of multimedia. The following bullet point list is a synthesis of the key points from these principles:

For an in-depth overview of the 12 principles, visit Davis and Norman’s (2016) Principles of Multimedia Learning article. Also, take a look at the Principles of Accessible Multimedia Learning (Hinderliter, 2022). Keeping these principles in mind can help you create media that enriches, rather than detracts from, the content on your site. 

Designing Audio for Your Website

Audio is one of the most common ways to keep your audience engaged. In classrooms, learners listen to their peers and the instructor. However, websites tend to overemphasize text and underemphasize the power of audio. One of the major advantages to using audio over text is the use of high pitches, low pitches, tones and inflection to match the context of the subject matter being taught. People tend to process auditory information quicker and easier than similar information in a text-based medium (to learn more, explore The Use of Audio in eLearning site). Your audio could be an instructional clip, an interview, a narrated story, or a podcast. In this section, we’ll cover the basics of how to record audio using the free online tools and software programs: Vocaroo, Online-Voice-Recorder, and Audacity

Design Tip

Before you proceed to record your audio file, make sure you are in a quiet location without any background noise. Use an external microphone, such as a lavelier or shotgun mic, rather than your computer or smartphone mic to capture higher quality sound. Pay attention to any external noises such as a person walking by, a door shutting, a car starting - as these can ruin an audio file.

Tool #1: Vocaroo

Vocaroo is a popular and intuitive flash-based tool for recording audio clips. Simply visit Vocaroo.com and select “Click to Record” to start creating an audio file. 

Clicking on the recording button on Vocaroo

That’s it! You can now download your recording as an mp3 or WAV file or share it via a link. If you’d like to re-record, you may do so. 

Tool #2: Online-Voice-Recorder

Similar to Vocaroo, this is an online voice recording tool that is convenient and simple to use. You can also use this site to trim your recording and save a particular section. Head to Online-Voice-Recorder, click the red microphone icon, and start your recording. 

Screenrecording of the online voice recorder website

You can now Save the file in an mp3 format.

Tool #3: Audacity 

Audacity is a more complex multi-track audio recorder and editor. It is also a free and open-source software. Unlike other online tools, Audacity is a program that needs to be downloaded to your computer before you can record your audio files. Visit the Audacity Download page and to get the software for your computer. While the basic recording function is virtually identical to that of the prior two resources, it’s highly suggested that you take some time to familiarize yourself with the more advanced features (such as noise cancellation) if you choose to use Audacity.

auda1.gif

Using Audacity, you can export your recording in various formats, including mp3, WAV, and OGG. Here is how you Export your file.

Screenrecording of how to export an Audacity file

Audio Design Tips and Tricks

  • Do a test run by recording a short bit of audio and playing it back to hear how it sounds. 
  • Anticipate the sounds you might hear during the recording (e.g., a person walking by your recording area or a plane flying overhead) and make adjustments to avoid noise.
  • Stay close to the microphone, but not too close (hold the mic about 6 inches or a fist-width away from your mouth).
  • Avoid typing on the keyboard while recording to avoid distracting keystroke noises.
  • Don’t breathe heavily into the mic.

Designing Video for your Website

A properly made video will mesmerize your website visitors. Videos have become the most popular instructional tool and being able to provide your learners with videos like Khan Academy or Ted-Ed will make your website more engaging and appealing. Designing a video can be time consuming, and sometimes frustrating, but with the right tools and design skills, anyone can make captivating videos. The following section features two web-based design tools for creating videos: Adobe Spark and Screencastify. You can also use software, such as iMovie, Adobe Premiere, Shotcut (free), Windows Video Editor, or Final Cut Pro, to edit together professional quality videos. 

Tool #1: Adobe Spark (now Adobe Express)

Adobe Spark is a free online tool that lets you create beautiful videos, images, and web pages. This video-making software allows you to create compelling video stories quickly by piecing together slides of visuals with audio. Here is how you use it: 

  1. Visit Adobe Spark and create a free account. 
  2. After you sign in, click the blue “+” icon at the very top of the screen and select “Video”. 
  3. You will now be prompted to pick a story template or you may start from scratch. 
  4. Pick any template and you will be brought into the video editing mode. 

This editing mode is comprised of three elements - the timeline area (at the bottom), the styling area (on the right), and the main video content area (in the center).

Screenshot of Adobe Spark video editing mode

Add new slides to the video by clicking the “+” icon in the timeline area.

Change the layout of each slide from the styling panel and control how long each slide plays from the timeline panel.

Add Creative Commons music, images, and videos to your movie from the styling area.

You can also upload your own images (jpeg and png), videos (mp4 and mov), and background audio (mp3). When your video is complete, you can download the video in mp4 format or share it via a URL. Any time you’d like to make modifications to your video, you can login to Adobe Spark on a computer or smart device and make changes and download the new video instantly. 

Tool #2: Screencastify 

Screencastify is a screen recording extension for Google Chrome. It is a light-weight, powerful, and easy-to-use screen recorder. However, it has a time limit of 10 minutes per recording with the free account. To get started, you must download and install the Screencastify extension on your Chrome Browser. Click on the Screencastify icon in the top right corner of your web browser and sign in with your Google account. 

Screencastify google chrome browser logo

This will let you save all of your screen capture footage to your Google Drive. Now, click the icon again and you can start recording the action. 

Screencasting recording features

All your recording sessions will automatically be saved on your Google Drive account. 

Video Design Tips and Tricks

  • Keep your videos short (e.g., 3-5 minutes). 
  • Use the design principles discussed earlier in this chapter to capture and maintain the attention of your learners as they watch your videos. 
  • Don’t use any copyrighted images or visuals in your video. Search for Creative Commons resources from Pixabay, Videezy, Unsplash, and more (e.g., Guide to Finding Media for Classroom Projects). Make sure to give proper attribution when using any Creative Commons licensed materials (review Chapter 3). 
  • Use the YouTube Audio Library or Unminus to find Creative Commons background music. Give attribution as needed. 
  • If you include background music, make sure it’s not too loud, otherwise, it’ll distract the viewer. 

Designing Images For Your Website

Research has shown that images are more powerful and memorable than text (see: Pictures Move People More than Words Emotional images can change people's behavior, while similarly charged words do not).

Every page on your website should have at least one image to complement and enrich the text (if you need help figuring out how to select or design an image that complements the text, visit Chapter 3).

Before exploring this section, read What Makes Good Design? Basic Elements and Principles to learn basic visual design techniques. In the following section, you will learn about 3 digital tools for creating images: Pablo, Canva, and Adobe Spark. 

Tool #1: Pablo 

Pablo is a commonly used tool for creating quick web banners with custom text.

To get started: 

  1. Visit the Pablo website.
  2. Select an image. 
  3. Double click on the image to add text.
  4. When you are done, click on Share & Download button at the bottom of the screen to download the picture in a jpeg format.
Screenrecording of Pablo tool

Tool #2: Canva 

Canva is a free website for designing professional quality images and graphics. Canva offers pre-made templates that you can customize, such as posters, social media graphics, infographics, and flyers. When you get to the website it will ask you to sign up with your email. Once you sign in, it will ask you invite friends to see your work but you can skip over that part and get started with the process of creating custom images and graphics. Click on any template, then double-click on any text/image to edit. When you are done creating your masterpiece, you can download it as a jpg, png, or pdf. 

Screenshot of canva design tool

Tool #3: Adobe Spark

Spark (covered in the video section) is similar to Canva in regards to the creation of images. It offers pre-made templates that you can adjust and customize yourself. You can easily integrate Creative Commons and Public Domain images into your graphic. To get started, click the “+” sign and select Graphic. Select a template to use or start from scratch. When you are done, you can download the image to your desktop or share it via a URL. 

Screenshot of adobe spark image editor

Image Design Tips and Tricks

Chapter Overview Video

Additional Design Tools and Resources

References

Berger, J., & Milkman, K. L. (2012). What makes online content viral?. Journal of Marketing Research, 49(2), 192-205.

CAST, Inc. (2019). CAST: About universal design for learning. Retrieved from https://edtechbooks.org/-uTp

Common Sense Media. (2018). The common sense census: Media use by tweens and teens. Retrieved from https://edtechbooks.org/-qHL

Heath, C., & Heath, D. (2007). Made to stick: Why some ideas survive and others die. Random House.

Mayer, R. E. (2009). Multimedia learning (2nd ed.). Cambridge, England: Cambridge University Press.

Nielsen. (2018). Time flies: U.S. adults now spend nearly half a day interacting with media. Retrieved from https://edtechbooks.org/-SBR

Previous Citation(s)
Satish, S., M.F., J.M., & Trust, T. (2019). Multimedia Design. In T. Trust, Web Design Basics for Educators. EdTech Books. Retrieved from https://edtechbooks.org/webdesign/multimediadesign

This content is provided to you freely by BYU Open Learning Network.

Access it online or download it at https://open.byu.edu/userguide/multimediadesign.