Storyboard

for eLearning Project

Introduction to Art

Betty Chen
05 February 2017
Project name: Introduction to Art Screen ID: H1.1 Screen 1 of 1 Date: 05-Feb-2017

Navigation info
MESSAGES 1 Main navigation menu (left hand side
Introduction to Art of page/hamburger menu on smaller
TO DO 3 mobile devices) includes links to
Welcome. Watch this video to learn more about the course and its objectives. Messages, To Do, Syllabus, and Help
SYLLABUS pages. Clicking on Help will reveal
sub-menus for FAQs, Settings, and
HELP Support. The GO buttons in
FAQs Assignment column will take learner
Settings to those assignment pages. The
Support paper icons will open reports for
graded assignments with details
about scoring such as
comments/feedback and rubrics.
Video player has ability to go full
screen, caption button, time
information, and play/pause button.
Due
Assignment Progress Grades
Date Media information
Lesson 1.1 | Discussion Post GO 13-Jan X Past due 0 1. instructor_intro_video.mp4
(brief instructor-created video
about course overview and course-
Lesson 1.2 | Elements Studio Project GO 20-Jan ü Complete A
level learning objectives)

Lesson 1.2 | Principles Studio Project GO 20-Jan In progress n/a 2. instructor_intro_video.srt

(caption file for video)
Lesson 1.3 | Art Analysis GO 22-Jan Pending n/a

Lesson 2.1 | Discussion Post GO 27-Jan Pending n/a

Terms of use
Privacy notice

Notes: This eLearning storyboard is created without a specific LMS in mind. This is the homepage for the course after logging in. No audio narration will be provided for this
course. Videos, as appropriate, will offer multimedia engagement to improve learning. Assignment list (graded assessments only) with due dates, progress indication, and grades will
be listed here. Programmer - Make sure course has a responsive design so it can be used in any device, and course can be accessed in all major browsers (Chrome, Fire Fox, Safari,
Edge). Course also needs to meet WCAG 2.0 level AA for accessibility; therefore, screen readers will provide audio of any text and elements on screen. Terms of use and privacy notice
links must be included. Notification (number indicators) of new Messages and assignments (To Do page) should be provided. Only upcoming assignments (due this week) and any past
due ones should show up in the To Do page.
Project name: Introduction to Art Screen ID: C1.1 Screen 1 of 1 Date: 05-Feb-2017

Navigation info
MESSAGES 1 Introduction to Art: Course Syllabus Note that in left-hand main
navigation menu, the Syllabus button
TO DO 3 Instructor: Name, email address, and other contact information is filled to let user to know where he
or she is. Module or lesson tiles or
SYLLABUS Copyright information and course policies can be found in this PDF document: blades can be expanded to reveal
more details, and collapsed to hide
HELP details. They are listed in order of
FAQs LESSON ONE: Introduction and Visual Language LO preferred completion (learning path).
Settings There is a PDF download icon for
Support Lesson One Introduction
course policies. GO buttons are
L1.1 | Reading: Why is art important? LO GO provided for access to any of the
page/content listed. Hovering or
L1.1 | Discussion Post: Written Reflection LO GO clicking on any of the LO boxes will
LO bring up the associated learning
L1.2 | Video Series: Elements of Art and Design GO
objective(s) in a modal window. A
L1.2 | Self Quiz: Elements of Art and Design LO GO home icon button is available on all
pages.
L1.2 | Studio Project: Elements of Art and Design LO GO
Media information
L1.2 | Video: Principles of Art and Design LO GO
1. course_policies.pdf
L1.2 | Self Quiz: Principles of Art and Design LO GO
(detailed document with searchable
L1.2 | Studio Project: Principles of Art and Design LO GO text that includes details about
copyright of learning materials,
L1.3 | Feldman’s Method of Criticism LO GO evaluation/rubrics, accessibility,
academic integrity, and so on)
L1.3 | Written Art Analysis LO GO

Lesson One Summary LO GO

LESSON TWO: Process and Media LO

LESSON THREE: Global Art History Timeline LO
Terms of use
Privacy notice
LESSON FOUR: Theme and Functions of Art LO

