Tips for Creating Front Pages
1. Design the front page with intent.
It’s a good idea to think about how you want the students to navigate the course- what is important?
Things to consider for the front page:
-Modules (links to each module or to the module page)
-Your contact information
-A link to the syllabus or will the front page act like a kind of syllabus?
-A link to assignments
-A introduction to the course (written, video, graphic)
-Images that represent the course. This could be a photo, an infographic
2.You can create buttons for navigation.
Buttons are simply images with links attached to them. You can link to another page within Canvas (Modules, Discussions, etc.) Check out the video tutorial here on how to do that:
https://www.youtube.com/watch?v=bRrTZbvxD6A (1min)
3. Use white space.
Don’t be afraid to add space between text and images. It makes your front page more legible.
4. Keep colours to one or two plus black and white.
A little colour adds interest; too much adds confusion.
5. Use images.
An introductory image is a great way to make your course look inviting. You can make a banner (1400px x 300px) or main image (1400px x 600px), but any landscape image shape can work as the main image. (Portait shapes don’t work as they may appear too large and students will have to scroll down quite a bit to get to the other content.)
6. Use icons to add emphasis or for naviation. For example, a big lightbulb might signal an important tip. Or a calendar icon might highlight an important date. You can get icons for free here (just make sure to add the creative commons license in small text nearby) https://thenounproject.com/
7. Canvas is designed responsively. Responsive design allows students to access information from their phones or other smaller devices as well as laptops and desktops. All items on the page will move around and stack on top of each other according to the screen size, so don’t get hung up on where each thing appears. For example, three buttons may not appear exactly three to a row. But the page should still work on mobile devices. You can test it out to see what it looks like.
Click to download