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

Advertisements