Notes: This is the syllabus page that serves as a content index for this course listing lessons and their associated learning materials and assessments. Instructor info, and a PDF link
with grading policy, academic integrity, and other information generally found on a syllabus, will also be a part of this page. Complete content index can be found in this document
https://goo.gl/8vTYKR. For Module 1, which will be provided in more details in the following slides, have the following learning objectives: Examine the values and importance of
studying art by citing at least 3 reasons for studying it; Accurately apply at least 3 elements and all principles of art and design through hands-on application projects; and Deconstruct
works of art by applying Feldman's method and correctly using at least three visual elements and principles in your analyses.
Project name: Introduction to Art Screen ID: L1.2.1 Screen 1 of 5 Date: 05-Feb-2017

Navigation info
Elements Studio Principles
MESSAGES 1 videos (00
Self Quiz
(00 min)
Project (00 video (00
Self Quiz
(00 min)
Studio
Project (00 A progress indicator or bar at the
min) min) min) min) very top indicates where within the
TO DO 3 lesson (or sub-lesson) a learner is.

SYLLABUS Lesson 1.2: Principles of Art and Design Materials/pages that he or she has
visited and/or completed are shaded.
The progress bar also serves as a
HELP Watch this video, hosted by Elizabeth Jewell, on the design principles: Balance, navigation menu to get to earlier and
FAQs Proportion, Emphasis, Contrast, Pattern, Repetition, Movement, Rhythm, and later resources and assessments by
Settings Unity. (© KET 2014) clicking on one of the blocks. Since
Support learner will most likely be going
through the page top-down, a NEXT
button is provided at the bottom of
every page to proceed to next page
or task, but progress bar is also
option to move/jump around as
noted earlier.

Media information
1. ket_principles.mp4
(video file)

2. ket_principles.srt
(caption file for video)

NEXT

Terms of use
Privacy notice

Notes: This and the next few slides are for one learning activity, specifically sub-lesson 1.2 on the Principle of Art and Design. Lesson title needs to be clearly
presented at the top along with instructions on what to do with the learning resource or assessment presented. Estimated time on tasks should be provided within
the progress indicator to help students plan and manage their time. Learning objective for this activity is to accurately apply at least 3 elements and all principles of
art and design through hands-on application.
Project name: Introduction to Art Screen ID: L1.2.2 Screen 2 of 5 Date: 05-Feb-2017

Navigation info
Elements Studio Principles
MESSAGES 1 videos (00
Self Quiz
(00 min)
Project (00 video (00
Self Quiz
(00 min)
Studio
Project (00 If there is an image, a zoom
min) min) min) min) function is available.
TO DO 3
SYLLABUS Lesson 1.2: Principles of Art and Design
HELP Complete this self-quiz to test your understanding of the visual principles.
FAQs
Settings
Support Select the answer to the question.​ (Question 1 of 10)​

In this illustration, which principle of asymmetrical or informal balance is

shown?​

Media information
1. quiz_image_01.jpg
(illustration file)

2. quiz_image_01.txt
A smaller form is visually heavier than a larger form.​ (alt description for image)
A larger form is visually equal to a smaller form of the same color.​
A dark value small form is heavier than a larger light value form.​
A large form is visually heavier than a smaller form.​

Terms of use NEXT

Privacy notice

Notes: Programmer – Keep in mind accessibility for assessments such as quizzes. Keyboard navigation needs to be built in. Alt description (short and long) need to
be included for all non-decorative images used. There are 10 questions in this quiz, all set up in the same way as shown here.
Project name: Introduction to Art Screen ID: L1.2.3 Screen 3 of 5 Date: 05-Feb-2017

Navigation info
Elements Studio Principles
MESSAGES 1 videos (00
Self Quiz
(00 min)
Project (00 video (00
Self Quiz
(00 min)
Studio
Project (00 Clicking next will allow learner to
min) min) min) min) select an answer again in second
TO DO 3 attempt.

SYLLABUS Lesson 1.2: Principles of Art and Design

HELP
FAQs Try Again. (Question 1 of 10)​
Settings
Support ​In this illustration, which principle of asymmetrical or informal balance is
shown?​

