There are three main types of Moodle pages to consider when it comes to design:
- Moodle front pages
- Moodle course pages
- Moodle activities
Before we go into detail about design considerations, let's look at examples of each of these to see how we can improve them with a few basic steps.
Moodle front page
If we take Moodle straight out of the box, set up some blocks for the main menu, provide some useful links, and set the front page settings to show a list of courses, we could have something like this:
It's functional enough, but not very engaging. Just by making a few changes, we can make the front page much more interesting and readable:
- There's a new theme (Moodle speak for the color scheme and automatic font choices). As we'll see in a bit, some themes also include tabs and drop-down menus.
- There's an appropriate image in the top-center of the screen to draw users in.
- The About this site block has a photo of the administrator, which provides a personal touch.
- There's an easily-identifiable "start here icon"—another helpful feature that guides your users in the right direction.
Moodle course page
Like the Moodle front page, a standard course page automatically creates three columns for us to fill with text. If we choose a topics format from the Settings menu and write out a list of activities and links for our course, it could look something like this:
The problem here is that it's difficult to distinguish important information from unimportant information. There's a lot of scrolling to be done, and there are no visual clues as to what the course page is about. Here's one way of transforming the page:
- There's a new theme.
- The theme includes tabs with links to key parts of the site.
- There's an image related to the course topic (teaching) at the top of the course page.
- The long list in the previous version has been reduced to a more manageable size.
- Important information is at the top of the page, and is in a larger font size. It contrasts with less important information, which has a smaller font size.
- Lines are used to separate different sorts of information.
- There is more color harmony—at attempt to get the colors to blend.
- There's an avatar introduction in the left block for new users.
When we're pushed for time, it's all too tempting just to set out a list of references without paying due attention to instructions and a helpful hierarchy of information, as in the following example:
There's a lot of information here. We can use the Book module to organize the information, and make the page more readable, as in the following transformation:
- The previous list has been divided into sections in the Book module
- There's a "how-to" section at the beginning of the Table of Contents
- Graphics from the target websites have been included as visual clues
- The Tool labels such as Audacity and Findsounds are in a larger font size to make them stand out
- An action girl icon indicates task instructions
- Task instructions are in bold blue to make them stand out
- A grid is used to separate sections
As we can see, by enhancing the visual design of our sites we can make our materials more engaging and effective. We can also make them more attractive by improving the quality of the audio, images, and video that we use. Here are some principles we could take on board:
Consider hierarchies of importance in your materials. The default font size on HTML pages is 12 points, similar to what you're reading now. Vary the size to make more important information stand out. You can also use images, buttons, and navigation signs to help users see the function of pages and content more quickly and remember it.
Being consistent in your use of fonts for certain sorts of information, font sizes for ranking information, and navigation links will make it easier for users to understand the site and will make it more aesthetically pleasing. It's also better not to use too many different fonts or make your site too fancy or you will end up with a dog's breakfast. As a rule, it'll look better if you use different sizes of a limited number of fonts, rather than including lots of different fonts.
To promote design consistency on your Moodle site, consider setting up a style guide so that all teachers use the same design framework.
A basic principle of graphic design is to make sure that the objects on your page are aligned with each other. Imagine a grid that they stick to. Aligned objects look more professional and enhance contrast within pages. Moodle organizes that automatically for us with front pages and course pages, but when we set up instruction pages for activities, we need to keep alignment principles in mind, as we have more design freedom.
Aim for the best quality audio recordings and images. It is likely to make a big difference to language learners if they can listen to clear recordings and easily identify the content of images.
Each of the following sections in this article contributes to the above principles by demonstrating some of the tools available in Moodle that help you with your design. You'll find a consideration of these and other website design issues at http://www.asktog.com/basics/firstPrinciples.html.
Here are the main topics covered in this article:
- Style guide
There are two main ways of entering text in Moodle:
- Adding text pages
- Adding web pages using the HTML editor
The most common way is by using the HTML editor. Most of this section on text will look at formatting options using that.
Adding text pages
When you select Add a resource... and then Compose a text page, you get a choice of formatting options for your page.
You might find it useful to use the Moodle auto-format, as it automatically creates emoticons, paragraphs, and hyperlinks for you if you write in web addresses. Creating hyperlinks is a little more time-consuming if you choose the HTML format, as you have to create all hyperlinks manually. Markdown format is also useful if you want to create a structured document with lists and emphasis. You can, of course, produce all these in the HTML format, using the editing menu. The following options are available when you select Add a resource... and then Compose a text page.
This has limited formatting options, but will automatically turn URLs like http://moodle.org into hyperlinks and will include emoticons like J when you type :). It keeps line breaks and converts blank lines into new paragraphs.
This does not automatically format text, but gives you a wide range of possibilities for editing your text. It allows you to change font faces, font sizes, and color, as well as embed graphic images, sound, and video. Note that if you select Compose a text page and then the HTML format option, you will need to enter pure HTML-that's the code that produces web pages.
If you are not familiar with HTML, you'll be better off choosing Compose a web page and then using the HTML graphic editor.
Plain text format
This format keeps spaces and new lines, but no other formatting is available.
Markdown allows you to easily add emphasis (bold, italics), structure (bullet points and headings), and links (to images or other web resources). You can use Markdown in many places in Moodle. Simply select it from the formatting drop-down list, which is found below the text entry area, wherever you have the choice.
Adding HTML pages
Most summary pages, introduction texts, and the web pages in Moodle present you with an HTML editor for editing. Let's look at some of its features. You'll find the HTML editor, for example, when you select Add a resource... and then Compose a web page.
HTML editor shortcuts
Below the HTML editor, you'll notice a shortcut icon:
. It's also present when we add web pages, which automatically use HTML formatting.
Clicking on that shortcut icon will open a pop-up window with a long list of keyboard shortcuts that you might find useful for formatting your page. For example Ctrl + O = Change the font. The Ctrl shortcuts work on both Windows and Mac systems.
Common features of the HTML editor
Since most Moodle users use the default HTML editor, let's look at the features, which might be useful. This is what the HTML editor looks like:
The top-left drop-down menu is for font faces—the term for typefaces when we use them on web pages. The following are available:
Trebuchet is the default font face, but you might find that a different one suits your site more. If you do change the font face, make sure you use it consistently and with a specific goal. Otherwise, your pages could look messy. Sometimes, for example, it is appropriate to use a different font face to provide an example of text you want students to write. That way the model text will stand out better. Here's an example which uses the font face Arial for the main text and another font face called Georgia for the model letter.
You can also add new fonts to the HTML editor. To do that, go to Site Administration | Appearance | HTML editor. Then write the name of the font face that you want to appear in the HTML menu in the left-hand column and the name of the actual font in the right-hand column. In the following example, I've added the popular font face called Comic Sans, which you're reading now. If you want a font face other than Trebuchet to be the default font, put it at the top of the list.
A font face must be available on the user's browser and installed on each user's machine in order to work. You can find the name of the fonts in the font folder on your computer. Ask your administrator if in doubt.
Here's a list of so-called "browser-safe" font faces—in other words, font faces that work on most browsers and which you can therefore add to your HTML editor, knowing your students will be able to use them. You can find a list of names and font families at http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.
- Comic Sans MS
- Lucida Console
- Lucida Sans Unicode
- MS Sans Serif4
- MS Serif4
The next button marked 1 (8pt) lets you change the font size.
Default is 3 (12 pt), but the following sizes are also available:
Varying the size of your font helps differentiate between headings which vary in importance and so contributes positively to the design of your information. For example, we could use 24 pt for main titles and then 14 pt for subheadings. The letter task example earlier uses the following sizes:
24 pt main title
14 pt subheadings
Instructions, read the letter
12 pt for the instructions text
The third drop-down menu provides a range of styles which help you format your text.
Normal is the default. The different heading styles relate to pre-set sizes and are useful for dividing headings into main and subcategories. Address creates an italic style and is used to mark up contact information. Preformatted text is displayed in a fixed-width font, and it preserves both spaces and line breaks. That can be very useful if you find the gaps you create on the page keep disappearing. In general, using the headings will help you organize your material in a more attractive and consistent way. Here's an example of the styles.
The HTML editor allows you to change the font color (using the T icon) and the background color (using the bucket icon):
In general, it's best to have either a light color on a dark background or a dark color on a light background. The letter example earlier has a blue font on a yellow background. If in doubt about the degree of contrast on your page, check the site http://snook.ca/technical/colour_contrast/colour.html, which will provide an analysis of and verdict on your color choices.
Consider color as part of your general design. It helps with both contrast and consistency, making navigation easier. For example, if the general color scheme of your site is light blue, consider using dark blue for headings in the topic sections of your pages. This helps create color harmony and reconfirms the importance of the headings. You might find this website useful for experimenting with color combinations: http://www.colorcombos.com/.
[ 1 | 2 ]
If you have read this article you may be interested to view :