Tips for visual design

Tips for visual design

by Beatriz Rojo -
Number of replies: 11

Hi there,

I'm searching for inspiration for making the visual design of a Moodle course more appealing and sophisticated. I'm not talking about different themes, but rather about workarounds or "expert tips" for moving away from the standard appearance of a Moodle corse consisting of a list of resources and/or activities with some labels to structure the content. Anything from Moodle 3.5.x will be appreciated.

I already know and implement the following techniques/features:

  • collapsed topics
  • labels
  • icons/vectors
  • combination of hidden sections, hidden/available elements and links to them
  • blocks

Maybe there are not that much more techniques, but if you have some suggestions, I'll be glad to know about them. 

Thanks!

Average of ratings: -
In reply to Beatriz Rojo

Re: Tips for visual design

by C Behan -
Hi Beatriz,
The course format Tiles I think would be of interest to you: https://moodle.org/plugins/format_tiles
Average of ratings: -
In reply to C Behan

Re: Tips for visual design

by Beatriz Rojo -
Thanks C Behan, Dave, Dome, and Visvanath for your suggestions! I'm poking around them, they'll definitely help me!
Average of ratings: -
In reply to Beatriz Rojo

Re: Tips for visual design

by Dave Sherwin -
Picture of Particularly helpful Moodlers
I have found out that if you are using a boost theme that uses bootstrap, that there are some elements that you can add to your course to make visual design more appealing and sophisticated. Just checkout https://getbootstrap.com and you can use some of the components to dress up a course. Some plugins can customize the Atto HTML Editor Plugins to make it easily to use these components for visual design. 
  • Layout feature - Bootstrap Grid - allows you to create flexbox grid to build layouts of all shapes and sizes that are responsive
  • Components - that are inserted with Snippet (Atto) Plugin not sure if these will work in this forum 

Alerts

Use color to add a visual indication
Alerts can also contain additional HTML elements like headings, paragraphs and dividers
It’s possible to dismiss any alert inline
Color choices of primary - secondary - info - success - warning - danger

Badge

While the styling of badges provides a visual cue they may be confusing for users.
Previous Next

Collapse

Toggle the visibility of content across your project Accordion

Bootstrap Collapse Accordion example image

Targets

Bootstrap Collapse Target example image                                                      

Jumbotron

A lightweight, flexible component to showcase messages on your site:

learnbps logoLe arnbps

Welcome to Bismarck Public School's Blended Spaces.

bps logo uses this site for...

Blended
Learning

Professional
Learning

PLC
Collaboration

District
Courses

Assignments  Chat  Feedback
Forums  choice  glossary
external tool  lesson  wiki
book  url  database
page  file  quiz

Modal

Are a popup that's customizable and responsive to display videos and images in a website
Modal Example image

If you want to see these components in action - check the Get Bootstrap Crazy with Book Module presentation that shows using various Bootstrap elements. Just click on the four buttons for the modals to present the different Bootstrap elements. 

Average of ratings: Useful (1)
In reply to Beatriz Rojo

Re: Tips for visual design

by Dom F -
I think Dave below has outshone us all.
My own thoughts working on this http://tinyurl.com/yyqycu3s
The custom CSS GUI in Moodle Admin Appearances really helps close down a lot of those huge ywaning whole gaps that makes moodle feel like a box of lego rather than a text book - not technically a themeing issue just tidying up Moodle HQ "design" choices!
Consistent label colours fonts and highlights and other areas (perhaps obvious but often forgotten)
this is a M278 that is being updated but with the same philosophy http://tinyurl.com/y5ut54gc
I think it is hard without invoking a discussion about themes, as that is where we have found by far rthe greatest transformation from the phone book look to a text book look (hence two column page content rather than the "scroll of death"
As I say Dave has been by far the most helpful.
Average of ratings: -
In reply to Beatriz Rojo

Re: Tips for visual design

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
You look in vain. Moodle is old fashioned.
big grin
Average of ratings: -
In reply to Visvanath Ratnaweera

Re: Tips for visual design

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Hi Beatriz

More seriously, your statement "not talking about different themes" baffled me. That is the easiest and most effective way of "improving" the visual design.

Only later I read in a different thread that your Moodle (3.5) is on a managed hosting where you are limited to Boost. In general, I understood the question. There is so much a given theme can do, so your action radius is limited to that. On top of that the https://docs.moodle.org/35/en/Boost_theme is meant as a minimal/base theme for more visually appealing themes. I would talk to your hoster.

Inspirations? May be you'll find material in video presentations for example from the MoodleMoots. Hint: Invitations to those who have such presentations in their bookmark collections!
Average of ratings: Useful (1)
In reply to Visvanath Ratnaweera

Re: Tips for visual design

by Marcus Green -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
If you have admin access you can change the look by adding more css via
.../admin/settings.php?section=additionalhtml
Average of ratings: Useful (1)
In reply to Marcus Green

Re: Tips for visual design

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Hi Marcus

I am not sure whether you are talking to Beatriz or to me. Site administration > Appearance > Theme > THEME is what I meant by "There is so much a given theme can do, so your action radius is limited to that." In the case of Boost Site administration > Appearance > Theme > Boost has two registers, General settings and Advanced settings, where one can add CSS or SCSS, amoung other things - as Beatriz has already discovered. See Header page - how to remove site short name?

Here is a related video from a MoodleMoot:
Customizations for a Responsive and User-Friendly Moodle Theme | Todd Mathews | #MootUS17 Florida
Average of ratings: Useful (1)
In reply to Beatriz Rojo

Re: Tips for visual design

by Howard Miller -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Rather belatedly... I'm going to move this to Teaching with Moodle.
Average of ratings: -