Este documento discute el diseño gráfico de cursos en Moodle. Señala que Moodle no está diseñado para crear portadas atractivas visualmente, pero que esto se puede superar mediante técnicas sencillas. Presenta ejemplos de la evolución del diseño gráfico de un curso de Psicología Infantil a lo largo de varias versiones, mejorando la presentación y usabilidad. Concluye que lograr el equilibrio entre lo gráfico y lo técnico mejora la calidad de la oferta educativa virtual y la satisfacción de

1. Moodle: una cuestión de diseño
Santiago Palacios Navarro
E.U. Magisterio de San Sebastian
Universidad del País Vasco / Euskal Herriko Unibertsitatea
santiago.palacios@ehu.es
www.hegobitaldea.net
665750549

2. 1. Introducción
El e-learning ha apoyado su desarrollo en las posibilidades técnicas que el
mercado ha ido ofreciendo (SCORM, LMS, OCS, PHP…). Hay que reconocer en este
sentido que estas herramientas actualmente satisfacen en gran medida las necesidades
de cualquier docente de cara a crear espacios donde generar secuencia formativas
(Casamayor, 2008) e interacciones en distintas direcciones (profesor-estudiante,
estudiante-estudiante, agentes externos-estudiantes…) de una forma sencilla pero muy
eficaz (Coll y Monereo, 2008).
Sin embargo, es habitual comprobar que la mayoría de los espacios creados
desatienden o no prestan atención a la presentación gráfica de los mismos aunque los
profesores se afanan por cuidar gráficamente los contenidos concretos (vídeos,
presentaciones, textos…) que se albergan en esos espacios.
Por ello, una de las preocupaciones durante estos últimos años han sido los
aspectos gráficos relacionados con las portadas habiéndose producido una importante
evolución en la forma de presentar los cursos virtuales. Cabe señalar que la herramienta
Moodle no está precisamente diseñada para crear portadas gráficamente elaboradas y
atractivas visualmente. Al contrario, impone restricciones que en muchas ocasiones
hacen desistir de este tipo de abordajes pero que son superables mediante un sencillo
procedimiento.
Como ya se habrá podido entrever detrás de estas líneas está la sempiterna
polémica entre desarrolladores y diseñadores que gira en demasiadas ocasiones en torno
a la cuestión de la importancia de los aspectos técnicos sobre los gráficos y viceversa.
Esta dicotomía también está presente en nuestro trabajo y afloró cuando se estudió la
implementación de objetos SCORM (Sampedro, Sariego, Martínez, Martínez y
Rodríguez, 2005) en alguno de nuestros cursos.

3. En cualquier caso, los espacios virtuales que se presentan en esta comunicación
pretenden aportar algunas soluciones y alternativas a esta falsa dicotomía abogando de
esta manera por un enfoque que contemple también el abordaje gráfico como una tarea a
realizar dentro del propio proceso de diseño didáctico de los cursos (Palacios, 2005).
2. Moodle y el diseño gráfico
En efecto, el diseño didáctico de los cursos virtuales dentro de la plataforma
Moodle puede enriquecerse gracias al diseño gráfico y al uso de una interface atractiva.
La coordinación de ambos aspectos puede dar lugar a buenos resultados de cara a
aumentar la usabilidad de los cursos y la satisfacción del usuario y el docente.
Sin embargo, como ya hemos señalado, Moodle muestra a priori cierta rigidez
en relación a la forma de presentación general de los recursos y actividades de los
cursos. Puestos a detallar algunos de estos elementos que obstaculizan podríamos
apuntar los siguientes:
1. Ofrece un marco estandarizado (2 columnas laterales y 1 central) que se
corresponde con un diseño grafico-visual muy extendido en muchas webs
y que resulta funcional pero que anula la necesaria reflexión y creatividad
del docente con relación a la organización óptima de la información.
2. Igualmente la organización de los contenidos dentro de las cajas da lugar a
espacios que abruman visualmente al convertirse en listas muy extensas de
actividades y recursos e invitan a pensar en la sobrecarga cognitiva que
pueden producir en el usuarios.
3. Existen algunos elementos cuya modificación no está al alcance de la
mayoría de los docentes usuarios de Moodle ya que se requiere para ello
de conocimientos sobre CSS, HTML y/o php.

