Create a mockup of the website

[Korosensei42]

Currently the website has a dummy-layout.

The goal is to create a userfriendly design which encourages the user to stay engaged with the prover and is intuitive enough so novices get to know the prover as fast and easy as possible.

[Korosensei42]

Currently I got this https://www.figma.com/file/BzwFuxO4rgFOc0yWNdOijG2A/Layout?node-id=0%3A1. I am unhappy with the colors I gave it, but I imagine the layout to go (at least roughly) in this direction. The Menupoints on the left are just placeholders for stuff like "Spielwiesen", "Impressum" and so on.

Of course the proportions should be adjusted. But speaking of the layout, (i.e.: What goes where on the screen) is this going in the right direction? Or does anyone have a completely different opinion on how the layout should be? Also: Is something missing?

[RonjaKaehne]

If we are thinking about making a mobile version one day i prefer top navigation bars and dropdown menus. It's also more intuitiv for me than a sidebar and keeps the site clean but it's a matter of taste i think. We have to think about a own logo and i will made a own issue to collect some suggestions there. It's a good idea to generate some random cites (or maybe hints too) for motivation and help. temporally i recommend the cooperated design-color of our university or a similar one. I also prefer a big contrast between styling and text elements.

[Korosensei42]

Yeah, sidebars are definetly a preference of mine. A top navigation bar is fine, too.

The logo should go into it's own issue later on, I agree.

temporally i recommend the cooperated design-color of our university or a similar one.

That's a good idea, I like it.

I also prefer a big contrast between styling and text elements.

The interpolization between colors was also a preference of mine. Big contrasts are of course also possible and more common afaik.

[TimothyGillespie]

What confuses me is that there are the 3 lines usually indicating a menu on mobile phones and an arrow which seems to indicate to hide the menu. This would be the same function twice?

With a thought ahead to implementation: there is a sort of grid system for layouts which will render dynamically. I think it was part of react too? I will try to find this later. Currently we do have a button which is missing yet. So a space for button and generally functionalities seems to be missing.

I think the input field should not have a scrollbar. This seems confusing and user unfriendly when you have to scroll in a textarea. You have no way of orientation in a textarea field.

Rather the textarea should dynamically be lengthend and the user scrolls in the entire window so there is an orientation with the navigation bar and the rest of the layout.

I think the textarea should melt in with the whole page and not be the typical white background with a border thing that it usually is (while of course remaining recognizable as an editable part). Though this goes into asthetics now and isn't a functional thought.

Special pages like an possible impressum (though this might not even be necessary) should be reachable in one click and not in a navigation which can be clicked away. If I recall correctly this is even required by german legislation.

[Korosensei42]

@TimothyGillespie Sorry I just now got to answer you

What confuses me is that there are the 3 lines usually indicating a menu on mobile phones and an arrow which seems to indicate to hide the menu. This would be the same function twice?

Yes, you are right. One of them is redundant. I now deleted the arrow.

With a thought ahead to implementation: there is a sort of grid system for layouts which will render dynamically. I think it was part of react too? I will try to find this later. Currently we do have a button which is missing yet. So a space for button and generally functionalities seems to be missing.

I now included buttons. There was still space left for them. They should dynamically move along the textfield in my opinion. Of course the scrollbar is not as good then as you pointed out in your next two paragraphs.

I think the textarea should melt in with the whole page and not be the typical white background with a border thing that it usually is (while of course remaining recognizable as an editable part). Though this goes into asthetics now and isn't a functional thought.

I added a dropshadow which is more subtle than a normal border, but still allows for distinguishing the textarea from the normal backgroung.

Special pages like an possible impressum (though this might not even be necessary) should be reachable in one click and not in a navigation which can be clicked away. If I recall correctly this is even required by german legislation.

I think it says "two clicks", but we can just include the Impressum at the bottom all the time. There it will always be reachable, but won't bother anybody who doesn't want to go to it. I added it at the bottom now.

[Korosensei42]

@RonjaKaehne

temporally i recommend the cooperated design-color of our university or a similar one

I adressed this now and took the kind of blue from our universities logo.