Solutions to make pretty and interactive Moodle landing pages

Let it be clear – I really like Moodle. But – no matter how many changes the wonderful Moodle people have made over the years, you still can’t call it pretty.

I think it is a known fact that people who work a lot with Moodle and appreciate it, are also kings and queens of workarounds. to make things look nicer or to create better experiences for their learners we’ll tinker endlessly with a combination of mostly free tools to achieve what we want. I’ve been looking for quite a while at creating landing pages and interactive book pages to get those visual menus we all like. Let me walk you through my journey, that ended (for now) with Piktochart.

Only Moodle?

The first strategy was to use only Moodle. There are two options: build your graphic experience in HTML or use an image map. An HTML layout will quickly push you towards the use of tables, as the current WYSIWYG often kills any css you put in. This does not work very well towards responsive design and it never looks really good. An image map is very much last century – and requires a lot of effort. It’s also not really a solution you can provide to a novice.

What I actually needed, was a blank canvas to draw on, and then add Moodle links to it. The proprietary software offers us great solutions for this: Storyline or Captivate for example. However, they have their drawbacks: not everybody has access to the software, the learning curve can be quite steep (Captivate more than Storyline!) and each little change requires a new upload. It can also be quite a challenge to show your design in the format you want, without scrollbars, borders etc.on the Moodle page.

Google Draw

This led me to the use of collaborative tools online. My first aha-moment was Google Drawings. Perfect! I could create whatever I needed on a blank canvas, add links and share it with anyone who might want to make changes over time. ON top of that, if you publish to web and embed it will automatically update. Imagine my disappointment when it turned out that links do not work on published Google drawings. Google, please, can you fix this? Still a great solution for pretty splash pages, but not to create interactive menus.

Piktochart!

When a colleague of mine used an online tool called Piktochart – actually designed to create infographics – I saw light at the end of the tunnel. Here was a tool that allowed you to make a beautiful design – with ready made elements in the bargain if you need them and are not much of a visual designer yourself. You can create links, publish to web and embed. It’s collaborative, updates automatically and provides a blank canvas to work on if you need it. We decided to buy a premium account for our department so all designs are centrally kept and we can work without watermark.

Pretty Moodle landing pages and interactive menus – sorted.