Making Moodle Beautiful – Part 2
By Matt Jenner, on 15 March 2012
Following on from a previous post we have been working hard to deliver a Moodle that’s designed for everyone and looks functional, modern and reflects UCL’s style and quality. We think we’re quite close so here’s a little more detail on what’s coming, and what our pilot users are using right now and giving us feedback on.
Following on from mapping the functionality of Moodle and comparing it against many other Moodle’s from across the world we came up with some prototype designs from our designer – Huw Jones from Photographic and Illustrative Services, ISD – a group of people at UCL who can do print, web, illustrative design and photography. This design was then implemented into Moodle. A lot of [on-going] tweaking later, we have something we’re proud to show.
The homepage is very important, we want a simple route for UCL people to log in but we also have a space for Guests, important news and making Moodle more of a showcase of research or local imagery and promotion of interesting areas within Moodle for users (such as courses on academic writing, induction courses, staff development and more).
Note the Help & Support button – this slides out and provides information for people who are unable to log in or looking for support.
Once logged in – My Home
Each person is taken to an areas entitled My Home – this is a personalised and custom space containing your courses enrolled in and some useful blocks on the right side, details below.
This area contains a few things, most notable are the three navigation buttons on the left side. Help, My Moodle and Settings are used all across Moodle and are essential for getting around, changing things and getting support.
In addition this area has:
- My courses – a list of all the courses you are enrolled on (staff or student);
- Search courses – find more courses to browse or enrol on;
- Logged in user – your details (you may want to update them if they’re incorrect or add a profile image);
- Calendar – retrieves all important dates across all your courses, such as assignment deadlines, Moodle examinations or scheduler appointments – they’re all displayed here;
- Private files (not shown) – store temporary files on Moodle such as assignment drafts or important documents – like a USB key in the cloud (but limited to 30Mb for now);
- Latest news (not shown) – important news and announcements from the Learning Technology Support Service about Moodle and related services;
- Messages (not shown) – private messages from friends, colleagues and other people at UCL.
Looking at a course
My Moodle menu
Going fixed – reducing wide screen courses
One change most will notice is that Moodle is now fixed in size, this means that it will always be the same width and doesn’t just stretch to the size of your monitor. This was a difficult decision to make, because it means some courses don’t display wide images or content as well as they used to. The reason why we did this was primarily based on accessibility; not everyone has a widescreen monitor and so while what you have made might look OK for you, it may look terrible, or worse, illegible on other computers. By having a fixed-width which accommodates to a maximum width specification it means Moodle will look as expected on most sized screens. The BBC and Facebook, for example, both do this, it’s fairly standard web design. There’s lots of ways we can quickly fix up courses which may look a little skinny from this change and more details will emerge over the coming months. We’re also looking at a user-based width expansion button – but this is still in the early stages.
A few notable comments
Making Moodle look ‘beautiful’ is hard work, firstly everyone uses it differently, which is great, but it means we need a platform which can accommodate all this creativity. While this is the kind of challenge we enjoy, it means that the end results always scale differently in people’s opinions. The response we have had already is ‘much cleaner’, ‘really easy to visualise my future course developments’ and even ‘looks like facebook’ – which we’re not sure is a good thing. We’ve also already had the ‘urgh, sicky green’ – which is a fair comment and that green colour may change to something different.
Towards Part 3, and beyond
Changes are still taking place, so this is not the final design. We’re also working with a few Moodle quirks which are working themselves out. Stay tuned, or get in touch with your feedback on email@example.com
Part 3 coming soon-ish