The Middle School Moodle Page

Since adopting Moodle two years ago, our Moodle site has gone through many changes; however, I am still unsatified about the way it looks.  Though I can’t do anything with the layout or the resource icons, I can add graphics in the middle boxes and hopefully make it more user friendly.  One page that I am in charge of is the middle school main page.  It looks like this right now.

Why is Moodle so Ugly?

I enjoyed reading the article Understanding Visual Hiearchy in Web Design, and I am hoping to add elements of varied color, size, style and texture to make this page more interesting.  I used to do graphic design as a side job many years ago but I am not great at it.  Though I am okay at Photoshop, I wish I was better at Indesign and coding.  Maybe one day…

Some of the things I want to change on this page..

  • Make Attractive buttons for course links
  • Design a Button for Week Without Walls Link
  • Redo the BYOT Resources Block
  • Delete the outdated Photo Contest
  • Re-Design Library section

The first thing I usually do when I start designing something is look for examples online.  While I’m scouring the Internet, I would love some suggestions for re-designing this page.  Please post them in the comments.

2 days later…

I designed kid friendly navigation to the course pages; however, I can’t get the spaces to dissapear between the images in the html.  After working on this for way too long and it not looking the way I want it to, I’m almost frustrated enough to give up.  Can anyone give me some HTML pointers to make the spaces go away?

signsScreen Shot 2014-01-19 at 8.23.48 AM




I want it like this





Not like this


2 thoughts on “The Middle School Moodle Page”

  1. Hi Laura,

    Good luck in your effort to make the Moodle page more user and visually-friendly. AISC is the 2nd school I have worked where Moodle is the main platform for teachers. I think AISC has made some good progress this year in making the Moodle page better. Still, like you said, it has a long way to go. I like your suggestions. I liked your link, “Why is Moodle so ugly?” My feeling on Moodle has not changed. I think it’s a find platform for high school and university students and adults taking courses. It does offer some nice features that you cannot do with Blogger or WordPress.



  2. Like the idea to redesign this page. I also wonder if the Google Apps buttons needs to be so big and take up their own widget. What if you made them smaller so they take up less room? Again it’s all about getting what you need above the scroll. Here’s the last page I helped to design at ISB. You can see the same buttons you have only smaller and easily accessible in the upper right hand corner. Just by making those images smaller you could gain a lot of space down that sidebar. Just a thought. 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s