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

March 22, 2023

Sell, market, manage, and scale your eLearning all in one place with the brand new Lambda Suite!!

Explore Now

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


Use of fonts in Moodle themes


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


Use of graphics in Moodle themes


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!


Sell, market, manage, and scale your eLearning all in one place with the brand new Lambda Suite!!

Explore Now
Stay Current on Everything LMS


Download the Hot Sheet

Sign Up for Our Newsletter Today!