Create an overview page where all modules are displayed

[bmen]

[bmen]

The first draft for a module overview page is ready. A few filters for Difficulty Level, Max Participants and a title search have already been implemented. The filter for the tags does not work yet.

In addition, the following issues are still open:

• [ ] Texts in the header @timmwille
• [ ] Filter for tags
• [x] Colors
• [x] Icons for module and resource counter
• [ ] interaction between filterbar and filter in the module cards

[timmwille]

@walthierer maybe this is something we can check together? (checklist above)

I think for now we should stick to https://github.com/ASKnetCommunity/ASKnet-Design but this Design originated from the Open Documentation Guide and is already changing for the #ASKnet CI eventually, though #askTRAINING can be independent from it (would be nice to be in synch with #askLEAD though).

The green is the only color that seems a bit off, maybe it helps taking a look here, I really like the old ODG Design too: https://github.com/opencultureagency/Open-Learning-Guide

[timmwille]

for the Icons I would go in synch with the summary (though we might change in the future as the words "module" and "resource" and "unit" and "tool" are used and mixed up a bit as in #49):

[timmwille]

interaction between filterbar and filter in the module cards lets discuss that one in the meeting @bmen

[walthierer]

can you please add a sginificant screenshot for me? to get a proper impression of the side, thank you.

[walthierer]

ich habe mal einen gekürzten vorschlag für den text im header:

"#ASKtraining Create your custom training plan effortlessly. Browse modules, assemble your sequence, and easily adjust settings. Print your plan. Ready for a successful training!"

[walthierer]

@bmen if you scalling down the screen, a hamburger menu with no function appears. guess some left overs from recycled code :))

[walthierer]

my suggestions for the header: i used the shortened text, narrowed the space (in my oppinon, the header used too much space, only a little bit of the modules can be seen by landing on the website) and i used the colours from the style guide.

Nr. 1

Nr. 2

p.s. i only found this single cube icon (to be honest, i was to lazy to search the other one), thats why i used it for both. i really like the methodology behind the icons: --> resource: on cube --> modules: three cubes

[timmwille]

I like the light design (last one)

I think the text is nice for the configuring and planning of the training! maybe the two column idea is not too bad also with the preview image in small (makes me want to cklick there). This way it is possible to make sure the difference between "Overview and check out available modules" and "Go ahead an plan your training with our tool" more clear and intuitive? @bmen @walthierer ?

• The filter buttons: I would go with the similar color approach as in https://lead.asknet.community
• make sure the main thing to look at are not the numbers but the tool or both are qually important.

[walthierer]

ok, i made a qick version with your suggestions @timmwille. filter buttons: i made them all the same size and set the start point to the same x-value than the rest (heading, text, etc.) and distributed them equaly. the preview of the planner is in the second column. (btw i devided the space into 4 columns also in the previous variatons)

i didnt get this point: "make sure the main thing to look at are not the numbers but the tool or both are qually important."

Nr. 3

[walthierer]

it looks like this, when i divide the space into 8 columns and use 5 columns for the text:

Nr. 4

my personal fav is without the preview of the planner (nr. 2) if the preview is wanted (Timms point - more clear and intuitive - makes also absolute sense) i would go for nr. 4

[walthierer]

* The filter buttons: I would go with the similar color approach as in https://lead.asknet.community

the color works for the filter buttons on the grey background, but it doesn`t work for the "Create traning plan" button. since the background of the header is the same colour as in the filter buttons. Im not such a big supporter of the green / ochre too, but this colour creates continuity within the buttons.

[timmwille]

* The filter buttons: I would go with the similar color approach as in https://lead.asknet.community

the color works for the filter buttons on the grey background, but it doesn`t work for the "Create traning plan" button. since the background of the header is the same colour as in the filter buttons. Im not such a big supporter of the green / ochre too, but this colour creates continuity within the buttons.

I actually think the black button is nicer, so maybe we keep it?

[walthierer]

which black button? there are only ochre/green and yellow/orange buttons. or do you mean the black module / resource counter blocks?

[timmwille]

which black button? there are only ochre/green and yellow/orange buttons. or do you mean the black module / resource counter blocks?

here on the top right I liked the design to make sure now you enter new terrain

[walthierer]

ok @bmen i created, in consultation with @timmwille, a final version:

Things that changed:

• [ ] Text has been updatet, also the spelling of the heading --> "#ASKtraining"

• [ ] Subheading and description have a width of 5 columns now (before it was 4 / half of the used space)

• [ ] Modules and Resource count became smaller and a different colour

• [ ] Create-Module-button has gone

• [ ] Filter buttons (difficulty, max participants, ...) are orange now

• [ ] Filter buttons (difficulty, max participants, ...) have all the same width and are evenly distributed in the available space

• [ ] "start training planner" button is no a planner not a plan

• [ ] text on the right side has gone

• all colours i used are taken from the #ASKnet style guide:

  • black / dark grey: #231F20
  • orange: #D8B06B
  • light orange: #EEE7D4

• the header is devided into 8 columns

• for spacing, heights and widths i usually use multiples of 4 --> often used is 96, 48, 36, 480, etc. i attach a screenshot with vissible reference lines and green blocks (multiples of 4) to display the dependency of the different blocks to each other. (i know when it comes to coding it's usually a bit different. they should serve as guiding values for you)

• the header has become a lot smaller / shorter in total

i think thats it

[bmen]

Thank you @walthierer ! I can do very well with that

[bmen]

@walthierer Finished designing the head. I couldn't recreate the screenshot 100% exactly because we use Bootstrap and it has its own grid and redesigning the animated button "start training planner" is a bigger effort.