Typography for e-learning content design

typography-is-funIn our last post, “10 Graphic Design tips for e-learning educators”, we provided a few essential guidelines for improving the look and feel of your e-learning content.
Such a list, of course, can only offer a basic overview of the numerous things an educator needs to know when designing his e-learning courses. Don’t worry, though, because we’re here to expand on each of those guidelines and get into specifics, starting with the black art of fonts and typography. 

It cannot be be emphasized enough: graphic design is mostly typography. Good typography ― which involves choice of fonts, font-sizes, line length, columns etc, can lift even the most mediocre content. Bad typography can render even the best e-learning material unreadable.
Fortunately, while typography is something that can take years to fully master, you can get eighty-percent of the way there by following a few simple rules:

Choose your fonts wisely (or stick to the standards)

In an era when OSes come with 100s of fonts and modern web browsers offer us the ability to serve our users any font we like among tens of thousands, it’s tempting to pick up exotic looking fonts, or render your content in fancy web-fonts. Don’t. Unless you know what you’re doing, it’s better to stick with the standard, boring but reliable, fonts available in all platforms (Arial, Verdana, Times, Georgia, etc).
Most freely available web-fonts are of low typographic quality (if not downright tacky). Even nicely done web-fonts often look bad in older versions of Windows or older browsers, whereas fonts bundled with Windows and OS X have been finely tuned by  professionals to look good on modern LCD displays. As an added bonus, built-in fonts are already installed on your users’ computers, so, unlike web fonts, they load immediately.

The three-fonts-max rule

A common mistake many webmasters make is using too many fonts. This looks amateurish. Keep your font-count low, using no more than two or three fonts (e.g one for your titles and one for your copy).
Keep in mind that not all fonts are created equal. Some are designed for readability and are great for long text, while others are more ornamental or fancy and should be reserved for titles and headings. As a general rule, sans-serif fonts (such as Arial, Verdana, Calibri, Helvetica, etc) have been shown to make it easier to read long passages of text on a computer display with limited resolution (that is all, except the latest modern hi-DPI monitors).
The warning against using too many different fonts also holds for using too many different font sizes and/or weights. Stick with fewer, well thought-out font-sizes, preferably based on the hierarchical structure of your content (large font size for the titles, slightly smaller for your subtitles, medium for your content, small for footnotes and asides, etc).

Use fonts to set the mood

You should not base your font choices merely on whether you like a particular font itself. It’s more important that the font sits well with your content. 
Fonts are not neutral. Depending on their design they can evoke different feelings, convey different notions (professionalism, playfulness, seriousness, friendliness, etc) and even allude to certain historical periods (e.g a gothic or modernist font).
With the above in mind, try to pick an font appropriate for your target audience and content. An e-learning website aimed at young children, for example, can employ playful fonts (especially for the titles) to pique the kids’ interest. The same choice would obviously look unprofessional on an elearning-site on economics or law.

Make it readable

Typography is an art, or rather, an applied art. There are no “laws” set in stone, but guidelines and rules of thumb do exist, for both print and computer typography.
Contrast, for starters, is especially important. As a computer display is an active source of light (in other words, there’s a lamp behind it), too much contrast can be fatiguing for the eyes. On the other hand, too low contrast is equally, if not more, fatiguing. Opt for a good, strong contrast, but avoid extremes (like 100% white on black, or 100% black on white).
Regarding size, the latest consensus among graphic designers is for larger fonts – 16px and up. Those are appropriately sized for today’s higher resolution displays. Much larger or much smaller fonts both hinder readability.
As a rule of thumb, a line of text should have around 75 characters. Longer lines make reading more difficult. You should use left-aligned text, as modern browsers still lack the ability to properly fully justify a paragraph the way a typographer would.
Let your text breath. Break it in paragraphs, and leave some space after each paragraph. Avoid long running passages without paragraph breaks, as those make it difficult for the reader to track his position in the text (especially when scrolling in involved).
Line height, the distance between lines of text, is another  important aspect for great readability. The standard in most browsers is too small. Set a line height of 1.4em or more, depending on your font and overall design.

The post Typography for e-learning content design appeared first on eFront Blog.

10 Graphic Design tips for e-learning educators

03-logo-design-color-tips1
You deployed the most capable LMS platform (*cough* eFront *cough*). You have written the finest course material, crafted the best exercises, and organized them to perfection. You are finally ready to take your  live, but could there be anything missing?

Indeed, there could. Most of the time not much thought is given to the graphic design. At best, it’s left as an after-thought. In this article, we’ll explain why the design of an e-learning course is an important factor of its success and give a few basic guidelines that every e-learning educator should be familiar with.

1) Design is important

If you were to only take away a key insight from this article, it should be this. Design affects how students perceive your content. Bad design choices can render the content unreadable or hard to follow, while subtle design cues can help students navigate your courses or emphasize important sections. 
Good design is also a marketing tool. It helps differentiate an amateur looking e-learning site from a professional looking one. 

2) Hire a specialist. Or become one.

