2020 Course Design Essentials: Design Tips for Pages

Instructure
Instructure
29 9 9,820

April Teacher Appreciation Event: Design Tips for Pages

Ever see a super inviting and well thought-out page in Canvas and think, “OoooOoOo! I want to be able to do that!” but then wonder how? Or maybe you have even begun experimenting with visual design in your Canvas courses and just need some tips and tricks to up your game? Well, lucky for you, I just happen to have some pointers for you! Let’s begin...

Why Even Think About Visual Design?

A well-designed page will not only complement and enhance the content you’re delivering, but also create an engaging learning space for your students. 

Is Accessibility Important?

The answer to this question is always YES! Be sure to design with everyone in mind and always try to make your content accessible for ALL users. WebAIM has a great article, Introduction to Web Accessibility, that "should help you understand how people with disabilities use the web, the frustrations they feel when they cannot access the web, and what you can do to make your sites more accessible." I would also recommend checking out the General Accessibility Design Guidelines which “outline some general best practices when designing a course [in Canvas] for accessibility concerns” as well as the Course Evaluation Checklist v2.0 and Mobile App Design | Course Evaluation Checklist. It’s also important to design with mobile in mind because you never know if users are accessing the page from a desktop, laptop, tablet, or mobile device. The appearance of the page can look completely different across different platforms. 

Brainstorm & Plan

Brainstorm & Plan GraphicBefore I even begin creating anything, I find it super helpful to take a step back and figure out how my page will actually be used, what information I plan on including on it, and how I want it to look. Sometimes I even sketch it out on a piece of paper to get a better visual. Think about things like: What resources do you need to incorporate? How are you going to lay it out? Do you want a banner at the top? Do you want to include buttons? If so, what type and how many? Do you need to use pictures and/or icons? etc...

 

Creating/Finding Visual Elements

Once you have your plan, it’s time to add the fun stuff! Below are some of my favorite resources for visual elements. Some of them require you to sign up for an account, but are FREE to use! 

  • Canva is a really user-friendly web-based graphic design program you can use for creating buttons and banners… and SO much more
  • Da Button Factory is a little old school and not technically one of my favorites, but it’s very simple and easy to use to create buttons
  • Flaticon is an awesome source for icons and you can personalize them by changing the colors
  • Icons8 is another good resource for icons 
  • Unsplash is a great resource for free high-resolution photos
  • Pixabay has a ton of images that can be freely used, without attribution
  • Google Draw allows users to collaborate and work together in real time to create images, shapes, diagrams, charts, etc!

Save, Save, Save Your Work!

Save Your WorkWhenever you are working in Canvas, whether you are designing a page or creating a learning activity, be sure to save your work frequently! If you try to navigate away from an unsaved page, Canvas will warn you with a pop-up, but if your browser or computer crashes - you’re out of luck and will be very sad that you just lost all that hard work. One neato feature that I love is that Canvas keeps a record of each version of a page that you saved. This way, if you make a mistake while experimenting, but have already hit save, you can easily restore it to a previous version

 

Responsive Image Widths

To make images responsive in Canvas, so that they will change size when the browser window is resized, you’ll want to switch over to the HTML Editor. (I know, I know.. But it’s worth it). Find the image tag (Hint: using Control+F to search for <img might help out) and change the “width” to a % value that you wish (100% is the full width of the page, 50% is half the width of the page, etc) and delete the “height.” Below is an example of what the code should look like:

BEFORE:
<img src="https://ocps.instructure.com/courses/1134885/files/83314289/preview" alt="School News Banner" width="2000" height="300" data-api-endpoint="https://ocps.instructure.com/api/v1/courses/1134885/files/83314289" data-api-returntype="File" />

 

AFTER:
<img src="https://ocps.instructure.com/courses/1134885/files/83314289/preview" alt="School News Banner" width="100%” data-api-endpoint="https://ocps.instructure.com/api/v1/courses/1134885/files/83314289" data-api-returntype="File" />

 

Easily Float Text Around Images (without going into the HTML.. you’re welcome)

To float text around an image, start off by typing (or pasting) all of your text in the RCE. Place your cursor within your text where you would like your image to be located (preferably at the beginning of a paragraph or sentence, not randomly in the middle). Insert/embed the image from Canvas, click on the image, then simply click on the “Align left” (or “Align right”) icon at the top of the RCE, and viola!

Easy Wrap Text Demo GIF

Text in gif above courtesy of my favorite lorem ipsum generator, Bob Ross Lipsum***

 

Add Padding To Images

