• Название:

    Davis Visual Design for Online Learning

  • Размер: 8.8 Мб
  • Формат: PDF
  • или
  • Сообщить о нарушении / Abuse

Установите безопасный браузер

  • Название: Visual Design for Online Learning
  • Автор: Davis, Torria

Предпросмотр документа

Table of Contents
Title Page
What Will You Learn?
About the Author
Chapter 1: How Do I Begin?
Start with What You Know
Designing Content Pages
Keep the Design L.I.T.E.
What's Next?

Chapter 2: How Do I Include
Images and Video?
What Are Copyright and Fair
What Is Copyright
Creative Commons
Determining Copyright
Where Can I Find Images?
The Search for Images
Displaying Images in Your
Best Uses for Images
Images to Motivate and

Create a Welcoming Course
Visual Cues
Consistent Types of Content
Establish a Positive Learning
Images to Showcase Lesson
Objectives and Learning
Incorporating Video in
Online Instruction
Video Hosting
Displaying Video

A Video-Based Discussion
What's Next?
Chapter 3: How Do I Facilitate
Instruction and Interaction?
How Can I Facilitate Online
Planning Group Projects
How Do I Provide
Instruction Online?
The Marshmallow Challenge
Lesson and the Direct
Instruction Model for
Teaching Skills, Facts, or

Foundational Principles
Case Study: The
Instructional Design of an
Introduction to Sociology
What's Next?
Chapter 4: How Do I Integrate
Readability and Legibility
Strategies for Displaying
Using Multimedia for
Using Multimedia for

Multimedia for Learner
Interactive Learning Objects
What's Next?
Chapter 5: How Do I Visually
Design a Course?
Evidence of Good Visual
What's Next?
Chapter 6: How Do I Support
Learners Online?

Where Is the Syllabus
How do I Check My Grades?
How do I Contact the
How Do I Get Technology
How Do I Get Help with
How Do I Use Specific
Course Features
Epilogue: Where Do We Go
from Here?
Appendix A: Syllabus Review
Syllabus Review Script for

Appendix A: Course Welcome
and Orientation Script
Course Welcome and
Orientation Script for
End User License Agreement

List of Illustrations
Chapter 1: How Do I Begin?
Figure 1.1 Too many
technologies with excessive
amounts of content take the

focus away from course
learning outcomes
Figure 1.2 The Online
Pictures icon in Microsoft
Office applications allows for
the convenient integration of
images in instructional
Figure 1.3 Until you develop
Photoshop skills, use
PowerPoint to remove image
backgrounds for a
transparent background
Figure 1.4 Four ways to
create a visual for an
instructional unit presented

Figure 1.5 The landing page
is the first page students see
in an online course
Figure 1.6 Landing page with
professor welcome video
Figure 1.7 A course menu
with a grouped navigation
scheme allowing quick
access to the links from
anywhere in the course
Figure 1.8 Reading objectives
displayed on an instructional
content page

Figure 1.9 Instructional page
with related instructional
materials in one content
item; the page also functions
as a submission page
Figure 1.10 Linking to
external content and
attaching instructional files
to the same content item
encourages a constructivist
approach to achieving a
learning objective
Figure 1.11 Linking to
external content and
integrating related content
items minimizes feelings of
being overwhelmed with

unfamiliar content
Figure 1.12 Line spacing and
length, font style and size
contribute to readability
through the creation of white
Figure 1.13 The text editor in
a Blackboard Learn
environment contains an
HTML icon in which to copy
and paste the embed codes
from a variety of web tools
Chapter 2: How Do I Include
Images and Video?
Figure 2.1 Representative
icons depicting permissions

granted through Creative
Commons licenses
Figure 2.2 Image with
Creative Commons license
information located at the
bottom of the web page
displaying the content
Figure 2.3 Works produced
by government agencies are
part of the public domain
Figure 2.4 Google can filter
images by license type
Figure 2.5 A Google image
search filtered by the
Creative Commons license
“labeled for reuse”

Figure 2.6 The Jing interface
showing a screen capture
tutorial with superimposed
text and shapes
Figure 2.7 The person on the
left has been cropped to fit in
the PowerPoint slide
Figure 2.8 Instructor
PowerPoint file repurposed
in a web tool with an embed
code to integrate into a
content item of an LMS
Figure 2.9 Images used as
digital badges to
acknowledge exceptional
work in the online

Figure 2.10 A course banner,
for an online teaching and
learning course, created
using free graphics and the
drag-and-drop features of the
Canva web tool
Figure 2.11 Icons used to
visually distinguish different
types of instructional content
Figure 2.12 First content
page in each of eight learning
modules begins with the
week's agenda
Figure 2.13 Repeated content
elements are enhanced by

