Office: (513) 887-5000 | Fax: (513) 887-5014

Principles of Design


The purpose of this showcase is to examine how to use solid design principals in developing online content.

Key Cognitive Ideas

View Presentations

Full Cognitive Principals

While it’s beyond the scope of this presentation, I’ve found it enormously helpful to keep certain cognitive principles in mind when considering design principles. The way our minds work obviously affects the way we relate to multimedia. My go to book for this is Dan Willingham’s “Why Don’t Kids like school? A Cognitive Scientist Answers Questions about the Mind.” I’ve a collection of presentations that outline the basics of the book. Feel free to view.
View Presentations

Reading text on the screen is a different experience than reading print. The computer screen (screen being loosely defined now as phone, tablet, or computer) as a delivery medium works differently than a piece of paper.

Advantages of Text

Text is self-paced. It can deliver very precise meaning. It’s also easy to skim information with text.[1]

Disadvantages of Text

Text is limited in its expression. It can be very difficult to convey shades of meaning (as anyone who’s had an email taken the wrong way can attest). Likewise:

“Without considerable skill on the part of the author, text is not great at describing the physical appearance of an object or person (use photos or illustrations instead), actual events (use video), layouts (use diagrams or screen grabs in the case of software), or complex processes (use diagrams or animations). Text is also not ideal for describing sounds (use audio!).”[1]

Using Text Online: Rules of Thumb

  • Keep it short. This goes for both sentences and paragraphs. Large, dense blocks of texts translates into a “Do Not Read Me” sign.
  • Along the same lines, aim for 1 main idea/concept per paragraph. This helps keep in short.
  • Use descriptive and concise headings to break your text up. When possible, actually use Header 1, 2, 3 etc.
  • Keep in mind that readers will skim your text. You want text that conveys your information to someone who is not reading for details.[2]
  • Bullets and numbers help convey information quickly. Use them.
  • Avoid onscreen text (particularly redundant text) presented at the same time as a graphic and auditory narration. This utilizes too many information channels and causes information overload.[3]
  • All caps is the same as screaming at your reader. Do not use them.
  • Keep your average reader’s reading level in mind. If you’re writing for younger kids, keep your sentences even shorter and your word choice simple. Curious as to what level you are writing at? Check out the FOG Index of your writing.

Tools and Techniques

HTML Views

There are a number of tools to use for creating text. However, I highly recommend using  a tool that allows you to “convert views”. If you write for the screen, your text will inevitably be converted into HTML. HTML is the language of the web. Understanding it is key to understanding how your audience will see your text.

If you are creating text for an Online Learning Environment, you are almost guaranteed to have the ability to switch views. Moodle, Blackboard, Google Sites, etc all allow you to write using a “What You See is What You Get” (WYSIWYG) editor and then switch to HTML view.


  1. Onlinement. “The elements of online communication 1: Text.”
  2. “Writing for the Web.”
  3. Clark, Ruth and Mayer, Richard. e-Learning and the Science of Instruction. Chapter 6: “Applying the Redundancy Principle”.


I’m a NPR junkie. It’s on 24/7. The car, the kitchen, the office. I often begin a conversation with “so – I heard this really cool story on NPR”. My daughters’ answers to the question of “What makes you smart?” is NPR (not to be confused with “what makes you stupid?” Answer: Sponge Bob’s Square Pants).

NPR is a solid example of using audio as a proper media element. It conveys tone, discourse, and pace in good measure.

Advantages of Audio

Audio is useful (obviously) in conveying exact sound. Want your students to understand what the Amazon jungle sounds like at night? Then it’s better to provide a recording of a night rather than an image or text.

Audio is also useful in conveying an alternative channel of text. This can actually have its advantages because you can also convey tone in words (think of the many different ways you can say “sorry” with tone implying if you actually mean it).

Online, audio is useful because it doesn’t take up any screen real estate. When using images and animation, audio enhances the effect without taking away from those visual elements.

Disadvantages of Audio

Audio is NOT self-paced. The delivery of audio is also slower, which can sometimes lead to frustration from the end user.

Audio also takes a bit more technical understanding when creating elements for the screen. Recorders and recorder rates, simple understanding of html code and codices are required.

Using Audio Online: Rules of Thumb

  1. It is highly beneficial to limit exposure to one voice for an extended period of time. The average person will tune out after a while. For students (particularly in secondary education), keep it limited to 5 minutes or less.
  2. Audio quality matters. Online, this translates into producing audio files that have higher bitrates. Aim for 192 b/kb or higher.
  3. MP3 and AAC are the most used file types for audio. Both can be used safely in an online course (and on student devices).
  4. If creating Podcasts for download, try and keep such downloads to 5 megabytes and less (break up the podcasts if necessary).
  5. Do NOT provide audio narration to text. This typically confuses, annoys, and frustrates students.

Combining Audio with Other Elements

Audio combines well with visual elements. It clashes with text. Why? The human brain does not process 2 simultaneous verbal inputs well. Students typically turn off the audio (the slower of the two verbal sources).

As a former social studies teacher, I’ve seen a well chosen image or graph teach a lesson.

Advantages of Images

Images are perfect for conveying different types of meaning.

Consider the following examples. What does a better job at depicting intended meaning – the word or the image?