Media information
1. quiz_image_01.jpg
X A smaller form is visually heavier than a larger form.​ (illustration file)
A larger form is visually equal to a smaller form of the same color.​
2. quiz_image_01.txt
A dark value small form is heavier than a larger light value form.​ (alt description for image)

A large form is visually heavier than a smaller form.​

HINT: Recall that balance…

Terms of use NEXT

Privacy notice

Notes: If a learner gets a question wrong, a hint box will appear to allow learner to try again. Programmer – Each question will offer two attempts before an
explanation shows up instead of a hint box and lets learner proceed to next question. That way, a learner will not get frustrated and give up on completing the
activity, which is meant to be a self-quiz or practice at this point.
Project name: Introduction to Art Screen ID: L1.2.4 Screen 4 of 5 Date: 05-Feb-2017

Navigation info
Elements Studio Principles
MESSAGES 1 videos (00
Self Quiz
(00 min)
Project (00 video (00
Self Quiz
(00 min)
Studio
Project (00 Links and icons provided for listed
min) min) min) min) learning resources. They open in
TO DO 3 new tab or window within browser.
Learner can also use progress bar to
SYLLABUS Lesson 1.2: Principles of Art and Design navigate back to video as well
instead of clicking on URL link. Self
HELP Quiz Summary Quiz would still be marked as
FAQs You got 4 out of 10 questions correct. completed or visited in the progress
Settings bar for the lesson (or sub-lesson) if
Support These are the topics you should review: a learner moves to an earlier task
•Balance within this learning activity.
•Rhythm
•Variety

You may want to watch the video on visual principles again before proceeding.
[URL Link]
Media information

Additional Resources
Review these materials if you did not get all the quiz questions correct. Use these
materials along with the video you had viewed for the next task and for future
ones throughout this course.

•Getty’s one-page summary list of the design principles [URL Link]

•A visual representation of the design principles [URL Link]

Terms of use NEXT

Privacy notice

Notes: Summary page with results and recommendations based on self quiz performance. Programmer – This is a personalized page that will require metadata for
all the questions and learning resources to generate proper recommendations and messages. Additional Resources section shows up for all learners regardless of
quiz score.
Project name: Introduction to Art Screen ID: L1.2.5 Screen 5 of 5 Date: 05-Feb-2017

Navigation info
Elements Studio Principles
MESSAGES 1 videos (00
Self Quiz
(00 min)
Project (00 video (00
Self Quiz
(00 min)
Studio
Project (00 File upload icon allows learners to
min) min) min) min) submit assignment. A pop-up box
TO DO 3 will allow user to browse for file or
drag and drop one. There should be
SYLLABUS Lesson 1.2: Principles of Art and Design an OK or Attach button plus
message to confirm file upload. If
HELP Studio Project learners run into issues with file
FAQs Divide a piece of paper into 9 rectangles (see diagram). Using only a pen, pencil, or upload functionality, there is a link
Settings marker, demonstrate your understanding of each principle of art and design with a to FAQs about this topic.
Support drawing using only lines and circles. You can also use a drawing app or program to
complete this activity. Upload a PDF of your completed work for grading.

For help with file uploads and support: [URL Link]

Media information

UPLOAD
Terms of use NEXT
Privacy notice

Notes: This slide presents the final task, a file-upload assignment, for this learning activity (sub-lesson) on the principles of art and design. Programmer – Allow the
following file types for upload: PDF, Word, RTF, mp4, JPEG, and mp3 even though in this assignment, PDF is specifically requested. Provide file requirements and
recommended size in a FAQ link. This link should lead learner to appropriate section within the course’s FAQs page.
Project name: Introduction to Art Screen ID: S1.1 Screen 1 of 1 Date: 05-Feb-2017

Navigation info
MESSAGES 1 Lesson One Summary NEXT button takes learner to next
lesson. For all images, zoom
TO DO 3 Watch this video for a recap of the key points presented in this lesson. functionality is provided. For any
third-party image, URL link can be
SYLLABUS accessed to original source by
clicking on image itself.
HELP
FAQs
Settings
Support

Review. Take a look at this painting titled Fan Tan by Friedel Dzubas. Ask yourself:

• What obvious visual qualities can be seen in this work?