If you can afford to hire a design specialist for your e-learning content, don’t think twice about it ― your content will look much better for it. Don’t go for a designer that specializes in print design or brochure like, static websites. You’ll want someone who understands the dynamic web and the interactive aspects of using an LMS. Those usually come under the title of “UX Designer” or “UX Expert”.
If you can’t afford to hire a designer, don’t fret over it. You can still learn the basics and do a good job yourself ― that’s what we’re for after all.

3) A nice template is only the beginning

You might think you can bypass this whole “design” can of worms by using some ready made template. And, sure enough, it helps. A good template, especially one designed specifically for e-learning content (e.g one provided by your LMS vendor), can help you get all the defaults right, and avoid bad choices. But that’s just the beginning. 
A great template can take you 80% of the way to a nicely designed e-learning site, you have to take care of the rest of the 20% yourself. You’ll have to customize it for your particular content’s needs. You’ll also have to settle on colors, fonts and other choices the template might offer as customization options. And, finally, you’ll have to add your own branding on top of it.

4) Content is King

All your efforts towards the design of your elearning content should aim  to making your content shine. As they size in the publishing business, content is king. 
Design is not about adding graphic elements, decorations and ornaments for making stuff look pretty. It’s about organizing your content visually in a way that makes it easy to read and easy to follow. An important aspect of that is, for example, the proper presentation of your content’s hierarchy — its chapters, sections and subsections. If you’re not sure about a graphic elements utility with regard to your content, don’t add it. Less is more. 

5) Design for your audience

Of course you should *always* design for your audience ― those are the ones that will benefit from your design choices. But in this tip, we want to stress how you should also design for your target audience sensibilities and skills.
If, for example, your e-learning courses are addressed to small children you should not overcomplicated the navigation, or make the site look austere. Touches of color and bigger font sizes (like in children’s books) can help them connect to the content easier. If, on the other hand, you’re targeting lawyers or financial professionals, it will obviously be better to avoid cheeky colors. 

6) Design is mostly about typography

Even in this age of multimedia, if your content is anything like the average e-learning course most of it will be textual. Good typography ― choice of fonts, font-sizes, line length, columns etc, is the most important part of good graphic design.
Chose your fonts wisely ― if in doubt, stick to the standards — Arial, Helvetica, Verdana, etc (sans serif fonts usually look better on a computer monitor compared to serif fonts). Avoid garish choices (Comic Sans, anyone?). Don’t make them too small or too large. A font size of about 16px is a good starting point. Don’t make the content too long or too short horizontally. Around 70 characters per line is considered a best practice for optimal reading ease.

7) Color me impressed

Your palette matters. Believe it or not, color choices are not just about “personal taste”. Read a bit about “color theory” — it can help you pick colors that fit nicely together (e.g complementary colors) and avoid clashing hues. There are desktop programs and web services called “palette generators” that can help you pick and match color sets.
Consider “color coding”. That’s the name of the technique in which you use colors in your design to separate distinct content elements. E.g important notes could have a yellow background. Warnings could come with a red heading, etc. 
Above all, focus on readability. Long text passages should have good contrast — so use colors with a strong contrast for your typography (black text on white-ish background is a safe choice). You can still use bolder colors on your titles and asides, since those are short and typically use larger, easier to read, font sizes.

8) An image is worth a thousand words

The choice of illustration for your courses is important too. If you want custom illustrations for your content, consider creating your illustrations to fit your site’s graphic design (or vice versa). 
Avoid just using random pictures off of the internet, and especially don’t mix and match illustrations having different styles (e.g technical drawings and cartoons). Using a consistent style helps establish your content’s identity.
If you are strapped for cash, there are picture packs, with thousands of pictures, clip-arts and illustrations on various topics (e.g medical, animals, computers, flowers, etc) that might be appropriate for your content, and that usually have a consistent visual style. 

9) Keep up with the times

This tip is especially important for the branding and marketing appeal of your site. Some design choices are timeless, others change with the times. Try to create a design that appeals to modern users. Nothing says “cheap” and “amateur” than a 90’s looking design, whereas a Web 2.0 era style signals that you are a tad behind the times in this Web 3.0 era.
Your users will all be  familiar with sites like Facebook, Twitter, Google, Yahoo and the like, so keep an eye for design trends that appear on those that you can apply on your own e-learning site. 

10) Learn from your users

This list offers you a few basic guidelines (and it’s surprising how many sites get this stuff wrong). But even if you apply everything that’s in here religiously you won’t have a perfect design. There’s always room for improvement. Design is an iterative process.
Listen to your users, watch them use the site, and note any difficulties, complaints and suggestions they might have. Use their feedback to improve on your original design. Rinse. Repeat. Don’t be afraid to redo some design element you were fond of, if it proves problematic for your audience. 
And with that, we conclude our list. You already know enough to avoid the kind of visual atrocities one all too often sees on the web. Stay tuned though, because in future articles we’ll get into further details for a lot of elements on this list (typography, colors, illustration, etc).

The post 10 Graphic Design tips for e-learning educators appeared first on eFront Blog.