[UPDATED] Moodle™  theme Design Basics - Color, Fonts and Graphics

We have discussed a few fundamental principles of Moodle Usability. In this post, we will continue our Moodle Usability blog series by discussing the basic elements that make up a good Moodle theme design: fonts, colors and graphics. We will continue our discussion of Moodle themes in our next blog post, where we will tackle navigation, layout, widgets and behaviours.

The Importance of Moodle Theme Design:

While Moodle Provisioning and Moodle Development focus on the functionality of your Moodle site, Moodle theme design focuses on your Moodle site's overall look and feel. Look and feel are important because color, fonts and layout are the first elements that a learner notices when engaging with your Moodle course. For this reason, a good theme can engage your learners and make your course easier to work through. In addition, a proper Moodle theme can re-enforce your organization's branding and make the transition from your website to your Moodle course seamless. The result is a Moodle course that is easy to engage with, properly branded to match your website and more effective in its transfer of knowledge to learners.

In order to make your Moodle site as effective as possible, we recommend thinking about your Moodle's theme before beginning to build the course. At Lambda Solutions, we've put in place a Moodle Theme Design process which allows us to accomplish the client's goals, while focusing on their learners.

Our Moodle Theme Design Process:

• » Initial Meeting
  Meet with the client to discuss necessary required Moodle theme elements
• » Storyboarding
  Storyboard and lay out the plan for the Moodle theme
• » Mockup
  Have one of our graphic artists come up with a Moodle theme mockup
• » Revision
  Present mockup to the client and revise appropriately
• » Sign-off
  When ready, have the client agree and sign off on a final Moodle theme mockup
• » Design
  Design and deploy the Moodle theme based on the agreed-upon mockup

Now that we know a little bit about the process and importance of Moodle themes let's turn our attention to three specific elements that make up a Moodle theme: fonts, colors and graphics

Colors in Moodle theme design

Colors are one of the most important elements in a Moodle theme's design because they evoke emotion, promote readability and re-enforce your branding. Colors evoke emotion by activating the right part of the brain. For example, according to color psychology, red is seen as aggressive, while blue as serene and calm. In order to effectively use color in your Moodle theme design, be sure that the colors you use match the intent of your Moodle site and reinforce your brand.

Here are a few of our recommendations for color-use in your Moodle themes:

• » Don't over-use color.
  Stick with a maximum of 5 colors in your theme to ensure a professional and clean look
• » Learn to use a Color Wheel
  Use a color wheel or palette wizard to select which colors you'd like to use
• » Make use of Contrast
  Contrast and emphasize text using color, but do not overdo it - too much contrast means less visibility
• » Focus on your Brand
  Always be sure that your overall color-use reflects your intent and branding

Fonts in Moodle theme design

After taking colors into consideration, we will now focus on the other most important Moodle theme design element: fonts and typography. Typography is important because, unlike color, it engages the left side of the brain, which is responsible for logic. This means that while color can be used to place emotion and emphasis behind your thoughts, proper use of fonts can allow you to organize those thoughts and present them in a logical order to your learners. The end result is a more structured and effective learning experience.

Here are a few of our recommendations for font and typography use in your Moodle themes:

• » Don't over-use font types
  Stick with a maximum of 2-3 fonts to ensure that your Moodle course content is organized and readable.
• » Font type is important for readability, so choose wisely
  For example, some typographies say that a sans serif font is easier to read on a computer than a serif font.
• » Play around with font size
  Proper use of font size can help categorize and group information for your learners. For example, titles should have larger sizes than content.
• » Emphasis is good
  Important bits of content should be highlighted, bolded, italicized or underlined, but overdoing it will get you in trouble.
• » Fonts have personalities
  The fonts you choose should reflect your intent and brand. For example, Comic Sans may not be the best choice for a corporate Moodle site. Or any site for that matter...

Use of Graphics in Moodle theme design

Graphics are a third element to take into consideration when designing your Moodle theme. Much how "a picture says a thousand" words, the right graphics can elevate your Moodle by re-in forcing your content and aiding in the learning process. Graphics, pictures, photos and icons can all help achieve this by turning learners' attention to important elements of your course.

Here are a few of our recommendations for Graphic use in your Moodle themes:

• » Every Graphic must have a purpose
  Graphics should reflect the intent of the site and reinforce a message. Every graphic on the page should have a purpose; if it doesn't, replace it or delete it.
• » Graphics for Emphasis
  Use graphics alongside important text to draw attention to it
• » Do not overuse graphics
  Similar to color and fonts, over-using graphics can hinder the effectiveness of your Moodle course
• » Ensure Format and Style Consistency
  Make sure all of your graphics are of the same format and symbol (i.e. photo vs. drawing vs. symbol) and are placed consistently in each page
• » Loading Time Considerations
  Take into account loading time and image size
• » Icons
  When using icons, be sure that each icon has a purpose and is intuitive to understand

More on Moodle Usability...

This brings us to the end of our basic coverage of Moodle theme design. In our next blog post, we'll discuss navigation, layout, widgets and behaviors. Stay tuned for updates coming soon!