Images come in different forms and function in different places.

  • Photographs are capable of accurately depicting real-life people, objects, places and events.
  • Illustrations, including clip-art and cartoons, will not capture people, objects, places and events as faithfully as photos, but can depict what is impossible or impractical to photograph. In their relative simplicity, they may also communicate more clearly than photos.
  • Diagrams illustrate cause and effect relationships and the relationships between the parts of something and the whole. They include timelines, organagrams, maps and flow charts.
  • Charts provide a rapidly-accessible visual representation of numerical data, highlighting trends and proportions.
  • Screen shots faithfully capture the elements of a software interface.

Source: Onlinement – Part 3: Images

Disadvantages of Images

Images can lack the ability to convey precise meaning.

Images also have a tendency to lack meaning (for example, an image used for decorative purposes). Clip art does not help convey meaning.

Using Images Online: Rules of Thumb

  1. While difficult, it’s well worth it to find an image that has real meaning to the material. This takes effort.
  2. Along the same lines, avoid unnecessary imagery. It can hinder learning.
  3. Copyright is a big issue with images. While it’s easy to grab images from the web, you do not necessarily have legal rights to use those images. This is especially true when creating online classes (where the class may be distributed to many different students and school districts.
  4. The Creative Commons (search here) is a create place to find images with a CC license. Likewise, consider adding a CC license to any images you create (share and share alike!).
  5. File size is an issue for images. Try not to have large images (for example 500kb or larger) on a webpage. The larger the images are (and the number of images on a webpage) can slow load times.Keep in mind that most cameras and phones take images that have large file sizes. You’ll want  to shrink their size using tools like MS Photoeditor and Google’s Picasa.
  6. PNG file formats are great for online learning (especially screenshots and graphics). JPG works well for photos.

Combining Images with Other Elements

Images combine well with audio and text.

Take a second to deconstruct the following video by Dan Myer.

[vimeo id=”1228744″ width=”900″ height=”675″ autoplay=”no” api_params=”” class=””]

Not only does Dan do a good job at illustrating how to use text and images, the medium he chooses to use to share this with his colleagues is a well crafted video. I’ve had this video generate considerably discussion (especially among Math teachers) and learning. It’s an excellent example of using the medium well.

Advantages of Video

Video is excellent at grabbing and maintaining attention (witness the popularity of YouTube!). It also is a good medium for conveying and creating emotion, which, in turn helps engagement.

For teachers, video serves a particular advantage in that it can be pre-made and then used by students at a different time (or used multiple times). The growing popularity of a “Flipped Classroom”, where teachers record their lectures and have students access them at home and use class time to discuss information, is built on the ability of creating easy and engaging video presentations.

Video also excels at depicting real-life events.

Disadvantages of Video

As with audio, video is not self-paced.

Video is also bandwidth intensive and requires proper infrastructure to function well.

Using Video: Rules of Thumb

  1. It is very important to learn how to embed video from video sharing sites like YouTube and Vimeo. Look for the “embed” or “share” symbol. When located, you can copy the code into your LMS or blog site. (This also allows you to remove the many distracting videos found on YouTube side columns).
  2. We’re now in the transition from video sites that run on flash to sites that use HTML 5 (and associated Video Codices) instead. This is important because many Apple devices don’t run flash.Whenever possible, try and avoid flash.
  3. For a learning environment, keep video segments to five minutes or less (this helps with chunking information).
  4. Always preview web video before placing it in an online learning environment (this might seem obvious, but we teachers have been known to be pressed for time and NOT watch the video segment to its very end).

Tools and Techniques


  1. While I know some districts block YouTube, it is by the far the best learning tool for video. It’s incredibly easy to upload video and then use it on various sites. Vimeo is another great site (especially for more artistic development).
  2. YouTube also has a simple editor that allow you to merge and edit combinations of video:
  3. Additional software favorites are Adobe Premier, Camtasia studio, and the staples of iMovie and Windows Movie Maker.


  1. Video – good video – takes considerable planning if created by the teacher. Scripting (and investing the time) creates quality.
  2. Use screencasts (video of actions on the screen) to give instructions to students on how to do activities. Jing allows for create of 5 minute flash videos and is very easy to use.
  3. Consider learning some basics of video editing.

Oftentimes teachers have little choice in the learning management system (LMS) their school district uses.

Indeed, I’ve often found the LMS to be the central stumbling block to good online design.

Common LMSs (2012)

In (general) order of use, the most common LMSs in primary education are:

  • Schoology
  • Moodle
  • Blackboard
  • Itslearning
  • Schoology
  • Sakai
  • Infrastructure

Because each LMS is built on (oftentimes) widely different platforms, I wanted to present some general rules that can apply to when building courses in them.

Rules of Thumb

  1. Provide clear structure: When possible, provide a clear structure and outline your students can follow on a daily basis. Remember the rules of thumb for text.
  2. Lots of white space: White space makes it easier for student to read.
  3. Limited text: In the normal structure of the class – use limited text.
  4. Remember aesthetics:  Ugly classes are won’t get used. You may like orange and purple together, but as a general rule your students will not.
  5. Concise directions: Just like in the classroom.
  6.  Limited clicks: The more clicks it takes to get something done, the more likely students will jump ship.
  7. Chunk the information: For cognitive reasons.
  8. Story telling: For cognitive reasons
  9. Informal writing style

Leave A Comment