PLEASE NOTE: While the following can still be used to accomplish "spicing up" your course design, these types of things can now be done in an easier way using DesignPlus tools.

Some design elements I apply in courses to "spice things up" or facilitate reading or gain learners' attention include:

Banners on the home page and for discussions
Graphics as buttons (only 1 on a page though)
Callout (or "shadow") boxes
Light color background behind a section of text

Below you can see examples of each. If you want to schedule a time to walk-through the redesign of one of your pages or assignments, I'd love to collaborate! bit.ly/MeetWithSargent

Questions about design, or your own examples of these elements, can be posted to the Faculty Lounge open discussion forum.

You can explore additional resources from the Center for Transformative Teaching & Learning at Skyline College and lots of copy/paste code examples from Penn State.

Graphics created with Canva

Create a free account

Easy to get started with, whether for images, infographics, flowcharts, etc.
You can search for "canvas banner" when starting a project and get inspired and adapt to your liking.

Discussion Week 1 Decorative Banner

Inactive button image

HTML

These following items are created through the html view in the Canvas Rich Content Editor. I keep an example handy in Notepad (or google doc or other place to save text) and then just copy/paste the html into the Canvas page I'm working on. Then I replace the text of the example with the content of the new page.

Start Button

Get Started

Copy/Paste this code to add the green start button to your page:

The bold shows the key part of the code and the highlighted section is the hyperlink the button points users to. So you will need to remove the hyperlink and customize to your own course when you use this code.

<p><a class="btn btn-success" title="Get Started" href="https://yccd.instructure.com/courses/26622/modules/75845" data-api-endpoint="https://yccd.instructure.com/api/v1/courses/26622/modules/75845" data-api-returntype="Module">Get Started</a></p>

Page Design Elements

These two examples would break up text on a longer page and/or be used to highlight important information or directions.

Shadow Box example

While accessibility is the final section of the OEI Rubric, we should be thinking of it right from the start when developing online courses.

Background "emphasis" example

The Task:

Record a one minute video in a page in your Sandbox. This can be a "rough draft" trial of a type of video you might add to a course you currently teach. Some topic ideas are provided in the directions, but you can have fun - this is just for practice! You will then use Studio to add accurate closed captions.

Task or prompt call out box with heading

PRACTICE

Your content.

Sample Code you can copy and paste to use these same design styles on your pages:

Shadow Box

Grey shading behind text

<div style="background: #F8F6F9; padding: 10px;">
<p><span style="font-size: 14pt;">Please - NAME THE TASK</span>:</p>
<p>ADD STEPS OR DESCRIPTION</p>
</div>

Box with color Heading

<h2 style="background-color: #003865; padding: 10px 15px 10px 15px; margin: 0px;"><span style="color: #ffffff;">PRACTICE</span></h2>
<div style="border: 1px solid #314D64; padding: 5px 15px 1px 15px;">
<p>Your content.</p>
</div>

Formatting Images next to text

Align image to left example

This is going to be content that the instructor writes to give the students context and instructions for the learning materials they have included on the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan. Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Morbi tristique senectus et netus. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Eget nunc scelerisque viverra mauris. Vitae ultricies leo integer malesuada. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod. Sed pulvinar proin gravida hendrerit lectus. Gravida arcu ac tortor dignissim convallis aenean. Tellus at urna condimentum mattis pellentesque. Faucibus a pellentesque sit amet porttitor eget dolor.

The HTML code for "padding" the image border to give white space between the text and image.

To use on your own pages, copy/paste the bold highlighted portion of the code to place just after the <div that begins the line of code for the image on your Canvas page.
The first "paragraph" of code is for left alignment; the other is to align an image to the right of text.