How to design a Moodle site that looks fantastic...

How to design a Moodle site that looks fantastic...

by Joe Blog -
Number of replies: 11

Hi all,

Just wanted to start a thread all about how to make Moodle look fantastic from a design point of view. It would be great if we could start by adding our own tips so that those new to Moodle build on the look and feel of their site...

My first few tips from a design point of view:

1) the power of white. using white as a design feature can be scary but can produce great results

2) glossy images. It is really easy to add a few glossy images here and there to make a site look really good. If you are familar with photoshop, a good thing to do is to download free psd. files and make your own adjustments.

3) movement. the human eye responds well to a site that looks alive. Try using a wow slider or mouse hover coding.

4) colour themes. Pick a primary colour and use grey and white to complement that colour.

5) formal white+. An easy way to give a site a great look and feel is to use the formal white code. This allows you to select a logo.

6) navigation menu. create a new CSS file and add a drop down menu for easy navigation.

As Moodlers our ethos is one of sharing. Please add to this post with your own tips!

Sascha Benson-Cooper

(Edited by Helen Foster to remove advertising according to our policy on advertising - original submission Friday, 18 May 2012, 12:21 PM)

Average of ratings: -
In reply to Joe Blog

Re: How to design a Moodle site that looks fantastic...

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
So what then is a 'wow slider'.

I should warn you - it takes a lot to make me go Wow! these days wink
Average of ratings: -
In reply to Howard Miller

Re: How to design a Moodle site that looks fantastic...

by Joe Blog -

Haha, these will make you go WOW. Google 'wow slider' and you will see...I would post a link to one of the sites we have made but I think that is deemed to be advertising...

Average of ratings: -
In reply to Joe Blog

Re: How to design a Moodle site that looks fantastic...

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Ahh... that's what that stuff is called. JQuery has a great deal to answer for smile
Average of ratings: -
In reply to Joe Blog

Re: How to design a Moodle site that looks fantastic...

by Danny Wahl -

1) I'll assume you're talking "white space" not the color (#fff).  I really don't like pure white in a design.

2) I'm just glad you didn't say "web 2.0" here or I would have stopped reading.

3) Sorry, if #2 was 2005, then this suggestion is 1995.  I can't help but flash back to dancing gifs, blink, marquee, and DHTML - which is pretty much what's taken me literally over a decade to come back around to using JS (sorry YUI, not you!)

4) Do you mean a literal primary color (RGB)?  Or are you saying a first color (like moodle.org is yellow) + gray + white.  I like to say a primary/secondary complementary + grayscale (off-white, grayish, off-black) is a great combo.

5) You're right - the ability to bake functions into M2 to customize the look and feel easily is awesome!  I wrote Zebra 2 to fill a need.  Now I can deploy the same theme across 6 sites and use the settings page to customize them rather than hacking 6 code bases.  And don't get me started on how much more awesome git is than cvs!

6) Again - now that I'm coming back around to JS, there's no need for this since it's baked into the M2 core!

-----

Sorry if I sound harsh - not my intention at all, I just have a wildly different design philosophy than you do it seems.

Average of ratings: -
In reply to Joe Blog

Re: How to design a Moodle site that looks fantastic...

by James Cracknell -

I've looked at the wowslider that you mentioned and not seen that anyone has managed to implement it yet.  If I have some spare time in the next few weeks I might have a play...

Average of ratings: -
In reply to Joe Blog

Re: How to design a Moodle site that looks fantastic...

by Dominick Inglese -

I think this site looks great. I don't know what slider they used. What elements do you think make this site look good?

 

http://www.bhaktivedantaonline.com

 

Average of ratings: -
In reply to Dominick Inglese

Re: How to design a Moodle site that looks fantastic...

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

I'm not sure about what elements make a site look good or not - and while much of it is about good, standard, basic design features, much of it is also about personal taste, the purpose of the site, applicability to specific users and so on (what looks good for a Primary school site isn't necessarily the same as what looks good for a professional business site, once you are talking about specific elements rather than general design principles)

But to answer your other question, looking at the code of the page it would appear the slider is based on the easyslider17 script, although there are many of these slider scripts around to get just the kind of look you want for a site.

Richard

Average of ratings: -
In reply to Richard Oelmann

Re: How to design a Moodle site that looks fantastic...

by David Scotson -
Passing on something I read recently, though this may not apply if your goal is to make people go "Wow!", but people who actually track the success of their website in terms of who clicks what and how that translates into eventual sales (or what have you) seem to be saying that these slider things don't actually work very well, and you'd be better putting all the content on the page so it can be seen at a glance and catch people's eye rather than make people go hunting for the content that might interest them.
Average of ratings: -
In reply to David Scotson

Re: How to design a Moodle site that looks fantastic...

by Dominick Inglese -

yes I agree with you about the placement of content. 

Sliders seem to be used to showcase the best of the site's services. 

Putting together a nice slide is time consuming and takes some skills in design / photoshop or something similar to photoshop like Live Quartz (or maybe a combination of several tools). 

Average of ratings: -
In reply to Richard Oelmann

Re: How to design a Moodle site that looks fantastic...

by Dominick Inglese -

Thanks for the reply — and so fast too!

did you use firebug to find this information about easyslider 17 script? I tried using firebug but I couldn't find this.

I'm slowly stepping into coding but it is overwhelming. Do you have any tips about getting started? I paid for a few courses on Udemy and apparently beginners have to copy someone else's work verbatim until we understand the basic concepts.

Average of ratings: -
In reply to Dominick Inglese

Re: How to design a Moodle site that looks fantastic...

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

No I didn't use firebug for this - I just used the browser to view page source (in this case I used Firefox, but the same option is available on all the main browsers)

As for getting started it depends what you want to do - 'coding' is a huge area, but if you are talking about getting into Moodle Themes and the code involved there, then I would strongly advise starting by looking through the tutorials at the top of the forum page. Personally I would then start with looking at the css by following Mary's cloning tutorial to produce a basic small child theme from one of the core ones and start experimenting with the css (using firebug to help). Once you are happy with your level of knowledge with that, then start looking at some of the layout files which use html and php. Slowly (or quickly depending on how you learn and how much time you have smile ) build up a theme - or half a dozen themes, or part themes. Don't be afraid to try something and bin it if it doesn't work, you can always go back to your last back up and try again - hopefully having learned why it didn't work first time smile

There is plenty of free help available for this kind of learning both here on the moodle forums if you have specific moodle queries, or generally on the net for more general topics

HTH

Richard

Average of ratings: -