visual cues
Figure 2.14 Student Studentcreated meme from a home
photo submitted to the blog
space for course
Figure 2.15 Discussion board
tool used for student meme
submissions. Peer responses
to the student's meme were
not solicited or required
Figure 2.16 Splash page to
learning module displays
images of a seminal
contributors and copyright
permissions from the alt text

Figure 2.17 Instructorcreated lecture uploaded to
YouTube and embedded in
Blackboard using the
mashup feature
Figure 2.18 Free web tool
used to screencast an
instructor's PowerPoint
presentation, upload to a
video sharing site, and
embed in Blackboard
Figure 2.19 Embedded and
active text-linked videos with
uploaded transcript files for

Figure 2.20 YouTube playlist
makes multiple videos
accessible from the same
location while minimizing
the number of content items
Figure 2.21 Video-based
discussion forums with
comprehension and higherorder thinking questions
Chapter 3: How Do I Facilitate
Instruction and Interaction?
Figure 3.1 A titled discussion
forum with a relevant image
used as the discussion entry
point along with response

Figure 3.2 One way to hold
learners accountable for
contributing to the group
Figure 3.3 First of four parts
of a major project scaffolded
throughout an eight-week
Figure 3.4 Group space
prepared in advance for the
four conversations needed to
complete the group project
Figure 3.5 Google form
embedded on a content page
to collect student responses
to a quiz
Figure 3.6 Google

presentation embedded in
the small group discussion
space for synchronous or
asynchronous collaboration
Figure 3.7 Module entry
point contains video message
from instructor and lesson
Figure 3.8 A table used to
manage alignment of text
and video
Figure 3.9 The word EMBED
will be replaced with code in
the HTML code view
Figure 3.10 A comparison
tool used to see what

students know about the
concepts of science and
engineering prior to
Figure 3.11 The image
description field is where alt
tag text is placed for screen
readers to verbally describe
an image
Figure 3.12 PowerPoint
presentation of design
challenge directions
uploaded to SlideShare and
embedded in the content
Figure 3.13 Blog space where

students post evidence of
design challenge completion
and respond to instructor
questions about the
Figure 3.14 The amount of
content is managed by
combining the video and
forms in the assignment
submission space
Figure 3.15 Blog space
created to confirm student
understanding and provide
Figure 3.16 Excessive content
in week one can be visually

Figure 3.17 Two short videos
required for the assignment
were merged into the
VoiceThread player, reducing
the number of content items
Figure 3.18 Merging reading
objectives into the quiz space
helps prevent ​content
Figure 3.19 Content was
reduced from more than
sixteen items to four by
minimizing use of new
technologies, eliminating
nice-to-know content,

streamlining related content,
and separating supplemental
from required resources
Chapter 4: How Do I Integrate
Figure 4.1 The text in this
images is legible.
Figure 4.2 White space
contributes positively to
Figure 4.3 Use the table
feature to format multimedia
Figure 4.4 Text editor view of
the content page shown in
Figure 4.3

Figure 4.5 Adobe Captivate
file output as SCORM file
and uploaded to Blackboard
with reporting features
connected to grade center
Figure 4.6 Venn diagram
used to apply the metaphor
technique to recall
Figure 4.7 Folder created in
file manager contains elearning zip file
Figure 4.8 E-learning zip file
Figure 4.9 From the
extracted files, the html web

page is identified and used to
create the URL
Figure 4.10 E-learning file
created using Camtasia
uploaded to instructor
Figure 4.11 Interactive chart
used as a diagnostic
assessment, created using
Figure 4.12 VoiceThread used
as a formative assessment
Figure 4.13 Rubic shows
relative weighting of
evaluation criteria

Figure 4.14 Home page of a
course built on Google Sites
Figure 4.15 Storyboard slides
used to create context for a
learning scenario
Figure 4.16 Separate images
of model and office scene;
PowerPoint used to remove
the model background and
superimpose on office
Figure 4.17 PowerPoint can
be used to create nonlinear
presentations responsive to
user input
Figure 4.18 YouTube can be

used to host videos of
decision-making points in a
Figure 4.19 caption Screen
shot of floor plan
incorporated into a learning
object overlayed with
buttons for interactivity.
Chapter 5: How Do I Visually
Design a Course?
Figure 5.1 Entrance to the
learning module contains the
learning objective, a unit
title, and an image that
relates to the unit objective
Figure 5.2 Test feature of

Blackboard used to
implement part of the
concept attainment model of
Figure 5.3 The iframe
discussed in chapter three
used to embed a Google
document on the content
Figure 5.4 Interactive wall is
the focal point of the content
page, with links to instructor
presentation and the
interactive wall outside the
Blackboard environment
Figure 5.5 Instructor

PowerPoint slides uploaded
to VoiceThread, explaining
the steps of the concept
development model
Figure 5.6 How the
interactive wall might look
after the classification and
labeling exercise of the
concept development model
Figure 5.7 The survey tool is
used to elicit students'
known color preferences for
possible use in color
selection when designing
content pages in the
cumulative assignment

