Change flow of community and index pages

[teapotrick]

It's very nitpicky, but I've always found the flow of the community and index pages to be quite unattractive and counter-intuitive.
Suggested fix: Swap the columns for the wiki row as seen here: http://imgur.com/a/49oHK




Edit: I made a PR.

Reasoning:
Because of the lack of binding (ie. borders or better aligned title underlines) between the elements, my first feeling when looking at the page is that the big book graphic belongs to the 'Forum' block. Probably somewhat because the forum graphic doesn't have much contrast, and isn't stylistically similar to the other two graphics. Also, the zigzagging makes the pages look more cluttered than they are.

[Hiura]

I personally like this "zigzag", it makes sections more apparent. 

[Hapax]

The book does look like it belongs to the forum section. I do like your aligned version; it's much neater. However, for interesting aesthetics, the zig-zag wins.
A solution (if one is needed), could be to simply add a slightler darker block background to the Wiki row.

(click to show/hide)

[eXpl0it3r]

The current version is in my opinion a lot more dynamic, which on the other hand might be seen as clutter for some. Then again I believe everyone in the SFML Team 8and others) is slightly bias since to the current layout and since we've seen it so often we're now also liking it more than other things.

I think the main problem is however that the huge book with it's contrast is so much attention grabbing. So when you first open the site all you see in the first few milliseconds is that book icon, then you might start reading what's at the top left and suddenly the brain makes connections where there aren't any.

I wonder if this image (click to view) makes a difference for some. Made it brighter and smaller.

A solution (if one is needed), could be to simply add a slightler darker block background to the Wiki row.

This looks quite bad IMHO since it doesn't fit in at all.

[Hapax]

I don't think the problem is what you see first, rather how things can look like they're grouped into columns.
The background block idea was just a possibility if something is needed. An obvious horizontal line between each section would also fix it.

Here's an image visualising the columns and how they can seem to group:


Another possible solution would be to create a more obvious zigzag by overlapping the horizontal range of the texts:

[Laurent]

I think the main problem is however that the huge book with it's contrast is so much attention grabbing.

The "problem" is probably more general, ie. images are not very consistent in style and size on this page.

Another possible solution would be to create a more obvious zigzag by overlapping the horizontal range of the texts

This could work as well.

[teapotrick]

The book does look like it belongs to the forum section. I do like your aligned version; it's much neater. However, for interesting aesthetics, the zig-zag wins.
A solution (if one is needed), could be to simply add a slightler darker block background to the Wiki row.

(click to show/hide)

Hapax, fighting the good fight.
A new compromise: https://imgur.com/a/CX0Hm

[Hapax]

Has this been reverted? I could have sworn that the "more obvious zigzag" solution was implemented.

It currently looks like the book is for the forum section again

[eXpl0it3r]

We never changed it. I think the "more obvious zigzag" version looks quite good, if you remember what you adjusted, feel free to send a PR!

[Hapax]

My example was just an image manipulation

I'll have a look at the website repository later...

[Hapax]

https://github.com/SFML/SFML-Website/pull/82

Note that I have no way of actually testing the result

[Hapax]

Just noticed that the SFML website's homepage has the same "flow" issue. It's less noticable because the images are less obviously incorrect when associating with the wrong header ("multi-media" with multiple platform icons and "multi-platform" with multiple languages, for example)

[eXpl0it3r]

This is what the changes look like.
If others like, I could merge it.



And I think, it might work similarly well on the home page.

[Hapax]

Worked out well considering I just guessed the ratios

The stagger/overlap amount can be adjusted by changing just two numbers (in the .less file), which would affect consistently the home page and the community page.

[eXpl0it3r]

Here's the home page: