Typography 101: Type Talks!

So you’ve created a course on OpenLearning. You’ve set up each module, wiki page, video, and activity to be interactive and engaging. Now all that’s left is to make sure you really capture students’ attention and get them to join your course. How do you do that?  The answer is relevant, attention-grabbing graphics.

This blog post will tell you how to use basic graphic design and typography to your benefit in your OpenLearning course.

In your OpenLearning course you can add a customised:

  • Course thumbnail, consisting of an image and your course title. This is what your potential students will first interact with. Sized at 600 x 340 pixels.
  • Banner image that spans across the top of every page in your course and is 2340 x 340 pixels in dimensions.

A well-designed page, banner, and thumbnail can be the difference between somebody joining your course or just scrolling past it. When used right, the banner and the course thumbnail act as attention-grabbing tools.

Think of it from your student’s standpoint – they’re browsing the web and scrolling casually, when they come across your course. What’s the first thing they see? Your course name, profile picture, and course thumbnail. When they enter your course, the next thing they see is the banner at the top of the page. This is you making your first impression.

So make it a good one with a well-designed banner and thumbnail. You probably don’t want to put too much text on either. Do put the name of your course though- people will read this before they read any other information on the page so make sure your course title is catchy and effective.

Here are some quick tips to make your course graphics and pages look great starting with some basic typographic ideas.

1. Try not to use more than two fonts to not overwhelm your message.

2. Choose the right font for your brand. Different fonts have different associations and it is important to pick the right one.

Here is a chart of fonts to help you understand different types fonts

3. Hierarchy is important in your text. Don’t be afraid to use different-sized text, but make sure that that the eye goes to the most important information first. In other words, arrange your text in order of importance.

4. Use contrast. That is, change the size or weight (bold or light) of your text to emphasise certain aspects.

5. Make sure your text and images work together. If you want to put text over an image, find a clear space where your text wont be invaded by features from the image. Here’s a classic example of text positioning gone wrong.

A good way to think of your banner or course thumbnail image is to think of it like a billboard advertising your brand. This is your chance to grab the attention of passers by and pique their interest, flaunt your brand and give these browsing consumers an incentive to scroll further down. So, just like a billboard, your images should give consumers a taste of who your brand is. The best way to do this is to keep your design consistent with your branding style and tone of voice. 

How do you make your banner and thumbnail consistent with your branding?

Set a tone for your course, like you would for your brand. Is your course playful, serious, creative, or sophisticated? The tone you set in your course will also depend on your target student audience. 

Once you have established the tone of your course you can begin to create a visual language around this tone. Basically you have three elements to do this: text, images, and colour. Use them well. In the next post we will focus on imagery and how to get the best out of your images.