Figure 5.8 Color exploration
simulation from a website
embedded in the content
page using the iframe from
Chapter Three
Figure 5.9 Guided questions
from the higher level of
Bloom's Taxonomy facilitate
the color exploration
Figure 5.10 Graphic
organizer used to facilitate
independent exploration
Figure 5.11 Introductory
image slide of narrated
instructor presentation with

transcript provided
Figure 5.12 Landing page and
navigational page are the
same, with quick access links
to learning modules on the
course menu
Chapter 6: How Do I Support
Learners Online?
Figure 6.1 Microsoft Word
style guides enhances
document navigation for
those using assistive devices
and for those looking for
specific content
Figure 6.2 Use headings in
text editors whenever

possible to enhance
navigation through large
amounts of text
Figure 6.3 Text version of
student view of course
syllabus in Blackboard
rendered with the Fangs
Screen Reader Emulator
browser add-on
Figure 6.4 Screen shot
tutorial for students showing
how to access grades and
instructor feedback
Figure 6.5 Arrangement of
multimedia on the content
page to facilitate contact with

the instructor
Figure 6.6 Screen shot
tutorial showing how to
release browser security
when an instructor video
doesn't display
Figure 6.7 Private Facebook
group for late night and early
morning peer-to-peer
Figure 6.8 Screenshot
tutorial explaining course
Figure 6.9 Screen shot
tutorial explaining the use of
the text editor

List of Tables
Chapter 5: How Do I Visually
Design a Course?
Table 5.1 Sample rubric for
the cumulative activity,
designing a set of content

Jossey-Bass Guides to Online
Teaching and Learning

Visual Design for
Online Learning
Torria Davis

Copyright © 2015 by John Wiley & Sons,
Inc. All rights reserved.
Published by Jossey-Bass
A Wiley Brand
One Montgomery Street, Suite 1000, San
Francisco, CA 94104-4594
No part of this publication may be
reproduced, stored in a retrieval system, or
transmitted in any form or by any means,
electronic, mechanical, photocopying,
recording, scanning, or otherwise, except
as permitted under Section 107 or 108 of
the 1976 United States Copyright Act,
without either the prior written permission
of the publisher, or authorization through
payment of the appropriate per-copy fee to
the Copyright Clearance Center, Inc., 222
Rosewood Drive, Danvers, MA 01923, 978-

750-8400, fax 978-646-8600, or on the
Web at www.copyright.com. Requests to
the publisher for permission should be
addressed to the Permissions Department,
John Wiley & Sons, Inc., 111 River Street,
Hoboken, NJ 07030, 201-748-6011, fax
201-748-6008, or online at
Limit of Liability/Disclaimer of Warranty:
While the publisher and author have used
their best efforts in preparing this book,
they make no representations or
warranties with respect to the accuracy or
completeness of the contents of this book
and specifically disclaim any implied
warranties of merchantability or fitness
for a particular purpose. No warranty may
be created or extended by sales
representatives or written sales materials.
The advice and strategies contained herein
may not be suitable for your situation. You

should consult with a professional where
appropriate. Neither the publisher nor
author shall be liable for any loss of profit
or any other commercial damages,
including but not limited to special,
incidental, consequential, or other
damages. Readers should be aware that
Internet Web sites offered as citations
and/ or sources for further information
may have changed or disappeared between
the time this was written and when it is
Jossey-Bass books and products are
available through most bookstores. To
contact Jossey-Bass directly call our
Customer Care Department within the
U.S. at 800-956-7739, outside the U.S. at
317-572-3986, or fax 317-572-4002.
Wiley publishes in a variety of print and
electronic formats and by print-on-

demand. Some material included with
standard print versions of this book may
not be included in e-books or in print-ondemand. If this book refers to media such
as a CD or DVD that is not included in the
version you purchased, you may download
this material at
http://booksupport.wiley.com. For more
information about Wiley products, visit
Library of Congress Cataloging-inPublication Data
Davis, Torria, 1966Visual design for online learning/Torria
pages cm
Includes index.
ISBN 978-1-118-92243-9 (paperback),
978-1-118-92245-3 (ePDF), 978-1-118-

92244-6 (ePub)
1. Internet in education. 2. Instructional
systems--Design. 3. Visual
communication. I. Title.
LB1044.87.D384 2015
Cover design by Wiley
Cover image: ©iStock.com/artishokcs
First Edition

To my colleagues, near and far,
and to those I haven't met yet

In the year leading up to the writing
of this book, I was blessed with the
opportunity to view over two
hundred courses for award
nominations. The insights shared
throughout the book have been
gleaned from this experience and an
ever-expanding professional
network of educators, information
technology professionals, web