Back to the Top ^
Home    /    Designing an Online Course, Instructional Design

Enhance Course Quality with 7 Visual Design Tips

Submitted by on April 11, 2013 – 4:19 pmOne Comment
color circles overlapping

Source: Ms. Phoenix on Flickr

Effective design is vital in online learning because it’s what guides students to finding information, navigating a site, and even learning a subject. And designing effective layouts is something everyone can do with just a few guidelines.

Based on the blog post Understand These 10 Principles of Good Design Before You Start Your Next eLearning Project, we bring you these easy-to-follow design tips so you can structure your next online course to flow visually and guide students through course content.

Figure A below illustrates tips 1 to 4.

1. Guide their eyes

  • Flowing information: place your web page elements (text blocks, graphics, photos) so that they proceed naturally from one to the next, just like in the flow of your course content.
  • Facing images: orient images toward the page to face the content—never let images face off the page or away from their corresponding content (e.g., an arrow should never point off the screen or a person’s face away from the content).
  • Lists: guide students’ eyes with sequences, like steps or bulleted lists, so they can process your content easier.
  • Align: align text with its graphic so students know they correspond; align your text left to guide students where to read (centered text makes us work harder to find text).

2.  Declutter, then chunk

Huge, wordy text blocks overwhelm everyone, and they can deter students reading your content from a screen.

  • Trim your text to what’s most important (identify critical information, and keep it simple); cut the extra, nice-to-have content.
  • Add ways for students find more information (like using multimedia and hyperlinking to external sites).
  • Chunk your text blocks with headers, bolded text, bulleted lists, graphics, images, graphs—anything visual.

3. Widen columns like a newspaper’s

Our eyes let us read faster and stay in place when text is in a column–think how newspapers use columns. Avoid stretching text across the screen. Your students will lose their place while reading and waste time tracking the text, rather than processing your content.

  • Narrow columns: Fill columns with about 40 to 60 characters per line.
  • Align, never justify: Align text left, but never justify text because readers will struggle with the stretched letters and misshaped words.

4. Guide with white space

Fight any urge to fill your entire page with content. White space, or empty space, on a page is vital because it guides students through your content chunks and keeps distractions minimal. Your text should take up at most 40% of the page (you can use larger or additional graphics on pages with less text).

Instructional text next to iPad image

Figure A: Apple’s iPad for Education page illustrates tips 1 to 4.

Figure B below illustrates tips 5 to 7.

5.  Choose appropriate fonts

Fonts should suit your content.

  • Avoid fancy fonts, including many script and decorative fonts, because they’re difficult  to read.
  • Adjust font size and color to call attention to certain elements (but be careful–too many instances of this will distract and/or confuse students).
  • Use sans serif fonts for screen text because our eyes read it smoother.

6.  Follow consistency

Adopt a visual theme for your course to keep you consistent and well-branded on all pages. Too much creativity or varying visual elements (graphics, colored font) distract students away from your content.

  • Use similar and consistent graphics, like using either all photographs or all vector graphics (combining graphic types, like photos and clipart, make your pages look out of place).
  • Repeat styles—ensure heading sizes, fonts, colors, buttons, margins, and spacing are consistent and match to ensure all your pages work together.

7. Place importance at the top

We read left-to-right, top-to-bottom, so start the top of your page with the most important content, following down the page in order of importance so students can process your information effectively.

  • Place most important information in top, left corner of the page.
  • Avoid placing important information “below the fold”, which is the unseen, bottom half of a web page that users must scroll to find.
Text next to captioned image of cat

Figure B: LMS Canvas uses easy-to-read fonts and is consistent with its red heading that matches the company’s logo.

Share Your Experiences

What visual design elements do you use throughout your course to ensure students can easily find and comprehend content?

One Comment »

  • Karla Gutierrez says:

    Hi Robin! I really like you post… It’s great you find an inspiration in my article!