Had a few hours with moodle2.6 & ios7 while listening to Neu!
Awesome
YUI Pure?
Thanks Stuart, a little over my head at the moment but certainly something to get my teeth into.
I'm going to start describing some of the design principles as sketches in this thread with a view of getting early feedback.
As 95% of content on the web is text i'll start with that - its the base component or if you like chemistry/brad frost the 'Atom' of any theme.
1. Readability
As a designer I started in print and the principles of readability. As a computer user with dyslexia who deals a lot with accessibility i'm hyper aware of making content accessible and readable on the web.
Rules applied to neu! theme :
Body copy should be between 45-75 characters per line.
All copy line height should allow for easy eye tracking to the next line.
Harsh black on white is isn't best for text readability - softer greys work better.
Links should be clearly visible/defined with a great enough definition for colour blind users, even when no underline is present.
Only use graphics where necesary - http://www.adam-mcfarland.net/2013/10/24/responsive-mobile-ui-split-test-icons-or-text/ - http://uxmyths.com/post/715009009/myth-icons-enhance-usability
Copy in non-humanist typefaces is often read by the lizard brain as 'robot speak'. It is more likely to appear on your gas bill (most commonly sans-serif) than in a novel (serif). Body copy written by humans should be displayed in a typeface with humanist characteristics.
Fonts with greater definition between chars both in look and spacing, ascenders, descenders, neck length, terminals, difference in counter, x-height, baseline, caps height etc - e.g. 1lI - aeiou - are better for readability, accessibility and none-native language users.
Technical constraints/implications :
Typography should be set in rme and media breakpoints based on readability, not device sizes (which can change every week).
Link line heights/touch zone must be large enough for mobile/a users finger.
Current Design choices (1st Dec 2013) :
In homage to NEU! the theme uses a white background with #323232 text and inks in #00A3EF with a vibrant/luminous highlight gradient #00A3EF 0%, #77CAC8 100% for action buttons and hover/focus.
Typography is set in 1rem/1.7/300 raleway by the league of movable type or bariol (hey - it's the new comic sans!) for K12.
Really nice.
Some random questions/comments:
1. Are the blocks always at the bottom? I'd been thinking I was going to limit my next theme to two columns, with the blocks always on the less important side (i.e. right if LTR), but I really like the idea of having them at the bottom instead to further de-proiritize them and limit their number. I can see all that whitespace being divisive though, people really want to get the most of the big monitors they've bought, even if the result is difficult to read text that looks totally different to how their students see it on netbooks and iPads..
2. Is the text in block descriptions or labels? The feedback one seem to stick out left more than the rest, and there's a very small (unintentional?) indent on the links. I've just been working around some bugs in labels to make them integrate with the resource links better, basically removing padding/margin above and below them. But with the vertical space on your hearders, it might actually just work with this look.
3. I really like the lack of icons. I've noticed before that it's the icons that contribute most to making things "Moodle-y", particularly as they're generally so difficult to change. Even if people intend to use icons, I think it makes a lot of sense to get everything else right first, then add the icons back as needed.
Some random questions/comments:
1. Are the blocks always at the bottom? I'd been thinking I was going to limit my next theme to two columns, with the blocks always on the less important side (i.e. right if LTR), but I really like the idea of having them at the bottom instead to further de-proiritize them and limit their number. I can see all that whitespace being divisive though, people really want to get the most of the big monitors they've bought, even if the result is difficult to read text that looks totally different to how their students see it on netbooks and iPads..
2. Is the text in block descriptions or labels? The feedback one seem to stick out left more than the rest, and there's a very small (unintentional?) indent on the links. I've just been working around some bugs in labels to make them integrate with the resource links better, basically removing padding/margin above and below them. But with the vertical space on your hearders, it might actually just work with this look.
3. I really like the lack of icons. I've noticed before that it's the icons that contribute most to making things "Moodle-y", particularly as they're generally so difficult to change. Even if people intend to use icons, I think it makes a lot of sense to get everything else right first, then add the icons back as needed.
thanks David
1. Blocks
Have not done any testing with users yet so blocks is a bit up in the air - for the initial design, i am just concentrating on content, but i know i'll have to tackle it at some point!
2. Indenting & Spacing
The course above is an export from the moodle qa site - http://qa.moodle.net/course/view.php?id=2.
Headings are currently using a golden ratio based scale, but i need to do some more work on the vertical rhythm to get a Müller-Brockmann feel.
The theme does not allow mod-indent (cleaning out that html/functionality will be fun!) but your right - there is padding on attachments (mods/activities).
Labels are inside that section img-text list - so indented.
Description is not in that list so was thinking of it as a first stanza - thanks for reminding me - i do need to add white space beneath that first stanza
3. Icons
Icons are odd things. If you have a list of icons with links it starts to look like a document management system. But yeh - the moodle icons are not something i'm be using in this theme.
Looking at the original course, the indentation is a totally random combination of section description, labels, and indenting. And some text was written with TinyMCE so gets extra p tags compared with raw text which just sits in a div.
It's stuff like that that's going to make nice typography layouts hard in Moodle.
It's stuff like that that's going to make nice typography layouts hard in Moodle.
yep - i have a solution for that - watch this space
"people really want to get the most of the big monitors they've bought"
started on media break points :
Pulling section titles to the left, content right. Keeps our 45-75 for body copy, while using a lot of that wide screen real estate.
This really really highlights that i need to sort out that vertical rhythm
as always feedback welcome!
Hi Stuart,
Do you ever get the feeling that all these frameworks look the same in Moodle, where one style becomes the norm and really after a while you get fed up with it, especially the same bland text colours? By the way some shades of grey are the hardest thing to read if your eyesight is not 20 20 vision.
i do it can get that way and thats kinda why i took the choice to build using http://inuitcss.com/ which has no styles built in.
I'm keeping the body copy at #323232 for the moment - its not that trendy lo-res grey, but it does make it a little less harsh/more readable than black on white.
P.S. Here is the hover effect for links btw - obviously animates the gradient like a nyan cat rainbow in modern browsers.
Looks fantastic!
Can't wait to see the finished product.
Julian
+1
Sehr neu!
this is the type of theme I pictured when I started the pure theme. Let me know when this is up on github I'd love to pitch in (if you want help )
Ditto. What he said ^^^^
Hi Stuart,
The only problem I can see in your layout where the blocks are in the footer is that you have a lot of white-space at the sides, unless that was intentional?
Mary
It's been a long week and i've become pragmatic.
Using modern css frameworks and workflows is awesome, but unless i want to wait till moodle 6/re-write every renderer by hand (which i kinda have been doing) i have to make a tough decision.
If i ever want this to see the light of day I'm going to have to compromise, and move the theme to a bootstrap bootswatch.
Initially i'll build as 2.3 or whatever we have in moodle - but build so its easy to move to 3 when we finish that for moodle.
So - next week i'll mostly be moving sass to less and overwriting bootstrap 2.3 grids.
Who said i don't know how to have fun?
I'm building a Moodle theme using Bootstrap 3 with parent base and is working great.
I too am having lots of fun adding different features in different layouts. Keeping renderers to minimum, as it is easier to let Moodle do it's own thing.
Martin has ideas that don't really fit into the Bootstrap camp, so I am experimenting with what Moodle has to offer and working round it.
Less/Sass is too fussy a thing to be working with if you don't understand it. Moodle Themes should be fun, like they used to be. Sadly adding Bootstrap to Moodle took the fun bit away, and not only that it's limping along trying to repair itself to suit Moodle, instead of Moodle rewriting itself to fit in with the new technologies.
Frankly it's a mess...but we can still have fun.
Hope I am not being too negative?
Cheers
Oh, I think LESS is fun. More power. Better 'write once read many' methodology.
Having another theme making use of renderers, but doing it's own thing visually, should be good for making sure the renderers have a good API and hopefully then encourage others to do their own thing in a virtuous cycle.
You might want to think about going straight to Bootstrap 3 though, it'll be a better base for a stripped down theme.
You might want to think about going straight to Bootstrap 3 though, it'll be a better base for a stripped down theme.
Went bootstrap3 with a big shame.less file i need to work on
typographic rhythm looking good
and probably a better screenshot with html elements labeled
quick experiment with same html in this editor
Header Level ONE
BLOCKQUOTE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Vestibulum auctor dapibus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Header Level 3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 4
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
Header Level 5
Ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 6
Sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Having fun animating svg icons with css.
and just for fun here are the icons using different colour swatches :
http://stuartlamour.com/mrooms/fun/allthesvg.html
(your gonna need a modern browser for that
warning: may cause seizures.
oops - the frame rate was off by a decimal point- should be one second not 0.1 - my bad ;)
just going to leave this here...
Tip: For current rates and hours of the deposito bagagli offices at Piazzale Roma and Marco Polo Airport, see the "Luggage Storage" section of Cooperativa Trasbagagli Venezia's English-language Services page.
Wow, the Google+ video looks really exciting. How long are you going to make us wait?