4. Con relación a los 2 primeros aspectos mencionados cabe señalar que además
de condicionar visualmente la presentación del curso comprometen o condicionan en
cierta forma el diseño instruccional del docente o la secuencialización de los contenidos
al ofrecer elementos que el docente no ha pensado ni utilizado previamente.
Por otro lado, si bien el último aspecto mencionado corresponde solucionarlo a
los desarrolladores de Moodle mediante la inclusión de herramientas que hagan más
accesibles al docente usuario estos elementos, los 2 primeros pueden superarse
aplicando un principio necesario para la resolución de algunos problemas y que consiste
en renunciar y salirse del marco propuesto.
Esto es, frente a la disposición de cajas y columnas que ofrece Moodle como
estructura al iniciar la creación de un curso podemos pensar en cerrar (y eliminar)
muchos (o todos) de los elementos hasta llegar a tener una pantalla casi vacía. Esta
renuncia visual de esos elementos no tiene que conllevar una renuncia a la utilidad o
funcionalidad de los mismos. Por ello, este paso en el diseño se realizará después de
haber elaborado el curso de forma habitual.
Figura 1. Un marco nuevo para Moodle
De forma resumida el procedimiento para realizar este tipo de presentaciones
son los siguientes:

5. 1. Elaboración de las actividades y recursos y su colocación en su caja
correspondiente.
2. Diseño de la portada incluyendo en la misma esos recursos y actividades
mediante el uso de enlaces.
3. Retocar los parámetros referido al número de cajas visibles en la sección de
configuración.
4. Cerrar el resto de elementos no deseados.
Figura 2. Vista con la edición activada del nuevo marco para Moodle
3. Presentación de ejemplo
A pesar de estas consideraciones sobre Moodle hay que señalar que también
ofrece algunos recursos directamente relacionados con el diseño grafico. Así existen
diversas plantillas o temas tanto para Campus Virtuales como cursos. En cambio, es
demasiado frecuente encontrarse con Campus Virtuales basados en Moodle anodinos y

6. que apenas han personalizado su presentación. Por ello es una tarea de los
administradores seleccionar y customizar las plantillas existentes cuando no crear
plantillas propias. En definitiva, atender también estos aspectos gráficos.
En cualquier caso, no es necesario llegar hasta la elaboración de una plantilla
propia para dotar a los Campus Virtuales de entidad gráfica singular como reflejan las 4
portadas de ejemplo que presentamos.
Figura 3. Distintas portadas de Campus Virtuales
En cuanto a las portadas que acompañan nuestros cursos estas han sido
reelaboradas a lo largo de estos últimos años coincidiendo con cada nueva utilización de
los mismos. En general han pasado de tener la portada estandar habitual en Moodle a
los diseños nuevos realizados teniendo en cuenta el procedimiento anteriormente
señalado.
4. Presentación II: evolución en el diseño del curso HAP

7. Por ello, más importante que la reflexión teórica puede resultar la presentación
de la evolución gráfica de uno de estos espacios virtuales. En esta comunicación nos
centraremos en el curso virtual que acompaña a la asignatura de Haur Adinaren
Psikología impartida en la Universidad del País Vasco en la titulación de Maestro de
Educación Infantil (Palacios, 2006). El curso contempla 5 elementos definitorios:
el uso del vídeo como texto básico de los contenidos de la asignatura
el papel central que desempeña el foro como herramienta de
intercambio y co-construcción de conocimiento
el uso de SCORM como herramienta técnica organizadora de los
contenidos y actividades y su utilidad como guía del alumnado
el uso de la autoevaluación virtual
la atención dedicada a los aspectos gráficos
Así, mientras en la primera versión apenas se atendieron los aspectos gráficos,
la segunda seguramente puede resultar gráficamente excesiva. Creemos por ello que la
tercera versión consigue un mayor equilibrio entre el diseño gráfico y la organización de
los contenidos y actividades, aunque creemos que todavía son mejorables tanto los
aspectos tecnológicos y los gráficos como su integración.
Así, en la portada de la 2ª versión del curso virtual (Figura 4), además de las
seis áreas de desarrollo infantil se presenta un primer capítulo dedicado a la teorías y
métodos de la Psicología Evolutiva y su correspondiente foro, un glosario general con
términos asociados a las áreas de conocimiento, una herramienta para la búsqueda de
información, un lugar para la entrega de los trabajos individuales, el espacio dedicado a
los próximos eventos, así como el foro inicial y formativo denominado “La importancia
de ser simpático y la Educación Infantil”, un tablón de anuncios en el que se invita a

8. participar en el espacio dedicado al autoconocimiento o en otras actividades no-
formales.
Fig. 4: Portada del espacio virtual didáctico – segunda versión (captura de pantalla)
En la tercera versión (Figura 5), si bien se mantiene la estructura anterior, se
han eliminado algunos elementos (Autoconocimiento, y eventos próximos) y añadido
otros nuevos (Aprendiendo a través de imágenes o Exámenes). Pero lo más importante
es, sin duda, la profunda transformación gráfica realizada, que consiste en la creación de
logos propios (realizados por el diseñador David Tavares) y la reorganización espacial
que ha aumentado significativamente la usabilidad del espacio.

