Shaelynn Long-Kish, Instructional DesignerMid Michigan Community College

Building Beautiful Courses: Layouts, Lessons, Blocks, & Books

Workshop Goals

When you leave here today, you’ll be able to:● Use visual elements to enhance the course experience.● Utilize best practices for visuals and Moodle elements.● Use headings & colors to designate and organize.● Enhance/re-envision content with images, graphics,

color schemes, etc.● Use Moodle elements in new ways.

LayoutsSingle Activity One activity/resource per shell. Useful for: Courses with a single, major project.

Social Discussion forums only. Useful for: Courses with a significant focus on discussions. Great for sharing projects (because students can attach files or share URLs)!Not useful for: Online courses or courses where assignments need to be uploaded.

Topics - All Sections On One Page

Shows the entire, topic-based shell on a single page.

Useful for: Courses with just a few units, activities, resources, and/or text-based summary boxes.

Topics - One Section Per Page

Shows the outline of the course with the topics hyperlinked (which show up on a new page when selected).

Useful for: Courses with lots of activities, resources, and/or text-based summary boxes.

Weekly - All Sections On One Page

Shows the outline of the course with the entire weekly calendar.

Useful for: Courses with a few activities, resources, text-based summaries within the weeks.

Weekly - One Section Per Page

Shows the general outline of the course with a hyperlinked calendar listing.

Useful for: Courses with lots of activities, resources, text-based summaries within the weeks.

Social Format Example

Topic Format Example

Weekly Format Example

Layout: All Sections

on One Page

Layout: One Section Per

Page

Find free photographs online that you can incorporate within your Moodle shell.

Randomizes three colors once you click “spin” and gives inspiration for color themes and provides a hex-color code.

One of the most powerful icon websites currently online. join for free and be sure to give attribution for the artists’ work.

Upload an image to Color Palette Generator and it will randomly select prominent colors within said image and conjure up a cohesive color theme.

Course & Design Elements

Quick Guide to Making an Image

1. Download & save your image. (i.e. from The Noun Project)

2. Open up Google Presentations, MS Word, or Keynote. (Try to avoid MS Paint, if you can. It doesn’t seem to work well with the .png Noun Project images.)

3. Make a shape and fill it in with some color. (I like circles and squares.)

4. Take the image you saved (from Noun Project) and layer it on top of the colored-in shape.

5. Use a snipping tool to “cut” out just the colored shape with the image layered.

6. Save that new image.

Several people asked me about how I make my images. In no way is this the “proper” way to make an image, but it’s quick & easy.

Lessons

Benefits:● Organized● Streamlined● Interactive● Engaging

Parts of the Lesson:Adding a Content PageUseful for:

● Sharing videos● Linking to external or internal sites● Composing text

Adding a QuestionUseful for:

● Checking for understanding● Getting feedback● Polling

LessonsFirst: Name your lesson

Options: You can choose to use a progress bar

● Students know their progress while completing the lesson.

● Instructors can see how much of a lesson a student completed.

Lessons

Content Page: Used to embed videos, link to external/internal sites, compose text, house a reading.

Question Page: Used to check for understanding, get feedback, quiz, or poll students on a video, reading, notes, etc.

Import Question: Import questions from a file on your computer to use on a question.

Blocks

● Text-Based Information● Resources/Hyperlinks● Instructor Information● Image-Based Hyperlinks to External Content● Image-Based Links to Internal Content

Blocks ExplainedBlocks can utilize hyperlinks that are:

● text-based● image-based

1.Start by creating an HTML Block.

2.Use the summary box to upload images

or text, then hyperlink said content.

3.Finish by entering a relevant Block Title.

Create a new HTML box:

An example of image-based hyperlinks.

Orphaning Activities Related to Image-Based Hyperlinks

Note: This tutorial will only be helpful if you require users to access your content via image-based hyperlinks. If you want users to be able to access items via image OR the item itself, you don’t need to do this.

Link to Video Tutorial (YouTube)

Books

Course Syllabus Keeps information organized and easy-to-locate, particularly if chapters are used to break information down. *Can Break up the text with videos or use the book as a hypertext of sorts.

Video Warehouse Uses the Book feature to house videos in an organized fashion.

Project “Folder” Uses the feature to house all information relating to a particular project.

etc. Get creative!

Books Continued

To create a book:1. Under add an activity/resource, choose Book from the

Resources portion.2. Enter a Name/Description of the Book.3. Click the created Book to add content via chapters. This

content can include text, images, videos, etc.4. Incorporating different chapters can break up content well

and keep the student engaged throughout.

add chapters using this button

Distance Learning & Instructional Design (DLmid)

Mid Michigan Community College