Adding padding to an image will create a little space between your image and the other content next to it so they aren’t jammed up against one another. An image without padding can be a bit of an eye sore, amiright? I mean, just look at the difference between the images below:

Without Padding WITH Padding
344400_panda-image-without-padding.png344401_panda-image-with-padding.png

 

To add padding to an image, you’ll want to switch over to the HTML Editor. Find the image tag and locate the image's style attribute (if the image doesn't have one, you can add one by typing style="" after <img). Within the quotation marks after style=, add padding: 10px; (I used 10px for this example, but if you would like more or less white space around the image, simply adjust the number value). If there is another style attribute, separate them with semicolons (style="padding: 10px; float: right;"). Below is an example of what the code should look like:

 

BEFORE:

<img style="float: left;" src="/courses/1143675/files/83319250/preview" alt="Panda.png" width="144" height="183"/>

 

AFTER:

<img style="padding: 10px; float: left;" src="/courses/1143675/files/83319250/preview" alt="Panda.png" width="149" height="183"/>

 


Final Thoughts

There are SO many more tips and tricks that I have stored away in my noggin that I would love to share out! What are some other design tips/tricks/features that you would like to see included in future posts and learn more about?

 

***Some of my other favorite lorem ipsum generators include Pirate Ipsum and Bacon Ipsum. They always give me a good laugh. What are your favorite lorem ipsum generators???

 

2020 Course Design Essentials  

Monthly Canvas Community Event Launch

The Canvas Instructional Design Team is launching our 2020 Course Design Essentials monthly event. These events will include blog posts, live events, free design assets, how-to screencasts, and tips and tricks that focus on Canvas course design fundamentals to help you elevate your course design. Check out our other Course Design Essentials.

 

Who Are We?

Shout out to my fellow Instructional Designers who contributed to this blog post, laurie.norris@instructure.com‌, tiffany.foster@instructure.com‌, Deactivated user‌, and djohnson@instructure.com. We have loads of Canvas expertise and are passionate about design, pedagogy, and best practices. Let us share how to elevate your fully-online, hybrid/blended and face-to-face courses for learners ranging from preschool through post-secondary and everything in between.

 

Why Are We Launching This Event?

We utilize the Canvas Community on a regular basis to position instructional design resources! We understand the impact and power of the Instructional Designers space within the Community and want to give back. We are excited to collaborate and share tips and tricks about our Canvas Design Best Practices. 

Please comment below. We’d love to hear from you!

Our Instructional Design team offers templates, consultation, badging services, course evaluations, workshops, and more. If you would like to learn more about our services, please contact your CSM or djohnson@instructure.com, Manager, Learning Services, via djohnson@instructure.com.
9 Comments
Instructure
Instructure

Lorem Ipsum generators are a fun way to add a little sparkle to projects and often put a smile on my face. Sometimes I just need those little things, especially during the current pandemic. Some of my favorites include the following:

Great article and tips, rosina.monteiro@ocps.net‌! Thanks for sharing with the Canvas Community. 

Community Team
Community Team

djohnson@instructure.com‌, I share your love of all things lorem ipsum. We have a community-curated collection here: Text generators: Beyond Lorem Ipsum

Instructure
Instructure

Oh my goodness! I love that we have this! Smiley Happy 

Surveyor II

Hello! I'm brand new to Canvas and trying to create an teaching online training course for faculty.  Would I be able to have access to the "Ready-Made templates" for Higher Education? I think some of our faculty would love to be able to have these to play with in their new online courses!

Thank you!

Amy

Surveyor II

Thanks for the tips Rosina! This is one of my fav text generators. Super easy! http://www.randomtext.me/ 

Surveyor

You will find some in the Canvas Commons. It will require that you vet the courses but you will see there is quite a bit of content that has been shared in there: Canvas Commons  

Ricardo 

Surveyor

Can we see some of these wonderful ideas in the new Rich Content Editor? It seems that some of these functions aren't necessarily carried over to the new RCE. Thanks!

Community Member

I would like access to the ready made template suite also. I cannot seem to find them in Commons. I found the course, but not a way to download the templates.

Community Team
Community Team

mrizzuto@fgcu.edu

If you're not able to access the full-course previews in the Canvas course Ready-Made Template Suite , the blog post Ready-Made Template Suite provides additional guidance on previewing the resources—or contact your CSM for more information.

About the Author
Instructional Designer. Artist. Hand Letterer & Calligrapher. Foodie. Dachshund mom of two. Paddleboard newbie. Yogi wannabe. Lover of Disney.