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.

Functional design

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.

New homepage

The new homepage for UCL Moodle

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.

My Home - a personal space

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

The Student Moodle Inductions course in new Moodle

My Moodle menu

My Moodle is used to get you around the site, navigate to My Home, your profile and if you like, other courses.

Settings menu

The Settings menu is used to edit the place you're in, such as courses, your profile or a resource/activity

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 moodle2@ucl.ac.uk

Part 3 coming soon-ish

Filed under Move to Moodle 2

Tags: beautiful, design, Moodle, moodle2, theme

7 Responses to “Making Moodle Beautiful – Part 2”

1

Matt Whyndham wrote on 19 March 2012:

Having been to a beta workshop recently, it is definitely quite a bit better overall, However …

I think the width parameter needs tweaking. If you consider that by default (three columns) the active bit of content uses about 30% of the browser window. Consequently I’ll be turning at least one column off. There’s LOTS of under-utilised width in the new template, for example the empty space under the new side tabs (which are, incidentally, the wrong way round). Keeping the appearance relatively the same when switching to edit mode is another consideration. Those extra icons cause the length to increase as line wraps suddenly occur.

But, the worst bit I’ve seen is at the back end interface. There’s no proper file system!!!
2

Verbetering Moodle lay-out (deel 2) | Moodlefacts.nl wrote on 19 March 2012:

[…] Bekijk het bericht ‘Making Moodle Beautiful – Part 2‘ […]
3

Karl Goddard wrote on 20 March 2012:

Absolutely fantastic theme – probably one of the best I’ve seen, so clean and modern and more importantly ‘inviting’!

I too have opted for a fixed width theme as part of my revamp of my College’s Moodle install but as Matt eluded to, having a fixed width with 3 cols makes for a very cramped UI.

I’d recommend moving to a 2 col layout for sure!

Thanks for sharing your work!
4

Matt Jenner wrote on 21 March 2012:

Matt – I fully understand your point about the width. The main issue is that websites should fit into 1024pixels wide. It’s wonderful that many people have laptops and monitors with 1600+ pixels, but the reality is that websites are difficult to design for larger monitors when also taking into account the smaller ones. For example, Facebook and the BBC are both optimised for 1024 in width. There’s some strong arguments for making Moodle wider but the main issue is if you’re using a widescreen and make something that’s inaccessible for a smaller screen (say for example on in a cluster room) then the students or staff are unable to view the content.

Sadly, and contradictory, some parts of Moodle really struggle in a fixed width (Grader report, Quiz reports, Database activity administration) and a clever fix for this is needed & in progress.

Karl – thanks for sharing your comments. We prefer two columns as well, however making changes to other people’s courses is a delicate job. We have noticed that as Activities and People blocks are removed (but not deleted) by the upgrade and perma-docking Navigation and Settings that ‘Search forums’ is often a loner on the left side. It’s likely that we shall do a SQL query to move that one to the right as the impact of such a block, and the fact that it may rarely get used means it’s unlikely to rattle anyone’s cages. However, for courses which have made concious decisions about them, well, they may be less happy if we start moving things around and changing the weighting/priorities of things – for example the ‘Course Menu’ third-party block).

Generally we have a bit more tweaking to do. One thought is that the three side buttons don’t quite work and we may have to move them, maybe as horizontal along the top. We keep looking at the Awesomebar and wondering if we can replicate/copy it into our theme… but we’re not 100% sure on that yet.

I’ll keep posting on here with our progression.

Matt
5

Adam wrote on 3 April 2012:

Nice. Like the Theme. I manage an e-learning company called Scholarix e-Learning solutions. I love what UCL has done here, and they way the laid out their theme. The theme we implemented with our moodle install has a navigation menu at the top as well, which will have relevant links that link to resources outside of moodle. I noticed UCL didn’t go this route, but overall they did an amazing job.
6

Leonard Houx wrote on 12 June 2013:

Looks like some great work, Matt. I would love to chat with you guys about how you are approaching your theming. Speak at the next M25?
7

Derak wrote on 25 April 2014:

It looks very nice.
How many hours did it take to achieve this kind of custom look?

Were any changes required to the core?