9. Fig. 5: Portada del espacio virtual didáctico – tercera versión (captura de pantalla)
En esta tercera versión de este curso/espacio virtual se ha optado por organizar
los contenidos utilizando para ello la herramienta SCORM (Figura 6). En este caso esta
decisión no está tan ligada al uso clásico del SCORM como una tecnología que facilita
la reutilización y la portabilidad de los contenidos virtuales educativos creados. Sin
menospreciar esta característica, el SCORM posee otra: la posibilidad de presentar de
forma ordenada los contenidos y actividades de aprendizaje propuestas, lo que facilita,
por un lado, su realización por parte de los estudiantes y, por otro, su evaluación por
parte del profesor. Han sido precisamente estas últimas razones las que nos han guiado.

10. Fig. 6: Índice de contenidos de un paquete scorm (captura de pantalla)
De esta forma, se elaboraron seis paquetes SCORM, uno por cada una de las
áreas/vídeos (Ver imagen). Para su creación se utilizó la herramienta eXe. Todos y cada
uno de los SCORM contenía los mismos elementos:
Trascripción del vídeo: (ver fig. 2).
Ideas principales, cuadros sinópticos, glosario con términos importantes
relacionados, glosario con las investigaciones: (ver fig. 3).
Autoevaluación (ver fig. ¿?):
Foro/debate desarrollado durante cursos anteriores y foro/debate del curso
actual.
Glosario
Lectura básica y lecturas complementarias:
En resumen, los estudiantes disponen de 11 actividades a realizar en cada uno
de los paquetes SCORM y el número de intentos se ha dejado abierto.

11. Fig. 7: Trascripción de uno de los vídeos apoyado en un menú navegable
Fig. 8: Tabla resumen de apoyo de los contenidos del vídeo “Hablar”
Para finalizar con esta sección es justo señalar que este aumento de la
usabilidad del espacio es también consecuencia de la utilización del SCORM, y en este

12. caso creemos que la simplificación gráfica ha sido positiva. Así, mientras en la segunda
versión los contenidos de cada área se organizaban dentro de un espacio creado en
HTML (Figura 9), en la tercera versión esta organización presenta más claramente una
propuesta de secuencia de aprendizaje que en última instancia decidirá recorrer cada
uno de los estudiantes. Se ha simplificado el diseño para que la navegación sea más
clara sin que los contenidos se vean mermados.
Fig. 9: Presentación de contenidos de la segunda versión, en formato HTML
5. Conclusiones
Lograr el equilibrio entre los aspectos gráficos y los técnicos es un reto
dinámico que se puede obviar pero que puede producir mejoras significativas en la
calidad de la oferta educativa virtual y un mayor nivel de satisfacción por parte del
alumno y del docente quien puede tener un mayor control sobre su propio curso y ver
realizada su creatividad.

13. Sin embargo, con esta comunicación no pretendemos decir que todos los cursos
deban utilizar las técnicas y orientaciones que hemos señalado sino llamar la atención
sobre las posibilidades que ofrece Moodle para mejorar o personalizar la presentación
de esos cursos.
Más aún entendemos a quienes se oponen precisamente a realizar este tipo de
presentación basándose precisamente en la desorientación que pueden producir entre
alumnos cada día más habituados a trabajar con Moodle y su diseño estandarizado.
Dicho de otra forma, se desaprovechan los conocimientos previos de los alumnos.
Por otro lado, esta forma de presentación al estar basada en la utilización de
enlaces conlleva algunas dificultades añadidas cuando hay que migrar ya que suele ser
necesario actualizar algunos de esos enlaces.
En definitiva, con esta comunicación esperamos que algunos docentes puedan
descubrir una nueva forma de afrontar la tarea de diseño de sus cursos ahora prestando
atención también a los aspectos gráficos ligados a la portada.
6. Bibliografía
Casamayor, G. (2008). La formación on-line. Una mirada integral sobre el e-learning,
b-learning… Barcelona: Grao
Coll, C; Monereo, C. (2008). Psicología de la educación virtual. Madrid: Morata
PALACIOS, S. (2005). Variables psicodidácticas de las nuevas tecnologías. Revista de
Psicodidáctica, vol. 10, nº 2 ,81-95
PALACIOS, S. (2006). “Estrategias de aprendizaje y nuevas tecnologías en la
enseñanza de la psicología evolutiva y de la educación”. En A. Goñi, Innovación
Educativa en la Universidad (pp. 157-169). Bilbao: Servicio editorial de la
Universidad del País Vasco.
Sampedro, A., Sariego, R., Martínez, Á., Martínez, R. A., Rodríguez, B. (2005).
Procesos implicados en el desarrollo de Materiales Didácticos reutilizables para
el fomento de la Cultura Científica y Tecnológica. RED. Revista de Educación a
Distancia, número monográfico II. Consultado (día/mes/año) 2005 en
http://www.um.es/ead/red/M3/