What do you see in the work of art?
• What elements and principles stand out? How does the
use of color work here? What’s emphasized?
• What is the importance of studying a work of art such as Media information
this one? 1. instructor_summary_video.mp4
(brief instructor-created video to
review lesson’s learning objectives
and topics covered)
George A. Hearn Fund, 1973

2. instructor_summary_video.srt
References
The 6 Principles of Design. (n.d.). Retrieved January 29, 2017, from http://visual.ly/6-principles-design
(caption file for video)
Jewell, E. (n.d.). Principles of Design. Retrieved January 29, 2017,
from http://ny.pbslearningmedia.org/resource/459077ac-6d7d-4eef-bd7e-e38d12e7ce97/principals-of-design/ 3. dzubas_image.jpg
The MET Collection. (n.d.). Retrieved January 29, 2017, from http://www.metmuseum.org/art/collection (image used here for review)
Principles of Design [PDF]. (2011). Los Angeles: The J. Paul Getty Museum. Retrieved January 29, 2017,
from http://www.getty.edu/education/teachers/building_lessons/principles_design.pdf
Terms of use 4. dzubas_image.txt
Privacy notice (alt description for image)
NEXT

Notes: This slide shows the summary page for an entire lesson or module. Here is a good instance to include an instructor video to enhance learning besides reading
text. Caption is provided for video. For a self-check or review, a work of art is presented with a series of questions linked to objectives of Lesson One. The summary
page also presents a list of references (condensed here) with full citations of materials used in the lesson/module.
 Evaluation Guidelines

• Does the storyboard cover all the necessary content? If not, what’s missing?
• Is there enough (or too much) material to make learning memorable and applicable?
• Is navigation and learning path clear starting with the home page, transitions from lesson to
lesson, and for the sample learning activity presented in the storyboard?
• Is the pacing for the sample learning activity appropriate (entire activity on Principles of Art
and Design is estimated to take about an hour to an hour and half)?
• Are all learning resources and assessments (assignments) presented in a manner that’s
engaging and easy to follow?
• Are there areas where more graphics (or other media) could be used to enhance or improve
learning? Where specifically, and how would the graphic or media serve to improve the
learning experience?
• Does any of the elements presented in the storyboard create obstacles or stress for the
learner to complete assignments and the course itself? Is the experience enjoyable?
 Summary: Reflections and Revisions
• Storyboard, while some may view as unnecessary, is a good way of combining all the elements from planning
stages to start building out your eLearning program. It’s useful in getting some initial user feedback without
creating high fidelity wireframes or prototypes, and without spending resources on technical development which
can be difficult to make changes. I also find it useful in tracking the resources (files) that be needed and creating
drafts of narration (if any will be included), etc.
• Based on Ruth Clark’s article about the six principles of effective eLearning and Christopher Pappa’s article on
neuroscience principles for instructional designers, I tried to include visuals and other multimedia wherever
appropriate and also to add some visuals for better learning and engagement without overloading the page at the
same time with unnecessary distractions. Black text on white background keep things simple with visuals
strategically placed. Including multimedia gets the brain to respond different but overly floral and colorful
decorative features may take attention away from necessary learning elements. Navigation elements visible on
page are also kept to a minimum. Instructor videos and other videos with captioning will allow learners to see,
hear, and read all at the same time versus just reading text on page or hearing audio narration. Given this is an art
course, videos and visuals are appropriate and necessary to discuss and show what elements and principles are
and how to look for them in works of art. In addition, including visuals within assessments will improve learning
than simply answer multiple choice questions of text on screen alone. A lot of work is involved with learning to
balance elements on a page while keeping things interesting. It’s challenging, but a productive and fun activity.
• In revising my work based on feedback, I noted this is ideal design and workflow without an LMS in mind;
preferably, this eLearning course would be built from scratch. I included all the objectives for this particular
module for context to those reviewing this storyboard, and looked at where I can tighten up design, text on
screen, and so on based on looking at others’ storyboard. Keeping things simple, yet rigorous will help keep
learners focused and engaged, and improve learning. It’ll also help reviewers be able to follow workflow and check
content accuracy more readily, which I find to be main purpose of creating storyboards.