Bringing it All Together

When you design your course landing page, you're bringing together everything we've learned in this course. The following guide takes you through the entire process--from brainstorming to publishing--but you should remember that this might not be as straightforward as it looks. Sometimes, plans have to be revised because what seemed like a good idea on paper doesn't quite work the way you'd like it to on the screen. If you think of this as a recursive process, it'll be a lot less frustrating for you!

Step One: Brainstorming

Before you begin creating course banners and buttons, it's worthwhile to take a step back and figure out what your course landing page needs to do.

What information does it need to provide? What resources do students need access to? A schedule? Study guides? External resources? Project guidelines?
What do you want your landing page to say about you and your course? What tone do you want to set? A serious tone? A playful tone? A "let's get down to business" tone?
What sorts of color combinations and images would convey the message you'd like to send to students?

Once you've figured this out, it's time to begin planning!

Step Two: Planning

Once you've figured out what students need and how you'd like to approach your landing page, you can begin planning your landing page. At this point, I find it helpful to use a pencil and paper to sketch out the various components of the page until I find a design that suits me best. During this phase, you might ask yourself:

Do I need a course banner? If so, what should it say?
Do I need buttons? If so, what text should they include?
Do I need images? If so, what should these images depict?

Once you've identified what you need, you can begin figuring out how you'd like your page to be laid out. Would you prefer a straightforward configuration, or something more elaborate?

Straightforward Page Design Complicated Page Design

Once you have a rough idea of what you need and how you'd like it to be laid out, you're ready to create your buttons and banners and locate your images!

Step Three: Creating/Locating Design Elements

Now that you've figured out what your page is going to look like, you'll need to create or locate your design elements. This might involve creating course banners and buttons or finding images.

Here's a handy tip: make sure that the visual elements you use (whether they're buttons or images) are all the same size, or at least the same proportion. That way, when you're setting percentages for widths, everything lines up nicely! You may need to use a separate program to edit your images so that they're the same size/proportion as the others.

Step Four: Add Design Elements to Your Canvas Page

Once you've created/acquired your design elements, begin uploading them to your page. Use the text editing toolbar to align your images where you'd like them to appear (center, left, right) by placing your cursor on the same line as the image and selecting the preferred alignment. Repeat this process until all of your design elements are on the page. Be sure to save your progress!

Step Five: Add Image Widths and Padding

Now that your design elements are in place, open the page for editing and switch to the HTML editor. Add widths to each of your images so that the page displays the same way despite browser window size. Add padding where appropriate.

If you mess up, don't panic: Canvas saves a copy of your page every time you hit save, so you can revert to a previously saved version of the page.

Step Six: Add Links

Once your design elements are where you'd like them to be, add hyperlinks to them so that they are linked to the appropriate resources.

Step Seven: Publish Your Page

When you're happy with the page, publish it!

Step Eight: Set Your Front Page

Click "Pages" on the course navigation menu. If you don't have a home page set already, you'll get a directory of all pages. (If you do have a home page set, you'll need to click "View All Pages" to open the directory.) Locate the page that you'd like to be your landing page, then click on the Settings icon beside its name. Select "Use as Front Page."

You won't be able to do this if the page is unpublished.

Step Nine: Choose Your Home Page

Click "Home" on your course navigation menu. Select "Choose Home Page" from the menu on the right-hand side of the page. (It may appear at the bottom of the page if you are working on a small screen.) Select "Pages Front Page," then click Save.

And then you're done!

Demonstration

The screencast below shows how to bring each of the elements we've covered together to create a page. This video is less a step-by-step "how-to" guide and more of a demonstration of the visual design process in Canvas. There are missteps and discarded ideas galore, but remember, that's all part of the fun!

Source: Bring it All Together

Clemson Online

This training resource was developed by April Pelt for Clemson Online. Please feel free to share these materials with your colleagues.

Image created by April Pelt for Clemson Online