Before I joined Cidi Labs, I spent a lot of years on the other side of Canvas, as a teacher, Canvas user, and district administrator.
One thing I always found interesting was how much you can actually do inside Canvas with nothing more than the Rich Content Editor and a little HTML/CSS. However, I struggled to scale this with all our teachers and courses. That's where tools like Cidi Labs DesignPLUS can shine.
You don't need to be a web developer. You don't need to build an entire website inside your Canvas course. And you definitely don't need to spend hours making every page look like a professional marketing site.
But a few intentional design choices can make a Canvas page dramatically easier for students to navigate and understand. Tools like DesignPLUS make it easier, but you can do several of these tips without any additional tools. Below are a few ways to get started.
So let's start simple.
Think hierarchy, not decoration
One of the easiest ways to improve a Canvas page is to think about what you want students to notice first, second, and third.
If everything is the same size, same color, and same visual weight, nothing really stands out.
- Instead, try creating a simple hierarchy: BIG IDEA
- A short explanation of what students are going to learn or do. WHAT TO DO
- A clear list of the next steps. NEED HELP?
- Resources, links, or additional information.
The goal isn't to make things flashy. It's to help students quickly answer:
Where am I, what am I supposed to do, and what should I do next?
Try a simple callout box
You can create a simple visual callout with a little HTML.
Here's an example:
<div style="padding: 20px; border-left: 6px solid #2d3b45; background-color: #f5f5f5; margin: 20px 0;">
<h3>🚀 Start Here</h3>
<p>Watch the short video below, then complete the practice activity before moving on.</p>
</div>
You can paste that into the HTML editor in Canvas and customize the text, colors, and spacing.
Suddenly, you've created a visual cue that tells students, “Hey! This is important.” And that's really the point.
Give students some breathing room
Here's another simple one. A page doesn't have to use every available inch of the screen. Adding some space between sections can make a page much easier to scan.
You can do that with something as simple as:
<div style="margin: 30px 0;"></div>
It isn't exciting HTML.
But sometimes the best design decisions aren't exciting.
They're just useful.
Make your links actually tell students where they're going
Here's an easy one that doesn't even require HTML.
Instead of:
Try:
Read the Chapter 3 Overview
Or:
Watch the 5-Minute Introduction
Or:
Students should be able to scan a page and understand what the link does without having to read the surrounding paragraph.
Bonus: that's also a much better experience for students using screen readers.
And here's the bigger idea...
You can absolutely make Canvas pages more visually engaging with HTML and CSS can take you surprisingly far. But there's a catch.
If you've ever tried maintaining custom HTML across an entire Canvas course - or worse, an entire district - you already know where this starts to get painful. One teacher creates a beautiful callout. Another creates a slightly different one. Someone changes the colors. Someone copies an old course. Someone accidentally deletes a closing </div>.
And suddenly you're the person everyone calls because “my Canvas page looks weird.” 😂
This is one reason tools like DesignPLUS exist. It lets you create and reuse design elements without asking every teacher to become a part-time web developer.
Good Canvas design is about being intentional.
It's about intentionally designing the experience so students can spend less time figuring out how to use the course and more time focused on what they're actually there to learn.
Your Turn 👇
I'm curious what the Canvas Community is doing.
What's one small HTML/CSS trick, design idea, or Canvas formatting technique you've used that made a surprisingly big difference for your students?
Share it below. I'd love to steal some ideas from you all. 😉 And if you need inspiration… check out Sean Nufer, Lauren Janoksa and I shared at Instructure 24 for HTML Hacks… can't share the link right now because it was using the Free for Teachers Canvas and its blocked. But I will share once its open again.
