OWL is great for organizing and presenting content, but it can become text-heavy. Graphics add visual media to your course site. These graphics might be banners on the home or lessons pages, section and sub-section imagery, and/or icons marking regular activities such as reflection, readings, and examples.

OWL Graphics can be valuable for:

• increasing the ‘professional’ look and feel of your OWL homepage
• signalling changes in topic or highlighting important activities
• orienting learners to the content (aiding in wayfinding)

Activity 1: What makes these OWL graphics effective?

Each of the below examples of OWL graphics were designed using Canva. What elements or qualities do you find effective/ineffective?

Click to Enlarge and the back button to return:

 

 

 

 

 

 

Activity 2: Determining Your OWL Graphics Needs

OWL sites are unique to course contexts. This means that there’s no ‘right’ answer to what your course graphics will be or what they will look like. Here are some guiding questions to consider:

How do you use your OWL course site?

Course management only (announcements, resources, calendar, etc.). Consider getting started with a banner for your course homepage.

Course management + weekly/module overview using Lessons. Consider a banner for your course homepage and/or banners for each of your weekly/modular organization

Course management + content for student engagement using Lessons. Consider a banner for your course homepage and/or visuals for delineating sections of content or changes in activity.

How much time can you invest on this?

30 minutes to 1 hour. Aim to design and add a homepage banner

1-2 hours. Once you’re on a role, it’s easy to develop multiple banners such as a homepage banner and banners for topping different lessons pages.

2+ hours. Figuring out graphics for each of your OWL lessons content or learning activities will take added investment.

Activity 3: Drafting

How to start designing Course Graphics in Canva:

Banners

1. Sign into Canva
2. Locate the button at the top right of the screen that says Custom Dimensions
3. Enter in dimensions, I recommend 700 px  (width) by 100 px (height)
4. Start designing from scratch using elements, text, background and/or uploads
   1. try out: a consistent background colour for all banners, an image that represents your course, abstract elements that add a touch of colour, text (e.g. course code or name)

Small Icons

1. Sign into Canva
2. Locate the Logo template – it is the closest in dimensions and gives us some interesting templates to work from
   1. Another option would be to try out Custom Dimensions using square dimensions ranging from 64 px by 64 px to 500 px by 500 px
3. Start designing from provided templates or from scratch using elements, text, background and/or uploads
   1. try out: a consistent background colour for all banners, an image that represents your course, abstract elements that add a touch of colour, text (e.g. course code or name)

Large Icons

1. Sign into Canva
2. Locate the Logo template – it is the closest in dimensions and gives us some interesting templates to work from
   1. Another option would be to try out Custom Dimensions to specify your own dimensions in pixels or inches
3. Start designing from provided templates or from scratch using elements, text, background and/or uploads
   1. try out: a consistent background colour for all banners, an image that represents your course, abstract elements that add a touch of colour, text (e.g. course code or name)

Activity 4: Upload to OWL

1. Export your design from Canva. From the design view, locate the Download button in the top menu bar. Select file type (PNG recommended) and download locally to your computer.
2. Sign into OWL and visit your OWL course site
3. Click on Resources and upload your graphic to a folder of choice
4. Navigate to the place in your OWL site where you want

   

   to add your graphic:

   1. On your Homepage:
      1. Select the Overview tab
      2. Locate the Edit button to the right of “Site Information Display”
      3. Using the Rich Text Editor place your cursor at the top of the page and click on the icon for inserting a picture/icon.
      4. Under Image Properties, select Browse Server, locate your graphic in your resources folder organization, and click OK
      5. Click OK
   2. In your OWL Lessons:
      1. Navigate to the OWL Lessons Page of choice
      2. Add a text box or locate the text box where you would like to add your graphic. Click the edit button to access the Rich Text Editor
      3. Using the Rich Text Editor place your cursor where you want your graphic (at the top of the page for a banner or in-line with text for other graphics) and click on the icon for inserting a picture/icon.
      4. Under Image Properties, select Browse Server, locate your graphic in your resources folder organization, and click OK
      5. Click OK

Adjusting your Image

No matter what dimensions you used in Canva to design your graphic, you have some greater flexibility afforded to you in OWL for adjusting the size of your image. There is one golden rule:

You can always make a large design smaller but making a small design larger will get pixelated 

Design large in Canva, and reduce the size in OWL. How do you adjust image size in OWL, you ask? Follow these instructions:

1. Locate the image you’d like to adjust
2. Enter into editing mode so that you have access to the Rich Text Editor
3. click on the image to select it and click the image icon in the editing options (see above image View of Rich Text Editor and Image Icon)
4. This will open the Image Properties window (pictured right). Adjust the image by editing the width and height fields.
   1. for banners, try ranges between 50-200 for width and 500-1000 for height
   2. for small icons, try ranges between 60-100 for both width and height
   3. for large icons, try ranges between 100-400 for both width and height