Moodle Front-End

Tema hijo de Boost

Personalización visual y estructural de Moodle 4.5 a partir de Boost, enfocada en identidad, claridad de navegación y una experiencia más coherente para portfolio, formación y producto digital.

Qué es un tema en Moodle

Un tema define la capa visual de la plataforma: colores, tipografía, navegación, layouts y estilo de componentes. No cambia el contenido, pero sí la forma en que la plataforma se percibe y se utiliza. Moodle incluye dos temas base, Boost y Classic, que sirven como punto de partida para personalizar la experiencia visual del sitio.

Por qué partir de Boost

Boost es la base moderna de Moodle y permite una personalización más flexible. Classic, por su parte, hereda de Boost y mantiene un enfoque más tradicional. En este proyecto el desarrollo parte de un tema hijo de Boost para trabajar sobre una base sólida y escalable.

01

Front Page

Moodle trata la portada como un curso, pero esa lógica puede replantearse. Aquí vemos un ejemplo visual de cómo la Front Page original de Boost organiza los recursos que Moodle propone mostrar en portada y cómo, a partir de esa base, puede simplificarse para funcionar como una entrada más limpia, con foco en el contenido central y sin bloques laterales.

Front Page original de Boost
Front Page personalizada
02

Paleta de colores y tipografía

Son dos de los cambios más pequeños a nivel técnico y, al mismo tiempo, de los más visibles. Al trabajar sobre las variables del tema es posible redefinir la identidad general del sitio sin rehacer interfaces completas. Esto mejora legibilidad, jerarquía y coherencia visual en toda la plataforma.

03

Navbar

La barra de navegación se ha limpiado visualmente para reducir ruido, mejorar espaciados y alinearse con la nueva identidad del sitio. Es una intervención pequeña, pero muy importante, porque la navegación condiciona gran parte de la experiencia en Moodle.

Navbar original de Boost
Navbar personalizada
04

Pantalla de login

La pantalla de acceso es el primer contacto con la plataforma. Aquí se ha trabajado una versión más limpia y más alineada con la identidad visual general, reforzando la sensación de marca desde la entrada.

Login original de Boost
Login personalizado
05

Se ha incorporado un footer propio para dar cierre visual al sitio, reforzar identidad y reservar un espacio más claro para enlaces, información complementaria y continuidad de marca.

Footer personalizado
06

Extensión del frontend

Además de los ajustes visuales del tema, el proyecto incorpora recursos externos de frontend para ampliar las posibilidades de interacción y enriquecer determinados bloques visuales. Esto permite llevar Moodle más allá de una personalización básica y acercarlo a una experiencia más cuidada y diferenciada.

07

Otros ajustes visuales

Junto a las modificaciones principales, también se han ido retocando otras partes de la interfaz para mejorar el diseño general del sitio. Como se ve en este ejemplo del menú de curso, pequeños cambios de estilo también ayudan a reforzar jerarquía, legibilidad y continuidad visual dentro de la navegación lateral.

Menú lateral de curso original de Boost
Menú lateral de curso personalizado
08

Valor del proyecto

Este trabajo muestra cómo una personalización bien planteada puede cambiar la percepción general de Moodle sin alejarse de su estructura base. El objetivo no es ocultar la plataforma, sino reinterpretarla para que responda mejor a una marca, a un contexto y a una experiencia concreta.